// tooltip css
.dnxte_dashb_tool_tip {
    position: relative;
    cursor: pointer;
    display: inline-block;

    i {
        color: #adb5bd;
        margin-left: 4px;
        font-size: 16px;
        margin-top: 1px;

        &:hover {
            color: #495057;
        }
    }

    &::before {
        width: 0;
        height: 0;
        content: "";

        @media only screen and (max-width:991px) {
            display: none;
        }
    }

    &::before,
    &::after {
        position: absolute;
        transition:
            opacity 250ms ease 0ms,
            transform 250ms ease 0ms;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: -1;
    }

    &::after {
        font-size: 12px;
        line-height: 14px;
        background-color: $dash-main-title;
        border-radius: 4px;
        color: $dash-white;
        content: attr(data-tooltip-title) " ";
        font-weight: 500;
        width: 224px;
        padding: 8px 12px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        text-transform: none;
    }

    &[data-tooltip-position="top"]::before {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        left: 50%;
        transform: translate3d(-50%, 10px, 0);
        border-top: 7px solid #323a45;
        bottom: calc(100% + 3px);

    }

    &[data-tooltip-position="top"]::after {
        left: 50%;
        transform: translate3d(-40%, 10px, 0);
        bottom: calc(100% + 10px);

        @media only screen and (max-width:991px) {
            left: 30%;
            transform: translate3d(-30%, 10px, 0);
        }
    }

    &:hover::before,
    &:hover::after {
        opacity: 1;
        z-index: 10;
    }

    &[data-tooltip-position="top"]:hover::before,
    &[data-tooltip-position="top"]:hover::after {
        transform: translate3d(-40%, 0px, 0);

        @media only screen and (max-width:991px) {
            transform: translate3d(-30%, 0px, 0);
        }
    }
}

.dnxte_dashb_notification {
    [data-tooltip-position="bottom"]::after {
        left: 50%;
    }

    [data-tooltip-position="bottom"]::after {
        transform: translate3d(-50%, -10px, 0);
    }

    [data-tooltip-position="bottom"]::after {
        top: calc(100% + 10px);
    }

    [data-tooltip-position="bottom"]::before {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        left: 50%;
    }

    [data-tooltip-position="bottom"]::before {
        transform: translate3d(-50%, -10px, 0);
    }

    [data-tooltip-position="bottom"]::before {
        border-bottom: 7px solid #323a45;
        top: calc(100% + 3px);
    }

    [data-tooltip-position="bottom"]:hover::before,
    [data-tooltip-position="bottom"]:hover::after {
        transform: translate3d(-50%, 0px, 0);
    }
}

// bottom