/* Stijl voor de link die de tooltip activeert */
.linkify-tooltip-trigger {
    position: relative;
    cursor: help; /* Verandert de cursor bij hover */
    border-bottom: 1px dotted #0073aa; /* Visuele indicatie dat er meer info is */
    text-decoration: none; /* Optioneel: verwijder standaard onderstreping */
}

/* Basisstijl voor de custom tooltip div */
.linkify-custom-tooltip {
    position: absolute;
    background-color: #333; /* Donkere achtergrond */
    color: #fff; /* Witte tekst */
    padding: 8px 12px;
    border-radius: 4px;
    white-space: normal; /* Toestaan dat tekst afbreekt */
    max-width: 250px; /* Max breedte voor de tooltip */
    z-index: 9999; /* Zorg dat het boven alles ligt */
    pointer-events: none; /* Zorgt dat de muis door de tooltip heen kan klikken */
    opacity: 0; /* Initieel verborgen */
    visibility: hidden; /* Initieel verborgen */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* Arrow styling */
    transform: translateX(-50%); /* Center horizontally by default */
}

/* Arrow aan de onderkant van de tooltip */
.linkify-custom-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Plaats de pijl net buiten de tooltip */
    left: 50%;
    transform: translateX(-50%) rotate(45deg); /* Draai voor pijl effect */
    width: 10px;
    height: 10px;
    background-color: #333; /* Dezelfde kleur als de tooltip */
    z-index: -1; /* Zorg dat de pijl achter de tooltip zit */
}