/* Tooltip CSS */
.image-tooltip button.hover.tooltip-text, 
.image-tooltip .tooltip-text.hover {
    opacity: 1;
    pointer-events: all;
}

.image-tooltip .tooltip-text {
    opacity: 0;
    padding: 3px 8px 5px 8px;
    z-index: 10;
    background-color: var(--color-gray-800);
    color: var(--color-white);
    border-radius: 8px;
    position: absolute;
    bottom: 100%;
    width: 200px;
    left: -105px;
    margin-bottom: 5px;
    user-select: text;
    pointer-events: none;
    transition: bottom 0.5s;
    font-family: var(--body-font-family);
}

.image-tooltip>button {
    border: none;
    background-color: transparent;
    padding: 0px;
    position: relative;
}

.image-tooltip .tooltip-text.overflow-left {
    right: inherit;
    left: -20px;
}

.image-tooltip .tooltip-text.overflow-right {
    left: inherit;
    right: -20px;
}

.image-tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 107px;
    border-top-color: var(--color-black);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}

.image-tooltip .tooltip-text.overflow-left::after {
    right: inherit;
    left: 23px;
}

.image-tooltip .tooltip-text.overflow-right::after {
    left: inherit;
    right: 20px;
}

.image-tooltip .tooltip-icon {
    position: relative;
}

.image-tooltip .tooltip-icon {
    position: relative;
    display: inline;
}

.image-tooltip span {
    position: relative;
}