.tooltip {
    position: absolute;
    background-color: rgb(3, 16, 32);
    color: #fbea7e;
    padding: 8px 12px;
    border-radius: 8px;
    z-index: 99999999999;
    font-size: 14px;
    font-weight: bold;
    white-space: normal;
    overflow: hidden;
    max-height: max-content;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s, transform 0.5s;
    width: auto;
    max-width: 300px;
    pointer-events: none; /* Prevent the tooltip from capturing hover events */
}

.tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.show_message:hover i {
    color: inherit !important; /* Inherit the original color instead of setting to black */
    cursor: pointer;
}

.show_message:hover {
    color: inherit !important; /* Remove the color change on hover */
    cursor: pointer;
}