/*

Colors

#fbf7ff
#f6dcff
#e7b7f7
#9664A0
#7636a5
#5f1d80
#530064

*/


.toolBar_mainDIV
{
    background-color: #fbf7ff;
    border-bottom: solid 0.1em #f6dcff;
    border-left: solid 0.1em #f6dcff;
}

.toolBar_mainDIV
{
    border-right: solid 0.1em #f6dcff;
}

.toolIcon
{
    background-position:center;
    border-right: solid 0.1em #530064;
}

.toolIconSelect
{
    background-color: #530064 !important;
    filter: saturate(50%) brightness(220%) !important;
}

.toolIconHover
{
    background-color: #e7b7f7 !important;
    filter: contrast(200%) !important;
}

.settingsIcon
{
    background-image: url(images/gear-solid.svg);
}

.presentationIcon
{
    background-image: url(images/tv-solid.svg);
}

.databaseIcon
{
    background-image: url(images/database-solid.svg);
}

.templateIcon
{
    background-image: url(images/compass-drafting-solid.svg);
}

#toolTip
{
    position: fixed;
    text-align: center;
}

.toolTipHover
{
    background-color: #ffe0ff;
    color: #530064;
    border-left: solid 0.1em rgba(83,0,100,0.3);
    border-right: solid 0.1em rgba(83,0,100,0.3);
    border-bottom: solid 0.1em rgba(83,0,100,0.3);
}

.toolTipSelected
{
    background-color: #782c94;
    color: #FFF;
}





/*
------------------------------------ ASPECT RATIO DRIVEN RULES
----------------------
---------------------- PORTRAIT RULES
*/

.toolBar_mainDIV,
.toolIcon
{
    height: clamp(1em, 2vw, 1.6em);
}

.toolIcon
{
    width: clamp(1em, 2vw, 1.6em);
    background-size: 40%;
}

#toolTip
{
    padding: 0.4em 0.6em;
    font-size: 0.7em;
    top: clamp(4.8em, 5.25vw, 5.65em);
    z-index: 1;
}


/*
---------------------- LANDSCAPE RULES
*/

@media (min-aspect-ratio: 1)
{
    /*
    #toolTip
    {
        padding: 0.5vw 0.7vw;
        font-size: 1.5vw;
        top: 9.2vw;
    }
    */
}



/*
------------------------------------ MAXIMUMS/LIMITS
*/

@media screen and (min-width: 56em)
{
    /*
    .toolBar_mainDIV,
    .toolIcon
    {
        height: 1.7em;
    }
    
    .toolIcon
    {
        width: 1.7em;
        background-size: 35%;
    }
    */
    
    /*
    #toolTip
    {
        padding: 0.6em 0.9em;
        font-size: 0.7em;
        top: 5.65em;
    }
    */
}



@media screen and (max-height: 32em)
{
    /*
    .toolIcon
    {
        background-size: 40%;
    }
    */
}