/* =Tooltips
----------------------------------------------- */

.tooltip {
    position: absolute;
    display: none; /* Initially hidden, shown on hover */
    z-index: 1000000; /* Ensure it appears above other content */
    pointer-events: none; /* Allow clicks to pass through the tooltip */
}

.tooltip-text {
    background-color: @ini_tooltips_background_color; /* Replace with actual color value */
    color: @ini_tooltips_text_color; /* Replace with actual color value */
    text-align: center;
    border-radius: 20px;
    padding: 8px 16px;
    /* Adjustments for the tooltip text itself */
    white-space: nowrap;
    font-size: 12px;
    font-weight: normal;
    border: 2px solid @ini_tooltips_border_color; /* Replace with actual color value */
    /* Positioning now mainly handled by JS, so no need for left/transform here */
}
.tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%; /* Position the caret at the top of the tooltip box */
    left: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent @ini_tooltips_border_color transparent; /* The tip points upwards */
    transform: translateX(-50%);
}