/*LINKS GERECHT BROODGERECHTEN LIJST*/

/* Dropdown-container bovenaan de pagina */
.dropdown-container{
position: relative;
width:98%;
top:-1px;
text-align:center;
background-color: green;
color:#fff;
padding: 5px 5px;
border-radius:10px 10px 0 0;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
margin:0 0 30px 5px;
z-index: 9999; /* Zorg ervoor dat het dropdownmenu boven andere elementen komt */
}

/* Het dropdownmenu dat standaard verborgen is */
.dropdown-content{
display: none;
font-size:1.0em;
position: absolute;
top:27px;
width: 100.88888%;
left: -1px;
background-color: #f1f1f1;
border-radius:0 0 10px 10px;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
padding:5px 0 10px 0;
height:47vh;
z-index: 9999;
/* Toegevoegd om het scrollen mogelijk te maken */
max-height: 350px; /* Maximale hoogte van het dropdownmenu */
overflow-y: auto; /* Verticaal scrollen als de inhoud groter is dan de maximale hoogte */
}
/* MEDIA */
@media only screen and (max-width:1180px){.dropdown-content{max-height: 350px;}}

/* Styling voor de dropdown opties */
.dropdown-content a{
padding: 2px 0 2px 20px;
text-decoration: none;
font-size:1.1em;
display: block;
text-align:left
}

.dropdown-content a:link,
.dropdown-content a:visited{color:#000 !important;text-decoration:none}
.dropdown-content a:hover,
.dropdown-content a:active{color:red !important;text-decoration:none}

.dropdown-content a:hover{
background-color: #ddd;
}

/* Verberg rijen die niet voldoen aan de filter */
.hidden{
display: none;
}

/* Verberg de scrollbar compleet, maar laat het scrollen toe */
.dropdown-content::-webkit-scrollbar{
display: none;  /* Verberg de scrollbar zelf */
}

/* Firefox specifiek: Verberg de scrollbar zonder de functionaliteit te verliezen */
.dropdown-content{
scrollbar-width: none;  /* Verberg scrollbar in Firefox */
}

/* Klikken op touchscreens (iPad, mobiel) */
@media (hover: none){
.dropdown-container.active .dropdown-content {
display: block;
}
}