/* 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: fixed;
    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 aan de onderkant van de tooltip (standaard: tooltip boven de link) */
.linkify-custom-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: #333;
    z-index: -1;
}

/* Arrow aan de bovenkant als de tooltip onder de link wordt getoond */
.linkify-custom-tooltip.linkify-tooltip-below::after {
    bottom: auto;
    top: -5px;
}

/* Arrow verschuiven als tooltip aan de rechterkant geclipped is */
.linkify-custom-tooltip.linkify-tooltip-right::after {
    left: auto;
    right: 16px;
    transform: translateX(0) rotate(45deg);
}

/* Arrow verschuiven als tooltip aan de linkerkant geclipped is */
.linkify-custom-tooltip.linkify-tooltip-left::after {
    left: 16px;
    transform: translateX(0) rotate(45deg);
}