/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black; !* Add dots under the hoverable text *!*/
    cursor: pointer;
    /* for a bit of leeway when hovering onto text */
    padding-left: 10px;
    padding-right: 10px;
}

/* Tooltip text */
.tooltiptext {
    visibility: hidden; /* Hidden by default */
    width: 500px;
    background-color: #f6f2e9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: black;
    text-align: left;
    padding: 15px;
    border-radius: 6px;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */
    z-index: 1; /* Ensure tooltip is displayed above content */
    opacity: 0;
    transition: opacity 0.1s;
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}