.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 3px;
}

.dropdown-btn {
    background-color: var(--e-global-color-accent);
    color: black;
    font-weight: bold;
    font-family: "Baloo 2", Sans-serif;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s; /* voeg een vloeiende overgang toe */
}

/* Voeg deze regel toe voor de hover-stijl */
.dropdown-btn:hover {
    background-color: var(--e-global-color-secondary);
    color: white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--e-global-color-accent);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 10px;
    z-index: 996;
    white-space: nowrap; /* zorg ervoor dat de tekst niet omvouwt naar een nieuwe regel */
}


/*MOBILE*/
/* If you want to ensure the modal content is always centered regardless of content size */
@media (min-width: 768px) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

/*Desktop*/
@media (max-width: 768px) {
    .dropdown-content.visible {
        display: block;
    }
}