:root{
	--menu_background_color : #f3f3f3;									/* Achtergrondkleur van de pulldown menu: Default: #f3f3f3 */
	--menu-border-bottom : #555;										/* Het streepje onder de menu item Default: #555 */	
	--menu_item_color : #444;											/* Kleur van het menu item Default: #444 */
	--menu_selected_group_color : #666;									/* Achtergrondkleur van de geselecteerde productgroep: Default #666 */
	--kleur_font_link: red;												/* Kleur van de font zonder deeplink optie: Default: #ffd700 */
	--selected_menu_item: linear-gradient(to right, #333, #777);		/* Menu item waar de muis overheen gaan: linear-gradient(to right, #333, #777); */
	--selected_menu_item_empty: linear-gradient(to right, red, #777);	/* Menu item waar de muis overheen gaan: linear-gradient(to right, #333, #777); */
	
	
	--menu_background_color : #f3f3f3;									/* Achtergrondkleur van de pulldown menu: Default: #f3f3f3 */
	--menu_background_color : linear-gradient(45deg, #F5F5F5 10%, #ddd 50%, #F5F5F5 100%);
	--menu-border-bottom : #33a;										/* Het streepje onder de menu item Default: #555 */	
	--menu_item_color : #1F65B5;										/* Kleur van het menu item Default: #444 */
	--menu_selected_group_color : #10457A;								/* Achtergrondkleur van de geselecteerde productgroep: Default #666 */
	--kleur_font_link: red;												/* Kleur van de font zonder deeplink optie: Default: #ffd700 */
	--selected_menu_item: linear-gradient(
										  to right,
										  #094F9A 3%,
										  #2222FF 50%,
										  #094F9A 97%
										);								/* Menu item waar de muis overheen gaan: linear-gradient(to right, #333, #777); */
	
	--product_zoeken_font_size: 22px;
}

/* PRODUCT ZOEKEN */
.zoeken {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
    height: 30px;
    color: black;
    font-size: var(--product_zoeken_font_size);
}

.zoeken label {
	font-size: 14px;
    font-weight: bold;
}

.zoek-form {
    display: flex;
}

.zoeken form {
    display: flex;
    align-items: flex-end;
    padding: 5px;
}

.zoek-veld .zoek-invoerveld {
    align-items: center;
    margin-right: 5px; 
    font-size: var(--product_zoeken_font_size);
    width: 150px;
}

.zoek-button {
    margin-left: 5px;
    font-size: var(--product_zoeken_font_size);
}


/* PULLDOWN MENU */

#pulldown_menu {
    width: 250px; 
    background: var(--menu_background_color);
    color: white;
    padding: 3px;
    margin: 0 3px 0 0;
	border-right: 1px solid black;
}

/* Zorg ervoor dat de submenu's zichtbaar zijn als het parent-item actief is */
#pulldown_menu .pulldown_menu-item.active > .pulldown_menu-list {
    display: block; /* Maak submenu zichtbaar */
}

#pulldown_menu .pulldown_menu-item {
    display: none; /* Verberg alle items standaard */
}

#pulldown_menu .pulldown_menu-item.active {
    display: block; /* Maak actieve items zichtbaar */
}

/* Body-content instellingen */
.body_content {
    flex: 1; /* Gebruik resterende ruimte naast het menu */
    background-color: white; /* Zorg dat content apart staat van het menu */
	box-sizing: border-box;
}

#pulldown_menu .pulldown_menu-item a.toggle {
    width: 230px;
	padding: 10px 10px; 
    text-decoration: none; /* Zorg ervoor dat er geen onderlijning is */
    color: white; /* Zorg ervoor dat de tekst wit is */
    display: flex; /* Zorg voor een flexbox layout */
    justify-content: space-between; /* Zet de inhoud goed uit elkaar */
    align-items: center; /* Verticaal centreren */
}

#pulldown_menu .pulldown_menu-item a.notoggle {
	
    width: 230px;
	padding: 10px 10px; 
    text-decoration: none; /* Zorg ervoor dat er geen onderlijning is */
    color: white; /* Zorg ervoor dat de tekst wit is */
    display: flex; /* Zorg voor een flexbox layout */
    justify-content: space-between; /* Zet de inhoud goed uit elkaar */
    align-items: center; /* Verticaal centreren */
}

#pulldown_menu .pulldown_menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
	border: none; 
}

#pulldown_menu .pulldown_menu-item {
    background-color: var(--menu_item_color);
    border-bottom: 1px solid var(--menu-border-bottom);
	padding: 0;
}

#pulldown_menu .pulldown_menu-item a {
    display: block;
    text-decoration: none;
    color: white;
    justify-content: space-between;
    align-items: center;
	border-bottom: none; 
}

/* Hover-effecten voor links */
#pulldown_menu .pulldown_menu-item a:hover {
    background: var(--selected_menu_item);
    color: #eee; 
    /* transition: background 0.3s ease-in-out; */
    border-bottom: 1px solid #ccc;
}

#pulldown_menu .hoofdgroep a {
    color: var(--kleur_font_link);
}

/* Stijlen voor submenu's */
#pulldown_menu .toggle + .pulldown_menu-list {
    display: none; /* Verberg submenu's standaard */
}

#pulldown_menu .pulldown_menu-list a {
    font-size: 14px; 
}

/* Voor alle items in een geopend submenu */
#pulldown_menu .pulldown_menu-item.active > .pulldown_menu-list > .pulldown_menu-item {
    background-color: var(--menu_selected_group_color); 
}

/* Voor items met een submenu die geopend zijn */
/* #pulldown_menu .pulldown_menu-item.active > .pulldown_menu-list > .pulldown_menu-item a.toggle { */
    /* background-color: var(--menu_selected_group_color);  */
/* } */

.pulldown_menu-hamburger {
    display: none;
    background-color: transparent; /* Maak achtergrond transparant zodat icoon beter zichtbaar is */
    border: none; /* Verwijder rand */
    width: 30px;
    height: 25px;
    position: fixed;
    top: 20px;
    right: 20px; /* Rechts uitlijnen */
    z-index: 1000;
    cursor: pointer;
}

/* Als je FontAwesome gebruikt voor een mooier icoon */
.pulldown_menu-hamburger i {
    font-size: 30px; /* Pas de grootte van het icoon aan */
    color: #fff; /* Icoonkleur */
}

/* Specifieke stijlen voor mobiele weergave */
@media screen and (max-width: 768px) {
    /* Menu begint buiten het scherm */
    #pulldown_menu {
        position: fixed;  /* Zorgt ervoor dat het menu boven de pagina ligt */
        max-width: 250px; /* Maximaal 250px breed */
		top: 0;
        left: -100%;  /* Begin het menu buiten het scherm */
        width: 100%;
        height: 100%;  /* Volledige hoogte van het scherm */
        background-color: var(--menu_background_color);
        z-index: 999;  /* Zorg ervoor dat het menu boven andere elementen komt */
        transition: left 0.3s ease-in-out;
    }

    /* Menu wordt zichtbaar wanneer de 'open' class is toegevoegd */
    #pulldown_menu.open {
        left: 0;  /* Het menu komt van links naar rechts */
    }

    .pulldown_menu-hamburger {
        display: block;
        
        width: 30px;
        height: 25px;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;  /* Zorgt dat de hamburgerknop boven het menu komt */
        cursor: pointer;
    }

    .pulldown_menu-hamburger span {
        display: block;
        background-color: #fff;
        height: 4px;
        margin: 5px 0;
        width: 100%;
    }
}