/* Tooltip container */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip text */
.tooltip-text {
    visibility: hidden;
    min-width: 160px; /* Adjust based on your content */
    background-color: #555; /* Dark background for contrast */
    color: #fff; /* White text for readability */
    text-align: center;
    border-radius: 6px; /* Rounded corners for a modern look */
    padding: 8px 16px; /* Adequate padding for content */
    position: absolute;
    z-index: 9999;
    top: 50%; /* Align center vertically with the icon */
    right: calc(100% + 20px); /* Position to the right of the icon, plus 50px */
    transform: translateY(-50%); /* Ensure vertical center alignment */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */

    /* Fade-in effect */
    opacity: 0;
    transition: opacity 0.3s, left 0.3s; /* Smooth transition for both opacity and horizontal movement */
}

/* Tooltip arrow */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%; /* Position arrow on the left side of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555; /* Arrow matching tooltip background */
    transform: translateY(-50%);
}

/* Show tooltip text on hover */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}