:root {
    --header-height: 4.5rem;
    --footer-height: 3.5rem;
    --nav-width: 3.5rem;
    --h-submenu-height: 4rem;
    --first-color: #898F9B;
    --first-color-light: #898F9B;
    --greyscale-color-1: #fafafa;
    --greyscale-color-2: #f0f0f0;
    --greyscale-color-3: #f1f1f1; /* panel background light grey */
    --greybutton-color: #f6f6f6;
    --greybutton-border: #ced4da;
    --highlight-color: #f1f1f1;
    --app-color: #191A3F; /* dark blue */
    --fpcolor-1: #558EFA; /* FP blue */
    --fpcolor-1-highlight: #0b5df8;
    --fpcolor-list-highlight: #eef4fe; /* FP softblue background RGB value: 238, 244, 254 */
    --body-font: 'outfit', segoe ui;
    --small-font-size: 0.8rem;
    --medium-font-size: 0.9rem;
    --normal-font-size: 1rem;
    --pageheader-font-size: 1.5rem;
    --fontcolor-1: #191A3F; /*dark blue font*/
    --fontcolor-2: #6c757d; /*dark grey font*/
    --fontcolor-3: #B6BABE; /*inactive text*/
    --z-fixed: 10;
    --transition: 0.3s;
    --border-radius-box: 12px;
    --border-radius-button: 10px;
    --bs-modal-inner-border-radius: 12px;
    --bs-modalFP-border-radius: 16px;
    --form-field-height: 3.5rem;
    --inline-button-height: 2.75rem;
}

html {
	font-size: 14px; /* defines 1 rem*/
}


	/* ====== Dark Mode Start ========= */
	/* When dark mode is active */
	html.dark-mode {
		filter: invert(1) hue-rotate(180deg);
	}

		/* Fix images/videos/logos (so they don't look inverted) */
		html.dark-mode img,
		html.dark-mode video,
		html.dark-mode iframe,
		html.dark-mode picture,
		html.dark-mode svg {
			filter: invert(1) hue-rotate(180deg);
		}

	html.dark-mode {
		--fpcolor-list-highlight: #ccc; /* Example dark blue-gray tone */
		--fpcolor-1-highlight: #ccc;
	}

		

	html.dark-mode .FPsuite_logo-icon {
		transition: none;
	}

	html.dark-mode .nav_link.active,
	html.dark-mode .nav_link:hover {
		background-color: #ccc;
	}

	html.dark-mode .card,
	html.dark-mode .col-white {
		border: 1px solid rgba(85, 85, 85, 0.5);
		box-shadow: none;
	}

	html.dark-mode .container-RH {
		border: 1px solid rgba(85, 85, 85, 0.15);
		box-shadow: none;
	}

	html.dark-mode .menu_toggle {
		color: black
	}

		/* These elements will not be inverted */
		html .dark-mode .btn-card-fp,
		html.dark-mode a.btn.btn-card-fp,
		html.dark-mode .card-fp-name,
		html.dark-mode .card-fp-info,
		html.dark-mode .btn-primary,
		html.dark-mode a.btn.btn-primary,
		html.dark-mode .loonstrook-page,
		html.dark-mode .freepack-logo,
		html.dark-mode .footer-logo,
		html.dark-mode .footer
		{
			filter: invert(1) hue-rotate(180deg);
		}
			/* Reset footer logo to normal (no inversion) */
			html.dark-mode .footer .Freepack_logo-icon {
				filter: none;
			}

	/* Menu Show only in light mode - with higher specificity */
	html .dark-switch {
		display: inline;
	}

	html .light-switch {
		display: none;
	}

	/* Menu Show only in dark mode - with higher specificity */
	html.dark-mode .dark-switch {
		display: none;
	}

	html.dark-mode .light-switch {
		display: inline;
	}
		

/* ====== Dark Mode End ========= */


@media (max-width: 1366px) {
	html {
		font-size: 12px; /* reduces the base font size for smaller screens */
	}
}

@media (max-width: 1280px) {
	html {
		font-size: 11px; /* reduces the base font size for smaller screens */
	}
}


body {
	scroll-behavior: smooth;
	color: var(--app-color);
	position: relative;
	display: block;
	margin: var(--header-height) 0 0 0;
	padding-left: calc(var(--nav-width));
	font-family: var(--body-font) arial;
	font-size: var(--normal-font-size);
	transition: var(--transition);
	background: #fff;
	margin-bottom: var(--footer-height);
	-webkit-font-smoothing: antialiased; /* Webkit specific */
	-moz-osx-font-smoothing: grayscale; /* Webkit specific */
	
}

/* Tabulaire cijfers met lining (even breed en hoogte) */
.monospace-digits {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}

hr {
	border: none;
	border-top: 1px solid var(--fpcolor-1);
	opacity: 0.5;
	background: none;
}

.hr-header {
	border: none;
	border-top: 1px solid var(--fpcolor-1);
	opacity: 1 !important;
	background: none;
}

.hidden {
	display: none;
}

/* Change BUTTON style --------------------------------------------------------------- START */
.btn {
	font-size: var(--normal-font-size);
	height: 3rem;
	border-radius: var(--border-radius-button);
	padding-left: 15px;
	padding-right: 15px;
}

	.btn:hover {
		border: none;
	}

.btn-primary,
a.btn.btn-primary {
	--bs-btn-bg: var(--fpcolor-1);
	--bs-btn-border-color: var(--fpcolor-1);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--fpcolor-1-highlight);
	--bs-btn-hover-border-color: var(--fpcolor-1-highlight);
	--bs-btn-focus-shadow-rgb: 49, 132, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--fpcolor-1-highlight);
	--bs-btn-active-border-color: var(--fpcolor-1-highlight);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--fpcolor-1);
	--bs-btn-disabled-border-color: var(--fpcolor-1);
	border: none;
	text-decoration: none;
	justify-content: center;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	padding: 0.65rem 0.75rem;
	font-size: 1rem;
	border-radius: var(--border-radius-button);
	color: white;
}

	a.btn.btn-primary.inline,
	.btn.btn-primary.inline,
	.btn-outline-primary.inline,
	a.btn.btn-outline-primary.inline {
		height: var(--inline-button-height);

	}

.btn.btn-sm.btn-outline-primary.inline,
.btn-outline-primary.inline,
a.btn.btn-outline-primary.inline {
	color: var(--fpcolor-1);
}
button.btn.btn-sm.btn-outline-primary.inline:hover,
a.btn.btn-outline-primary.inline:hover {
	color: white;
	border: 1px solid var(--fpcolor-1);
}





.btn-outline-primary, a.btn.btn-outline-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	border-radius: var(--border-radius-button);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


	.btn-outline-primary:hover,
	a.btn.btn-outline-primary:hover {
		border: 1px solid var(--fpcolor-1);
	}
	

.btn-secondary:hover {
	background-color: #515B6B;
	color: white;
}

.btn-secondary:focus {
	background-color: #333f52;
	color: white;
}

.btn-warning {
	color: white;
}

	.btn-warning:hover {
		color: white;
	}

	.btn-warning:focus {
		color: white;
	}

.btn-inline,
.dropdown .btn-inline {
	background-color: #f6f6f6;
	border: 1px solid #ced4da;
	height: var(--inline-button-height);
}


.btn-inline-square {
	background-color: #f6f6f6;
	border: 1px solid #ced4da;
	height: var(--inline-button-height);
	width: var(--inline-button-height);
	display: flex;
	align-items: center;
	justify-content: center;
}


	.btn-inline-square:hover,
	.btn-inline-square:focus,
	.btn-inline:hover,
	.btn-inline:focus {
		background-color: white;
		border: 1px solid var(--fpcolor-1);
	}

button.btn-inline-square:focus,
button.btn-inline:focus {
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.btn:focus,
.btn:active
.btn:focus-visible {
	outline: none;
	box-shadow: none;
}

.btn i {
	font-size: 20px;
}



.btn-inline-form {
	background-color: #f6f6f6;
	border: 1px solid #ced4da;
	height: var(--form-field-height);
	}

	.btn-inline-form:hover,
	.btn-inline-form:focus {
		background-color: white;
		border: 1px solid var(--fpcolor-1);
	}

button.btn-inline-form:focus {
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}


.btn-check:checked + .btn, 
:not(.btn-check) + .btn:active {
	color: white;
	background-color: var(--fpcolor-1);
	border-color: var(--fpcolor-1);
}

	.btn-check:checked + .btn:hover,
	:not(.btn-check) + .btn:active:hover,
	.btn-check:hover + .btn {
		color: white;
		background-color: var(--fpcolor-1-highlight);
		border: 1px solid var(--fpcolor-1-highlight);
	}



.dropdown-menu {
	border-radius: var(--border-radius-box);
}

/* Change BUTTON style --------------------------------------------------------------- END */


/* Change switch button style */

.form-check-input, .form-check-input:checked {
	background-color: var(--fpcolor-1);
	border-color: var(--fpcolor-1);
}

	.form-check-input, .form-check-input:not(:checked) {
		background-color: var(--greybutton-color);
		border-color: var(--greybutton-border);
	}

.form-check-input {
	cursor: pointer;
}

/* _________________________ */


.h2, h2 {
	font-size: calc(var(--normal-font-size)*1.25);
}

.h4, h4 {
	font-size: calc(1rem + .1vw);
}

.h5, h5 {
	font-weight: 500;
	font-size: calc(var(--normal-font-size)*1.15);
	margin-bottom: 0.75rem;
	color: var( --fontcolor-1);
}

.h6, h6 {
	font-weight: 500;
	font-size: calc(var(--medium-font-size)*1.05)
}




/* LOGIN PAGE ---------------------------------------------------------------- START */

/* -------- create a panel overlay  -------- */
.container-fplogin {
	top: 0;
	left: 0;
	background: var(--greyscale-color-3);
	width: 100%;
	height: 100%;
	align-items: center; /* vertically center */
	padding-bottom: 60px;
	position: fixed;
	display: flex;
	float: left;
	z-index: 100
}
/* ----------------------------------------- */

.fplogin-box-left {
	position: relative;
	width: 450px;
	height: 600px;
	padding: 48px 60px 48px;
	background-color: #FFFFFF;
	border-radius: 30px 0px 0px 30px;
	box-shadow: 5px 5px 6px 0 rgba(0,16,34,0.13);
}

.fplogin-logo {
	position: relative;
	top: 0px;
	margin-bottom: 24px;
	height: 100px;
	width: 250px;
	display: flex;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

	.fplogin-logo > img {
		max-width: 250px;
		max-height: 100px;
		width: auto;
		height: auto;
		object-fit: contain;
	}

.fplogin-text {
	font-size: 20px;
	color: var(--fontcolor-1);
	font-weight: 500;
	margin-bottom: 32px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%; /* of een specifieke breedte */
}

	/* Deze regel past de schaal aan wanneer de inhoud overstroomt */
	.fplogin-text:hover {
		transform: scale(var(--scale, 1));
	}


.fplogin-input {
	margin-bottom: 36px;
}

.fplogin-option {
	align-items: center;
	margin-bottom: 36px;
	color: var(--fontcolor-2);
}

.fplogin-option-label {
	font-size: var(--small-font-size);
	padding-top: 3px;
}

.fplogin-version {
	font-size: var(--small-font-size);
	color: var(--fontcolor-2);
	margin-top: 36px;
}

.fplogin-box-right {
	position: relative;
	width: 450px;
	height: 600px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 0px 30px 30px 0px;
	box-shadow: 5px 5px 6px 0 rgba(0,16,34,0.13);
}

	.fplogin-box-right > img {
		height: 100%;
	}

@media screen and (max-width: 576px) {

	.fplogin-box-right {
		display: none;
	}

	.fplogin-box-left {
		border-radius: 30px 30px 30px 30px;
	}
}

.fp-validation-feedback {
	color: #dc3545;
	font-size: var(--small-font-size);
	position: absolute;
	margin-top: 5px;
	left: 28px;
}

	.fp-validation-feedback ul li {
		list-style: none; /* Ensure no bullets appear */
	}

input::-ms-reveal,
input::-ms-clear {
	display: none !important; /* Hide Edge browser password reveal icon */
}

/* LOGIN PAGE---------------------------------------------------------------- END */



/*MAIN CONTENT LAYOUT--------------------------------------------------------START*/

.container-content {
	padding-left: 1.75rem;
	padding-right: 1.25rem;
}

.page-header-row {
	height: 4.5rem;
	z-index: 9;
	position: relative;
}

.page-header-text {
	font-size: calc(var(--normal-font-size)*1.25);
	color: var(--fontcolor-1);
	font-weight: 400;

}

@media (max-width: 1200px) {
	.page-header-row {
		height: auto; /* allow height to adjust based on content */
		min-height: 4.5rem;
		
		margin-bottom: 1rem; /* add some spacing at bottom */
		overflow: visible; /* ensure content doesn't get cut off */
	}
}

.col-white {
	border-radius: var(--border-radius-box);
	background-color: #FFFFFF;
	box-shadow: 5px 5px 6px 0 rgba(0,16,34,0.13);
	padding: 20px 30px;
	margin-left: 0;
	float: left;
	margin-bottom: 15px;
	min-height: 10rem;
	z-index: 0;
	width: 100%;
	
}

.fix-height {
	height: 100vh;
	overflow-y: auto; /* Enables vertical scrolling */

}




/*MAIN CONTENT LAYOUT--------------------------------------------------------END*/
/*FORM ELEMENTS ----------------------------------------- START */
.form-control {
	/*display: block;*/
	width: 100%;
	font-size: var(--normal-font-size);
	font-weight: 400;
	line-height: 1.5;
	background-color: transparent;
	background-clip: padding-box;
	border: 1px solid;
	border-color: var(--greybutton-border);
	border-radius: var(--border-radius-button);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


	.form-control:focus {
		border-color: #66afe9;
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		background-color: white;
	}


	.form-control:disabled,
	.form-select:disabled,
	.form-floating .form-select:disabled {
		background-color: var(--greybutton-color);
		color: var(--fontcolor-2);
	}


	.form-control.no-right-border {
		border-right: none;
	}

		.form-floating .form-control:disabled ~ label,
		.form-floating .form-select:disabled ~ label {
			opacity: 0.5;
		}


	.form-floating .form-control.preview:disabled,
	.form-select.preview:disabled,
	.form-floating .form-select.preview:disabled,
	.form-control.preview:disabled {
		background-color: transparent;
		color: var(--fontcolor-1);
		border: 1px solid transparent;
	}

		.form-floating .form-control.preview:disabled ~ label,
		.form-floating .form-select.preview:disabled ~ label {
			opacity: 1;
		}

.form-select.preview:disabled {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none !important;
}


.switch-valign-center {
	height: var(--form-field-height);
	display: flex;
	align-items: center;	
}

.form-select {
	/*display: block;*/
	width: 100%;
	/*height: var(--form-field-height);*/
	font-size: var(--normal-font-size);
	font-weight: 400;
	line-height: 1.5;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 12px;
	border: 1px solid;
	border-radius: var(--border-radius-button);
	border-color: var(--greybutton-border);
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-floating .form-select {
	background-color: transparent;
}

	.form-select:focus,
	.form-floating .form-select:focus {
		border-color: #66afe9;
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		background-color: white;
	}

.form-select:disabled {
	/*background-color: #fafafa;*/
	background-color: var(--greyscale-color-3);
}


/* Target Firefox specifically */

@-moz-document url-prefix() {
	select.form-select option,
	.form-floating > select.form-select option {
		font-family: "Outfit", Segoe UI;
	}
}

.form-select-inline, .form-control-inline {
	height: var(--inline-button-height);
	display: inline-flex;
	margin: 5px 0;
}

	/* _________________________________________________ */
	/* _________________________________________________ */
	.input-group-btn {
		justify-content: center;
		background-color: var(--greybutton-color);
		border: 1px solid var(--greybutton-border);
		width: 44px;
		display: flex;
		align-items: center;
		border-top-right-radius: var(--border-radius-button) !important;
		border-bottom-right-radius: var(--border-radius-button) !important;
		font-size: 18px;
	}

		.input-group-btn:hover {
			background-color: var(--highlight-color);
			font-size: 19px;
		}

		.input-group-btn:focus {
			border-color: #66afe9;
			outline: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
			background-color: white;
		}



	.input-group > .form-select {
		border-top-right-radius: var(--border-radius-button) !important;
		border-bottom-right-radius: var(--border-radius-button) !important;
	}
	/* Form floating settings */
	.form-floating > label {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0.85rem 0.75rem 0.85rem;
		pointer-events: none;
		border: 1px solid transparent;
		transform-origin: 0 0;
		transition: opacity .1s ease-in-out,transform .1s ease-in-out;
		color: var(--fontcolor-2);
		background-color: transparent !important; /* Make label background fully transparent */
		font-weight: 400;
	}

	.form-floating > .form-control:focus ~ label,
	.form-floating > .form-control:not(:placeholder-shown) ~ label,
	.form-floating > .form-select ~ label {
		transform: scale(0.8) translateY(-0.5rem) translateX(0.15rem);
		color: var(--fontcolor-2);
	}
	/* Ensure there's no background on the form-floating label's pseudo-element when it is disabled */
	.form-floating > label::before, .form-floating > label::after {
		content: none !important;
	}



.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
	/*height: calc(var(--form-field-height) + calc(var(--bs-border-width)* 2));
	min-height: calc(var(--form-field-height) + calc(var(--bs-border-width)* 2));*/
	min-height: var(--form-field-height);
	max-height: var(--form-field-height);
	line-height: 1.25;
	padding-top: 1rem;
	padding-bottom: 0rem;
}

	.form-label {
		font-size: 0.8rem;
		color: var(--fontcolor-2);
	}

	.fp-formField-icon-button {
		height: var(--inline-button-height);
	}

		.fp-formField-icon-button:hover {
			background-color: var(--highlight-color);
			font-size: 19px;
		}

.fp-formField-icon-button.active {
	color: #558EFA;
}


/*.fp-icon-button-inField {*/
/*	height: var(--inline-button-height);*/
/*	background: transparent;*/
/*	border: none;*/
/*	border-top: 1px solid var(--greybutton-border);*/
/*	border-bottom: 1px solid var(--greybutton-border);*/
/*}*/

.fp-icon-button-inField {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	margin-right: 0.75rem;
	height: var(--inline-button-height);
	background: transparent;
	border: none;
}


.fp-dropdown-filter {
	width: 100%;
	border-radius: var(--border-radius-button);
}
	/*FORM ELEMENTS ----------------------------------------- END */
	/* CARD ELEMENTS - WITH COLORED HEADER------------------- START */

.card {
	border-radius: var(--border-radius-box);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--app-color);
	word-wrap: break-word;
	background-clip: border-box;
	border: none;
	box-shadow: 5px 5px 6px 0 rgba(0,16,34,0.13);
	margin-left: 0;
	margin-bottom: 15px;
	z-index: 0;
}
.card-fp {	
	height: calc(100vh - var(--header-height) - var(--footer-height) - var(--h-submenu-height) - 2.75rem);
}

.card-fp-insubmenu {
	height: calc(100vh - var(--header-height) - var(--footer-height) - var(--h-submenu-height) - 6.75rem);
}


	.card-fp-header {
		margin: 0;
		min-height: 5rem;
		color: #fff;
		padding: 10px 30px; /* to-bottom, left-right*/
		border-bottom: none;
		border-radius: var(--border-radius-box) var(--border-radius-box);
	}


.card-fp-body {
	padding: 15px 30px;
	min-height: 15rem;	
	display: flex;
	flex-direction: column;
	overflow: hidden;
}



		.card-fp-body .nav-underline {
			flex-shrink: 0;
		}

		.card-fp-body .tab-content {
			flex-grow: 1;
			overflow-y: auto;
			min-height: 0; /* This is important for Firefox */
		}




.card-fp-header:first-child {
	border-radius: var(--border-radius-box) var(--border-radius-box) 0 0 ;
}

	.card-fp-photocircle {
		height: 48px;
		background-color: rgba(255, 255, 255, 1);
		border: 1px solid #fff;
	}


	.card-fp-logobox {
		height: 60px;
		background-color: white;
		border-radius: var(--border-radius-button);
	}



	.card-fp-name {
		font-size: calc(var(--normal-font-size)*1.25);
		font-weight: 500;
	}
.card-fp-info {
	font-size: calc(var(--medium-font-size)*1);
	font-weight: 300;
}


	.btn-card-fp,
	a.btn.btn-card-fp {
		background-color: none;
		border: 1px solid #fff;
		color: #fff;
		height: var(--inline-button-height);
	}

	.btn.btn-card-fp > input {
		background-color: transparent;
		border: none;
		color: #fff;
	}

	.btn-card-fp:hover,
	.btn-card-fp:focus {
		background-color: rgba(238, 244, 254, 0.25);
		border: 1px solid #fff;
		color: #fff;
	}
	/* Tab title navigation style */
	/* Basisstijl voor alle nav-links */

	.tab-menu {
		border-bottom: 1px solid;
		border-bottom-color: var(--fpcolor-1);
		box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
		padding-bottom: 0rem; /* Value to control the space between tabs and the line */
		min-width: 100%; /* Ensures it's at least 100% wide */
		width: max-content;
	}

.nav-link {
	position: relative;
}

	.nav-underline .nav-link {
		padding-right: 0;
		padding-left: 0;
		border-bottom: var(--bs-nav-underline-border-width) solid transparent;
		padding-bottom: 0.75rem;
	}
		/* Stijl voor actieve tab en zichtbare dropdown  */
		.nav-underline .nav-link.active,
		.nav-underline .show > .nav-link {
			font-weight: 500;
			color: var(--fontcolor-1);
			border-bottom-color: var(--fpcolor-1);
			border-bottom-width: 3px;
			border-bottom-style: solid;
		}
			/* Optioneel: specifiek hover-effect voor actieve tab */
			.nav-underline .nav-link.active:hover,
			.nav-underline .show > .nav-link:hover {
				border-bottom-color: var(--fpcolor-1); /* Pas aan naar de gewenste hover-kleur voor actieve tabs */
			}

	.nav-link:not(.active) {
		color: inherit !important;
		background-color: transparent !important;
		border-color: transparent !important;
		border-bottom-width: 3px; /* Pas aan naar de gewenste dikte */
	}
	/* Hover-effect voor alle nav-links */
	.nav-underline .nav-link:hover {
		color: var(--fontcolor-1); /* Pas aan naar de gewenste hover-kleur */
		border-bottom-color: var(--fpcolor-1) !important; /* Pas aan naar de gewenste hover-kleur */
		border-bottom-width: 3px; /* Pas aan naar de gewenste dikte */
		border-bottom-style: solid;
	}

.nav-underline .nav-link:focus {
	background-color: transparent;
	outline: none;
	color: var(--fontcolor-1); /* Pas aan naar de gewenste hover-kleur */
	border-bottom-color: var(--fpcolor-1) !important; /* Pas aan naar de gewenste hover-kleur */
	border-bottom-width: 3px; /* Pas aan naar de gewenste dikte */
	border-bottom-style: solid;
}


	/* Settings for scrollable horizontal menu*/
	.nav-container {
		position: relative;
		width: 100%;
		min-height: max-content;
	}

.scrollable-menu {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
	width: 100%;
	/*font-size: var(--medium-font-size);*/
}


/* Firefox-specific styling */
@-moz-document url-prefix() {

	.nav-container {
		position: relative;
		width: 100%;
		min-height: 3.25rem;
	}

	.scrollable-menu {
		scrollbar-width: thin;
		scrollbar-color: #d6e4fd #f1f1f1;
		top: 5px;
		/* Adjust this value as needed */
		/* Or use margin-top if preferred */
		/* margin-top: 20px; */
	}
}

	/* Webkit browsers (Chrome, Safari, Edge) */
	.scrollable-menu::-webkit-scrollbar {
		height: 5px;
		display: block;
	}

	.scrollable-menu::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 2px;
	}

	.scrollable-menu::-webkit-scrollbar-thumb {
		background: #d6e4fd;
		border-radius: 2px;
	}

		.scrollable-menu::-webkit-scrollbar-thumb:hover {
			background: #bed5fb;
		}
	/* _________________________ */
	/* Year navigation in Periodes */
	.active-year {
		padding-bottom: 0.5rem;
	}

	.fp-active-year::after {
		content: ""; /* show border lines underneath */
		display: block;
		width: 100%;
		border-bottom: 2px solid #0d6efd; /* Bootstrap primary color */
		position: absolute;
		bottom: 0;
		left: 0;
	}
	/* _________________________ */
	/* CARD ELEMENTS - WITH COLORED HEADER------------------- END */
	/* TABLE SETTINGS-----------------------------------------START */
	/* Table settings */

	.table {
		--bs-table-hover-bg: var(--fpcolor-list-highlight);
	}

	.table-pagination {
		padding-top: 20px;
		padding-left: 10px;
	}

	.page-link {
		font-size: var(--normal-font-size);
	}

	th {
		font-family: outfit; /* Use the base font */
		font-weight: 500; /* Use Medium variant */
	}

thead {
	border-bottom: 1px solid var(--fpcolor-1);
}

		thead tr th {
			/*height: 50px;*/
		}


	.table-header-top {
		vertical-align: bottom;
		text-align: center;
		border-right: 1px solid #D3D3D3;
	}

	.table-header-divider {
		border-right: 1px solid #D3D3D3;
	}


	.table tr td {
		padding-right: 1rem !important;
		vertical-align: middle;
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: calc(var(--normal-font-size)*0.9);
	}


	.sticky-row {
		/*	background-color: #f6f6f6 !important; */
		background-color: #fff !important;
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 0px !important;
		box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.25);
		z-index: 7;
	}

	.sticky-first-col {
		position: -webkit-sticky;
		position: sticky;
		left: 0px;
		/*	background-color: #f6f6f6 !important; */
	}

	th.sticky-first-col {
		vertical-align: middle;
		justify-content: center;
	}

	td.sticky-first-col {
		justify-content: center;
		background-color: white;
		z-index: 5;
		width: 2rem;
	}

	.sticky-second-col {
		position: -webkit-sticky;
		position: sticky;
		left: 2rem;
		z-index: 4;
	}


	.sticky-right-col {
		position: -webkit-sticky;
		position: sticky;
		right: 0px;
		/*	background-color: #f6f6f6 !important; */
	}

	td.sticky-right-col {
		text-align: right;
	}

	.list-count {
		font-size: var(--medium-font-size)
	}
	/* Sortering button animation */
	.bx-sort-alt-2 {
		transition: transform 0.3s ease;
	}

		.bx-sort-alt-2.bx-rotate-180 {
			transform: rotate(180deg);
		}


.sticky-header-container {
	border-bottom: 1px solid var(--fpcolor-1);
	height: 3.5rem;
}

	/*---------- Table row selected (active) setting--------------------------------------*/
	/* Active */
	tbody tr.active, tbody tr.active td, tbody tr.active a, tbody tr.active:hover td {
		background-color: var(--fpcolor-list-highlight);
		color: var(--fontcolor-1);
	}
		/* Active & Hover */
		tr.active:hover,
		tbody tr.active:hover a,
		tbody tr.active:hover td {
			background-color: var(--fpcolor-list-highlight);
			color: var(--fontcolor-1);
		}

tbody tr.inactive td {
	color: var(--fontcolor-3);
}
tbody tr.inactive:hover td {
	color: var(--fontcolor-1);
}

tbody tr td.inactive {
	color: var(--fontcolor-3);
	background-color: var(--greyscale-color-1);
}

	/*---------------------------------------------------------------------------------*/
	/* TABLE SETTINGS-----------------------------------------END */
	/* DASHBOARD DATA VISUALISATION ----------------------- START */

	.chart-container {
		margin-top: 50px;
	}

	.pie-cart-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.pie-cart-text-l1 {
		font-size: 2.5rem;
		color: var(--fpcolor-1);
	}

	.pie-cart-text-l2 {
		font-size: 1.2rem;
	}

	.legend-bar {
		list-style: none;
		padding: 0;
	}

	.legend-pie {
		list-style: none;
		padding: 0;
	}

	.legend-item {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.legend-circle {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.legend-bar-item {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.data-viz-text {
		font-size: 3rem;
		color: var(--fpcolor-1);
	}

	.data-viz-subtext {
		font-size: 1.2rem;
	}
	/* DASHBOARD DATA VISUALISATION ----------------------- END */
	/* DRAG & DROP */

	.drop-area {
		width: 100%;
		height: 200px;
		border: 1px dashed #4a90e2;
		border-radius: var(--bs-modalFP-border-radius);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		cursor: pointer;
		background-color: var(--fpcolor-list-highlight);
		padding: 20px;
	}

		.drop-area:hover, .drop-area.dragover {
			background-color: #d9e9ff;
			border-color: #3a7bd5;
		}

	.import-icon {
		font-size: 2.25rem;
		margin-bottom: 10px;
		color: var(--fpcolor-1);
	}

		.import-icon.error {
			color: #dc3545;
		}

	.file-info {
		margin-top: 0px;
		font-size: var(--medium-font-size);
	}

	.progress-circle {
		position: relative;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: #e6e6e6;
	}

	.progress-circle-value {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #e6e6e6;
	}

	.progress-percentage {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 18px;
		font-weight: bold;
	}

	.hidden,
	.hide {
		display: none;
	}
	/* ---- WERKBRIEVEN IMPORT & OVERZICHT------------ */
	.table-container {
		width: 100%; /* Zorg ervoor dat de container de volledige beschikbare breedte gebruikt */
		overflow-x: auto; /* Horizontale scrollbar indien nodig */
		margin: 15px 0;
		padding: 0;
	}
	/*----------WB-import------------*/

	.WB-import {
		width: 100%; /* Tabel neemt volledige breedte van de container */
		min-width: 800px; /* Minimale breedte om te voorkomen dat de tabel te smal wordt */
		table-layout: fixed;
		border-collapse: separate;
		border-spacing: 0px;
		background-color: white;
		position: relative; /* Voeg dit toe */
		overflow-x: auto;
	}

		.WB-import tr {
			display: flex;
			flex-wrap: nowrap;
		}

		.WB-import td {
			padding: 10px;
			vertical-align: top;
			box-sizing: border-box;
		}
	/*-----------------------------------*/

	.WB-import-row {
		border-bottom: 1px solid var(--greybutton-border);
		min-width: max-content; /* To fix stability of the sticky position  */
		position: relative;
		display: flex;
		align-items: stretch;
	}
	/* Eerste kolom (info-cell) */
	.checkbox-cell {
		margin: 6px 0;
		background: white;
	}


	.info-cell {
		flex: 0 0 16%;
		display: flex;
		flex-direction: column;
		margin: 6px 0;
		background: white;
	}

		.info-cell .names {
			display: flex;
			flex-direction: column;
			width: 100%;
			line-height: 1.5;
		}

	.data-label {
		color: var(--fontcolor-2);
		font-weight: 400;
		font-size: 0.8rem;
	}
	/* Tweede kolom (week-cell) */
	.week-cell {
		flex: 0 0 10%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		margin: 6px 0;
		background: white;
		padding-right: 20px;
	}

		.week-cell div:first-child {
			align-self: flex-end;
		}

		.week-cell .total-hours,
		.dag-cell .total-hours,
		.week-cell-content .total-hours {
			color: var(--fpcolor-1);
			font-weight: 500;
			margin-top: auto;
			align-self: flex-end;
		}

	.week-cell-content {
		position: absolute;
		bottom: 15px;
		right: 10px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}



	.WB-import .info-cell.sticky {
		position: sticky;
		left: 0;
		z-index: 3;
		width: 160px;
		background-color: #fff;
		flex-shrink: 0;
	}

	.WB-import .week-cell.sticky {
		position: sticky;
		left: 175px; /* Match the width of the info-cell */
		z-index: 2;
		width: 105px;
		background-color: #fff;
		flex-shrink: 0;
	}
	/* Voor kleinere schermen */
	@media (max-width: 1400px) {
		.WB-import .info-cell.sticky {
			width: 165px;
		}

		.WB-import .week-cell.sticky {
			left: 163px; /* Match the new width of the info-cell */
			width: 125px;
		}
	}
	/* Stickiness oplossing voor kleine schermen */
	@media (max-width: 576px) {
		.WB-import .info-cell.sticky {
			width: 160px
		}

		.WB-import .week-cell.sticky {
			left: 157px;
			width: 95px;
			padding-right: 20px;
		}

		/* Forceer de browser om de sticky positionering opnieuw te berekenen */
		.WB-import {
			position: sticky;
		}
	}
	/* Overige kolommen (dag-cell) */
	.dag-cell {
		flex: 1; /* Verdeelt de resterende ruimte gelijkmatig */
		min-width: 7rem;
		background-color: var(--fpcolor-list-highlight);
		border-radius: 6px;
		margin: 6px 0;
		margin-right: 6px;
		display: flex;
		flex-direction: column;
		border-right: 1px solid #ddd;
	}

		.dag-cell small {
			font-weight: 500;
			margin-top: 2px;
		}

		.dag-cell .time,
		.dag-cell .tarief,
		.dag-cell .declaratie {
			font-size: var(--medium-font-size);
			margin-bottom: 6px;
			margin-top: 6px;
		}

		.dag-cell .tarief {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			line-height: 1.5;
		}



	.tarief small {
		width: 50%;
		text-align: left;
		margin-bottom: 2px;
	}

		.tarief small:nth-child(even) {
			text-align: right;
		}
	/* declaratie styling */

	.dag-cell .declaratie {
		display: flex;
		flex-direction: column;
		width: 100%;
		line-height: 1.5;
	}

		.dag-cell .declaratie small {
			text-align: left;
		}

		.dag-cell .declaratie span {
			text-align: Left;
		}

		.dag-cell .declaratie .data-label {
			margin-top: 10px;
		}
	/* ------------------------------------------- */
	/*-------------Import Geshiedenis--------------*/

	.import-geschiedenis {
		width: 100%;
		border-collapse: collapse;
	}

	.import-data {
		padding: 15px;
		border-bottom: 1px solid #e5e7eb;
	}

	.file-info {
		display: flex;
		justify-content: space-between;
		align-items: center
	}

	.file-name {
		font-weight: 500;
		font-size: 16px;
		flex-grow: 1;
	}

	.import-status {
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 4px;
		margin-left: auto;
		white-space: nowrap;
	}
	/*
	.import-status.success {
		background-color: #e6fffa;
		color: #047857;
	}

	.import-status.error {
		background-color: #fef2f2;
		color: #dc2626;
	}
*/

	.import-foutmelding ul {
		font-size: var(--medium-font-size);
		margin-top: 20px
	}


	.status-success-icon {
		font-size: 20px;
		color: #28a745;
	}

	.status-error-icon {
		font-size: 20px;
		color: #dc3545;
	}

	.import-details {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.import-count {
		margin-top: 3px;
		font-size: 14px;
	}

	.import-date {
		font-size: 12px;
		color: var(--fontcolor-2);
	}

	.full-height-card {
		height: calc(100vh - 100px); /* Verander 100px naar de hoogte van je header/footer */
		max-height: calc(100vh - 285px);
		overflow-y: auto;
	}
	/*--------------------- PROGRESS CIRCLE (currently deactivated)-----------------------------------*/
	#progressCircleContainer {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 0 auto;
		padding-bottom: 30px; /* Ruimte toevoegen voor de tekst */
	}

	.progress-circle {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #E0E0E0;
	}

		.progress-circle::before {
			content: '';
			position: absolute;
			top: 7px; /* Aangepast voor betere centrering en dikkere ring */
			left: 7px; /* Aangepast voor betere centrering en dikkere ring */
			right: 7px; /* Aangepast voor betere centrering en dikkere ring */
			bottom: 7px; /* Aangepast voor betere centrering en dikkere ring */
			border-radius: 50%;
			background: white;
		}

	.progress-circle-fill {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		clip: rect(0px, 100px, 100px, 50px); /* Aangepast aan nieuwe grootte */
		background: #558EFA;
	}

	.progress-percentage {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 16px;
		font-weight: bold;
	}

	.progress-text {
		position: absolute;
		bottom: -30px;
		left: 50%;
		transform: translateX(-50%);
		width: 150px;
		text-align: center;
		white-space: nowrap;
		font-size: 16px;
	}
	/*--------------------- PROGRESS CIRCLE --------------------------*/
	/* -------------- WEEK SELECTOR -------------- */
	.week-selector {
		border: 1px solid var(--greybutton-border);
		display: inline-flex;
		align-items: center;
		height: var(--inline-button-height);
		border-radius: var(--border-radius-button);
		position: relative;
		padding: 10px;
	}

	#weekNumber {
		font-size: 18px;
		color: var(--fpcolor-1);
		font-weight: 500
	}

	.week-selector .dropdown-toggle {
		color: var(--fontcolor-1);
		white-space: nowrap;
	}

	.week-selector .dropdown-menu {
		position: absolute;
		top: 100%;
		transform: none; /* Verwijder de transform */
		max-height: 325px;
		width: auto;
		min-width: calc(100% - 70px); /* Pas aan op basis van de breedte van chevron knoppen */
		border-radius: var(--border-radius-button) 0 0 var(--border-radius-button);
		overflow-y: auto;
		margin-top: 2px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.week-selector .btn-link,
	.week-selector .dropdown-toggle {
		text-decoration: none;
		padding: 0.375rem 0.75rem;
		margin: 0;
		border: none;
		background: none;
		transition: background-color 0.2s ease;
		height: 100%;
		display: flex;
		align-items: center;
	}

	a.btn.btn-link {
		color: var(--fpcolor-1);
	}

	.week-selector .dropdown-toggle {
		flex-grow: 1; /* Sta toe dat de dropdown toggle groeit */
		justify-content: center; /* Centreer de inhoud */
	}

	.week-selector .dropdown-week {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

		.week-selector .dropdown-week:hover,
		.week-selector .dropdown-week:focus {
			background-color: var(--fpcolor-list-highlight);
		}

	.dropdown-week {
		display: inline-block; /* Changed from flex to inline-block */
		width: 100%; /* Ensure it takes full width of the dropdown */
		padding-left: 15px;
	}

		.dropdown-week small {
			font-size: 0.8em;
			color: #6c757d;
			margin-left: 15px;
		}


	#today {
		margin-left: 0.5rem;
		height: var(--inline-button-height);
	}
	/* ---------------------------------------------------------------- */
	/* ----------------------WERKBRIEF STATUS CELL--------------------- */
	.wb-status {
		flex: 0 0 auto; /* Pas dit aan naar de gewenste breedte */
		min-width: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 6px 0;
	}

	.status-indicator {
		display: flex;
		align-items: center;
		margin-top: auto; /* Dit duwt de indicator naar de onderkant */
	}

		.status-indicator span {
			font-size: var(--medium-font-size);
			font-weight: 300;
		}

	.overzicht-datum {
		font-weight: 400;
		font-size: var(--small-font-size);
		margin-bottom: 5px;
	}



	/*--------------------------------------------------------------*/

	.wb-hours-card {
		height: 100%;
	}

	.wb-hours-card-body {
		padding: 0.75rem;
	}

	.wb-hours-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px; /* Pas dit aan naar wens */
	}

	.wb-hours-day-title,
	.wb-hours-date {
		margin: 0; /* Verwijder standaard marges */
	}

	.wb-hours-day-title {
		font-size: 1rem;
	}

	.wb-hours-date {
		padding-top: 3px;
		font-size: var(--medium-font-size)
	}

	.wb-hours-time {
		/* Stijlen voor de tijdselectie container */
	}

	.wb-hours-input {
		font-size: var(--small-font-size);
	}

	.wb-hours-total {
		/*color: var(--fpcolor-1);*/
		font-weight: 500;
		font-size: 1.1rem;
	}


	.btn-time-entry {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid transparent;
		margin-left: 3px;
		background-color: transparent;
		color: var(--fontcolor-1);
		font-size: 1.2rem;
		height: 2.5rem;
	}

	button.btn-time-entry:hover,
	button.btn-time-entry:focus {
		border: 1px solid var(--fpcolor-1);
		background: transparent;
	}

	button.btn-time-entry:focus {
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
	}

	.uren-boks {
	}
	/* WERKBRIEF FORM PAGE - Concept 4*/
	/* Basisstijlen */
	.scrollable-container {
		width: 100%;
		overflow-x: auto;
		position: relative;
	}

	.scrollable-content {
		display: flex;
		flex-direction: column;
		min-width: 100%;
	}

	.scrollable-row {
		display: flex;
		width: 100%;
	}
	/* Vaste kolom stijlen */
.col-fixed {
	position: sticky;
	left: 0;
	z-index: 5;
	background-color: #fff;
	width: 175px;
	/*box-shadow: 1px 0 5px rgba(0,0,0,0.1);*/
	flex: 0 0 auto;
	background-clip: padding-box;
	border-radius: var(--border-radius-button);
}
	/* Dag kolom stijlen */
	.col-day {
		flex: 1;
		min-width: 160px; /* Changed from 175px to 160px */
		max-width: 160px; /* Added max-width to limit the size */
		padding: 0 5px;
	}
	/* Responsieve stijlen */
	@media (max-width: 1600px) {
		.scrollable-container {
			overflow-x: scroll;
		}

		.scrollable-content {
			width: max-content;
			min-width: calc(160px * 7 + 160px); /* Adjusted for new column width */
		}

		.col-day {
			flex: 0 0 160px; /* Fixed width for smaller screens */
		}
	}

	@media (min-width: 1601px) {
		.scrollable-container {
			overflow-x: visible;
		}

		.scrollable-content {
			width: 100%;
		}

		.col-day {
			flex: 1;
			max-width: none; /* Allow columns to grow on larger screens */
		}
	}

.day-content {
	display: flex;
	flex-direction: column;
	/*background-color: rgba(238, 244, 254, 0.25);*/
	background-color: white;
	border-radius: var(--border-radius-button);
}

		.day-content.white {
			background-color: white;
		}

		.day-content.soft {
			background-color: white;
		}

	.day-header {
		text-align: left;
	}

		.day-header span {
			font-size: var(--medium-font-size);
			font-weight: 600;
			margin-bottom: 0px;
		}

		.day-header small {
			font-size: var(--small-font-size);
			font-weight: 500;
		}

	.time-input-group {
		display: flex;
		width: 100%;
	}

	.time-field {
		flex: 1;
		min-width: 0;
		width: 4.25rem;
	}

		.time-field small {
			display: block;
			margin-bottom: 2px;
		}

		.time-field input[type="time"] {
			width: 100%;
			border-radius: 0;
			padding: 0.25rem 0.5rem;
		}

		.time-field.van input[type="time"] {
			border-top-left-radius: var(--border-radius-button);
			border-bottom-left-radius: var(--border-radius-button);
		}

		.time-field.tot input[type="time"] {
			border-top-right-radius: var(--border-radius-button);
			border-bottom-right-radius: var(--border-radius-button);
			border-left: none;
		}

		.time-field input[type="time"]::-webkit-calendar-picker-indicator {
			font-size: 10px;
			padding: 0;
		}

	.time-input-group .time-field.van .form-control,
	.time-input-group .time-field.tot .form-control {
		padding-left: 0.25em;
		padding-right: 0.25em;
		width: 100%;
		text-align: center;
	}

	.day-content .form-control {
		font-size: var(--medium-font-size)
	}
	/* Omschrijving Cell in Werkbrieven-4 */
	[class$="-oms-bks"] {
		position: relative;
		height: 100%;
		padding: 0.75rem;
		min-width: 7.5rem;
	}

	.omschrijving {
		font-weight: 600;
	}

	.omschrijving-details {
		padding-top: 0.1rem;
		font-size: var(--small-font-size);
		line-height: 1.25;
	}

	.vantot-oms-bks {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		padding-top: var(--omschrijving-top, 4.5rem);
	}

		.vantot-oms-bks .omschrijving,
		.vantot-oms-bks .omschrijving-details {
			position: absolute;
		}

		.vantot-oms-bks .omschrijving {
			top: var(--omschrijving-top, 4.55rem);
		}

		.vantot-oms-bks .omschrijving-details {
			top: calc(var(--omschrijving-top, 4.5rem) + 1.5rem);
		}

		.vantot-oms-bks .ontrafel-controller {
			position: absolute;
			bottom: 10px;
			left: 10px;
			width: 100%;
		}

			.vantot-oms-bks .ontrafel-controller .btn {
				font-size: var(--medium-font-size);
			}
	/* Time entries */
	.time-entries {
		overflow-y: auto;
	}

	.time-entry-controls {
		display: flex;
		justify-content: flex-end;
	}

		.time-entry-controls button {
			padding: 2px 5px;
			font-size: 1.3rem;
		}

	.remove-time-entry {
		display: none;
	}
	/* Form uren normal */
	.day-content .form-group {
		margin-bottom: 0;
	}

	.day-content .form-control {
		text-align: right;
	}
	/* Hide number input arrows */
	.day-content input[type=number]::-webkit-inner-spin-button,
	.day-content input[type=number]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.day-content input[type=number] {
		-moz-appearance: textfield;
	}
	/* Hide time input arrows */
	input[type="time"]::-webkit-calendar-picker-indicator {
		display: none;
	}
	/*------------------------------------	*/
	/* -------------------- 404 / Error page ------------------------ */

	.container-er404 {
		top: 0;
		left: 0;
		background: var(--greyscale-color-3);
		width: 100%;
		height: 100%;
		position: fixed;
		display: flex;
		justify-content: center; /* horizontally center */
		align-items: center; /* vertically center */
		z-index: 100;
	}

.col-white-er404 {
	border-radius: 30px;
	background-color: #FFFFFF;
	box-shadow: 5px 5px 6px 0 rgba(0,16,34,0.13);
	padding: 60px 60px;
	float: left;
	width: 100%;
	min-height: 10rem;
	z-index: 0;
	max-width: 600px; /* Set max width on large screens */
}

	.content-er404 {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center; /* This centers all text content */
	}

	.logo-er404 {
		width: 70px;
		height: 70px;
		margin-bottom: 30px;
	}

	.title-er404 {
		font-size: 75px;
		color: var(--fontcolor-1);
		font-weight: 600;
		margin-bottom: 0;
	}

	.subtitle-er404 {
		font-size: 25px;
		margin-top: -15px; /* Voeg een negatieve bovenmarge toe */
		color: var(--fontcolor-1);
		margin-bottom: 75px;
		font-weight: 600;
	}

	.contact-info-er404 {
		font-size: var(--medium-font-size);
	}

		.contact-info-er404 strong {
			font-weight: 700;
		}

		.contact-info-er404 span {
			font-weight: 700;
			font-size: var(--medium-font-size);
		}
	/* ------------------------------------------- */
	
	.WB-overzicht {
		width: 100%;
		overflow-x: auto;
		position: relative;
	}

	.werkbrief-row {
		display: flex;
		align-items: stretch;
		min-height: 100px;
		min-width: max-content;
	}

	.sticky-col {
		position: sticky;
		background-color: #fff;
		z-index: 1;
		padding: 8px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.col1 {
		left: 0;
		width: 2rem;
		flex-shrink: 0;
	}

	.col2 {
		left: 2rem;
		width: 9rem;
		flex-shrink: 0;
	}

	.col3 {
		left: 11rem;
		width: 5rem;
		flex-shrink: 0;
	}

	.colR {
		right: 0;
		width: 7rem;
		flex-shrink: 0;
	}

	.dagen-container {
		display: flex;
		flex-grow: 1;
		min-width: 700px; /* Minimale breedte voor de dagen-container */
	}

	.WB-overzicht .dag-cell {
		flex: 1;
		min-width: 6rem;
		padding: 8px;
		border-right: 1px solid #ddd;
		display: flex;
		flex-direction: column;
	}

	.checkbox-wrapper {
		height: 100%;
		display: flex;
		align-items: flex-start;
	}

	.WB-overzicht .names,
	.WB-overzicht .week-cell-content {
		display: flex;
		flex-direction: column;
	}

	.WB-overzicht .status-indicator span {
		font-size: var(--small-font-size);
		font-weight: 300;
	}
	/* Responsieve aanpassingen */
	@media (max-width: 1200px) {
		.col3 {
			box-shadow: 5px 0 10px -5px rgba(0,0,0,0.1);
		}

		.WB-overzicht .status-indicator span {
			display: none;
		}

		.colR { /* Fix the size & position of right column in small screen */
			width: 3rem;
			right: -1px;
		}
	}
	/* Optioneel: verberg de scrollbar op grote schermen */
	@media (min-width: 1201px) {
		.WB-overzicht {
			overflow-x: hidden;
		}

		.col3 {
			box-shadow: none;
		}
	}
	/* Custom form floating */
	/* Aangepast gedrag voor .fixLabel klasse - This to make form floating label always stay on top of the field even if there's no data inside*/
	.form-floating.fixLabel > label {
		transform: scale(0.8) translateY(-0.5rem) translateX(0.15rem);
		color: var(--fontcolor-2);
	}
	/* Zorg ervoor dat het label altijd zichtbaar blijft */
	.form-floating.fixLabel > .form-control::placeholder {
		color: transparent;
	}
	/* Optioneel: pas de padding van het invoerveld aan */
	.form-floating.fixLabel > .form-control {
		padding-top: 1.625rem;
		padding-bottom: 0.625rem;
	}
	/* UZK formulier */

	.avatar-container {
		position: relative;
		display: inline-block;
		margin-top: 8px
	}

	.form-fp-photocircle {
		height: 70px;
		width: 70px;
		object-fit: cover;
		display: block;
		justify-content: center;
		/*border: 1px solid var(--greybutton-border);*/
		/* box-shadow: 0 2px 4px rgba(0,0,0,0.2);*/
	}

	.btn.btn-change-photo {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: #007bff;
		color: white;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid white;
		padding: 0;
		transform: translate(10%, 10%);
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

		.btn.btn-change-photo:hover,
		.btn.btn-change-photo:active,
		.btn.btn-change-photo:focus {
			background-color: #0056b3;
			color: white;
			border: 2px solid white;
		}

	.btn-change-photo i {
		line-height: 1;
	}

	s

	.btn.btn-change-photo.hide {
		display: none;
	}

	.form-control.user-id {
		font-size: var(--medium-font-size);
		font-weight: 400;
		height: 2rem;
		max-width: 7rem;
	}

	.form-control.form-id {
		font-size: var(--medium-font-size);
		font-weight: 400;
		height: 2rem;
		max-width: 7rem;
	}

	.tijd-icon-card img {
		height: var(--inline-button-height);
		border: 1px solid white;
		border-radius: var(--border-radius-button);
		width: auto;
		margin-right: 10px;
	}
	/* ICON BOXES */

	.icon-box-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 20px;
		padding-bottom: 20px;
		line-height: 1;
	}

	.icon-box {
		width: 100px;
		height: 100px;
		background-color: #F8F8F8;
		border-radius: 10px;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px;
		padding: 20px;
		text-align: center;
	}

		.icon-box:hover,
		.icon-box:focus {
			background-color: white;
			/*transform: translateY(-1px);*/
			border: 1px solid var(--fpcolor-1);
		}


		.icon-box i {
			font-size: 25px;
			margin-bottom: 15px;
		}

		.icon-box span {
			font-size: var(--medium-font-size);
			font-weight: 500;
		}


	.inTable-button .bx {
		transition: transform 0.2s ease;
	}

	.inTable-button:hover .bx {
		transform: scale(1.1);
		color: var(--fpcolor-1)
	}

	.inTable-button.download {
		font-size: 1.25rem;
	}

	.loonperiode-txt {
		font-size: var(--normal-font-size);
		font-weight: 500;
		color: var(--fontcolor-1)
	}

	.loonperiode-datum {
		font-size: var(--small-font-size);
		font-weight: 400;
	}



	#deleteAccountContent p {
		font-size: var(--medium-font-size);
	}
	/*ONTRAFEL*/
	/* Input with suffix styles */

	.input-with-suffix {
		position: relative;
	}



	.suffix-label {
		position: absolute;
		right: 0.75rem; /* Adjust this value to position the suffix */
		top: 65%;
		transform: translateY(-50%);
		color: #6c757d;
		pointer-events: none;
		z-index: 3;
	}
	/* Form floating styles */


	.form-floating.input-with-suffix > .form-control {
		padding-right: 2.5rem; /* Match the padding-right of the input */
	}

	.form-floating.input-with-suffix > label {
		padding-right: 2.5rem; /* Match the padding-right of the input */
	}
	/* Layout styles */
	.ontrafel-row-layout {
		display: flex;
		width: 100%;
	}

	.ontrafel-col-fixed {
		width: 150px;
		flex: 0 0 auto;
		position: sticky;
		left: 0;
		z-index: 10;
		background-color: #fff;
		box-shadow: 1px 0 5px rgba(0,0,0,0.1);
		background-clip: padding-box;
		border-radius: var(--border-radius-button);
		margin-right: 10px;
	}



	.ontrafel-col-day {
		width: calc((100% - 150px) / 7);
		flex: 0 0 auto;
	}

	.ontrafel-row-layout:first-child .ontrafel-col-flexible {
		width: calc(100% - 200px);
	}
	/* Overwerk row styles */
	.overwerk-row {
		display: flex;
		width: 100%;
	}

	.col-overwerk {
		flex: 1;
		min-width: 0;
	}

	.overwerk-content {
		width: 100%;
	}
	/* Time entry styles */
	.ontrafel-col-day .time-entry {
		width: 100%;
	}

	.ontrafel-col-day .time-input-group {
		flex: 1;
		min-width: 0;
		margin-right: 5px;
	}

	.ontrafel-col-day .time-field {
		width: 70%;
		min-width: 0;
	}

	.ontrafel-col-day .tarief-field {
		width: 30%;
		min-width: 50px;
		height: 100%;
	}

	.ontrafel-col-day.vantot .form-floating > label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	.ontrafel-col-day .form-floating > label {
		display: flex;
		align-items: center;
		justify-content: start;
		width: 100%;
		text-align: start;
	}


	.ontrafel-col-day .tarief-field input {
		text-align: center;
	}
	/* Scrollable container styles */
	.scrollable-container-ontrafel {
		overflow-x: auto;
		width: 100%;
		position: relative;
		isolation: isolate;
	}

	.scrollable-content-ontrafel {
		display: flex;
		flex-direction: column;
		min-width: 1200px;
	}

	.scrollable-row-ontrafel {
		display: flex;
		width: 100%;
		position: relative;
	}
	/* media query */
	/* Modified styles for responsiveness */
	.scrollable-container-ontrafel {
		width: 100%;
		position: relative;
		isolation: isolate;
	}

	.scrollable-content-ontrafel {
		display: flex;
		flex-direction: column;
	}

	.scrollable-row-ontrafel {
		display: flex;
		width: 100%;
		position: relative;
	}
	/* Styles for screens up to 1400px */
	@media (max-width: 1400px) {
		.scrollable-container-ontrafel {
			overflow-x: auto;
		}

		.scrollable-content-ontrafel {
			min-width: max-content;
		}

		.ontrafel-row-layout {
			display: flex;
			flex-wrap: nowrap;
			width: max-content;
			min-width: 100%;
		}

		.ontrafel-col-fixed {
			position: sticky;
			left: 0;
			z-index: 10;
			background-color: #fff;
			box-shadow: 2px 0 5px rgba(0,0,0,0.1);
		}

		.ontrafel-col-flexible {
			display: flex;
			overflow-x: visible;
		}

		.ontrafel-col-day {
			flex: 0 0 175px;
			min-width: 175px;
			max-width: 175px;
		}

		/* Other small screen styles... */
	}
	/* Styles for screens larger than 1400px */
	@media (min-width: 1401px) {
		.scrollable-container-ontrafel {
			overflow-x: hidden;
		}

		.scrollable-content-ontrafel {
			min-width: 100%;
		}

		.ontrafel-row-layout {
			flex-wrap: nowrap;
		}

		.ontrafel-col-flexible {
			display: flex;
			flex: 1;
		}

		.ontrafel-col-day {
			flex: 1 1 0;
			min-width: 0;
			width: calc((100% - 160px) / 7);
		}
	}
	/* Modify existing styles for screens below 768px */
	@media (max-width: 768px) {
		.ontrafel-row-layout,
		.overwerk-row {
			flex-direction: row; /* Keep days side by side */
			width: max-content;
		}

		.ontrafel-col-fixed {
			width: 150px; /* Maintain fixed width */
		}

		.ontrafel-col-flexible,
		.col-overwerk {
			width: auto; /* Allow flexible width */
		}
	}
	/*----------------------------------------*/

	.responsive-width {
		width: 100%;
		max-width: 500px; /* Adjust this value to set the maximum width */
	}


	@media (max-width: 1200px) {
		.responsive-width {
			width: 400px;
		}
	}

	@media (min-width: 768px) and (max-width: 1200px) {
		.responsive-width {
			width: 300px;
		}
	}

	@media (max-width: 768px) {
		.responsive-width {
			width: 300px;
		}
	}


	@media (max-width: 512px) {
		.responsive-width {
			width: 100px;
		}
	}

	.colR.ontrafel {
		width: 2rem;
	}

	.sticky-col.col2 {
		width: 15rem
	}
	/*----------------------------------------*/
	/* -------------------- WACHTWOORD AANMAKEN ------------------------ */

	.container-wachtwoord {
		top: 0;
		left: 0;
		background: var(--greyscale-color-3);
		width: 100%;
		height: 100%;
		position: fixed;
		display: flex;
		justify-content: center; /* horizontally center */
		align-items: center; /* vertically center */
		z-index: 100;
	}

	.col-white-wachtwoord {
		border-radius: 30px;
		background-color: #FFFFFF;
		box-shadow: 5px 5px 6px 0 rgba(0,16,34,0.13);
		padding: 60px 60px;
		float: left;
		width: 100%;
		min-height: 10rem;
		z-index: 0;
		max-width: 500px; /* Set max width on large screens */
	}
	

	.content-wavhtwoord {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center; /* This centers all text content */
	}

	.logo-wachtwoord {
		height: 100px;
		margin-bottom: 30px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.title-wachtwoord {
		font-size: 75px;
		color: var(--fontcolor-1);
		font-weight: 600;
		margin-bottom: 0;
	}


	.fp-validation-wachtwoord {
		color: #dc3545;
		font-size: var(--small-font-size);
		margin-top: 5px;
	}


	.fp-validation-success {
		color: #198754;
		font-size: var(--small-font-size);
		margin-top: 5px;
	}



	.password-policy {
		list-style-type: none;
		padding-left: 0;
		margin-top: 0.5rem;
		line-height: 1.5;
	}

		.password-policy li {
			padding-left: 25px;
			position: relative;
			list-style-type: none;
		}

			.password-policy li::before {
				font-family: 'FontAwesome';
				position: absolute;
				left: 0;
				font-weight: bold;
			}

			.password-policy li::before {
				content: "\f061"; /* Right arrow */
				color: #757575; /* Grey color */
				font-size: 10px;
			}

			.password-policy li.valid::before {
				content: "\f00c"; /* Check mark */
				color: #4CAF50; /* Green color */
			}

			.password-policy li.invalid::before {
				content: "\f00d"; /* Cross */
				color: #F44336; /* Red color */
			}
	/* ------------------------------------------- */


	.disabled-app .appDropdown-icon {
		filter: grayscale(100%) opacity(50%);
	}

	.disabled-app .appDropdown-text {
		opacity: 0.5;
	}

	.disabled-app {
		cursor: not-allowed;
	}


	.table-fix-height {
		position: relative;

	}

	.table-body-scroll {
		height: calc(100vh - var(--header-height) - var(--footer-height) - var(--h-submenu-height) - 9.25rem);
		overflow-y: auto;
	}

	.table-body-scroll-insubmenu {
		height: calc(100vh - var(--header-height) - var(--footer-height) - var(--h-submenu-height) - 12.25rem);
		overflow-y: auto;
	}


	.table-fix-height .table {
		margin-bottom: 0;
	}




	.form-fixed-height {
		max-height: calc(100vh - var(--header-height) - var(--footer-height) - 17rem);
		overflow-y: auto;
		padding: 1rem; /* Adjust padding as needed */
	}

	.form-fixed-height-v2 {
		max-height: calc(100vh - var(--header-height) - var(--footer-height) - 15rem);
		overflow-y: auto;
		padding: 1rem; /* Adjust padding as needed */
	}

	.form-full-height {
		min-height: 20rem;
	}




	.fp-form-validation {
		color: #dc3545;
		font-size: var(--small-font-size);
		padding: 0.75rem;
	}



.page-title-section {
	position: fixed;
	top: 4.5rem;
	background-color: var(--greyscale-color-2); /* Adjust color as needed */
	z-index: 9;
	height: 2rem;
	width: 100%;
	border-radius: var(--border-radius-box);
}


	.col-white-sticky {
		position: sticky;
		top: 5.5rem;
		border-radius: var(--border-radius-box) var(--border-radius-box) 0 0;
		/*box-shadow: 2px -2px 6px 0 rgba(0,16,34,0.05);*/
		padding: 10px 30px;
		margin-left: 0;
		float: left;
		margin-bottom: 0;

		z-index: 9;
		width: calc(100% - (var(--nav-width) - 3.5rem));
		padding-bottom: 0;
		background-color: #FFFFFF;
	}

.col-white-form {
	position: relative;
	/*top: -14rem;*/
	padding: 20px 30px;
	/*padding-top: 14rem;*/
	border-radius: var(--border-radius-box);
	background-color: #FFFFFF;
	box-shadow: 2px 5px 6px 0 rgba(0,16,34,0.05);
	margin-left: 0;
	float: left;
	margin-bottom: 20px;
	min-height: 10rem;
	z-index: 0;
	width: 100%;
}












	#tab-content {
		height: calc(100vh - var(--header-height) - var(--page-title-height) - var(--sticky-header-height));
		overflow-y: auto;
	}





	.flex-indicator {
		color: #198754;
	}

	.flex-indicator-icon {
		width: 1.5rem;
	}





	.btn-add-entry {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid transparent;
		margin-left: 3px;
		background-color: transparent;
		color: var(--fontcolor-1);
		font-size: 1.2rem;
		height: 2.5rem;
	}

	button.btn-add-entry:hover,
	button.btn-add-entry:focus {
		border: 1px solid var(--fpcolor-1);
		background: transparent;
	}

	button.btn-add-entry:focus {
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
	}




	.pagination {
		
	}


	.page-item:first-child .page-link {
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	.page-item:last-child .page-link {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	.pagination .page-link {
		color: var(--fontcolor-1);
		background-color: #fff;
		border: 1px solid var(--greybutton-border);
		font-size: var(--medium-font-size)
	}

		.pagination .page-link:hover {
			background-color: #fff;
			border-color: var(--fpcolor-1);
		}

		.pagination .page-link.page-active {
			color: var(--fpcolor-1);
			background-color: #fff;
			border-color: var(--fpcolor-1);
			font-weight: 500;
		}
	/* padding and remove rounded corners */
	.pagination .page-link {
		padding: 0.5rem 1rem;
		border-radius: 0;
	}
	/* margin between pagination items */
	.pagination .page-item {
		margin: 0 2px;
	}
ul.pagination {
	margin-bottom: 0px;
}

	.table thead th.data-label,
	.table thead.data-label th {
		color: grey;
	}

	

.bx-check.green {
	color: green;
	}



/*Search dropdown*/
.search-dropdown-container {
	position: relative;
}

.search-dropdown-list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: 200px;
	overflow-y: auto;
	padding: 0;
	margin: 0;
	list-style: none;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-dropdown-item {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 1rem;
	color: #333;
}

	.search-dropdown-item:hover {
		background-color: #f8f9fa;
	}

	.search-dropdown-item.active {
		background-color: #e9ecef;
	}

/* Scrollbar styling */
.search-dropdown-list::-webkit-scrollbar {
	width: 8px;
}

.seach-dropdown-list::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.search-dropdown-list::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

	.search-dropdown-list::-webkit-scrollbar-thumb:hover {
		background: #555;
	}


/* === FILTER LIST@INDEX DROPDOWN === */

.filter-icon {
	cursor: pointer;
	font-size: 20px;
	padding: 0px;
}

.filter-item {
	font-weight: 400;
	}

.filter-category {
	font-weight: 400;
	display: block;
	margin-bottom: 5px;
}

.filter-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1050;
	min-width: 250px;
	
}


.filter-dropdown-inField {
	position: absolute;
	top: 100%;
	right: 0; /* Align to the right edge of the input group */
	z-index: 1050;
	min-width: 250px;
	width:100%; 
}


	.filter-dropdown-inField .card,
	.filter-dropdown .card {
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		border-radius: 0 0 var(--border-radius-button) var(--border-radius-button);
		border: 1px solid var(--greybutton-border);
	}

		.filter-dropdown-inField .card .divider,
		.filter-dropdown .card .divider {
			height: 1px;
			background-color: #dee2e6;
			margin: 0.5rem -1rem;
		}


	.filter-dropdown .card {
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		border-radius: 0 0 var(--border-radius-button) var(--border-radius-button);
		border: 1px solid var(--greybutton-border);
	}

		.filter-dropdown .card .divider {
			height: 1px;
			background-color: #dee2e6;
			margin: 0.5rem -1rem;
		}

.filter-count-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: #558EFA;
	color: white;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	font-size: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.filter-icon.active {
	color: #558EFA;
}

.card .reset-text {
	font-weight: 400;
	cursor: pointer;
	font-size: var(--medium-font-size);
}
	.reset-text:hover {
		color: var(--fpcolor-1);		
	}

.button-filter {
	font-size: var(--medium-font-size);
	font-weight: 300;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 5px;
	background-color: var(--fpcolor-1);
	color: white;
	border: none;
}
	.button-filter:hover {
		background-color: var(--fpcolor-1-highlight);
	}




/* === MOBILE DESIGN HEADER; LIST & PREVIEW === */
/* Base styles */
#detail-container {
	transition: transform 0.3s ease-out;
}

/* Hide mobile header by default */
.mobile-header {
	display: none; /* This will hide the header by default */
}

/* Mobile styles */
@media (max-width: 768px) {
	#detail-container {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: white;
		transform: translateX(100%);
		z-index: 1000;
		overflow-y: hidden;
		padding: 0;
		box-shadow: -2px 0 5px rgba(0,0,0,0.1);
		display: flex;
		flex-direction: column;
	}

		#detail-container.active {
			transform: translateX(0);
		}

	/* Show mobile header only on mobile */
	.mobile-header {
		display: block;
		flex-shrink: 0;
		background: white;
		padding: 10px 15px;
		border-bottom: 1px solid #eee;
		z-index: 1002;
		height: var(--header-height);
		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}

	.back-button {
		display: flex;
		align-items: center;
		gap: 4px; /* Reduced gap between icons */
		border: none;
		background: none;
		padding: 8px;
		cursor: pointer;
		color: #333;
	}

		.back-button i {
			font-size: 24px; /* Made icons slightly larger */
		}



	.card-fp-header {
		padding: 10px 20px; /* to-bottom, left-right*/
	}

		.card-fp-body {
		height: calc(100vh - var(--header-height) - var(--footer-height) - 100px);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 10px 20px;
	}
	

}

/* === TABLE STYLE INSIDE PREVIEW TABS === */

.InTabs tr {
	height: 50px; /* Tab header height */
}

.InTabs th.data-label {
	vertical-align: middle;	
}

.btn-InTabs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 10px;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	background-color: white;
	text-decoration: none;
	color: var(--fontcolor-2);
	font-size: var(--medium-font-size);
	transition: all 0.2s ease-in-out;
}

@-moz-document url-prefix() {
	.btn-InTabs {
		margin-top: 3px; /* add top margin (only for firefox) */
	}
}

	.btn-InTabs:hover {
		background-color: #f8f9fa;
		border-color: #ced4da;
		color: #212529;
		text-decoration: none;
		cursor: pointer;
	}

	.btn-InTabs:active {
		background-color: #e9ecef;
		border-color: #ced4da;
	}

	/* disabled state (optioneel) */
	.btn-InTabs:disabled,
	.btn-InTabs.disabled {
		opacity: 0.65;
		pointer-events: none;
		background-color: #f8f9fa;
	}


/* === COUNTER BADGE - TAKEN TAB === */
.count-badge {
	background: var(--fpcolor-1);
	color: white;
	font-size: 7.8px;
	height: 16px; /* Fixed height */
	line-height: 16px; /* vertical centering */
	min-width: 16px; /* one digit stay circular */
	padding: 6px 6px;
	border-radius: 50px; /* round shape by default */
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: 400;
	white-space: nowrap;
	position: absolute; /* Fix position inside the nav link */
	top: 8px; /* top alignment */
	left: 100%; /* locked position to the right of tab navigation text */
	margin-left: 5px; /* Space between text and badge */
	transform: translateX(0); /* Prevent left-side movement */
	transition: all 0.2s ease-in-out; /* Smooth expansion */
}

	/* badge expands */
	.count-badge.expand {
		border-radius: 50px; /* Capsule shape after expand */
		min-width: auto; /* Allow natural width */
		padding-left: 6px; /* Keep left padding fixed */
		padding-right: 14px; /* Expand width only to the right */
	}


	.count-badge.hidden {
		display: none;
	}

.taken-item {
	margin-top: 10px;
	margin-right: 15px;
	padding: 20px 20px;
	border-radius: var(--border-radius-box);
	background-color: var(--greyscale-color-1);
	box-shadow: 2px 2px 3px 0 rgba(0, 16, 34, 0.13);
	display:flex
}

	.taken-item:hover {
		background-color: var(--fpcolor-list-highlight);
	}

	.taken-item:last-child {
		border-bottom: none;
	}

.taken-item-title {
	font-weight: 500;
	font-size: var(--normal-font-size);
	display: flex;
}

.taken-item-text {
	font-weight: 300;
	font-size: var(--medium-font-size);
	display: flex;
	margin-bottom: 5px;
}

.taken-item-actions {
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.taken-item-actions .link-txt {
		font-size: var(--small-font-size);
		text-decoration: none;
	}

		.taken-item-actions .link-txt:hover {
			color: var(--fpcolor-1);
		}


/* ================================== */


.taken-indicator {
	background: var(--fpcolor-1);
	color: white;
	font-size: 0.6rem;
	height: 14px; /* Fixed height */
	line-height: 14px; /* Ensures vertical centering */
	padding: 6px 6px; /* Default padding */
	border-radius: 50px; /* Ensures round shape by default */
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight: 400;
	white-space: nowrap;
	transform: translateX(0); /* Prevent left-side movement */
	transition: all 0.2s ease-in-out; /* Smooth expansion */
	min-width: 10px; /* Ensure small numbers stay circular */
	vertical-align: middle;
}

.inlist-email-icon a {
	display: inline-flex;
	vertical-align: middle;
	font-size: 14px;
}



/* ======================================================= */
/* KALENDER VIEW */
/* ======================================================= */

/* Calendar header and navigation */
.calendar-navigator {
	font-size: 1.25rem;
}

/* Main calendar container */
.table-calendar {
	display: flex;
	flex-direction: column;
	position: relative;
	height: calc(100vh - var(--header-height) - var(--footer-height) - 10rem); /* Added a bit more offset */
	max-height: calc(100vh - var(--header-height) - var(--footer-height) - 10rem);
	overflow: visible; /* Prevent content overflow */
	box-sizing: border-box;
	
}

	/* Table structure and layout */
	.table-calendar .table {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0;
		table-layout: fixed;
		border-collapse: collapse;
		width: 100%;

	}

	/* Header styles */
	.table-calendar thead {
		position: sticky;
		top: 0;
		background: transparent;
		z-index: 2;
	}

		.table-calendar thead tr {
			display: flex;
		}

	.table-calendar th {
		padding: 0.75rem;
		background: white;
		flex: 1;
		border: none;
		border-top: 1px solid #ddd;
	}

		/* Week number column */
		.table-calendar th:first-child {
			flex: 0 0 55px;
			min-width: 55px;
			background: #F4F4F4;
			font-weight: bold;
		}

		.table-calendar td:first-child {
			flex: 0 0 55px;
			min-width: 55px;
			background: #F4F4F4;
			font-size: 1.25rem;
		}


		.table-calendar th:first-child {
			background: transparent;
		}

	/* Body structure */
	.table-calendar tbody {
		flex: 1;
		display: flex;
		flex-direction: column;
		
	}

		.table-calendar tbody tr {
			display: flex;
			flex: 1;
			height: auto;
			position: relative;
		}

	/* Day cells */
	.table-calendar td {
		flex: 1;
		position: relative;
		vertical-align: top;
	}

/* Calendar cell - KEY OVERFLOW FIX USING ABSOLUTE POSITIONING */
.calendar-cell {
	position: relative;
	overflow: hidden;
	height: 100% !important;
	max-height: 100%;	
	padding: 0;
	box-sizing: border-box;
}

	/* Day number at top of cell - FIXED HEIGHT */
	.calendar-cell > div:first-child {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		text-align: center;
		z-index: 1;
		margin: 0;
		padding: 5px 0;
		font-size: 1.25rem;
		font-weight: 500; /* Make text bold */
	}

/* Cell content container - ABSOLUTE POSITIONING TO PREVENT EXPANSION */
.calendar-cell-wrapper {
	position: absolute;
	top: 32px !important; /* Space for day number */
	bottom: 22px !important; /* Space for button or indicator */
	left: 0;
	right: 0;
	overflow: hidden;
	padding: 2px 4px;
	height: auto;
}


/* Cell content */
.calendar-cell-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: left;
    padding: 2px 4px;
    line-height: 1.6;
    font-size: 11px;
}

.row-count-4 .calendar-cell-content,
.row-count-5 .calendar-cell-content,
.row-count-6 .calendar-cell-content {
	line-height: 1,6;
}

/* Specific line height for screens with height 860px or less */
@media screen and (max-height: 860px) {
	.row-count-4 .calendar-cell-content {
		line-height: 1.7;
	}
}


/* Event item styling */
.calendar-event {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

	.calendar-event:hover {
		background-color: var(--fpcolor-list-highlight);
		cursor: pointer;
	}

/* Style for the meer-button */
.meer-button {
	display: none; /* Hidden by default until needed */
	position: absolute;
	bottom: 0;
	left: 0;
	width: auto;
	height: 28px;
	line-height: 28px;
	text-align: left;
	padding: 0 10px 0 10px;
	background: none;
	background-color: transparent;
	border: none;
	color: var(--fpcolor-1);
	font-size: 11px;
	font-weight: 500;
	z-index: 5;
	cursor: pointer;
	box-sizing: border-box;
}

.calendar-cell .meer-button {
	background: none;
	background-color: transparent;
	text-align: left;
	border: none;
	border-top: none;
}

.meer-button:hover {
	color: var(--fpcolor-1-highlight);
}

/* TODAY cell highlighting */
.calendar-cell-today {
	outline: 2px solid red;
	position: relative;
	z-index: 10;
	border-radius: 10px; /* Adds rounded corners */
}

/* Keep the original element styling, just change color and font-weight */
.calendar-cell-today-number {
	position: relative;
	color: white; /* Change text color to white */
	font-weight: 500; /* Make text bold */
	z-index: 1; /* Ensure the text appears above the background circle */
}

	/* Add the circular background with a pseudo-element */
	.calendar-cell-today-number::after {
		content: "";
		margin-top: 0.95rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1.65rem;
		height: 1.65rem;
		background-color: red;
		/*background-color: #007bff;*/
		border-radius: 50%;
		z-index: -1; /* Place the circle behind the text */
	}

/* Event panel */
.event-panel {
	position: absolute;
	background: white;
	border: 1px solid #ddd;
	padding: 10px 15px 20px 15px;
	min-height: 100px;
	min-width: 250px;
	z-index: 9999;
	border-radius: var(--border-radius-button);
	box-shadow: 5px 5px 6px 0 rgba(0, 16, 34, 0.15);
	transition: all 0.3s ease;
	display: none; /* Initially hidden */
}

	/* Panel visible state */
	.event-panel.visible {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

/* Close button styling */
.event-panel-close {
	position: absolute;
	top: 0px;
	right: 0px;
	opacity: 0.8;
	padding: 0;
	z-index: 20;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
}

.btn-close.event-panel-close {
	background-color: transparent;
	background-image: var(--bs-btn-close-bg);
	opacity: 0.5;
}

.btn-close.event-panel-close:hover {
		opacity: 0.75;
}

/* Divider styling */
.event-panel .divider {
	height: 1px;
	background-color: #dee2e6;
	margin: 0.5rem -1rem;
}

/* Header styling */
.event-panel-header {
	position: relative;
	display: block;
	top: 0;
	background: white;
	padding-bottom: 0;
	z-index: 10;
}

/* Items container styling */
.event-panel .event-items-container {
	flex-grow: 1;
	max-height: 30vh;
	overflow-y: auto;
	padding-right: 10px;
}

/* Event item styling */
.event-items:hover {
    background-color: var(--fpcolor-list-highlight);
    cursor: pointer;
}

/* Day title styling */
.event-day {
	font-size: 1.5rem;
	font-weight: 500;
}

/* Date styling */
.event-date {
	font-size: 1rem;
	font-weight: 400;
}

/* Calendar cell content load animation with clean upward slide */
/* ===== Simple animation for each event item ====== */
.calendar-event {
	animation: eventSlide 0.5s ease-out backwards;
}

@keyframes eventSlide {
	from {
		opacity: 0;
		transform: translateY(0px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* Apply slight sequential delay to events in row 4 calendar */
.row-count-4 .calendar-cell-content .calendar-event:nth-child(1) {
	animation-delay: 0.0s;
}

.row-count-4 .calendar-cell-content .calendar-event:nth-child(2) {
	animation-delay: 0.0s
}

.row-count-4 .calendar-cell-content .calendar-event:nth-child(3) {
	animation-delay: 0.1s;
}

.row-count-4 .calendar-cell-content .calendar-event:nth-child(4) {
	animation-delay: 0.2s;
}

.row-count-4 .calendar-cell-content .calendar-event:nth-child(5) {
	animation-delay: 0.3s;
}


/* Apply slight sequential delay to events in row 5 calendar */
.row-count-5 .calendar-cell-content .calendar-event:nth-child(1) {
	animation-delay: 0.0s;
}

.row-count-5 .calendar-cell-content .calendar-event:nth-child(2) {
	animation-delay: 0.1s
}

.row-count-5 .calendar-cell-content .calendar-event:nth-child(3) {
	animation-delay: 0.4s;
}

.row-count-5 .calendar-cell-content .calendar-event:nth-child(4) {
	animation-delay: 0.5s;
}

.row-count-5 .calendar-cell-content .calendar-event:nth-child(5) {
	animation-delay: 0.5s;
}

/* Apply slight sequential delay to events in row 6 calendar */
.row-count-6 .calendar-cell-content .calendar-event:nth-child(1) {
	animation-delay: 0.0s;
}

.row-count-6 .calendar-cell-content .calendar-event:nth-child(2) {
	animation-delay: 0.2s
}

.row-count-6 .calendar-cell-content .calendar-event:nth-child(3) {
	animation-delay: 0.6s;
}

.row-count-6 .calendar-cell-content .calendar-event:nth-child(4) {
	animation-delay: 0.6s;
}

.row-count-6 .calendar-cell-content .calendar-event:nth-child(5) {
	animation-delay: 0.6s;
}


.meer-button {
	animation: meerSlide 0.5s ease-out;
}

@keyframes meerSlide {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ======================================================= */
/* FACTUUR AANMAKEN */
/* ======================================================= */


.table-factuur {
	min-height: 25vh;
	overflow: visible; /* Ensure dropdown can escape the table container height */
}

.factuur-modal-dialog {
	max-height: 95vh; /* Set maximum height to fit screen */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.factuur-modal-content {
	max-height: 95vh; /* Modal content takes full height */
	width:auto; /* This to make width of modal following width of the content*/
	display: flex;
	flex-direction: column;
}

.factuur-modal-body {
    flex: 1;
    overflow-y: auto; /* Scrollable factuur content */
}

.factuur-modal-header,
.factuur-modal-footer {
	flex-shrink: 0; /* Keep header and footer fixed */
}

.factuur-btn-icon {
	font-size: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
}

	.factuur-btn-icon i {
		font-size: 22px;
	}

	.factuur-btn-icon:hover {
		background-color: #f0f0f0;
	}

.factuur-logo {
	max-height: 75px;
	object-fit: contain; /* Keeps factuur logo aspect ratio */
}

.factuur-company-info {
	border-left: 1px solid #ccc; /* Thin vertical border */
	padding-left: 15px; /* Space between border and text */
	height: 100%; /* Ensures the border covers the full section */
	display: flex;
	justify-content: center;
}

@media print {
	#invoiceContent {
		page-break-inside: avoid; /* Prevent content from splitting awkwardly */
	}

	.pdf-page-break {
		page-break-before: always; /* Force new page for large sections */
	}
}

.position-relative {
	position: relative; /* Added to make sure the dropdown is positioned relative to its parent */
}


.factuur-filter {
	display: none;
	position: absolute; /* Position relative to the parent */
	top: 100%; /* Positions it directly below the filter icon */
	left: 0;
	min-width: 250px;
	max-width: 300px;
	max-height: 70vh; /* Added: Adust max-height of dropdown */
	background: white;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 10px;
	border-radius: 0 0 var(--border-radius-button) var(--border-radius-button);
	z-index: 1050;
	overflow-y: auto; /* Added: Make sure all text inside dropdown does not exceed the dropdown panel height */
}

	.factuur-filter.show {
		display: block;
	}

	.factuur-filter .divider {
		height: 1px;
		background-color: #dee2e6;
		margin: 0.5rem -1rem;
	}

/*----------------------*/

.factuur-filter-list {
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 10px;
	border: 1px solid #ccc;
	/* border-radius: var(--border-radius-button) 0 0 var(--border-radius-button); */
	max-height: 40vh; /* Added: Adust max-height of list container */
	overflow-y: auto; /* Enable vertical scrolling */
	padding-right: 5px; /* Prevents text from touching the scrollbar */
}

	/* Optional: Style the scrollbar (Only works in Webkit browsers like Chrome) */
	.factuur-filter-list::-webkit-scrollbar {
		width: 8px;
	}

	.factuur-filter-list::-webkit-scrollbar-thumb {
		background-color: #ccc; /* Scrollbar color */
		border-radius: 4px;
	}

	.factuur-filter-list::-webkit-scrollbar-track {
		background: #f5f5f5; /* Track color */
	}

/* ======================================================= */


/* ======================================================= */
/* Nieuw Memoriaal Formulir Pagina */
/* ======================================================= */


/* Force table to respect colgroup widths absolutely */
.tableFixedWidth {
	table-layout: fixed;
}

/* ======================================================= */


/* ======================================================= */
/* Gebruikers en Autorisatie Pagina */
/* ======================================================= */



.appTableHeader-icon {
	height: 35px;
}
/* Center the table header with the icon  */
th:has(.appTableHeader-icon) {
	text-align: start;
}

/* ======================================================= */



/* ======================================================= */
/* === DYNAMIC FORM ROWS - GENERIC BUTTON VISIBILITY === */
/* ======================================================= */

/* Hide all buttons by default */
.dynamic-form-container [data-fps-form-remove-row],
.dynamic-form-container [data-fps-form-add-row] {
	display: none !important;
}

/* Show add button only on the last row */
.dynamic-form-container > tr:last-child [data-fps-form-add-row] {
	display: inline-flex !important;
}

/* Show remove button on all rows starting from the 2nd row when there are 3+ total rows */
.dynamic-form-container > tr:nth-child(n+2) [data-fps-form-remove-row] {
	display: inline-flex !important;
}

/* Hide remove button on the 2nd row when it's also the last row (only 1 visible row) */
.dynamic-form-container > tr:nth-child(2):last-child [data-fps-form-remove-row] {
	display: none !important;
}

/* Fix for btn-add-entry in table cells */
.dynamic-form-container .btn-add-entry {
	height: var(--inline-button-height) !important;
	width: var(--inline-button-height) !important;
	margin: 0 !important;
}

/* ======================================================= */


/* ======================================================= */
/* === WERKBRIEF OVERZICHT === */
/* ======================================================= */

/* Header Elements */
.periode-headers {
	display: grid;
	grid-template-columns: 250px repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 10px;
	padding: 5px 15px;
	background: var(--greyscale-color-1);
}

.filter-row {
	/*box-shadow: 0 3px 0px rgba(0, 0, 0, 0.1);*/
}

.list-info {
	display: flex;
	align-items: center;
	gap: 15px;
}

.week-header {
	text-align: center;
	font-weight: 500;
}

.week-subheader {
	text-align: center;
	font-size: var(--medium-font-size);
	font-weight: 400;
}

/* Content Elements */

.wb-check {
	display: none;
}

.werkbrief-content {
	border-radius: var(--border-radius-box);
	box-shadow: 3px 2px 2px 0 #ddd;
	overflow: hidden;
}

.inlener-section {
	border: none;
}

.inlener-header {
	display: flex;
	align-items: center;
	padding: 0px 15px;
	background: var(--greyscale-color-2);
	cursor: pointer;
}

	.inlener-header:hover {
		background: var(--fpcolor-list-highlight);
	}

.project-section {
	border-bottom: none;
}

.project-header {
	display: flex;
	align-items: center;
	padding: 0px 15px 0px 30px;
	background: #f4f4f4;
	cursor: pointer;
	border-top: 1px solid var(--greybutton-border);
	border-bottom: 1px solid #e6e6e6;
}

	.project-header:hover {
		background: var(--fpcolor-list-highlight);
	}

.flexkracht-row {
	display: grid;
	grid-template-columns: 250px repeat(4, 1fr);
	padding: 5px 15px;
	border-bottom: 1px solid #e6e6e6;
	align-items: center;
	background-color: #f8f9fa;
	gap: 10px;
}

	.flexkracht-row:hover {
		background: var(--fpcolor-list-highlight);
	}

.flexkracht-info {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 45px;
}

.flexkracht-name {
	font-weight: 500;
}

.flexkracht-subtitle {
	font-size: var(--medium-font-size);
	font-weight: 400;
	color: #666;
}

.time-cell {
	padding: 0px 12px;
	border: 1px solid;
	border-radius: 8px;
	/*/border-radius: var(--border-radius-button);*/
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	cursor: pointer;
}

	.time-cell span {
		margin-left: auto;
		font-weight: 400;
	}

	.time-cell.goedgekeurd {
		background: var(--fpcolor-1);
		border-color: var(--fpcolor-1);
		color: white;
	}

	.time-cell.ingevuld {
		background: rgba(85, 142, 250, 0.25); /* 25% opacity of --fpcolor-1 */
        border-color: var(--fpcolor-1);
        color: var(--fontcolor-1);
    }

	.time-cell.ingepland {
		background: white;
		border-color: var(--fpcolor-1);
		color: var(--fontcolor-1);
	}

	.time-cell.ontbreekt {
		background: transparent;
		border-color: var(--fpcolor-1);
		color: var(--fontcolor-1);
	}
    
    .time-cell.geen {
        border: 0;
        cursor: default;
    }

.collapsed .project-section,
.collapsed .worker-row {
	display: none;
}


/* Accordion Button */
.project-header .accordion-button,
.inlener-header .accordion-button {
	flex-grow: 1;
	background: transparent;
	text-align: start;
	color: var(--fontcolor-1);
	font-weight: 500;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

	.project-header .accordion-button,
	.inlener-header .accordion-button:focus {
		box-shadow: none;
	}


.dropdown-filter-WBoverzicht {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1050;
	background-color: white;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	border-radius: 0 0 var(--border-radius-button) var(--border-radius-button);
	border: 1px solid var(--greybutton-border);
}

	.dropdown-filter-WBoverzicht .divider {
		height: 1px;
		background-color: #dee2e6;
		margin: 0.5rem -1rem;
	}

/* Period selector list styling */


.periode-item {
	display: block;
	padding: 5px 5px;
	text-decoration: none;
	color: var(--fontcolor-1);
	border-radius: 4px;
	transition: background-color 0.2s ease;
	text-align: left;
	border-bottom: 1px solid #e6e6e6;
}

	.periode-item:last-child {
		border-bottom: none;
	}

		.periode-item:hover {
		background-color: var(--fpcolor-list-highlight);
		color: var(--fontcolor-1);
		text-decoration: none;
	}

	.periode-item:active,
	.periode-item.active {
		background-color: var(--fpcolor-1);
		color: white;
	}

.periode-title {
	font-weight: 500;
}


/* ======================================================= */


/* ======================================================= */
/* === WERKBRIEF PAGINA NIEUW === */
/* ======================================================= */

/* Header Elements */
.periode-headers-wb-uren {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	margin-bottom: 0.5rem;
	padding: 5px 15px;
	background: var(--greyscale-color-1);
}

.periode-headers-wb-loon {
	display: grid;
	grid-template-columns: 15rem repeat(8, 1fr) 5rem;
	gap: 10px;
	margin-bottom: 0.5rem;
	padding: 0.25rem 0.25rem;
	background: var(--greyscale-color-1);
}

.day-header {
	text-align: center;
	font-weight: 500;
}

.day-subheader {
	text-align: center;
	font-size: var(--medium-font-size);
	font-weight: 400;
}


.WerkbriefType-section {
	border: none;
}

.WerkbriefType-header {
	display: flex;
	align-items: center;
	background: var(--greyscale-color-2);
	cursor: pointer;
}

	.WerkbriefType-header:hover {
		background: var(--fpcolor-list-highlight);
	}


.description-selector {
	font-weight: 500;
	width: 100%;
}

.input-row-wb-uren {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	padding: 5px 15px;
	/*border-bottom: 1px solid #e6e6e6;*/
	background-color: transparent;
	gap: 10px;
}

.input-row-wb-loon {
	display: grid;
	grid-template-columns: 15rem repeat(8, 1fr) 5rem;
	padding: 0px 0.25rem;
	/*border-bottom: 1px solid #e6e6e6;*/
	/*background-color: #f8f9fa;*/
}

	.input-row-wb-loon .time-cell {
		padding: 0.25rem 0.5rem;
		display: flex;
		align-items: center;
		gap: 0.25rem;
		border: none;
	}

		.input-row-wb-loon .time-cell .time-input,
		.input-row-wb-loon .description-selector .form-select {
			border-radius: 0.6rem;
		}

.input-row-wb-uren .time-cell {
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 5px;
	border: none;
}

/* Accordion Button */

.WerkbriefType-header .accordion-button {
	flex-grow: 1;
	background: transparent;
	text-align: start;
	color: var(--fontcolor-1);
	font-weight: 500;
	font-size: 1.2rem;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}

	.WerkbriefType-header .accordion-button:focus {
		box-shadow: none;
	}

/* Time-Picker Dropdown */

.time-picker-icon {
	cursor: pointer;
	font-size: 1rem;
	padding-top: 0.2rem;
	padding-right: 0;
	color: var(--greybutton-border);
}

	.time-picker-icon:hover {
		color: var(--fpcolor-1);
	}

	.time-picker-icon:focus {
		color: var(--fpcolor-1);
	}

.fp-icon-button-inField.time-picker-icon:focus {
	outline: none;
}
@media (max-width: 1600px) {
	.time-picker-icon {
		display: none;
	}
}

.scroll-arrow {
	opacity: 0.8; /* Always visible */
	transition: opacity 0.2s;
	cursor: pointer;
	color: white;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 15px;
	margin: 4px 0;
	font-size: 1.5rem;
}

	.scroll-arrow:hover {
		opacity: 1; /* Slightly more visible on hover */
	}

.time-section.active .scroll-arrow {
	opacity: 1; /* Full opacity when section is active */
}

.scroll-arrow:hover {
	opacity: 1; /* Slightly more visible on hover */
}

.time-section.active .scroll-arrow {
	opacity: 1; /* Full opacity when section is active */
}

.time-section.active .time-part {
	background-color: rgba(255, 255, 255, 0.2);
}

.time-part {
	font-size: 1.5rem;
	font-weight: 300;
	min-width: 40px;
	cursor: pointer;
}

.colon {
	font-size: 2rem;
	font-weight: 300;
	opacity: 0.8;
}

.dropdown-menu.time-panel {
	width: 100%;
	background: var(--fpcolor-1);
}


/* ====== Dynamic Container ========== */
/* Hide all buttons by default */
.dynamic-container [data-fps-form-remove-row],
.dynamic-container [data-fps-form-add-row],
.dynamic-container-vantot [data-fps-form-remove-row],
.dynamic-container-vantot [data-fps-form-add-row] {
	display: none !important;
}

/* Show add button only on the last row */
.dynamic-container > *:last-child [data-fps-form-add-row],
.dynamic-container-vantot > *:last-child [data-fps-form-add-row] {
	display: inline-flex !important;
}

/* Show remove button on all rows starting from the 2nd row when there are 3+ total rows */
.dynamic-container > *:nth-child(n+2) [data-fps-form-remove-row] {
	display: inline-flex !important;
}

/* Hide remove button on the 2nd row when it's also the last row (only 1 visible row) */
.dynamic-container > *:nth-child(2):last-child [data-fps-form-remove-row],
.dynamic-container-vantot > *:nth-child(2):last-child [data-fps-form-remove-row] {
	display: none !important;
}

/* Show remove button on the 2nd row when it's also the last row (more than 1 visible row) - specific for vantot box */
.dynamic-container-vantot > *:last-child [data-fps-form-add-row],
.dynamic-container-vantot > *:last-child:not(:only-child) [data-fps-form-remove-row] {
	display: inline-flex !important;
}

.dynamic-container-vantot {
	background: rgba(238, 244, 254, 0.5);
	padding: 10px;
	border-radius: var(--border-radius-button);
	margin-bottom: 5px;
	box-shadow: 3px 2px 2px 0 #ddd;
}

/* ====== Dynamic Container ========== */


/* Updated time input group for vertical layout */
.time-input-group-vertical {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/* Horizontal container for van/tot fields */
.time-fields-horizontal {
	display: flex;
	width: 100%;
	align-items: stretch; /* Make both fields same height */
}

	/* Ensure form-floating fields take equal space */
	.time-fields-horizontal .dropdown {
		flex: 1;
		min-width: 0; /* Allow flex items to shrink below their content size */
	}

	/* Make sure the form-floating containers fill their parent */
	.time-fields-horizontal .form-floating {
		width: 100%;
	}

/* Override time-cell styling for van-tot container */
.time-cell:has(.dynamic-container-vantot) {
	flex-shrink: 0;
	width: 100%; /* Allow full width usage */
	gap: 0; /* Remove gap to use full width */
	padding: 0; /* Remove padding to maximize space */
}

/* Make the dynamic container fill the entire time-cell */
.time-cell .dynamic-container-vantot {
	width: 100%;
	/* Remove height: 100% - let content determine height */
}

/* Ensure the time-entry takes minimal space */
.time-cell .time-entry {
	width: 100%;
	/* Remove height: 100% - let content determine height */
}

.card-wb-header {
	margin: 0;
	min-height: 5rem;
	padding: 10px 20px; /* to-bottom, left-right*/
	border-bottom: none;
	border-radius: var(--border-radius-box) var(--border-radius-box);
}

.card-wb-body {
	padding: 0px 30px;
	min-height: 15rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.col-grey {
	margin-top: 10px;
	border-radius: var(--border-radius-box);
	background-color: var(--greyscale-color-1);
	box-shadow: 5px 5px 6px 0 rgba(0,16,34,0.13);
	padding-top: 5px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 30px;
	margin-left: 0;
	margin-bottom: 15px;
	z-index: 0;
}

.table-panel-reservering td,
.table-panel-reservering th {
	background-color: transparent;
}

.table-panel-reservering th {
    border-bottom: 1px solid #ddd;
}
.table-panel-reservering td {
	font-size: var(--small-font-size) !important;
}


@media (max-width: 1600px) {
	.reservation-panel {
		display: none;
	}
}


/* ======================================================= */

/* =========== LOONSTROOK PAGINA ================ */

.loonstrook-page {
	width: 210mm;
	height: 297mm;
	margin: 0 auto;
	padding-right: 15mm;
	padding-left: 15mm;
	padding-bottom: 5mm;
	padding-top: 10mm;
	font-size: 11px;
	line-height: 1.3;
	background: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	margin-bottom: 20px;
	/* Flexbox layout to push footer to bottom */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
}

/* Content wrapper to take available space */
.page-content {
	flex: 1;
}

/* Header Styling */
.loonstrook-header {
	margin-bottom: 15px;
}

.header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.period-info, .year-info {
	flex: 1;
}

.period-title, .year-title {
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: #191A3F;
}

.period-subtitle, .date-range {
	font-size: 12px;
	margin: 2px 0 0 0;
}

.docPreview-logo-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.uzb-logo {
	display: flex;
	align-items: center;
	gap: 8px;
}

.logo-image {
	max-width: 120px;
	object-fit: contain;
}


.document-info {
	text-align: right;
}

/* Employee and Company Info */
	.info-section {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.employee-info, .company-info {
	flex: 1;
}

.employee-name, .company-name {
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 5px 0;
}

.employee-address, .company-address {
	font-size: 11px;
	line-height: 1.2;
	margin: 0;
}

.company-info {
	text-align: right;
}

.email-link {
	color: #3498db;
	text-decoration: none;
}

/* Payment Summary - Side by Side Layout */
.payment-summary {
	background: var(--app-color);
	color: white;
	padding: 10px 15px;
	border-radius: var(--border-radius-button);
}

.summary-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.summary-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

	.summary-item.total-amount {
		flex: 0 0 auto;
		text-align: right;
		min-width: 150px;
	}

	.summary-item .label {
		font-size: 12px;
		font-weight: 500;
		color: white;
		/* text-transform: uppercase;*/
		letter-spacing: 0.5px;
	}

	.summary-item .value {
		font-size: 14px;
		font-weight: 500;
		color: white;
		line-height: 1.2;
	}

.total-amount .label {
	font-size: 12px;
	color: #ecf0f1;
}

.total-amount .value {
	font-size: 24px;
	font-weight: 500;
	color: white;
	margin-top: 2px;
}

/* Unified Salary Table */
.loonstrook-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
}

	.loonstrook-table th {
		background: #f8f9fa;
		border: none;
		padding: 8px 10px;
		text-align: left;
		font-weight: bold;
		font-size: 11px;
	}

	.loonstrook-table td {
		border: none;
		text-align: left;
		position: relative;
		padding-right: 10px;
		padding-left: 10px;
		padding-top: 0px;
		padding-bottom: 0px;
		height: 12px;
	}

/* Spacer Row */
.spacer-row td {
	height: 6px;
}


/* Calculation bracket */
.bracket-bottom {
	border-bottom: 1px solid grey !important;
}

.bracket-right {
	border-right: 1px solid grey !important;
}

.style1 {
	border-color: #558EFA !important
}

.style2 {
	border-color: #83E4D2 !important
}

/* Section Rows with Rounded Corners */
.section-subtotal-row {
	font-weight: 500;
	height: 28px;
	background: linear-gradient(135deg, rgba(85, 142, 250, 0.75), rgba(131, 228, 210, 0.5));
	border: none;
}

.section-label {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	font-size: 12px;
	font-weight: 500;
}

.section-amount {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	text-align: right;
}

.section-total-row {
	font-weight: 500;
	height: 28px;
	background: #191A3F;
	border: none;
}


/* Footer - MODIFIED: Always at bottom */
.loonstrook-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto; /* ADDED: This pushes footer to bottom */
	border-top: 1px solid #ddd;
	font-size: 9px;
	color: #666;
	flex-shrink: 0; /* ADDED: Prevent footer from shrinking */
}

.footer-left {
	font-size: 11px;
	color: var(--fontcolor-1);
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 5px;
}

.footer-logo-image {
	width: 75px;
	height: 75px;
	object-fit: contain;
}



/* Additional Info Section */

.additional-info-section {
	margin-top: 10px;
}

.info-blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	font-size: 10px;
	margin-bottom: 10px;
}

/* Additional styling */
.info-block {
	background: #f8f9fa;
	padding: 10px;
	border-radius: 6px;
	border-left: 4px solid #83E4D2;
}


	.info-block span {
		font-size: 12px;
		color: var(--fontcolor-1);
		margin: 0 0 10px 0;
		font-weight: 500;
	}

.info-table {
	width: 100%;
}

	.info-table thead {
		border-bottom: none;
		padding-top: 0px;
		height: 22px;
	}

	.info-table tbody td {
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.info-table thead th {
		font-weight: 300 !important;
		padding-top: 0px;
	}

.page-subtitle-1 {
	font-size: 16px;
	/* Style-1 */
	color: var(--fontcolor-1);
	border-bottom: 1px solid #558EFA;
	border-left: 4px solid #558EFA;
	padding-bottom: 5px;
	/* ---- */
	/* Style-2
            color: white;
            background: #558EFA;
            border-radius: 4px;
            ---- */

	padding-top: 4px;
	padding-left: 8px;
	padding-bottom: 4px;
	width: 100%;
	display: block;
}

.page-subtitle-2 {
	font-size: 16px;
	/* Style-1 */
	color: var(--fontcolor-1);
	border-bottom: 1px solid #83E4D2;
	border-left: 4px solid #83E4D2;
	/* ---- */
	/* Style-2
            color: white;
            background: #83E4D2;
            border-radius: 4px;
            ---- */
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	margin-bottom: 0px;
	width: 100%;
	display: block;
}


.specificatie-subtotaal-style1 td {
	background: rgba(85, 142, 250, 0.1);
	font-weight: 600;
	padding: 8px 10px;
}

.specificatie-subtotaal-style2 td {
	background: rgba(131, 228, 210, 0.1);
	font-weight: 600;
	padding: 8px 10px;
}

/* ======================================================= */