/**
 * Tooltip
 *
 * @format
 */

:root {
    --ev-tooltip-background: #555555;
    --ev-tooltip-font-color: #ffffff;
}

.ev-tooltip {
    position: relative;
    display: inline-block;
}

.ev-tooltip .ev-tooltiptext {
    --ev-tooltip-width: 160px;
    visibility: hidden;
    width: var(--ev-tooltip-width);
    background-color: var(--ev-tooltip-background);
    color: var(--ev-tooltip-font-color);
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 999999;
    bottom: 110%;
    left: 50%;
    margin-left: calc(((var(--ev-tooltip-width) + 5px) * -1) / 2);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: max(
        clamp(0.6rem, calc(0.6rem + ((1vw - 0.48rem) * 0.1389)), 0.7rem),
        8px
    );
    min-height: 0vw;
}

.ev-tooltip .ev-tooltiptext.ev-tooltip-wide {
    width: calc(var(--ev-tooltip-width) * 2);
    margin-left: calc(((calc(var(--ev-tooltip-width) * 2) + 5px) * -1) / 2);
}

.ev-tooltip .ev-tooltiptext.ev-tooltip-small {
    width: calc(var(--ev-tooltip-width) * 0.75);
    margin-left: calc(((calc(var(--ev-tooltip-width) * 0.75) + 5px) * -1) / 2);
}

.ev-tooltip .ev-tooltiptext.ev-tooltip-x-small {
    width: calc(var(--ev-tooltip-width) * 0.5);
    margin-left: calc(((calc(var(--ev-tooltip-width) * 0.5) + 5px) * -1) / 2);
}

.ev-tooltip .ev-tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.ev-tooltip:hover .ev-tooltiptext {
    visibility: visible;
    opacity: 1;
}

td:has(.ev-tooltip) {
    overflow: revert !important;
}