.tooltip {
    position: relative;
    cursor: pointer;
    border-bottom: 1px dotted rgb(200,200,200);
    z-index:103;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: 100%;
    /* transform: translateX(-50%); */
    background-color: rgb(222,222,222);
    color: rgb(22,22,22);
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    min-width: 300px; /* Minimum width */
    width: auto; /* Auto width based on content */
    max-width: 500px; /* Maximum width before wrapping */
    font-size: 1rem;
}

.tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9px; /* Position at the bottom of the tooltip */
    transform: translateX(-50%);
    border-width: 8px; /* Adjust to make the arrow larger or smaller */
    border-style: solid;
    border-color: rgb(222,222,222) transparent transparent transparent; /* Top color, then transparent for the sides */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 102; /* Make sure the arrow is behind the tooltip */
}

/* Ensure the tooltip appears on both hover and focus */
.tooltip:hover::after,
.tooltip:focus::after,
.tooltip:hover::before,
.tooltip:focus::before {
    opacity: 1;
}