/* Algemeen fix voor overflow issues */
* {
	box-sizing: border-box;
}

@font-face {
	font-family: 'Sifonn Pro';
	font-style: normal;
	font-weight: normal;
	src: local('Sifonn Pro'), url('Sifonn-Pro.woff') format('woff');
}

/* Zorgt ervoor dat de pagina altijd minimaal de volledige hoogte inneemt */
html, body {
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%; /* Zorgt ervoor dat de breedte van het scherm altijd 100% is */

}

.body {
	background: #f8f8fa;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}




.normal-text {
	font-size: 12px;
}

.head-text {
	font-size: 12px;
}

.logo {
	display: flex;
	justify-content: center; /* Centreert de inhoud horizontaal */
	align-items: center; /* Centreert de inhoud vertigcaal */
	text-align: center; /* Zorgt ervoor dat de tekst gecentreerd blijft */
	margin-top: 20px;
	margin-bottom: 10px;
}

.image-logo {
	width: auto; /* Stelt de breedte van de afbeelding in op 50px */
	height: 50px; /* Behoudt de verhouding van de afbeelding */
	margin-right: 10px; /* Voegt wat ruimte toe tussen het logo en de tekst */
}

.logo a {
	color: #e2105c; /* Stelt de tekstkleur in */
	font-size: 32px; /* Stelt de tekstgrootte in op 28px */
	font-weight: bold; /* Maakt de tekst vetter */
	text-decoration: none; /* Verwijdert de standaard onderstreping van de link */
	font-family: 'Sifonn Pro';
}



@media screen and (max-width: 768px) {
	.logo {
		flex-wrap: nowrap; /* Zorgt ervoor dat de items niet worden omgebroken */
	}

	.logo a {
		font-size: 20px; /* Verkleint de tekstgrootte op kleinere schermen */
		white-space: nowrap; /* Zorgt ervoor dat de tekst op één regel blijft */
	}
}




.bedrag-text {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 2px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 25px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	border-radius: 10px;
}


.type-green {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 2px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	border-radius: 10px;
}

.type-orange {
	background-color: #e89a00;
	border: none;
	color: white;
	padding: 2px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	border-radius: 10px;
}

.type-red {
	background-color: #EB0000;
	border: none;
	color: white;
	padding: 2px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	border-radius: 10px;
}

.menubalk {
	margin-bottom: 1px;
	width: 100%;
}

.menubalk a, .menubalk button {
	line-height: normal;
	vertical-align: middle;
}

.menubalk button {
	border: 0px solid transparent; /* Add or remove border as needed */
	vertical-align: middle; /* Align vertically */
}

.button-green-submit {
	width: 203px;
	background-color: #3aaf9c;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-green-submit:hover {
	background-color: #216358;
	border: 0px solid #216358;
	color: white;
}

.button-green-submit:active {
	background: #3aaf9c;
}



.button-green {
	width: 203px;
	background-color: #3aaf9c;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-green:hover {
	background-color: #216358; /* De kleur bij hover */
	border: 0px solid #216358;
	color: white;
}



.button-green:active {
	background: #3aaf9c;
}

.button-onyx {
	width: 200px;
	background-color: #2c2b2b;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 20px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-onyx-submit {
	width: 200px;
	background-color: #2c2b2b;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 20px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-close {
	top: 10px;
	right: 10px;
	width: 70px;
	background-color: darkred;
	border: none;
	color: white;
	padding: 19px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 20px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}




.button-onyx:active {
	background: #131313;
}

.button-orange {
	width: 200px;
	background-color: #e89a00;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-orange-submit {
	width: 200px;
	background-color: #e89a00;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-orange:active {
	background: #e89a00;
}

.button-orange:hover {
	background: #c28100;
}

.button-red {
	width: 200px;
	background-color: #EB0000;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-red-submit {
	width: 200px;
	background-color: #EB0000;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-red:active {
	background: #D40000;
}

.button-yellow {
	background-color: #ebcb12;
	border: none;
	color: white;
	padding: 10px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}


.button-bleu {
	background-color: #004DC5;
	border: none;
	color: white;
	padding: 10px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
}

.button-bleu:active {
	background: #0041A8;
}


.button-pink-stripe-border {
	width: 200px;
	background-color: white;
	border: 2px dashed #e2105c;
	color: #e2105c;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 20px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
	transition: background-color 0.3s, color 0.3s; /* Vloeiende overgang */
}


.button-pink {
	width: 200px;
	background-color: white;
	border: 2px solid #e2105c;
	color: #e2105c;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 20px;
	margin-bottom: 4px;
	cursor: pointer;
	border-radius: 10px;
	transition: background-color 0.3s, color 0.3s; /* Vloeiende overgang */
}

.button-pink:hover {
	background-color: #af0c47; /* De kleur bij hover */
	border: 2px solid #af0c47;
	color: white;
}

.button-pink:active,
.button-pink.active {
	background-color: #e2105c;
	color: white;
}


/* Style voor barcode knop */
.input-container {
	position: relative;
	display: inline-block;
	width: 100%;
}

.input-container .inputfield1 {
	box-sizing: border-box;
	padding-right: 50px; /* Ruimte maken voor de knop */
	font-size: 1em; /* Eventueel aanpassen voor gewenste tekstgrootte */
}


.barcode-button {
	position: absolute;
	top: 0;
	right: 0;
	height: 50px;
	width: 75px; /* Bepaal de breedte van de knop */
	background: #3aaf9c; /* Kleur van de knop, pas aan naar wens */
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	border-bottom-right-radius: 1px solid gray;
	border-top: 1px solid gray;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.5em; /* Grootte van het icoon */
	color: #ffffff; /* Tekstkleur van het icoon */
}

.barcode-button:hover {
	background: #af0c47; /* Lichte hoverkleur, pas aan naar wens */
}





/* ----- Wachtwoordveld + meter layout ----- */
.password-container {
	display: flex;
	align-items: flex-start;
	gap: 50px; /* Redelijke ruimte tussen de kolommen */
	flex-wrap: wrap;
}


/* Input container */
.input-container {
	position: relative;
	display: inline-block;
	width: 410px;
}

.input-container .inputfield2 {
	box-sizing: border-box;
	padding-right: 50px; /* Ruimte maken voor de knop */
	font-size: 1em; /* Consistente tekstgrootte */
	width: calc(100% - 50px); /* Verwijdert de ruimte voor de knop uit de totale breedte */
}


/* Oog-icoon styling voor wachtwoordvelden */
.icon-button {
	position: absolute;
	top: 41%;
	right: 0px;
	transform: translateY(-50%);
	height: 50px;
	width: 75px; /* Bepaal de breedte van de knop */
	background: #af0c47; /* Kleur van de knop, pas aan naar wens */
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	border-bottom-right-radius: 1px solid gray;
	border-top: 1px solid gray;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.5em; /* Grootte van het icoon */
	color: #ffffff; /* Tekstkleur van het icoon */
}


/* Oog-icoon styling voor wachtwoordvelden */
.icon-button-saldochecker {
	position: absolute;

	right: 0px;
	transform: translateY(-50%);
	height: 50px;
	width: 50px; /* Bepaal de breedte van de knop */
	background: #af0c47; /* Kleur van de knop, pas aan naar wens */
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	border-bottom-right-radius: 1px solid gray;
	border-top: 1px solid gray;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.5em; /* Grootte van het icoon */
	color: #ffffff; /* Tekstkleur van het icoon */
}

.icon-button-saldochecker-api {
	top: 33%;
}

.icon-button-saldochecker-code {
	top: 52%;
}


.icon-button-login {
	top: 64px;
	right: 15px;
}

textarea.inputfield1.inputfield2 {
	padding-top: 10px; /* pas deze waarde aan naar wens */
}

#regenApiKeyBtn {
	width: 410px;
}

/* Responsieve aanpassingen voor mobiel */
@media (max-width: 768px) {
	.password-container {
		flex-direction: column; /* Stack de elementen */
		gap: 20px; /* Redelijke ruimte tussen de elementen */
	}

	.password-inputs, .password-meter-container {
	width: 100%;
	}

	/* Zorg dat de inputfields 100% breed zijn */
	.password-inputs input.inputfield1 {
		width: 100% !important;
	}

	/* Pas de oog-knop aan indien nodig */
	.icon-button {
		height: 50px;
		width: 50px;
		font-size: 1em;
	}

	/* Eventueel extra styling voor de input-container op mobiel */
	.input-container {
		width: 100%;
	}

	#saldochecker-page .input-container input,
	#saldochecker-page .button-pink,
	#saldochecker-page .input-container textarea {
		width: 100% !important;
	}

}














/* Add some basic styling to the fieldset */
fieldset {
	border: 1px solid #ccc;
	border-radius: 10px;
	margin: 10px 0;
	padding: 10px;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.1) /* voorbeeld schaduw */
}


.general-fieldset {
	border: 1px solid #ccc;
	border-radius: 10px;
	margin: 10px 0;
	padding: 10px;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.1) /* voorbeeld schaduw */

}

.general-fieldset legend {
	font-weight: bold;
	font-size: 1.2em;
}

.allertbox1 {
	box-sizing: border-box;
	width: 100%;            /* Breedte vult de parent */
	max-width: 100%;        /* Of bijv. 95%, als je wat lucht aan de zijkant wilt */
	margin: 5px auto;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #fff3cd;
	color: #352804;
	padding: 20px;
	text-align: center;
	font-weight: bold;
	word-wrap: break-word;   /* Zorg dat lange woorden/URLs niet uit de box lopen */
}

.extrainfobox {
	box-sizing: border-box;
	width: 700px;
	margin: 5px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #fff3cd;
	color: #352804;
	padding: 20px;
	word-wrap: break-word;

	/* Flex op kolom-niveau */
	display: flex;
	flex-direction: column;
}

/* Container voor de knop rechts onderin */
.extrainfo-button-container {
	margin-top: auto;       /* duwt de knop naar de onderkant */
	text-align: right;      /* plaatst de knop aan de rechterkant */
	margin-top: 15px; 		/* evt. extra ruimte boven de knop */
	margin-bottom: -15px;
	margin-right: -12px;
	margin-left: -10px;
}

@media screen and (max-width: 768px) {
	.extrainfobox{
		width: 100%;
		margin: 5px;
		margin-left: 0px;
	}

}

.extra-info-textarea {
	font-size: 18px;
	border-radius: 10px;
	padding: 10px;
}

.formExtraInfo {
	max-width: 700px;
	margin: auto;
}

.edit-extra-info-btn {
	width: 150px;
	border: none;
	color: white;
	text-decoration: none;
	font-size: 16px;
	margin: 4px 0;
	cursor: pointer;
	border-radius: 10px;
	height: 40px; /* Verhoog de hoogte van de knoppen voor betere tekstpositie */
	padding: 0 15px;
	line-height: 40px; /* Zorg ervoor dat de line-height overeenkomt met de hoogte */
	text-align: center;
	white-space: nowrap;
}



/*style voor input numers pijltje weg */
/* Verwijdert de pijltjes in Chrome, Safari, Edge, en Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Verwijdert de pijltjes in Firefox */
input[type="number"] {
	-moz-appearance: textfield;
}

/* Voor andere browsers waar appearance ondersteund wordt */
input[type="number"] {
	appearance: textfield;
}

/* Style the transaction history table */
.transaction-history {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.transaction-history th, .transaction-history td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}


@media (max-width: 768px) {
	/* Maak alle tekst in de tabel iets kleiner */
	.transaction-history th, .transaction-history td {
		font-size: 10px;      /* Of 11px, naar wens */
		padding: 3px;         /* Iets minder padding */
	}

	/* Als je aparte classes hebt voor de type-badges */
	.type-green,
	.type-orange,
	.type-red {
		font-size: 11px;
		padding: 2px 6px;     /* Maak de badges zelf ook wat compacter */
	}
}



/* Add some background and text color to the table header */
.transaction-history th {
	background-color: #f2f2f2;
}

/* Style alternating rows for better readability */
.transaction-history tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}

/* Style the head-text class */
.head-text {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}




.button-yellow {
	background-color: #ffc107; /* Yellow */
}

.numpad-container {
	display: flex;
	justify-content: flex-end; /* Align to the right */
	width: 100%; /* Ensure full width for proper alignment */
}

.numpad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 7px; /* Increased gap for better spacing */
	max-width: 250px; /* Slightly increased max width */
	/* Removed margin: auto to avoid centering */
	margin-right: 0; /* Adjust as needed for alignment */
}


.numpad-btn {
	width: 80px; /* fixed width for all buttons */
	height: 80px; /* fixed height for all buttons */
	padding: 10px;
	font-size: 20px;
	border: 1px solid #ccc;
	border-radius: 10px;
	cursor: pointer;
	background-color: #f5f5f5;
}

.numpad-btn:active {
	background-color: #ddd;
}

.valign-bottom {
	vertical-align: bottom;
}

.material-symbols-outlined {
	font-variation-settings:
			'FILL' 0,
			'wght' 400,
			'GRAD' 0,
			'opsz' 24;
}

.inline-container {
	display: flex;
	align-items: flex-start;
}

.inline-container div {
	margin-right: 20px;
}

.inline-container label {
	display: block;
	margin-bottom: 5px;
}

/* Oog-icoon styling voor wachtwoordvelden */
.password-container {
	position: relative;
	width: fit-content; /* Zorg ervoor dat de container zich aanpast aan de inhoud */
}

@media screen and (max-width: 768px) {
	.password-container {
		position: relative;
		width: 100%; /* Zorg ervoor dat de container zich aanpast aan de inhoud */
	}
}



#togglePassword {
	position: absolute;
	right: 10px;
	top: 45%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #888;
	font-size: 24px; /* Zorg ervoor dat het oog groot genoeg is */
}

.large-textarea {
	width: 410px;
	height: 400px; /* Verhoog de hoogte voor meer tekst */
	border-radius: 10px;
	border: 1px solid gray;
	text-align: left;
	padding: 10px;
	box-sizing: border-box;
	font-size: 18px;
	resize: vertical;
}

.inputfield1 {
	width: 410px; /* Standaard breedte op de\ktops */
	height: 50px;
	border-radius: 10px;
	border: 1px solid gray;
	padding: 0 40px 0 10px; /* Voeg padding aan de rechterkant toe voor het oog-icoon */
	box-sizing: border-box;
	font-size: 18px;
	margin-bottom: 10px; /* Voeg wat ruimte toe onder het invoerveld */
}

@media screen and (max-width: 768px) {
	.inputfield1 {
		width: 100%; /* Volledige breedte op mobiele schermen */
	}
}






select.inputfield1 {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: white;
	background-image: url('data:image/svg+xml;utf8,<svg fill="%23212121" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position-x: 95%;
	background-position-y: 50%;
	padding-right: 40px;
	font-size: 18px;
	height: 50px;
	padding: 0 10px;
}

select.inputfield1 option {
	font-size: 18px;
	line-height: 2.5;
	height: 50px;
}


/* tinymce */
.textarea-container {
	width: 100%; /* Zorgt ervoor dat de container de volledige breedte inneemt */
	max-width: 100%; /* Beperkt de breedte tot 100% van de viewport */
	overflow-x: hidden; /* Voorkomt horizontaal scrollen */
}

.tinymce-textarea {
	width: 100%; /* Volledige breedte van de container */
	height: auto; /* Pas de hoogte automatisch aan */
	font-size: 16px; /* Aanpassing van de tekstgrootte voor kleinere schermen */
	box-sizing: border-box; /* Zorgt ervoor dat padding bij de breedte wordt inbegrepen */
}

@media screen and (max-width: 768px) {
	.tinymce-textarea {
		width: 100%; /* Volledige breedte voor mobiele apparaten */
		height: auto; /* Flexibele hoogte */
	}
}





/* Zorg ervoor dat het iframe van TinyMCE ook 100% breedte heeft binnen zijn container */
#email_template_ifr {
	width: 100%;
}

/* Specifieke stijlen voor TinyMCE binnen de email-confirm-container */
.email-confirm-container .tox-tinymce {
	width: 100% !important; /* Zorg dat de editor de volledige breedte gebruikt */
	height: auto !important; /* Pas de hoogte automatisch aan op de inhoud */
}

.email-confirm-container .tox-editor-header {
	flex-wrap: wrap !important; /* Zorg dat de toolbar in meerdere regels past als het scherm kleiner is */
}

.email-confirm-container .tox-toolbar__group {
	flex: 1 1 100% !important; /* Zorg ervoor dat toolbar knoppen de volledige breedte gebruiken op kleine schermen */
}

.email-confirm-container #email_template_ifr {
	width: 100% !important; /* Zorg dat het iframe van TinyMCE de volledige breedte gebruikt */
	height: 300px; /* Standaard hoogte instellen */
}

@media (max-width: 768px) {
	.email-confirm-container #email_template_ifr {
		height: 250px; /* Pas de hoogte aan voor mobiele schermen */
	}

	.email-confirm-container .tox-tinymce {
		height: auto !important; /* Maak de hoogte van de editor dynamisch */
	}
}







#menu-links {
	display: flex;
	flex-wrap: wrap;
}

#menu-links a {
	flex: 1;
	text-align: center;
	margin: 10px 5px; /* Verticale ruimte tussen de menu knoppen */
	padding: 10px;
	box-sizing: border-box;
}

/* Hamburger menu styling */
#hamburger-menu {
	display: none;
	font-size: 20px;
	cursor: pointer;
	width: calc(100% - 20px); /* Breedte van het scherm min 20px (10px marge aan beide kanten) */
	background-color: #EF1262;
	border: none;
	color: white;
	padding: 15px 17px;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	margin: 10px auto;
}

#menu-links {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}

#menu-links a {
	flex: 1;
	text-align: center;
	margin: 10px 5px;
	padding: 10px;
	box-sizing: border-box;
}

/* Responsive Design */
/* Responsive Design */
@media screen and (max-width: 768px) {
	#hamburger-menu {
		display: block;
		padding: 10px;
	}

	#menu-links {
		display: none;
		flex-direction: column;
		width: calc(100% - 20px); /* Zorgt ervoor dat het menu 10px ruimte aan beide kanten heeft */
		margin: 0 auto; /* Centreert het menu */
		padding: 0;
	}

	#menu-links a {
		width: 100%;
		padding: 15px;
		margin: 0 0 10px 0; /* Voegt 10px ruimte onder elke link toe */
		box-sizing: border-box;
		text-align: center; /* Centreert de tekst in de links */
	}

	#menu-links a:last-child {
		margin-bottom: 0; /* Verwijdert de marge onder de laatste knop om het menu netjes te houden */
	}

	#menu-links.active {
		display: flex;
	}
}




@media screen and (max-width: 768px) {
	.button-green, .button-orange {
		width: 100%; /* Zorgt ervoor dat de knoppen de volledige breedte van hun container innemen */
		margin: 10px 0; /* Zorgt voor een beetje ruimte boven en onder de knoppen */
	}
}


/* Verhoog de responsive aanpassingen */
@media screen and (max-width: 768px) {

	.inline-container {
		flex-direction: column; /* Zorg ervoor dat de items onder elkaar worden geplaatst in plaats van naast elkaar */
	}

	.inline-container div {
		margin-right: 0; /* Verwijdert de rechter marge, omdat de velden onder elkaar staan */
		margin-bottom: 15px; /* Voegt ruimte toe tussen de velden */
	}

	.large-textarea {
		width: 100%; /* Zorgt ervoor dat het tekstvak de volledige breedte inneemt op mobiele schermen */
		height: auto; /* Past de hoogte automatisch aan */
	}

	#radiolabel {
		width: 100%; /* Zorgt ervoor dat het radiolabel de volledige breedte inneemt op mobiele schermen */
	}

	/* Zorg ervoor dat de knoppen de volledige breedte innemen op mobiele schermen */
	.button-green, .button-orange, .button-green-submit {
		width: 100%;
		margin: 10px 0; /* Voegt ruimte toe tussen de knoppen */
	}
}

@media screen and (max-width: 768px) {
	#radiolabel {
		display: none !important; /* Forceer het verbergen van de radiobuttons */
	}
}

@media screen and (max-width: 768px) {
	#amount-input {
		display: block !important; /* Toon het invoerveld op kleine schermen */
		width: 100%; /* Zorg ervoor dat het de volledige breedte van het scherm inneemt */
		margin-top: 5px;
	}
}

@media screen and (max-width: 768px) {
	/* Dit zorgt ervoor dat het veld verborgen is als er een arrangement is geselecteerd */
	#amount-input.hidden {
		display: none !important; /* Verbergt het invoerveld wanneer de klasse 'hidden' wordt toegepast */
	}
}

@media screen and (min-width: 769px) {
	#amount-input {
		display: none !important; /* Verberg het invoerveld op grote schermen */
	}
}


/* begin toggle switch */
/* Basis styling voor de switch container */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

/* Verberg het standaard checkbox element */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* De slider (het schakelknopje) */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 10px; /* Veranderde waarde voor vierkante randen */
}

/* Schuifknop binnen de slider */
.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 10px; /* Veranderde waarde voor vierkante randen */
}

/* Als het checkbox element is aangevinkt */
input:checked + .slider {
	background-color: #4CAF50; /* Zelfde kleur als de groene buttons */
}

/* Verplaats het knopje als de switch is aangevinkt */
input:checked + .slider:before {
	transform: translateX(26px);
}

/* Verwijder ronde stijl door geen border-radius toe te passen */
.slider.round, .slider.round:before {
	border-radius: 10px;
}

/* eind toggle switch */

/* begin inklappen fieldset */

.fieldset-content {
	display: none;
}

fieldset.open .fieldset-content {
	display: block;
}

.fieldset-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.button-container {
	display: flex;
	align-items: center;
}

.button-container .info-button {
	margin-right: 20px; /* Voeg een tussenruimte van 20px toe tussen de info-knop en de toggle-knop */
}

.toggle-button {
	background-color: #e89a00; /* Oranje kleur van de knoppen */
	border: none;
	color: white;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	border-radius: 10px; /* Zelfde afgeronde hoeken als de knoppen */
	width: 40px; /* Breedte instellen */
	height: 40px; /* Hoogte instellen */
}

.toggle-button:active {
	background-color: #e89a00; /* Donkerder oranje bij het klikken */
}

.toggle-button:hover {
	background-color: #c28100; /* Donkerder oranje bij hover */
}

/* eind inklappen fieldset */
/* begin info button */

.info-button {
	background-color: #0057ad; /* Blauwe kleur */
	border: none;
	color: white;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	border-radius: 10px; /* Zelfde afgeronde hoeken als de knoppen */
	width: 34px; /* Breedte instellen om te matchen met toggle-button */
	height: 34px; /* Hoogte instellen om te matchen met toggle-button */
}

.info-button:hover {
	background-color: #0050a0; /* Donkerder blauw bij hover */
}

.info-button:active {
	background-color: #004494; /* Nog iets donkerder bij actief */
}

/* eind info button */

/* Dit houdt de footer onderaan, zelfs als er weinig inhoud is */
/* Footer Styling */
/* Basisstijl voor de footer */
/* Basisstijl voor de footer */
/* Basisstijl voor de footer */
.footer {
	background-color: #e2105c;
	color: white;
	text-align: center;
	padding: 10px 10px;
	width: 100%;
	font-size: 14px;
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

/* Centraal uitgelijnde tekst in de footer */
.footer p {
	margin: 0;
	font-size: 14px;
	flex: 1;
	text-align: center;
	white-space: normal; /* Zorgt ervoor dat de tekst wordt opgesplitst als nodig */
}

/* Stijl voor de knoppen in de footer */
.footer-button {
	background-color: white;
	color: #e2105c;
	border: none;
	padding: 13px 30px;
	cursor: pointer;
	font-size: 14px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	transition: background-color 0.3s ease, color 0.3s ease;
	text-decoration: none;
	font-weight: normal;
}

.footer-button:hover {
	background-color: #f5f5f5;
}

/* Pijltje naar rechts in de link-knop */
.footer-button-arrow {
	position: relative;
	padding-right: 30px;
}

.footer-button-arrow::after {
	content: "→";
	font-size: 16px;
	color: #e2105c;
	margin-left: 10px;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}

/* Extra opmaak voor de sectie rechts in de footer */
.footer-right-section {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* Laat de instellingen zoals ze zijn voor schermen tussen 900px en 1111px */
@media screen and (max-width: 1111px) {
	.footer p {
		text-align: center;
		margin: 0;
	}

	.footer-button {
		padding: 13px 20px; /* Verklein de padding bij schermen kleiner dan 1111px */
		font-size: 13px; /* Maak de tekst iets kleiner */
	}

	/* Zorg voor een harde line-break bij smalle schermen */
	.copyright-linebreak::before {
		content: "\A"; /* Line break toevoegen */
		white-space: pre; /* Zorg dat de line break wordt gerespecteerd */
	}
}

/* Aanpassing voor schermen van 768px of kleiner */
@media screen and (max-width: 768px) {
	.footer {
		flex-direction: column;
		align-items: stretch;
	}

	.footer-right-section {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.review-button {
		order: 1;
		width: 100%;
	}

	.bug-report-button {
		order: 2;
		width: 100%;
	}

	.help-button {
		order: 3;
		width: 100%;
	}

	/* Verwijder de regelonderbreking voor schermen kleiner dan 768px */
	.footer p {
		order: 4;
		width: 100%;
		text-align: center;
		margin-top: 10px;
		white-space: normal; /* Zorg dat de tekst op één regel blijft */
	}
}




hr {
	border: none;
	border-top: 1px solid #ccc;
	margin: 10px 0;
}

.tox-tinymce-aux {
	z-index: 9999 !important;
}

.tox .tox-menu {
	z-index: 10000 !important;
}



/* rapporten selecteren */
.date-selection-container {
	display: flex;
	justify-content: flex-start; /* Begin de filters vanaf de linkerkant */
	align-items: center;
	width: 100%;
	gap: 10px; /* Zorgt voor consistente ruimte tussen de filters */
}

.date-selection-container > div {
	flex: 1; /* Zorgt ervoor dat elk filterelement dezelfde breedte krijgt */
	padding: 5px;
	text-align: center; /* Centreer de tekst in elk filtervak */
}

.date-selection-container > div:first-child {
	margin-left: 0; /* Zorg ervoor dat het eerste filter geen extra marge heeft */
}

.date-selection-container > div:last-child {
	margin-right: 0; /* Zorg ervoor dat het laatste filter geen extra marge heeft */
}

.date-selection-container label {
	width: 100%;
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	text-align: center; /* Centreer de tekst van het label */
}

.date-selection-container select {
	width: 100%; /* Vul de volledige breedte van het containerdiv-element */
	display: block;
	margin: 0; /* Verwijder onnodige marges */
}

/* Standaard desktop weergave */
@media (min-width: 769px) {
	.date-selection-container {
		display: flex;
	}

	.filter-hamburger-menu {
		display: none;
	}
}

/* Voor mobiele apparaten */
@media (max-width: 768px) {
	.date-selection-container {
		display: none;
	}

	.filter-hamburger-menu {
		display: block;
		margin: 10px 0;
	}

	#hamburger-filter-menu {
		font-size: 20px;
		cursor: pointer;
		padding: 10px;
		background-color: #e89a00;
		border: none;
		color: white;
		text-align: center;
		border-radius: 10px;
		width: 100%;
		margin: 0 auto;
	}

	#filter-menu-content {
		display: none;
		background-color: white;
		padding: 15px;
		border: 1px solid #ccc;
		border-radius: 10px;
		margin-top: 10px;
	}

	#filter-menu-content div {
		margin-bottom: 10px;
	}

	#filter-menu-content label {
		font-weight: bold;
		text-align: center;
	}

	#filter-menu-content select,
	#filter-menu-content button {
		width: 100%;
	}
}

/* Menu openen/sluiten */
#filter-menu-content.active {
	display: block;
}



/* Knopstijl voor deactiveren, bewerken, heractiveren en verwijderen */
.deactivate-group-button,
.edit-group-button,
.reactivate-group-button,

.deactivate-branch-button,
.edit-branch-button,
.reactivate-branch-button,

.delete-branch-button,
.delete-group-button {
	border: none;
	color: white;
	text-decoration: none;
	font-size: 16px;
	margin: 4px 0;
	cursor: pointer;
	border-radius: 10px;
	height: 40px; /* Verhoog de hoogte van de knoppen voor betere tekstpositie */
	padding: 0 15px;
	line-height: 40px; /* Zorg ervoor dat de line-height overeenkomt met de hoogte */
	text-align: center;
	white-space: nowrap;
}


.deactivate-group-button.bg,
.edit-group-button.bg,
.reactivate-group-button.bg,
.delete-group-button.bg,

.deactivate-branch-button.bg,
.edit-branch-button.bg,
.reactivate-branch-button.bg,
.delete-branch-button.bg {



	background-color: #e89a00; /* Oranje */
	color: white;
	border: none;
	border-radius: 10px;
	padding: 10px;
	font-size: 16px;
	cursor: pointer;
}

.deactivate-group-button.bg:hover,
.edit-group-button.bg:hover,
.reactivate-group-button.bg:hover,

.deactivate-branch-button.bg:hover,
.edit-branch-button.bg:hover,
.reactivate-branch-button.bg:hover {
	background-color: #c28100; /* Donkerder oranje bij hover */
}

.delete-group-button.bg,
.delete-branch-button.bg {
	background-color: #950a3c; /* Rood voor verwijderen */
}

.delete-group-button.bg:hover,
.delete-branch-button.bg:hover {
	background-color: #e2105c; /* Donkerder rood bij hover */
}


/* Stijl voor de groepen tabel */
.table-groups {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	font-size: 14px;
}

.table-groups th,
.table-groups td {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

.table-groups th {
	background-color: #ffffff;
	font-weight: bold;
}

/* Zorg dat knoppen binnen de tabel hun oorspronkelijke stijl behouden */
.group-actions {
	display: flex;
	gap: 10px;
}

.group-actions button {
	padding: 5px 10px;
	font-size: 14px;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
}

/* Responsieve aanpassingen voor de tabellen */
@media (max-width: 768px) {
	.table-groups {
		font-size: 12px;
	}

	.table-groups th,
	.table-groups td {
		padding: 8px;
	}

	.group-actions {
		flex-direction: column;
		gap: 5px;
	}

	.group-actions button {
		width: 100%;
	}
}







/* Algemene knopstijl */
.deactivate-group-button,
.edit-group-button,
.reactivate-group-button,
.delete-group-button,

.deactivate-branch-button,
.edit-branch-button,
.reactivate-branch-button,
.delete-branch-button,

.deactivate-arrangement-button,
.edit-arrangement-button,
.reactivate-arrangement-button,
.delete-arrangement-button {
	border: none;
	color: white;
	text-decoration: none;
	font-size: 16px;
	margin: 4px 0;
	cursor: pointer;
	border-radius: 10px;
	height: 30px;
	padding: 0 15px;
	line-height: 0px;
	text-align: center;
	white-space: nowrap;
}

/* Achtergrondkleur toepassen voor alle knoppen met de klasse 'bg' */
.deactivate-group-button.bg,
.edit-group-button.bg,
.reactivate-group-button.bg,
.deactivate-arrangement-button.bg,
.edit-arrangement-button.bg,
.reactivate-arrangement-button.bg {
	background-color: #e89a00;
}

.deactivate-group-button.bg:hover,
.edit-group-button.bg:hover,
.reactivate-group-button.bg:hover,
.deactivate-arrangement-button.bg:hover,
.edit-arrangement-button.bg:hover,
.reactivate-arrangement-button.bg:hover {
	background-color: #c28100;
}

.delete-group-button.bg,
.delete-arrangement-button.bg {
	background-color: #950a3c;
}

.delete-group-button.bg:hover,
.delete-arrangement-button.bg:hover {
	background-color: #e2105c;
}

/* Container voor groepen en arrangementen */
.group-container,
.arrangement-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	width: 100%;
}

.groups,
.arrangements {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	gap: 20px;
}

.active-groups,
.inactive-groups,
.active-arrangements,
.inactive-arrangements {
	flex: 0 1 48%; /* Elke sectie neemt 48% van de breedte in */
}

/* Responsieve aanpassingen voor mobiele apparaten */
@media (max-width: 768px) {
	.groups,
	.arrangements {
		flex-direction: column;
		gap: 10px;
	}

	.active-groups,
	.active-arrangements {
		order: 1;
	}

	.inactive-groups,
	.inactive-arrangements {
		order: 2; /* Plaats de inactieve secties onder de actieve secties */
		width: 100%; /* Op mobiele apparaten nemen de secties de volledige breedte in */
	}

	ul {
		padding: 0;
	}

	li {
		display: block; /* Laat de lijstitems stapelen op mobiele apparaten */
		padding: 15px 10px;
		border-bottom: 1px solid #ddd;
	}

	.group-name,
	.arrangement-name {
		padding-right: 0; /* Verwijder extra ruimte rechts */
		max-width: 100%; /* Zorg ervoor dat de naam 100% van de breedte kan gebruiken */
		margin-bottom: 10px;
	}

	.group-actions,
	.arrangement-actions {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.group-actions button,
	.arrangement-actions button {
		width: 100%; /* Zorg ervoor dat knoppen de volledige breedte innemen */
		margin-top: 5px;
		flex: unset; /* Reset de flex-basis zodat de knoppen niet op één regel proberen te staan */
	}
}

/* Stijl voor de groepsnaam en arrangementnaam */
.group-name,
.arrangement-name {
	flex: 1;
	padding-right: 20px;
	word-wrap: break-word;
	max-width: 250px; /* Max breedte zodat knoppen consistent blijven */
	min-width: 250px; /* Min breedte om consistentie te behouden */
}

/* Stijl voor grote schermen */
@media (min-width: 769px) {
	.groups,
	.arrangements {
		flex-direction: row; /* Houd de oorspronkelijke weergave voor grote schermen */
		gap: 20px;
	}

	.active-groups,
	.inactive-groups,
	.active-arrangements,
	.inactive-arrangements {
		width: 48%; /* Zet de breedte terug naar 48% zoals het oorspronkelijk was */
	}

	.group-actions,
	.arrangement-actions {
		flex-direction: row;
		justify-content: flex-end;
		gap: 10px;
	}

	.group-actions button,
	.arrangement-actions button {
		flex: none;
		width: auto;
		margin-top: 0;
	}

	li {
		display: flex; /* Zet de lijstitems terug naar de oorspronkelijke flex-indeling */
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}
}

.arrangement-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}

.arrangement-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.arrangement-name {
	flex: 1;
	font-weight: bold;
	margin-right: 20px; /* Voeg ruimte toe tussen de naam en de waarde */
}

.arrangement-value {
	text-align: left;
	min-width: 100px;
	font-weight: normal;
	margin-right: 40px; /* Positioneer de waarde dichter bij de knoppen */
}

.arrangement-actions {
	display: flex;
	gap: 10px;
}

/* css voor confirm */
.new-group-name.form-control,
.new-branch-name.form-control,
.new-arrangement-name.form-control {
	width: 410px; /* Standaard breedte op desktops */
	height: 50px;
	border-radius: 10px;
	border: 1px solid gray;
	text-align: center;
	padding: 0 10px;
	box-sizing: border-box;
	font-size: 18px;
	margin-bottom: 10px; /* Voeg wat ruimte toe onder het invoerveld */
}


.jconfirm-buttons button.btn-green {
	background-color: #3aaf9c !important; /* Vervang deze kleur met de gewenste kleur */
}

.jconfirm-buttons button.btn-green:hover {
	background-color: #216358 !important;
}

.jconfirm-buttons button.btn-green:active {
	background: #3aaf9c !important;
}

.jconfirm-buttons button {
	border-radius: 10px !important;
}

/* Stijl voor algemene elementen */
.arrangement-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	width: 100%;
}

.arrangements {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	gap: 20px;
}

.active-arrangements,
.inactive-arrangements {
	flex: 0 1 48%; /* Elke sectie neemt 48% van de breedte in */
}

/* Responsieve aanpassingen voor mobiele apparaten */
@media (max-width: 768px) {
	.arrangements {
		flex-direction: column;
		gap: 10px;
	}

	.active-arrangements,
	.inactive-arrangements {
		width: 100%;
	}

	.inactive-arrangements {
		order: 2; /* Plaats de inactieve arrangementen onder de actieve */
	}

	ul {
		padding: 0;
	}

	li {
		display: block;
		padding: 15px 10px;
		border-bottom: 1px solid #ddd;
	}

	.arrangement-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.arrangement-name,
	.arrangement-value {
		max-width: 100%;
		margin-bottom: 10px;
	}

	.arrangement-actions {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 5px;
	}

	.arrangement-actions button {
		width: 100%;
		margin-top: 5px;
	}

	.new-group-name.form-control,
	.new-arrangement-name.form-control {
		width: 100%; /* Standaard breedte op desktops */
	}
}





/* Mobiele stijlen voor schermen kleiner dan 768px voor user page icoontjes */
@media (max-width: 768px) {
	/* Verberg tekst behalve voor 'Gebruiker' op mobiele schermen */
	.text-icon .text {
		display: none;
	}

	/* Zorg ervoor dat 'Gebruiker' zichtbaar blijft */
	th:first-child .text {
		display: inline;
	}

	/* Vergroot iconen op mobiele schermen */
	.text-icon .icon {
		font-size: 24px;
	}

	/* Verberg de tekst van de bewerk- en verwijderknoppen op mobiele schermen */
	.edit-arrangement-button .text,
	.delete-arrangement-button .text {
		display: none;
	}

	/* Zorg dat bewerk- en verwijderknoppen naast elkaar staan */
	.arrangement-actions {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
	}

	.arrangement-actions button {
		flex: 1; /* Beide knoppen nemen evenveel ruimte in */
		margin: 0 5px; /* Voeg ruimte toe tussen de knoppen */
		padding: 10px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Tabel stijl voor gebruikers */
	table.table-users {
		width: 100%; /* Gebruik volledige schermbreedte */
		font-size: 14px;
	}

	table.table-users th,
	table.table-users td {
		padding: 8px; /* Compactere padding voor mobiel */
	}
}

/* Desktop stijlen voor schermen groter dan 768px */
@media (min-width: 769px) {
	.arrangement-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	.arrangement-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.arrangement-name {
		flex: 1;
		margin-right: 20px;
	}

	.arrangement-value {
		text-align: left;
		min-width: 100px;
		margin-right: 40px;
	}

	.arrangement-actions {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
	}

	.arrangement-actions button {
		flex: none;
		width: auto;
	}
}

/* Algemene stijlen */
.custom-password-field {
	-webkit-text-security: disc; /* Voor WebKit-browsers */
	-moz-text-security: disc; /* Voor Mozilla-browsers */
	text-security: disc; /* Voor andere browsers */
	autocomplete: off;
	autocorrect: off;
	autocapitalize: off;
	spellcheck: false;
}

/* Formulier stijlen voor het toevoegen/bewerken van gebruikers */
.user-form {
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 20px;
	background-color: #f9f9f9;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	width: 100%;
}

.user-form.hidden {
	display: none;
}

.user-form h2 {
	margin-bottom: 20px;
}

/* Tabel stijlen voor gebruikers */
table.table-users {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

table.table-users th,
table.table-users td {
	padding: 10px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

table.table-users th {
	border-top: none;
}

/* Flexbox layout voor de checkbox-groepen */
.checkbox-group {
	display: flex;
	justify-content: center;
	gap: 20px;
	align-items: center;
}

/* Checkbox styling */
.styled-checkbox {
	appearance: none;
	width: 25px;
	height: 25px;
	border: 2px solid #e2105c;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s ease;
}

.styled-checkbox:checked {
	background-color: #e2105c;
	border-color: #e2105c;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-4.2-4.2L3 13.8 9 20 21 8l-1.4-1.4z"/></svg>');
	background-size: 75%;
	background-position: center;
	background-repeat: no-repeat;
}

.styled-checkbox:hover {
	border-color: #af0c47;
}

.checkbox-item label {
	margin-left: 10px;
	font-size: 16px;
	color: #333;
	position: relative; /* Maakt het mogelijk om de positie van de tekst aan te passen */
	top: -9px; /* Verschuift de tekst iets naar boven */
}




/* Stijl voor de 'Gebruiker toevoegen' knop */
#showAddUserFormButton {
	display: block;
	margin: 0 auto;
}






/* Stijl voor de home pagina */

/* Home page container */
.home-settings-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* Zorgt ervoor dat de fieldsets worden omgebroken als er niet genoeg ruimte is */
}

/* Home page fieldset (knoppen) */
.home-settings-fieldset {
	width: 45%; /* Standaard 45% van de breedte */
	max-width: 600px; /* Maximale breedte blijft 600px */
	margin: 20px; /* Verminderde marge voor consistentie */
	cursor: pointer;
	padding: 20px;
	border: 2px solid #e2105c;
	border-radius: 10px;
	background-color: #fff;
	text-align: center;
	transition: background-color 0.3s ease;
}

.home-settings-fieldset:hover {
	background-color: #ffe9f1;
}

.home-settings-fieldset legend {
	font-weight: bold;
	font-size: 1.2em;
}

.home-settings-fieldset p {
	margin-top: 10px;
	font-size: 14px;
	color: #333;
}

.home-settings-fieldset i {
	font-size: 48px;
	color: #e2105c;
	margin-bottom: 10px;
}

/* Mobielvriendelijke layout voor home page */
@media (max-width: 823px) {
	.home-settings-fieldset {
		width: 90%; /* Laat de knoppen de volledige breedte innemen op mobiele apparaten */
		margin: 10px; /* Verminder de marge op kleinere schermen */
	}

	.home-settings-container {
		flex-direction: column; /* Zet de fieldsets onder elkaar op mobiele apparaten */
	}
}

/* Barcode Scanner */

/* Stel de hoogte van het video-element in op 400px */
#reader video {
	width: 100% !important;
	height: 300px !important;
	object-fit: cover;
	border-radius: 10px;
}

#reader {
	border-radius: 10px;
	overflow: hidden; /* Zorg dat de videorandjes niet buiten de border-radius vallen */
}

/* Eventueel kun je er zeker van zijn dat ook child elementen afgerond zijn: */
#reader video, #reader canvas {
	border-radius: 10px;
}


/* css voor mobiele apparaten geen blauwe rand om geselecteerde inputfields */
input:focus,
select:focus,
textarea:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Probeer ook de volgende regel om de tap-highlight te verwijderen */
input, select, textarea {
	-webkit-tap-highlight-color: transparent;
}



/* Search pagina */



@media screen and (min-width: 768px) {
	.inputfieldsearch {
		width: 200px;
	}
}

@media screen and (max-width: 768px) {
	.card-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.action-button {
		width: 100%;
		margin: 5px 0;
	}

	.form-group {
		width: 100%;
	}

	.inputfieldsearch {
		width: 100%;
	}
}


/* Stijl de settings pagina */
.settings-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 kolommen naast elkaar */
	grid-gap: 20px; /* Ruimte tussen de fieldsets */
	width: 100%;
	margin: 20px auto;
}

.settings-fieldset {
	cursor: pointer;
	padding: 20px;
	border: 2px solid #e2105c;
	border-radius: 10px;
	background-color: #fff;
	text-align: center;
	transition: background-color 0.3s ease;
}

.settings-fieldset:hover {
	background-color: #ffe9f1;
}


.settings-fieldset-deactive {
	border: 2px solid #858585;
}

.settings-fieldset-deactive:hover {
	background-color: #cccccc;
}

.settings-fieldset legend {
	font-weight: bold;
	font-size: 1.2em;
}

.settings-fieldset p {
	margin-top: 10px;
	font-size: 14px;
	color: #333;
}

.settings-fieldset i {
	font-size: 48px; /* Maakt het icoon groter */
	color: #e2105c; /* Maakt het icoon dezelfde paarse kleur als de border */
	margin-bottom: 10px; /* Voegt wat ruimte toe onder het icoon */
}

/* Responsive voor mobiel */
@media (max-width: 768px) {
	.settings-container {
		grid-template-columns: 1fr; /* 1 kolom op kleinere schermen */
	}
}