.show-tooltip {
    visibility: visible !important;
}

.hide-tooltip {
    visibility: hidden !important;
    opacity: 0 !important;
}

.tooltipWrapper {
    position: relative;
}

    .tooltipWrapper > span {
        visibility: hidden;
        display: none;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        padding: 8px 12px;
        background: #2A323E;
        border-radius: 6px;
        word-break: break-word;
        word-wrap: hyphenate;
        position: absolute;
        color: #FFFFFF;
        text-decoration: none;
        z-index: 9999;
        width: max-content;
        max-width: 150%;
    }

    .tooltipWrapper:hover > span {
        display: block;
        position: absolute;
    }

        .tooltipWrapper:hover > span:before {
            content: "";
            position: absolute;
            z-index: 9999;
        }

.tooltipIntrWrapper {
    position: relative;
}

    .tooltipIntrWrapper > span {
        visibility: hidden;
        display: none;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        padding: 8px 12px;
        background: #2A323E;
        border-radius: 6px;
        word-break: break-word;
        word-wrap: hyphenate;
        position: absolute;
        color: #FFFFFF;
        text-decoration: none;
        z-index: 9999;
        width: max-content;
        max-width: 150%;
    }

    .tooltipIntrWrapper:hover > span {
        display: block;
        position: absolute;
    }

        .tooltipIntrWrapper:hover > span:before {
            content: "";
            position: absolute;
            z-index: 9999;
        }

.top {
    visibility: visible;
    display: inline-flex;
    bottom: 120%;
    margin-bottom: 10px;
}

    .top::before {
        border: solid;
        border-width: 12px 12px 0 12px;
        border-left: 15px solid transparent;
        border-top: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        top: 95%;
    }

.topIntr {
    visibility: visible;
    display: inline-flex;
    bottom: 120%;
    margin-bottom: 10px;
    right: 5%;
}

    .topIntr::before {
        border: solid;
        border-width: 12px 12px 0 12px;
        border-left: 15px solid transparent;
        border-top: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        top: 95%;
        right: 1%;
    }

.bottom {
    visibility: visible;
    display: inline-flex;
    top: 120%;
    margin-top: 9px;
}

    .bottom::before {
        border: solid;
        border-width: 0 12px 12px 12px;
        border-left: 15px solid transparent;
        border-bottom: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-top: 15px solid transparent;
        bottom: 98%;
    }
.bottomIntr {
    visibility: visible;
    display: inline-flex;
    top: 120%;
    margin-top: 9px;
    right: 5%;
}

    .bottomIntr::before {
        border: solid;
        border-width: 0 12px 12px 12px;
        border-left: 15px solid transparent;
        border-bottom: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-top: 15px solid transparent;
        bottom: 98%;
        right: 1%;
    }

.right {
    visibility: visible;
    display: inline-flex;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

    .right::before {
        border: solid;
        border-width: 12px 0 12px 12px;
        border-top: 15px solid transparent;
        border-right: 15px solid #2A323E;
        border-bottom: 15px solid transparent;
        border-left: 15px solid transparent;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
    }

.left {
    visibility: visible;
    display: inline-flex;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 12px;
}

    .left::before {
        border: solid;
        border-width: 12px 0 12px 12px;
        border-top: 15px solid transparent;
        border-left: 15px solid #2A323E;
        border-bottom: 15px solid transparent;
        border-right: 15px solid transparent;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
    }

.tooltipImageWrapper {
    position: relative;
}

    .tooltipImageWrapper > span {
        visibility: hidden;
        display: none;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        padding: 8px 12px;
        background: #2A323E;
        border-radius: 6px;
        word-wrap: break-word;
        position: absolute;
        color: #FFFFFF;
        text-decoration: none;
        z-index: 9999;
    }


    .tooltipImageWrapper:hover > span {
        display: block;
        position: absolute;
    }

        .tooltipImageWrapper:hover > span:before {
            content: "";
            position: absolute;
            opacity: 1;
            z-index: 9999;
            pointer-events: none;
        }

.topImage {
    visibility: visible;
    display: inline-flex;
    bottom: 120%;
    margin-bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

    .topImage::before {
        border: solid;
        border-width: 12px 12px 0 12px;
        border-left: 15px solid transparent;
        border-top: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        top: 95%;
        left: 50%;
        transform: translateX(-50%);
    }

.bottomImage {
    visibility: visible;
    display: inline-flex;
    top: 120%;
    margin-top: 9px;
    left: 50%;
    transform: translateX(-50%);
}

    .bottomImage::before {
        border: solid;
        border-width: 0 12px 12px 12px;
        border-left: 15px solid transparent;
        border-bottom: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-top: 15px solid transparent;
        bottom: 95%;
        left: 50%;
        transform: translateX(-50%);
    }

.topDropDownList {
    visibility: visible;
    display: inline-flex;
    bottom: 100%;
    margin-bottom: 10px;
}

    .topDropDownList::before {
        border: solid;
        border-width: 12px 12px 0 12px;
        border-left: 15px solid transparent;
        border-top: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-bottom: 15px solid transparent;
        top: 100%;
    }

.bottomDropDownList {
    visibility: visible;
    display: inline-flex;
    top: 100%;
    margin-top: 9px;
}

    .bottomDropDownList::before {
        border: solid;
        border-width: 0 12px 12px 12px;
        border-left: 15px solid transparent;
        border-bottom: 15px solid #2A323E;
        border-right: 15px solid transparent;
        border-top: 15px solid transparent;
        bottom: 100%;
    }

#divInboxLabelUnread .right,
#divinboxAcuteSTEMI .right,
#divUnreadValue .right {
    visibility: visible;
    display: inline-flex;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
    width: max-content;
}

    #divInboxLabelUnread .right::before,
    #divinboxAcuteSTEMI .right::before,
    #divUnreadValue .right::before {
        border: solid;
        border-width: 12px 0 12px 12px;
        border-top: 15px solid transparent;
        border-right: 15px solid #2A323E;
        border-bottom: 15px solid transparent;
        border-left: 15px solid transparent;
        left: -40px;
        top: 50%;
        transform: translateY(-50%);
    }