.itrk-tooltip {
    position : relative;
}

/** itrk-ui.css **/
itrk-input-content itrk-input-wrapper.info .itrk-tooltip,
itrk-checkbox-content itrk-checkbox-wrapper.info .itrk-tooltip {
    position     : absolute;
    /* height: 100%; */
    width        : 15px;
    margin-right : 10px;
    top          : 0;
    right        : -3px;
}

itrk-checkbox-content itrk-checkbox-wrapper.info .itrk-tooltip {
    top   : 1px;
    right : -35px;
}

itrk-input-content itrk-input-wrapper.action .itrk-tooltip,
itrk-input-content itrk-input-wrapper.action.regex .itrk-tooltip {
    right : 36px;
}

itrk-input-content .itrk-tooltip i.fa-info-circle {
    margin-top : 10px;
}

.inline.itrk-tooltip, span.itrk-tooltip {
    display : inline-block;
}

.itrk-tooltip-text {
    min-width        : 100%;
    max-width        : 100%;
    width            : 100%;
    padding          : 10px 20px;
    color            : var(--darkgray);
    background-color : white;
    font-weight      : normal;
    font-size        : 13px;
    border-radius    : 8px;
    position         : absolute;
    z-index          : 100;
    box-sizing       : border-box;
    display          : none;
    margin-top       : 25px;
    left             : 50%;
    transform        : translate(-50%, 0);
    filter           : drop-shadow(3px 3px 10px #00000029);
    -webkit-filter   : drop-shadow(3px 3px 10px #00000029);
}

.itrk-tooltip .itrk-tooltip-text.tooltip-top {
    margin-top : 0;
    top        : 0;
    left       : 0;
    transform  : translateX(0) translateY(-100%) translateY(-25px);
}

@media all and (min-width : 768px) {
    .itrk-tooltip-text {
        min-width : 260px;
        max-width : 360px;
    }
    
    .itrk-tooltip:hover .itrk-tooltip-text {
        display : block;
    }
    
    .itrk-tooltip .itrk-tooltip-text.tooltip-top {
        left      : 50%;
        transform : translateX(-50%) translateY(-100%) translateY(-25px);
    }
}

.itrk-tooltip-text > .tooltip-text-inner {
    overflow       : hidden;
    text-overflow  : ellipsis;
    text-transform : none;
}

.itrk-tooltip .itrk-tooltip-text::before {
	font-family : 'Font Awesome 6 Free';
    font-weight : 900;
    content     : "\f0d8";
    position    : absolute;
    font-size   : 50px;
    line-height : 30px;
    left        : 50%;
    top         : 0;
    margin-top  : -23px;
    margin-left : -15px;
    color       : white;
    background  : none;
}

.itrk-tooltip .itrk-tooltip-text.tooltip-top::before {
    content       : "\f0d7";
    top           : initial;
    margin-top    : initial;
    bottom        : 0;
    margin-bottom : -19px;
}

.itrk-tooltip .itrk-tooltip-text.itrk-tooltip-fulltext {
    white-space : normal;
}

/** new .itrk-tooltip.tooltip-small **/
.itrk-tooltip.tooltip-small:before {
    content       : attr(data-text);
    position      : absolute;
    font-size     : 15px;
    font-weight   : 300;
    left          : 100%;
    min-width     : 200px;
    width         : 100%;
    padding       : 6px 15px;
    border-radius : var(--itrk-border-radius);
    background    : var(--darkgray);
    color         : white;
    display       : none;
}

.itrk-tooltip.tooltip-small:after {
    content      : "";
    position     : absolute;
    left         : 100%;
    margin-left  : -2px;
    top          : 50%;
    transform    : translateY(-50%);
    border       : 6px solid var(--darkgray);
    border-color : transparent var(--darkgray) transparent transparent;
    display      : none;
}

.itrk-tooltip.tooltip-small:hover:before,
.itrk-tooltip.tooltip-small:hover:after {
    display : block;
}

/** Tooltip Bottom **/
.itrk-tooltip.tooltip-small.tooltip-bottom:before {
    top         : -50%;
    left        : 50%;
    transform   : translateX(-50%) translateY(50%) !important;
    margin-left : 0;
    margin-top  : 11px;
}

.itrk-tooltip.tooltip-small.tooltip-bottom:after {
    top          : 50%;
    left         : 50%;
    transform    : translateX(-50%) translateY(50%) !important;
    margin-left  : 0;
    margin-top   : -1px;
    border-color : transparent transparent var(--darkgray) transparent;
}

/** Tooltip Top **/
.itrk-tooltip.tooltip-small.tooltip-top:before {
    top         : -50%;
    left        : 50%;
    transform   : translateX(-50%) translateY(-100%) !important;
    margin-left : 0;
    margin-top  : 5px;
}

.itrk-tooltip.tooltip-small.tooltip-top:after {
    top          : 0;
    left         : 50%;
    transform    : translateX(-50%) translateY(-50%) !important;
    margin-left  : 0;
    margin-top   : -1px;
    border-color : var(--darkgray) transparent transparent transparent;
}

/** Tooltip Right **/
.itrk-tooltip.tooltip-small.tooltip-right:before {
    top         : 50%;
    transform   : translateY(-50%);
    margin-left : 10px;
}

.itrk-tooltip.tooltip-small.tooltip-right:after {
    top         : 50%;
    transform   : translateY(-50%);
    left        : 100%;
    margin-left : -2px;
}

/** Tooltip Left **/
.itrk-tooltip.tooltip-small.tooltip-left:before {
    top         : 50%;
    transform   : translateX(-100%) translateY(-50%) !important;
    margin-left : 1px;
    left        : -100%;
}

.itrk-tooltip.tooltip-small.tooltip-left:after {
    top          : 50%;
    transform    : translateX(-100%) translateY(-50%) !important;
    border-color : transparent transparent transparent var(--darkgray);
    margin-left  : 0;
    left         : 0;
}