[data-tooltip]:not(.tooltip-note) {
    position: relative;
    cursor: pointer;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    color: var(--light-primary);
    background: var(--gray-700);
    padding: 7px;
    border-radius: 5px;
    white-space: nowrap;
    border: 1px solid black;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    right: 10%;
    transform: translateY(-90%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

[data-tooltip]::before,
[data-tooltip]::after {
    z-index: 10;
}


[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

[data-tooltip].tooltip-topLeft::before,
[data-tooltip].tooltip-topLeft::after {
    left: 50%;
    transform: translateX(-85%) translateY(-95%);
}

[data-tooltip].tooltip-topRight::before,
[data-tooltip].tooltip-topRight::after {
    left: 50%;
    transform: translateX(-15%) translateY(-95%);
}

[data-tooltip].tooltip-dashboard::before,
[data-tooltip].tooltip-dashboard::after {
    left: 50%;
    transform: translateX(-65%) translateY(-120%);
}

[data-tooltip].tooltip-center::before {
    left: 50%;
    transform: translateX(-50%) translateY(-95%);
}

[data-tooltip].tooltip-note.noteHidden::before {
    display: none;
}

.tooltip-note {
    cursor: pointer;
    max-width: 100px;

    & .tooltip-notice-span {
        max-width: 100px;
    }
}

[data-tooltip].tooltip-paginator::before {
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
}

[data-tooltip].tooltip-notice::before {
    transform: translateX(-.2vw) translateY(-46.5px);
    text-align: center;
    font-weight: 600;
}

[data-tooltip].tooltip-note::before {
    transform: translateX(-.3vw) translateY(-66.5px);
    width: auto;
    height: auto;
    max-width: 30rem;
    white-space: normal;
    font-weight: normal;
}

[data-tooltip].tooltip-note.tooltipShort::before {
    transform: translateX(-.3vw) translateY(-46.5px);
    text-wrap: nowrap;
}

.topMenuCover {
    max-height: 60px;
}