/*
=========================================
Tooltips System
Version 1.0.3
LabriniHouse UI
=========================================
*/


#lhts-tooltip {

    position: absolute;

    z-index: 999999;


    max-width: 280px;


    padding: 12px 16px;


    background: rgba(25, 25, 25, 0.96);


    color: #ffffff;


    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    font-size: 14px;


    line-height: 1.5;


    letter-spacing: 0.2px;


    border-radius: 10px;


    box-shadow:
        0 12px 35px rgba(0,0,0,0.25);


    opacity: 0;


    visibility: hidden;


    transform:
        translateY(8px)
        scale(.96);


    transition:

        opacity .22s ease,

        transform .22s ease,

        visibility .22s ease;


    pointer-events: none;

}


/*
-----------------------------------------
Visible State
-----------------------------------------
*/


#lhts-tooltip.show {


    opacity: 1;


    visibility: visible;


    transform:
        translateY(0)
        scale(1);


}


/*
-----------------------------------------
Arrow
-----------------------------------------
*/


#lhts-tooltip::after {


    content: "";


    position: absolute;


    bottom: -7px;


    left: 50%;


    transform:
        translateX(-50%);


    width: 0;


    height: 0;


    border-left:
        7px solid transparent;


    border-right:
        7px solid transparent;


    border-top:
        7px solid rgba(25,25,25,0.96);


}






/*
=========================================
Tooltip Icon
=========================================
*/


.lh-tooltip-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;


    width: 18px;

    height: 18px;


    margin-left: 6px;


    border-radius: 50%;


    background: #ffffff;


    border: 1px solid rgba(0,0,0,0.25);


    color: #333;


    font-size: 12px;

    font-weight: 600;


    cursor: help;


    line-height: 1;


    transition:

        transform .2s ease,

        background .2s ease,

        color .2s ease;

}



.lh-tooltip-icon:hover {


    transform: scale(1.1);


    background: #111;


    color: #fff;


}




/*
=========================================
Tooltip Wrapper
=========================================
*/


.lh-tooltip-wrapper {

    display:inline-flex;

    align-items:center;

}