/*

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);
}

.subscriptionIcon
{
    background-image: url(images/subscription.svg);
}

.licensingIcon
{
    background-image: url(images/licensing.svg);
}

.billingIcon
{
    background-image: url(images/billing.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;
}

.toolIcon
{
    background-size: 40%;
}

#lbToolBar_mainDIV .toolIcon
{
    background-size: 55%;
}

#toolTip
{
    z-index: 1;
}





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

.toolBar_mainDIV,
.toolIcon
{
    height: clamp(1em, 3.1vw, 2.5em);
}

.toolIcon
{
    width: clamp(1em, 3.1vw, 2.5em);
}

#toolTip
{
    padding: clamp(0.1em, 0.6vw, 0.4em) clamp(0.1em, 0.8vw, 0.6em);
    font-size: clamp(0.1em, 1.2vw, 1.1em);
    top: clamp(0.1em, 6.75vw, 5.55em);
}


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

@media (min-aspect-ratio: 1)
{
    
    .toolBar_mainDIV,
    .toolIcon
    {
        height: clamp(1em, 2.2vw, 1.8em);
    }
    
    .toolIcon
    {
        width: clamp(1em, 2.2vw, 1.8em);
    }
    
    #toolTip
    {
        padding: clamp(0.1em, 0.6vw, 0.4em) clamp(0.1em, 0.8vw, 0.6em);
        font-size: clamp(0.1em, 1.2vw, 1.1em);
        top: clamp(0.1em, 7.35vw, 4em);
    }
}



@media (min-width: 114em)
{
    #toolTip
    {
        top: 3.7em;
    }
}