@charset "UTF-8";
/* CSS Document */
/* CORE CSS */
@import url("../dojo/dojo/resources/dojo.css");
@import url("../dojo/dijit/themes/mijnthema/mijnthema.css");


@font-face {
	font-family: 'Ubuntu';
	src: url('../css/Ubuntu-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap; /* ← deze ontbreekt op alle varianten */
}

@font-face {
	font-family: 'Ubuntu';
	src: url('../css/Ubuntu-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap; /* ← deze ontbreekt op alle varianten */
}


/*********************************************

		  THEMAKLEUREN (LIGHT = DEFAULT)

*********************************************/
:root {
	--page-bg: #ffffff;
	--panel-bg: #f8f9fa; /* Bootstrap gray-100 */
	--surface-2: #e9ecef; /* Bootstrap gray-200 */
	--tab-bg: #e9ecef; /* gray-200 */
	--hover-bg: #f1f3f5; /* tussen gray-100 en gray-200 */
	/* tekst */
	--text-color: #212529; /* Bootstrap dark */
	--text-soft: #6c757d; /* Bootstrap secondary text */
	/* randen */
	--border-color: #dee2e6; /* Bootstrap gray-300 */
	--border-soft: #e9ecef; /* gray-200 */
	--border-menu: #cfe2ff; /* Bootstrap primary-subtle */
	/* accenten */
	--link-color: #0d6efd; /* Bootstrap primary */
	--link-hover-color: #0a58ca;
	--primary-text: #212529; /* toevoegen */
	--primary-color: #cfe2ff;
	--button-color: #f8f9fa;
	--button-text: #212529;
	--secondary-color: #ffe9d2; /* subheader popup */
	--zebra-bg: #f8f9fa; /* gestreepte tabellen */
	--status-color-0: #ffe9d2;
	--status-color-3: #d4edda;
	--status-color-4: #cce5ff;
	--submenu-bg: #F7F7F7; /* dvSubMenu gradientstop */
	--submenu-border: #dddddd;
	--disabled-bg: #FBFCC0;
	--error-bg: #FFBBBB;
	--input-border: #c1c1c1;
	--kleurperiode-bg: #f2f2f2;
	--shift-bg: #FCF8E3;
	--logo-border: #DDDDDD;
	--todo-header-bg: #ffc107; /* BS warning */
	--todo-body-bg: #fff3cd; /* BS warning-subtle */
	--header-bg: #cfe2ff; /* Bootstrap primary-subtle */
	--header-text: #212529;
	--warning-bg: #fff3cd; /* BS warning-subtle */
	--warning-border: #ffe69c; /* BS warning-border-subtle */
	--warning-hover: #ffe69c;
	--warning-text: #664d03; /* BS warning-emphasis */
	--row-hover: #f8f9fa; /* zelfde grijs als --panel-bg: subtiele hover */
	--danger: #dc3545; /* BS danger */
	--danger-bg: #f8d7da; /* BS danger-subtle, voor vlakken */
	--danger-border: #f1aeb5; /* BS danger-border-subtle */
	--danger-text: #842029; /* BS danger-emphasis, tekst op subtiele bg */
	--btn-bg: var(--panel-bg); /* #f8f9fa — wat nu --button-color is */
	--btn-bg-hover: var(--surface-2);
	--btn-text: var(--text-color);
	--btn-border: var(--border-color);
	--btn-radius: 0.25rem;
	--btn-padding: 0.3rem 0.75rem;
	--btn-font-size: 13px;
	--btn-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-primary-bg: #4a7ba6; /* gedempt staalblauw */
	--btn-primary-text: #ffffff;
	--btn-primary-hover: #3d688d; /* donkerder i.p.v. feller */
	--btn-primary-border: #4a7ba6;

}


/*********************************************

		  DARK MODE

*********************************************/
body.darkmode {
	--page-bg: #212529; /* BS dark */
	--panel-bg: #2b3035; /* BS gray-800/900 tussentint */
	--surface-2: #343a40; /* BS gray-800 */
	--tab-bg: #343a40;
	--hover-bg: #3a4148;
	--text-color: #dee2e6; /* BS gray-200 */
	--text-soft: #adb5bd; /* BS gray-400 */
	--border-color: #495057; /* BS gray-700 */
	--border-soft: #3a4046;
	--border-menu: #384558; /* subtiel blauwig */
	--link-color: #6ea8fe; /* BS dark-mode primary */
	--link-hover-color: #8bb9fe;
	--button-text: #dee2e6;
	--primary-color: #2e4257;
	--primary-text: #dee2e6;
	--secondary-color: #5a4a3a;
	--button-color: #495057;
	--zebra-bg: #2c3136;
	--status-color-0: #6b5a48;
	--status-color-3: #2f5239;
	--status-color-4: #2e4257;
	--submenu-bg: #343a40;
	--submenu-border: #495057;
	--disabled-bg: #4a4633;
	--error-bg: #7a3535;
	--input-border: #5a6268;
	--kleurperiode-bg: #3a4148;
	--shift-bg: #4a4633;
	--logo-border: #495057;
	--todo-header-bg: #664d03; /* BS dark warning-emphasis */
	--todo-body-bg: #3d3219; /* afgeleide donkere variant */
	--header-bg: #2e4257; /* uw --status-color-4 dark-tint */
	--header-text: #dee2e6;
	--warning-bg: #3d3219;
	--warning-border: #4d4117;
	--warning-hover: #4d4117;
	--warning-text: #ffe69c;
	--row-hover: #343a40; /* één tint lichter dan je dark panel-achtergrond */
	--danger: #ea868f;
	--danger-bg: #42312e;
	--danger-border: #61423e;
	--danger-text: #ea868f;
	--btn-bg: var(--panel-bg); /* #f8f9fa — wat nu --button-color is */
	--btn-bg-hover: var(--surface-2);
	--btn-text: var(--text-color);
	--btn-border: var(--border-color);
	--btn-radius: 0.25rem;
	--btn-padding: 0.3rem 0.75rem;
	--btn-font-size: 13px;
	--btn-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-primary-bg: #3b82c4; /* iets lichter blauw voor donker */
	--btn-primary-text: #ffffff;
	--btn-primary-hover: #4f95d4;
	--btn-primary-border: #3b82c4;
	--btn-primary-bg: #5e8cb8;
	--btn-primary-hover: #6f9bc4;
	--btn-primary-text: #ffffff;
	--btn-primary-border: #5e8cb8;
}

:root {
	color-scheme: light;
}

	:root.darkmode {
		color-scheme: dark;
	}

body {
	font-family: 'Ubuntu', sans-serif;
	font-size: 13px;
	color: var(--text-color);
	padding: 0px;
	margin: 0px;
	background-color: var(--page-bg);
	line-height: 1.5;
}

/* standaard: lamp "uit" zichtbaar, "aan" verborgen */
#lampknop .lamp-aan {
	display: none;
}

#lampknop .lamp-uit {
	display: block;
}

/* in darkmode: omgekeerd + gloed */
body.darkmode #lampknop .lamp-aan {
	display: block;
	filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.8));
}

body.darkmode #lampknop .lamp-uit {
	display: none;
}
p {
	font-size: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	line-height: 1.0em;
}

#header {
	margin: 0;
	padding: 0;
	float: left;
	min-width: 990px;
	width: 100%;
}

/* cssvernieuwd.css */
.bevestiging {
	color: var(--link-color);
}

#logo {
	float: left;
	width: 20%;
	text-align: right;
	height: 77px;
	display: block;
}

	#logo img {
	}

#menu {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 80%;
	border-top: 1px solid var(--panel-bg);
}

.dj_ie7 #menu {
	width: 74.9%;
}

#menu ul {
	margin: 0px;
	padding: 0px;
}

#menu li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline;
}

	#menu li a {
		margin: 0px;
		padding: 0px;
		float: left;
		margin: 0px;
		width: 9%;
		padding-top: 10px;
		padding-bottom: 10px;
		text-decoration: none;
		color: #fff;
		border: none;
		text-align: center;
		border-bottom: 1px solid var(--border-menu);
		border-right: 1px solid var(--border-menu);
	}

.dj_ie7 #menu li a {
	width: 19.9%;
}

#menu li.active a {
	background: var(--surface-2);
	color: var(--text-color);
}

#menu li a:hover {
	color: var(--link-hover-color);
}

#menu li.btnuitlog a {
	color: #ffac86;
}

active a {
	background: var(--surface-2);
	color: var(--text-color);
}

#content {
	margin-left: 65px;
	margin-bottom: 0px;
	float: left;
	overflow: hidden;
	/*width:90%;*/
}

#helpcontent {
	margin-left: 16px;
	clear: both;
	margin-bottom: 0px;
}

	#helpcontent h3 {
		font-size: 12px;
		margin: 0px;
		padding: 0px;
		font-weight: bold;
		color: #FD590E;
	}
/*********************************************

		    	DOJO STYLES

*********************************************/
#mainTabContainer {
	width: 99%;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

@media (max-width:1099px) {
	.divtablecontainer {
		width: 925px;
	}

	.content {
		width: 925px;
	}

	.icoonstyle {
		width: 25px;
		height: 25px;
		vertical-align: middle;
		padding-bottom: 5px;
	}

	div.popupscherm {
		max-width: 800px;
	}
}

@media (min-width:1100px) and (max-width:1199px) {
	.divtablecontainer {
		width: 1005px;
	}

	.icoonstyle {
		width: 25px;
		height: 25px;
		vertical-align: middle;
		padding-bottom: 5px;
	}

	div.popupscherm {
		max-width: 900px;
	}
}

@media (min-width:1200px) and (max-width:1299px) {
	.divtablecontainer {
		width: 1050px;
	}

	.content {
		width: 1060px;
	}

	div.popupscherm {
		max-width: 1000px;
	}

	.icoonstyle {
		width: 25px;
		height: 25px;
		vertical-align: middle;
		padding-bottom: 5px;
	}
}

@media (min-width:1300px) and (max-width:1399px) {
	.divtablecontainer {
		width: 1205px;
	}

	.icoonstyle {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}

	div.popupscherm {
		max-width: 1200px;
	}
}

@media (min-width:1400px) and (max-width:1499px) {
	.divtablecontainer {
		width: 1305px;
	}

	.icoonstyle {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}

	div.popupscherm {
		max-width: 1300px;
	}
}

@media (min-width:1500px) and (max-width:1599px) {
	.divtablecontainer {
		width: 1405px;
	}

	.icoonstyle {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}

	div.popupscherm {
		max-width: 1400px;
	}
}

@media (min-width:1600px) and (max-width:1699px) {
	.divtablecontainer {
		width: 1505px;
	}

	.icoonstyle {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}

	div.popupscherm {
		max-width: 1500px;
	}
}

@media (min-width:1700px) and (max-width:1799px) {
	.divtablecontainer {
		width: 1605px;
	}

	.icoonstyle {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}

	div.popupscherm {
		max-width: 1600px;
	}
}

@media (min-width:1800px) and (max-width:1899px) {
	.divtablecontainer {
		width: 1705px;
	}

	.icoonstyle {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}

	div.popupscherm {
		max-width: 1700px;
	}
}

@media (min-width:1900px) {
	.divtablecontainer {
		width: 1830px;
	}

	.icoonstyle {
		width: 35px;
		height: 35px;
		vertical-align: middle;
	}

	div.popupscherm {
		max-width: 1800px;
	}
}

#mainTabContainer.eightColumn {
	width: 60%;
	float: left;
}
/*********************************************

		    	MELDKAMER

*********************************************/
.twoColumn {
	width: 35%;
	float: left;
	height: 600px;
	margin-left: 20px;
}
/*STATUSSEN
"0" = "Niet toegewezen"
"1" = "Aangemaakt"
"2" = "Mobiel Aangeboden"
"3" = "Mobiel Ontvangen"
"4" = "Mobiel Geaccepteerd"
"5" = "Niet geaccepteerd"
"6" = "Door mobiel ingeleverd"
*/
.statuskleur3 {
	background-color: var(--status-color-3);
}

.statuskleur4 {
	background-color: var(--status-color-4);
}

.statuskleur0, .statuskleur5 {
	background-color: var(--status-color-0)
}

/*********************************************

		    	TABLE STYLES

*********************************************/

.table-wrapper {
	overflow-y: scroll;
	scrollbar-width: none;
	float: left;
}

.table-wrapper1 {
	overflow-y: scroll;
	scrollbar-width: none;
	float: left;
	padding-top: 7px;
}

.table-wrapper::-webkit-scrollbar {
	display: none !important;
	width: 0px !important;
	height: 0px !important;
	visibility: hidden !important;
	background: transparent !important;
}

.table-wrapper1::-webkit-scrollbar {
	display: none !important;
	width: 0px !important;
	height: 0px !important;
	visibility: hidden !important;
	background: transparent !important;
}

.table-wrappersub {
	height: 510px !important;
}

.table-wrapper th, .table-wrapper1 th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	border-collapse: collapse;
	border: 0px solid var(--panel-bg);
	border-top: 1px solid var(--border-soft);
	padding: 4px 7px;	
	color: var(--text-color);
	font-weight: bold;
	font-size: 14px;
}

.table-wrapper {
	width: 100%;
	overflow-x: auto; /* viewport te smal → scrollbar, i.p.v. 99%-frutsel */
}

.tblTablewrapper {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	background-color: var(--page-bg);
	margin-bottom: 18px;
	overflow: clip;
	/* bewust géén box-shadow, geen card-padding: dit is werkveld */
}


.tblHeaderSticky {
	font-size: 14px;
	background-color: var(--panel-bg);
	padding: 8px !important;
	z-index: 1;
}

	.tblHeaderSticky th {
		position: sticky;
		position: -webkit-sticky; /* Safari */
		top: 23px;
		border-collapse: collapse;
		border: 0px solid var(--panel-bg);
		border-top: 1px solid var(--border-soft);
		padding: 4px 7px;		
		color: var(--text-color);
		z-index: 1;
	}

.td.tblHeaderSticky {
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: 23px;
	border-collapse: collapse;
	border: 0px solid var(--panel-bg);
	border-top: 1px solid var(--border-soft);
	padding: 4px 7px;	
	font-size: 14px;
	z-index: 1;
}

.tblHeaderSticky-dubbel th {
	top: 41px !important;
}

.td.tblHeaderSticky-dubbel {
	top: 41px !important;
}

.tblHeader {
	color: var(--text-color);
	background-color: var(--panel-bg);
	font-size: 14px;
	padding: 8px !important;
}

.dj_ie .tblHeader {
	background: url(../images/gradient.gif) repeat-x top left #ededed;
}

.tblHeader a {
	text-decoration: underline;
}

.h1 a {
	color: var(--link-color);
}

.tblPlanHeader {
	font-weight: bold;
	font-size: 10px;
	padding: 8px !important;
}

.dj_ie .tblHeader {
	background: url(../images/gradient.gif) repeat-x top left #ededed;
}

.tblHeader a {
	text-decoration: underline;
}

.tblSubHeader, .tblsubHeader {
	background-color: var(--primary-color);
	color: var(--primary-text);
	font-size: 16px;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

	.tblSubHeader a {
		text-decoration: none;
		color: var(--primary-text);
	}

.tblsubHeaderPopup {
	background-color: var(--primary-color);
	font-size: 16px;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

	.tblsubHeaderPopup a {
		text-decoration: none;
		color: var(--primary-text);
	}

.tblSubHeaderSticky {
	background-color: var(--primary-color);
	color: var(--primary-text);
	font-size: 16px;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	z-index: 1;
}

	.tblSubHeaderSticky, .tblSubHeaderSticky a:link {
		text-decoration: none;
	}

.td.tblSubHeaderSticky, td.tblSubHeaderSticky a:link {
	text-decoration: none;
}

.tblSubHeaderSticky th {
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: -8px;
	border-collapse: collapse;
	border: 0px solid var(--panel-bg);
	border-top: 1px solid var(--border-soft);
	padding: 4px 7px;	
	z-index: 1;
}

.td.tblSubHeaderSticky {
	position: sticky;
	position: -webkit-sticky; /* Safari */
	top: -8px;
	border-collapse: collapse;
	border: 0px solid var(--panel-bg);
	border-top: 1px solid var(--border-soft);
	padding: 4px 7px;	
	font-size: 16px;
	z-index: 1;
}

.tblAlter {
	color: #cf6a00;
	background-color: var(--zebra-bg);
}

.tblAlterHeader {
	color: var(--text-color);
	background-color: var(--secondary-color);
}

#header.topbar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 8px 16px;
	/*background-color: var(--page-bg);*/
	width: 100%; /* NIEUW: volle schermbreedte */
	max-width: none; /* NIEUW: heft vaste breedte op */
	box-sizing: border-box; /* NIEUW: padding binnen de breedte */
	margin: 0; /* NIEUW: geen centreren/marge */
}

.topbar-logo img {
	height: 77px;
	display: block;
}

.topbar-logo {
	flex: 0 0 auto; /* NIEUW: logo mag niet krimpen */
}

.topbar-search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto; /* NIEUW */
	min-width: 250px; /* NIEUW: niet kleiner dan dit */
	flex: 1 1 auto; /* groeit mee met het scherm */
	max-width: 800px; /* maar wordt niet absurd breed */
}

	.topbar-search label {
		display: flex;
		align-items: center;
		gap: 4px;
		color: var(--text-soft);
	}

.topbar-sysmelding {
	margin-right: 24px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	font-weight: 600;
	flex: 1 1 auto; /* NIEUW: vult ruimte tussen zoek en iconen */
	min-width: 0; /* NIEUW: mag leeg krimpen */
	flex: 0 0 auto; /* niet meer rekken */
	margin-left: auto; /* duwt sysmelding + iconen naar rechts */
}

	.topbar-sysmelding a {
		color: var(--warning-text);
		text-decoration: none;
		padding: 2px 8px;
		border-radius: 0.25rem;
		background-color: var(--warning-bg);
		border: 1px solid var(--warning-border);
		white-space: nowrap;
	}

		.topbar-sysmelding a:hover {
			background-color: var(--warning-hover);
			text-decoration: none;
		}

.topbar-icons {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto; /* NIEUW: iconen op natuurlijke breedte */
	margin-left: auto; /* NIEUW: strak tegen de rechterrand */
}
.icoonstyle {
	display: block;
}

.tblTable {
	border-collapse: separate;
	border-spacing:0;
	border: 1px solid var(--border-color);
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: 0.375rem; /* iets strakker dan 0.5rem voor tabellen */		
	box-shadow: var(--card-shadow); /* eruit als je nog geen schaduw wilt */
}
	
.tblTableIntern {
	border-collapse: collapse;
	border: 0px;
	overflow: hidden;
}


td:has(> table.tblTable) {
	padding-left: 10px;
}

.tblTableZoekbalk {
	width: max-content;
	min-width: 10%;
	table-layout: fixed;
}

	/* Zorg dat de cellen niet te klein worden */
	.tblTableZoekbalk td {
		white-space: nowrap;
		padding: 8px;
		width: auto;
	}

	/* Zorg dat select- en input-velden niet te breed worden */
	.tblTableZoekbalk select,
	.tblTableZoekbalk input[type="text"] {
		max-width: 200px;
		width: auto;
	}





	.tblTablewrapper td {
		padding: 4px 7px;
		border-top: 1px solid var(--border-soft);
	}

.tblTableRapport {	
	border-collapse: collapse;
	border: 1px solid var(--panel-bg);
	margin-bottom: 18px;
	overflow: hidden;
}

	.tblTableRapport td:hover::after,
	.tblTableRapport th:hover::after {
		background-color: var(--hover-bg);
	}

	.tblTableRapport th {
		border-collapse: collapse;
		border: 0px solid var(--panel-bg);
		border-top: 1px solid var(--border-soft);
		padding: 4px 7px;
		
	}

	.tblTableRapport td:hover::after,
	.tblTableRapport thead th:hover::after,
	.tblTableRapport td:focus::after,
	.tblTableRapport thead th:focus::after {
		content: '';
		/*height: 10000px;*/
		left: 0;
		position: absolute;
		top: -5000px;
		width: 100%;
		z-index: -1;
	}

	.tblTableRapport tbody tr:hover {
		background-color: var(--hover-bg);
	}

.tblTable td {
	border: 0px solid var(--panel-bg);
	border-top: 1px solid var(--border-soft);
	padding: 4px 7px;
	
}
.tblTable tbody tr:hover td:not(.tblSubHeader):not(.tblHeader):not(tblHeaderSticky):not(.tblSubHeaderSticky) {
	background-color: var(--row-hover);
}
	.tblTableIntern td {
	border-collapse: collapse;
	border: 0px solid var(--panel-bg);
	border-top: var(--page-bg) !important;
	padding-left: 0px;
	padding-right: 0px;
}

.tblTableRapport td {
	border-collapse: collapse;
	border: 0px solid var(--panel-bg);
	border-top: 1px solid var(--border-soft);
	padding: 4px 7px;	
}



.clickable {
	cursor: pointer;
}

.tblTable.dienstpop {
	margin-left: 20px;
	float: left;
	width: 250px;
}

.dashboard {
	border: 0px;
}

.striped tr:nth-child(even) td {
	background-color: var(--zebra-bg);
}

.stripedoneven tr:nth-child(odd) td {
	background-color: var(--zebra-bg);
}

.tblColumn25 {
	width: 25px;
}

.tblColumn50 {
	width: 50px;
}

.tblColumn100 {
	width: 100px;
}

.tblColumn200 {
	width: 200px;
}

.tblColumn250 {
	width: 250px;
}

.tblColumn500 {
	width: 500px;
}

.interncell {
	font-size: 11px !important;
	margin-top: 0.5em !important;
	margin-bottom: 0.5em !important;
	line-height: 1.1em !important;
}

div.melding {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	color: #E56B10;
	background-color: var(--warning-bg);
	border-top: 1px solid #E5E395;
	border-bottom: 1px solid #E5E395;
	height: 10px;
	text-align: center;
	background-image: url(../images/field-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	-moz-animation-name: anim;
	-moz-animation-duration: 5s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in-out;
	-webkit-animation: anim 0.5s; /* Safari and Chrome */
}

div.popupscherm {
	overflow-y: scroll;
	scrollbar-width: none;
	padding: 5px;
}

@media (max-height: 600px) {
	div.popupscherm {
		max-height: 410px;
	}

	.table-wrapper {
		height: 350px;
	}

	.table-wrapper1 {
		height: 550px;
	}

	.divtablecontainer {
		height: 540px;
	}

	#mainTabContainer {
		height: 535px;
	}
}

@media (min-height:600px) and (max-height: 710px) {
	div.popupscherm {
		max-height: 450px;
	}

	.table-wrapper {
		height: 625px;
	}

	.table-wrapper1 {
		height: 600px;
	}

	.divtablecontainer {
		height: 560px;
	}

	#mainTabContainer {
		height: 585px;
	}
}

@media (min-height:710px) and (max-height: 791px) {
	div.popupscherm {
		max-height: 510px;
	}

	.table-wrapper {
		height: 353px;
	}

	.table-wrapper1 {
		height: 690px;
	}

	.divtablecontainer {
		height: 680px;
	}

	#mainTabContainer {
		height: 615px;
	}
}

@media (min-height:790px) and (max-height: 900px) {
	div.popupscherm {
		max-height: 610px;
	}

	.table-wrapper {
		height: 450px;
	}

	.table-wrapper1 {
		height: 750px;
	}

	.tblTableBT {
		width: 350px;
	}

	.divtablecontainer {
		height: 750px;
	}

	#mainTabContainer {
		height: 675px;
	}
}

@media (min-height:891px) {
	div.popupscherm {
		max-height: 750px;
	}
}

@media (min-height:900px) and (max-height: 990px) {
	.table-wrapper {
		height: 620px;
	}

	.table-wrapper1 {
		height: 850px;
	}

	.tblTableBT {
		width: 350px;
	}

	.divtablecontainer {
		height: 860px;
	}

	#mainTabContainer {
		height: 775px;
	}
}

@media (min-height:991px) and (max-height: 1040px) {
	.table-wrapper {
		height: 650px;
	}

	.table-wrapper1 {
		height: 900px;
	}

	.divtablecontainer {
		height: 950px;
	}

	#mainTabContainer {
		height: 825px;
	}
}

@media (min-height:1039px) and (max-height: 1090px) {
	.table-wrapper {
		height: 700px;
	}

	.table-wrapper1 {
		height: 950px;
	}

	.divtablecontainer {
		height: 999px;
	}

	#mainTabContainer {
		height: 875px;
	}
}

@media (min-height:1089px) and (max-height: 1140px) {
	.table-wrapper {
		height: 750px;
	}

	.table-wrapper1 {
		height: 1000px;
	}

	#mainTabContainer {
		height: 925px;
	}

	.divtablecontainer {
		height: 1049px;
	}

	#mainTabContainer {
		height: 925px;
	}
}

@media (min-height:1139px) and (max-height: 1190px) {
	.table-wrapper {
		height: 800px;
	}

	.table-wrapper1 {
		height: 1050px;
	}

	.divtablecontainer {
		height: 1099px;
	}

	#mainTabContainer {
		height: 975px;
	}
}

@media (min-height:1189px) and (max-height: 1240px) {
	.table-wrapper {
		height: 850px;
	}

	.table-wrapper1 {
		height: 1100px;
	}

	.divtablecontainer {
		height: 1050px;
	}

	#mainTabContainer {
		height: 1025px;
	}
}

@media (min-height:1239px) and (max-height: 1290px) {
	.table-wrapper {
		height: 900px;
	}

	.table-wrapper1 {
		height: 1150px;
	}

	.divtablecontainer {
		height: 1199px;
	}

	#mainTabContainer {
		height: 1075px;
	}
}

@media (min-height:1289px) {
	.table-wrapper {
		height: 950px;
	}

	.table-wrapper1 {
		height: 1200px;
	}

	.divtablecontainer {
		height: 1250px;
	}

	#mainTabContainer {
		height: 1125px;
	}
}

/* Voeg een media query toe voor kleinere schermen */
@media (max-width: 768px) {
	.tblTableZoekbalk td, .tblTableZoekbalk input, .tblTableZoekbalk select {
		padding: 4px;
	}

	#medzoekbalk select,
	#medzoekbalk input[type="text"] {
		max-width: 150px;
	}
}

#todo {
}

	#todo h1 {
		background-color: var(--todo-header-bg);
		min-height: 50px;
		padding-left: 13px;
		padding-top: 6px;
	}

	#todo div {
		background-color: var(--todo-body-bg);
		min-height: 600px;
	}

#onderdelen {
}

	#onderdelen h1 {
		min-height: 50px;
		padding-left: 0px;
		padding-top: 6px;
	}

	#onderdelen div {
		min-height: 200px;
	}

#klant {
}

#personeel {
}

#operatie {
}

#chart {
}

.hovermenu {
	position: absolute;
	top: 60px;
	width: 30px;
	padding-top: 43px;
	padding-left: 20px;
}

	.hovermenu:hover {
		width: 150px;
		z-index: 5;
		transition-delay: 8s;
	}

	.hovermenu table {
		background-color: var(--page-bg);
		border-collapse: collapse;
		padding-right: 5px;
	}

		.hovermenu table tr td.longtext {
			display: none;
		}

		.hovermenu table tr td.longtext1 {
			display: none;
		}

		.hovermenu table tr td.menuplaatjeactief {
			display: none;
		}

	.hovermenu:hover table tr td.longtext {
		display: table-cell;
		padding-bottom: 5px;
		padding-right: 20px;
	}

	.hovermenu:hover table tr:hover {
		background-color: var(--hover-bg);
		border-color: var(--hover-bg);
	}

	.hovermenu:hover table tr td.longtext a {
		color: var(--text-color);
		font-size: 14px;
		vertical-align: middle !important;
		text-decoration: none;
	}

@keyframes anim {
	from {
		height: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	to {
		height: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@-moz-keyframes anim {
	0% {
		height: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	10% {
		height: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	90% {
		height: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	100% {
		height: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

@-webkit-keyframes anim {
	from {
		height: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	to {
		height: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* CONTROLE RAPPORT SCHERM */

#div_medewerker {
	float: right;
	padding: 8px;
	color: white;
	background-color: var(--secondary-color);
	font-weight: bold;
	margin-right: 30px;
	padding-left: 30px;
	background: url(../images/toevoegen.gif) left no-repeat;
}

	#div_medewerker a {
		font-size: 10px;
	}

a.verstuurDemoDiv {
	padding: 5px;
	margin-right: 2px;
	border: 1px solid var(--secondary-color);
	text-decoration: none;
}

	a.verstuurDemoDiv:hover {
		background-color: #fb8100;
		color: white;
		text-decoration: none;
	}

/**********************************************
*											  *
*				AJAX						  *
*											  *
**********************************************/

/* Big box with list of options */
#ajax_listOfOptions {
	position: absolute; /* Never change this one */
	width: 350px; /* Width of box */
	height: 250px; /* Height of box */
	overflow: auto; /* Scrolling features */
	border: 1px solid #317082; /* Dark green border */
	background-color: var(--page-bg); /* White background color */
	text-align: left;
	font-size: 12px;
	z-index: 10000;
}

	#ajax_listOfOptions div { /* General rule for both .optionDiv and .optionDivSelected */
		margin: 1px;
		padding: 1px;
		cursor: pointer;		
	}

	#ajax_listOfOptions .optionDiv { /* Div for each item in list */
	}

	#ajax_listOfOptions .optionDivSelected { /* Selected item in the list */
		background-color: #317082;
		color: #FFF;
	}

#ajax_listOfOptions_iframe {
	background-color: #F00;
	position: absolute;
	z-index: 5;
}

/**********************************************
*											  *
*				CONTENT STYLES				  *
*											  *
**********************************************/

h1 {
	font-size: 18px;
	font-weight: bold;
	padding-top: 2px;
}

table h1 {
	font-size: 18px;
	font-family: 'Ubuntu', sans-serif;
	padding: 0px;
	font-weight: normal;
}

h2 {
	font-size: 16px;
	font-family: 'Ubuntu', sans-serif;
	margin: 0px;
	padding: 0px;
}

h3 {
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	margin: 0px;
	padding: 0px;
}

h6 {
	font-size: 25px;
	font-family: 'Ubuntu', sans-serif;
	line-height: 30px;
	margin: 0px;
	padding: 0px;
}

hr {
	height: 1px;
	color: #808080;
}

a {
	text-decoration: none;
	color: var(--link-color);
}

	a:hover {
		text-decoration: underline;
		color: var(--link-hover-color);
	}

.printlabel {
	display: none;
}

#printlogo {
	float: right;
	background: red url(../images/logo.gif);
	width: 209px;
	height: 0px;
	display: block;
	border: 1px solid red;
}


input[type=submit] {
	display: inline-block;
	color: var(--button-text);
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: 0.3rem 0.75rem;	
	border-radius: 0.25rem;
	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;
	background-color: var(--button-color);
	border-color: var(--button-color);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	border-radius: 0.375rem; /* Bootstrap 5.3 standaard --bs-border-radius */
	border: 1px solid var(--input-border);
	padding: 0.375rem 0.75rem;
	box-sizing: border-box;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

	/* Focus-state, Bootstrap-stijl: blauwe rand + zachte glow */
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	input[type="number"]:focus,
	select:focus,
	textarea:focus {
		border-color: var(--link-color);
		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
		outline: none;
	}

.kopievak {
	padding: 5px;
	background-color: var(--surface-2);
}

.dvPopupSmilie {
	float: left;
	padding: 5px;
	border: 1px dotted #d2d2d2;
}

.rapportscherm .dijitContainer {
	overflow: visible;
}

.dvObjectScroll {
	width: 200px;
	height: 195px;
	overflow-y: scroll;
	padding: 5px;
}

.dot {
	height: 25px;
	width: 25px;
	border-radius: 50%;
	display: inline-block;
}

.dotje {
	height: 15px;
	width: 50px;
	border-radius: 0%;
	display: inline-block;
}
/********** SubMenu **********/

div.dvSubMenu {
	float: left;
	width: 100%;
	background-image: linear-gradient(to top, var(--submenu-bg), var(--panel-bg));
	margin-bottom: 20px;
	border-top: 1px solid var(--submenu-border);
	border-bottom: 1px solid var(--submenu-border);
}

/********** ZOEKBALK **********/

div.dvSearch {
	float: left;
}

.dj_ie div.dvSearch {
	background: url(../images/gradient.gif) repeat-x top left #ededed;
}

.dvSearch-holder {
	float: left;
}

.search-field {
	display: inline-block;
	width: 600px;
}

	.search-field input {
		width: 410px;
		padding-right: 150px !important;
	}

.search-add {
	display: inline-block;
	margin-left: -355px;
	border-left: 1px solid var(--panel-bg);
	padding-left: 5px;
	font-size: 12px;
}

div.dvSearch-inner {
	height: 23px;
	padding: 10px;
}

.search-big {
	width: 90%;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	padding: 5px;
	padding-left: 30px !important;	
	border: 1px solid var(--input-border);
	color: var(--text-color);
}

.sec-nav a {
	float: right;
	width: 6%;
	height: 28px;
	padding-top: 16px;
	border-left: 1px solid #C1C1C1;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
}

.sec-nav1 a {
	float: none;
	width: 15%;
	height: 28px;
	margin-top: -10px;
	padding-top: 16px;
	border-left: 1px solid #C1C1C1;
	text-align: center;
	text-decoration: none;
}

.sec-nav2 a {
	float: left;
	width: 7%;
	height: 28px;
	margin-top: -10px;
	padding-top: 16px;
	border-left: 1px solid #C1C1C1;
	text-align: center;
	text-decoration: none;
}

.sysmelding {
	text-align: center;
	color: red;
	text-decoration: solid;
}

	.sysmelding a {
		color: red;
	}

.HelpLink {
	text-align: center;
	text-decoration: solid;
}

	.HelpLink a {
		color: var(--text-color);
	}

.logOutLink {
	background: url(../images/logout-icon.png) no-repeat 13px center;
}

.UpdateLink {
	background: url(../images/update-icon.png) no-repeat 13px center;
}

.container1 {
	overflow: hidden;
}

.left1 {
	width: 350px;
	float: left; /* add this */
	border: 1px;
	position: fixed;
}

.right1 {
	border: 1px;
	float: left;
	padding-left: 355px;
}
/*********  BUTTON   ***********/


a.button,
input[type="submit"],
input[type="button"] {
	display: inline-block;
	color: var(--btn-primary-text);
	background-color: var(--btn-primary-bg);
	border: 1px solid var(--btn-primary-border);
	border-radius: var(--btn-radius);
	padding: var(--btn-padding);
	font-size: var(--btn-font-size);
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	margin: 0.2em;
	transition: var(--btn-transition);
	line-height: 1.4em;
}

	a.button:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover {
		background-color: var(--btn-primary-hover);
		border-color: var(--btn-primary-hover);
	}

	a.button:focus,
	input[type="submit"]:focus,
	input[type="button"]:focus {
		outline: none;
		border-color: var(--link-color);
		box-shadow: 0 0 0 0.25rem var(--focus-ring);
	}



/***********  INLOGSCHERM  *********/
.meldingen {
	float: left;
	margin: auto;
	width: 100%;
}

	.meldingen ul {
		list-style-type: decimal;
	}

.meldingen-inner {
	margin-left: 50px;
	width: 50%;
}

.meldingen-content {
	margin: 0px !important;
	border: 0px;
	width: 100%;
	height: 100%;
}

.inlogscherm {
	float: left;
	margin: auto;
	width: 100%;
	border-bottom: 1px solid var(--logo-border);
	background-image: linear-gradient(to top, var(--submenu-bg), var(--panel-bg));
}

	.inlogscherm table {
		margin: 40px;
	}

.inlogscherm-inner {
	margin: auto;
	width: 800px;
}

.inlogscherm input[type=text], .inlogscherm input[type=password] {
	padding: 4px;
	font-size: 14px;
}

.pint-icon {
	float: right;
	margin-right: 40px;
}

input[type=text], input[type=password] {
	padding: 3px;
}

/***********  NAVIGATION  *********/

.page_navigation {
	margin-right: 10px;
	color: var(--text-color) !important;
}

	.page_navigation a {
		padding: 3px;
		border: 1px solid var(--panel-bg);
		font-weight: normal;
		background-color: var(--panel-bg);
		color: var(--text-soft);
	}

	.page_navigation strong {
		padding: 3px;
		border: 1px solid var(--panel-bg);
		font-weight: normal;
		background-color: var(--panel-bg);
		color: var(--text-color);
	}

.dj_ie .page_navigation a, .dj_ie .page_navigation strong {
	background: url(../images/gradient.gif) repeat-x top left #ededed;
}

/***********  CONTROLS  *********/
input, select, textarea {
	background-color: var(--page-bg);
	color: var(--text-color);
}

	input:disabled, select:disabled, textarea:disabled {
		background-color: var(--disabled-bg);
		color: #000000;
	}

	input.error {
		background-color: var(--error-bg);
	}

/***********  PW Check  *********/
.tiptekst {
	color: #949494;
	font-size: 10px;
}

.strength0, .strength1, .strength2, .strength3, .strength4, .strength5 {
	padding: 5px;
	float: left;
	width: 250px;
	height: 25px;
	border: 1px solid gray;
}

.strength0 {
	width: 40px;
	background: #cccccc;
}

.strength1 {
	width: 70px;
	background: #ff0000;
}

.strength2 {
	width: 100px;
	background: #ff5f5f;
}

.strength3 {
	width: 150px;
	background: #56e500;
}

.strength4 {
	background: #4dcd00;
	width: 225px;
}

.strength5 {
	background: #399800;
	width: 300px;
}

.overflowScheduleDates {
	height: 277px;
	overflow: auto;
}

tr.subsequentlyShift td {
	background-color: var(--shift-bg);
}

table.shift td p {
	margin: 0;
}

.kleurperiode {
	background: var(--kleurperiode-bg);
	color: var(--text-color);
}

.zoomtop {
	display: flex;
	width: 100%;
	max-height: 220px;
}

	.zoomtop:hover {
		position: relative;
		margin-top: 150px;
		left: 0;
		cursor: pointer;
		height: auto;
		width: auto;
		transform: scale(10.5);
		-ms-transform: scale(10.5); /* IE 9 */
		-moz-transform: scale(10.5); /* Firefox */
		-webkit-transform: scale(10.5); /* Safari and Chrome */
		-o-transform: scale(10.5); /* Opera */
		overflow: auto;
		z-index: 10;
		display: block;
	}

.zoomtop1 {
	display: flex;
	width: 100%;
	max-height: 220px;
}

	.zoomtop1:hover {
		position: relative;
		margin-top: 150px;
		left: 0;
		cursor: pointer;
		height: 500px;
		width: auto;
		transform: scale(10.5);
		-ms-transform: scale(10.5); /* IE 9 */
		-moz-transform: scale(10.5); /* Firefox */
		-webkit-transform: scale(10.5); /* Safari and Chrome */
		-o-transform: scale(10.5); /* Opera */
		overflow: auto;
		z-index: 10;
		display: block;
	}

.zoomtop2 {
	display: flex;
	width: 100%;
	max-height: 220px;
}

	.zoomtop2:hover {
		position: relative;
		margin-top: 150px;
		left: 0;
		cursor: pointer;
		height: 500px;
		width: auto;
		transform: scale(10.5);
		-ms-transform: scale(10.5); /* IE 9 */
		-moz-transform: scale(10.5); /* Firefox */
		-webkit-transform: scale(10.5); /* Safari and Chrome */
		-o-transform: scale(10.5); /* Opera */
		overflow: auto;
		z-index: 10;
		display: block;
	}

.zoom {
	display: flex;
	width: 100%;
	max-height: 220px;
}

	.zoom:hover {
		position: relative;
		left: 0;
		cursor: pointer;
		height: 500px;
		width: auto;
		transform: scale(10.5);
		-ms-transform: scale(10.5); /* IE 9 */
		-moz-transform: scale(10.5); /* Firefox */
		-webkit-transform: scale(10.5); /* Safari and Chrome */
		-o-transform: scale(10.5); /* Opera */
		overflow: auto;
		z-index: 10;
		display: block;
	}

/*! 
 * OverlayScrollbars
 * Version: 2.1.0
 *
 * Copyright (c) Rene Haas | KingSora.
 * https://github.com/KingSora
 *
 * Released under the MIT license.
 */
.os-size-observer,
.os-size-observer-listener {
	direction: inherit;
	pointer-events: none;
	overflow: hidden;
	visibility: hidden;
	box-sizing: border-box;
}

.os-size-observer,
.os-size-observer-listener,
.os-size-observer-listener-item,
.os-size-observer-listener-item-final {
	writing-mode: horizontal-tb;
	position: absolute;
	left: 0;
	top: 0;
}

.os-size-observer {
	z-index: -1;
	contain: strict;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding: inherit;
	border: inherit;
	box-sizing: inherit;
	margin: -133px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: scale(0.1);
}

	.os-size-observer::before {
		content: "";
		flex: none;
		box-sizing: inherit;
		padding: 10px;
		width: 10px;
		height: 10px;
	}

.os-size-observer-appear {
	animation: os-size-observer-appear-animation 1ms forwards;
}

.os-size-observer-listener {
	box-sizing: border-box;
	position: relative;
	flex: auto;
	padding: inherit;
	border: inherit;
	margin: -133px;
	transform: scale(10);
}

	.os-size-observer-listener.ltr {
		margin-right: -266px;
		margin-left: 0;
	}

	.os-size-observer-listener.rtl {
		margin-left: -266px;
		margin-right: 0;
	}

	.os-size-observer-listener:empty::before {
		content: "";
		width: 100%;
		height: 100%;
	}

	.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
		display: block;
		position: relative;
		padding: inherit;
		border: inherit;
		box-sizing: content-box;
		flex: auto;
	}

.os-size-observer-listener-scroll {
	box-sizing: border-box;
	display: flex;
}

.os-size-observer-listener-item {
	right: 0;
	bottom: 0;
	overflow: hidden;
	direction: ltr;
	flex: none;
}

.os-size-observer-listener-item-final {
	transition: none;
}

@keyframes os-size-observer-appear-animation {
	from {
		cursor: auto;
	}

	to {
		cursor: none;
	}
}

.os-trinsic-observer {
	flex: none;
	box-sizing: border-box;
	position: relative;
	max-width: 0px;
	max-height: 1px;
	padding: 0;
	margin: 0;
	border: none;
	overflow: hidden;
	z-index: -1;
	height: 0;
	top: calc(100% + 1px);
	contain: strict;
}

	.os-trinsic-observer:not(:empty) {
		height: calc(100% + 1px);
		top: -1px;
	}

		.os-trinsic-observer:not(:empty) > .os-size-observer {
			width: 1000%;
			height: 1000%;
			min-height: 1px;
			min-width: 1px;
		}

/**
 * environment setup
 */
.os-environment {
	--os-custom-prop: -1;
	position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: scroll;
	height: 200px;
	width: 200px;
	z-index: var(--os-custom-prop);
}

	.os-environment div {
		width: 200%;
		height: 200%;
		margin: 10px 0;
	}

	.os-environment.os-environment-flexbox-glue {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: auto;
		width: auto;
		min-height: 200px;
		min-width: 200px;
	}

		.os-environment.os-environment-flexbox-glue div {
			flex: auto;
			width: auto;
			height: auto;
			max-height: 100%;
			max-width: 100%;
			margin: 0;
		}

	.os-environment.os-environment-flexbox-glue-max {
		max-height: 200px;
	}

		.os-environment.os-environment-flexbox-glue-max div {
			overflow: visible;
		}

			.os-environment.os-environment-flexbox-glue-max div::before {
				content: "";
				display: block;
				height: 999px;
				width: 999px;
			}

/**
 * hide native scrollbars
 */
.os-environment,
.os-viewport {
	-ms-overflow-style: scrollbar !important;
}

[data-overlayscrollbars-initialize],
[data-overlayscrollbars~=scrollbarHidden],
.os-viewport-scrollbar-hidden.os-environment,
.os-viewport-scrollbar-hidden.os-viewport {
	scrollbar-width: none !important;
}

	[data-overlayscrollbars-initialize]::-webkit-scrollbar,
	[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
	[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
	[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
	.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar,
	.os-viewport-scrollbar-hidden.os-environment::-webkit-scrollbar-corner,
	.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar,
	.os-viewport-scrollbar-hidden.os-viewport::-webkit-scrollbar-corner {
		-webkit-appearance: none !important;
		appearance: none !important;
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

/**
 * elements wont suddenly crop after initialization is done
 */
[data-overlayscrollbars-initialize] {
	overflow: auto;
}

/**
 * applied to body
 */
html[data-overlayscrollbars],
html.os-viewport-scrollbar-hidden,
html.os-viewport-scrollbar-hidden > body {
	box-sizing: border-box;
	margin: 0;
	width: 100%;
	height: 100%;
}

	html[data-overlayscrollbars] > body {
		overflow: visible;
	}

/**
 * structure setup
 */
[data-overlayscrollbars~=host] {
	position: relative;
}

[data-overlayscrollbars~=host],
.os-padding {
	display: flex;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
}

.os-padding,
.os-viewport {
	box-sizing: inherit;
	position: relative;
	flex: auto !important;
	height: auto;
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	z-index: 0;
}

.os-viewport {
	--os-vaw: 0;
	--os-vah: 0;
}

	.os-viewport.os-viewport-arrange::before {
		content: "";
		position: absolute;
		pointer-events: none;
		z-index: -1;
		min-width: 1px;
		min-height: 1px;
		width: var(--os-vaw);
		height: var(--os-vah);
	}

[data-overlayscrollbars~=host],
[data-overlayscrollbars~=viewport] {
	overflow: hidden;
}

[data-overlayscrollbars~=overflowVisible] {
	overflow: visible;
}

[data-overlayscrollbars-overflow-x=hidden] {
	overflow-x: hidden;
}

[data-overlayscrollbars-overflow-x=scroll] {
	overflow-x: scroll;
}

[data-overlayscrollbars-overflow-x=hidden] {
	overflow-y: hidden;
}

[data-overlayscrollbars-overflow-y=scroll] {
	overflow-y: scroll;
}

.os-padding,
.os-viewport {
	overflow: hidden;
}

.os-overflow-visible {
	overflow: visible;
}

.os-content {
	box-sizing: inherit;
}

/**
 * optional & experimental grid mode
 */
[data-overlayscrollbars-grid],
[data-overlayscrollbars-grid] .os-padding {
	display: grid;
	grid-template: 1fr/1fr;
}

	[data-overlayscrollbars-grid] > .os-padding,
	[data-overlayscrollbars-grid] > .os-viewport,
	[data-overlayscrollbars-grid] > .os-padding > .os-viewport {
		height: auto !important;
		width: auto !important;
	}

.os-scrollbar {
	contain: size layout style;
	transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
	pointer-events: none;
	position: absolute;
	opacity: 0;
	visibility: hidden;
}

body > .os-scrollbar {
	position: fixed;
	z-index: 99999;
}

.os-scrollbar-transitionless {
	transition: none;
}

.os-scrollbar-track {
	position: relative;
	direction: ltr !important;
	padding: 0 !important;
	border: none !important;
}

.os-scrollbar-handle {
	position: absolute;
}

.os-scrollbar-track,
.os-scrollbar-handle {
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
	pointer-events: auto;
	touch-action: none;
}

.os-scrollbar-horizontal {
	bottom: 0;
	left: 0;
}

.os-scrollbar-vertical {
	top: 0;
	right: 0;
}

.os-scrollbar-rtl.os-scrollbar-horizontal {
	right: 0;
}

.os-scrollbar-rtl.os-scrollbar-vertical {
	right: auto;
	left: 0;
}

.os-scrollbar-visible,
.os-scrollbar-interaction.os-scrollbar-visible {
	opacity: 1;
	visibility: visible;
}

.os-scrollbar-auto-hidden {
	opacity: 0;
	visibility: hidden;
}

.os-scrollbar-unusable,
.os-scrollbar-unusable *,
.os-scrollbar-wheel,
.os-scrollbar-wheel * {
	pointer-events: none !important;
}

	.os-scrollbar-unusable .os-scrollbar-handle {
		opacity: 0 !important;
	}

.os-scrollbar-horizontal .os-scrollbar-handle {
	bottom: 0;
}

.os-scrollbar-vertical .os-scrollbar-handle {
	right: 0;
}

.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle {
	right: auto;
	left: 0;
}

.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
	left: 0;
	right: 0;
}

.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
	top: 0;
	bottom: 0;
}

.os-scrollbar {
	--os-size: 0;
	--os-padding-perpendicular: 0;
	--os-padding-axis: 0;
	--os-track-border-radius: 0;
	--os-track-bg: none;
	--os-track-bg-hover: none;
	--os-track-bg-active: none;
	--os-track-border: none;
	--os-track-border-hover: none;
	--os-track-border-active: none;
	--os-handle-border-radius: 0;
	--os-handle-bg: none;
	--os-handle-bg-hover: none;
	--os-handle-bg-active: none;
	--os-handle-border: none;
	--os-handle-border-hover: none;
	--os-handle-border-active: none;
	--os-handle-min-size: 33px;
	--os-handle-max-size: none;
	--os-handle-perpendicular-size: 100%;
	--os-handle-perpendicular-size-hover: 100%;
	--os-handle-perpendicular-size-active: 100%;
	--os-handle-interactive-area-offset: 0;
}

	.os-scrollbar .os-scrollbar-track {
		border: var(--os-track-border);
		border-radius: var(--os-track-border-radius);
		background: var(--os-track-bg);
		transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
	}

		.os-scrollbar .os-scrollbar-track:hover {
			border: var(--os-track-border-hover);
			background: var(--os-track-bg-hover);
		}

		.os-scrollbar .os-scrollbar-track:active {
			border: var(--os-track-border-active);
			background: var(--os-track-bg-active);
		}

	.os-scrollbar .os-scrollbar-handle {
		border: var(--os-handle-border);
		border-radius: var(--os-handle-border-radius);
		background: var(--os-handle-bg);
	}

		.os-scrollbar .os-scrollbar-handle:before {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			display: block;
		}

		.os-scrollbar .os-scrollbar-handle:hover {
			border: var(--os-handle-border-hover);
			background: var(--os-handle-bg-hover);
		}

		.os-scrollbar .os-scrollbar-handle:active {
			border: var(--os-handle-border-active);
			background: var(--os-handle-bg-active);
		}

.os-scrollbar-horizontal {
	padding: var(--os-padding-perpendicular) var(--os-padding-axis);
	right: var(--os-size);
	height: var(--os-size);
}

	.os-scrollbar-horizontal.os-scrollbar-rtl {
		left: var(--os-size);
		right: 0;
	}

	.os-scrollbar-horizontal .os-scrollbar-handle {
		min-width: var(--os-handle-min-size);
		max-width: var(--os-handle-max-size);
		height: var(--os-handle-perpendicular-size);
		transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
	}

		.os-scrollbar-horizontal .os-scrollbar-handle:before {
			top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
			bottom: calc(var(--os-padding-perpendicular) * -1);
		}

	.os-scrollbar-horizontal:hover .os-scrollbar-handle {
		height: var(--os-handle-perpendicular-size-hover);
	}

	.os-scrollbar-horizontal:active .os-scrollbar-handle {
		height: var(--os-handle-perpendicular-size-active);
	}

.os-scrollbar-vertical {
	padding: var(--os-padding-axis) var(--os-padding-perpendicular);
	bottom: var(--os-size);
	width: var(--os-size);
}

	.os-scrollbar-vertical .os-scrollbar-handle {
		min-height: var(--os-handle-min-size);
		max-height: var(--os-handle-max-size);
		width: var(--os-handle-perpendicular-size);
		transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
	}

		.os-scrollbar-vertical .os-scrollbar-handle:before {
			left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
			right: calc(var(--os-padding-perpendicular) * -1);
		}

	.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
		right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
		left: calc(var(--os-padding-perpendicular) * -1);
	}

	.os-scrollbar-vertical:hover .os-scrollbar-handle {
		width: var(--os-handle-perpendicular-size-hover);
	}

	.os-scrollbar-vertical:active .os-scrollbar-handle {
		width: var(--os-handle-perpendicular-size-active);
	}

/* NONE THEME: */
[data-overlayscrollbars~=updating] > .os-scrollbar,
.os-theme-none.os-scrollbar {
	display: none !important;
}

/* DARK & LIGHT THEME: */
.os-theme-dark,
.os-theme-light {
	--os-size: 4px;
	--os-padding-perpendicular: 2px;
	--os-padding-axis: 2px;
	--os-track-border-radius: 10px;
	--os-handle-interactive-area-offset: 4px;
	--os-handle-border-radius: 10px;
}

.os-theme-dark {
	--os-handle-bg: rgba(0, 0, 0, 0.44);
	--os-handle-bg-hover: rgba(0, 0, 0, 0.55);
	--os-handle-bg-active: rgba(0, 0, 0, 0.66);
}

.os-theme-light {
	--os-handle-bg: rgba(255, 255, 255, 0.44);
	--os-handle-bg-hover: rgba(255, 255, 255, 0.55);
	--os-handle-bg-active: rgba(255, 255, 255, 0.66);
}

.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle {
	border-radius: 10px;
}

.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-track, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-track {
	border-radius: 10px;
}

.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal {
	padding: 2px 2px;
	right: 10px;
	height: 10px;
}

	.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl {
		left: 10px;
		right: 0;
	}

	.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle {
		min-width: 33px;
		max-width: none;
	}

		.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before {
			top: calc((
                2px + 4px
              ) * -1);
			bottom: calc(2px * -1);
		}

.os-no-css-vars.os-theme-dark.os-scrollbar-vertical, .os-no-css-vars.os-theme-light.os-scrollbar-vertical {
	padding: 2px 2px;
	bottom: 10px;
	width: 10px;
}

	.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle {
		min-height: 33px;
		max-height: none;
	}

		.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before {
			left: calc((
                2px + 4px
              ) * -1);
			right: calc(2px * -1);
		}

	.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
		right: calc((
              2px + 4px
            ) * -1);
		left: calc(2px * -1);
	}

.os-no-css-vars.os-theme-dark .os-scrollbar-handle {
	background: rgba(0, 0, 0, 0.44);
}

.os-no-css-vars.os-theme-dark:hover .os-scrollbar-handle {
	background: rgba(0, 0, 0, 0.55);
}

.os-no-css-vars.os-theme-dark:active .os-scrollbar-handle {
	background: rgba(0, 0, 0, 0.66);
}

.os-no-css-vars.os-theme-light .os-scrollbar-handle {
	background: rgba(255, 255, 255, 0.44);
}

.os-no-css-vars.os-theme-light:hover .os-scrollbar-handle {
	background: rgba(255, 255, 255, 0.55);
}

.os-no-css-vars.os-theme-light:active .os-scrollbar-handle {
	background: rgba(255, 255, 255, 0.66);
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 26px;
}

	/* Hide default HTML checkbox */
	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--input-border);
	-webkit-transition: .4s;
	transition: .4s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 4px;
		bottom: 3px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

	.slider.round:before {
		border-radius: 50%;
	}


#kieseenkleurplanning {
	width: 400px;
	height: auto;
	padding: 10px;
	background: var(--page-bg);
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.pcr-app {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 320px !important;
	box-shadow: none !important;
	border: none !important;
}

.pcr-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 8px;
	width: 100% !important;
	max-height: 200px;
	overflow-y: auto;
	box-sizing: border-box !important;
	border-top: 1px solid #ddd;
	margin-top: 8px !important;
}

	.pcr-swatches .pcr-swatch {
		width: 24px !important;
		height: 24px !important;
		border-radius: 3px;
		cursor: pointer;
		border: 1px solid #ccc;
		margin: 0 !important;
	}

.pcr-selection {
	width: 100% !important;
	margin-bottom: 8px !important;
}

.pcr-interaction {
	width: 100% !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 5px !important;
	padding: 8px !important;
	box-sizing: border-box !important;
	border-top: 1px solid #ddd;
	margin-top: 8px !important;
}

.pcr-result {
	flex: 1 !important;
	min-width: 100px !important;
	margin: 0 5px 0 0 !important;
}

.pcr-type,
.pcr-save,
.pcr-cancel,
.pcr-clear {
	flex: 0 0 auto !important;
	margin: 0 0 0 5px !important;
}

/*********************************************

		  EXTRA: DIJIT WIDGETS IN DARK MODE

*********************************************/
/* Basis dijit-dialogen en tabellen laten meegaan met het thema */
body.darkmode .dijitDialog,
body.darkmode .dijitDialogTitleBar,
body.darkmode .dijitTabPaneWrapper,
body.darkmode .dijitTabContainer {
	background-color: var(--panel-bg);
	color: var(--text-color);
	border-color: var(--border-color);
}

body.darkmode .dijitTab {
	background-color: var(--surface-2);
	color: var(--text-color);
	border-color: var(--border-color);
}

body.darkmode .dijitTabChecked {
	background-color: var(--panel-bg);
	font-weight: bold;
}

body.darkmode .dijitInputField,
body.darkmode .dijitTextBox,
body.darkmode .dijitComboBox,
body.darkmode .dijitSelect {
	background-color: var(--page-bg);
	color: var(--text-color);
}

body.darkmode .claro .dijitTextBoxHover {
	background-color: var(--hover-bg);
}

/* Images die op donkere achtergrond problemen geven: filter */
body.darkmode img.icoonstyle {
	filter: none; /* vervang door invert(1) als iconen donker-op-donker zijn */
}

/*********************************************

   DARK MODE QUICK-FIX: hardcoded zwarte tekst

*********************************************/
/* Veel elementen krijgen kleur hardcoded (inline of claro).
   Forceer leesbare tekstkleur in dark mode: */
body.darkmode td,
body.darkmode th,
body.darkmode tr,
body.darkmode p,
body.darkmode span,
body.darkmode div,
body.darkmode label,
body.darkmode h1, body.darkmode h2, body.darkmode h3,
body.darkmode h4, body.darkmode h5, body.darkmode h6,
body.darkmode li, body.darkmode table {
	color: var(--text-color) !important;
}

/* ...maar behoud de accentkleuren: */
body.darkmode a,
body.darkmode a * {
	color: var(--link-color) !important;
}

	body.darkmode a:hover,
	body.darkmode a:hover * {
		color: var(--link-hover-color) !important;
	}

body.darkmode #menu li a,
body.darkmode #menu li a * {
	color: #fff !important; /* menuitems op donkere menubalk */
}

body.darkmode #menu li.active a,
body.darkmode #menu li.active a * {
	color: var(--text-color) !important;
}

body.darkmode #menu li.btnuitlog a {
	color: #ffac86 !important;
}

body.darkmode .tblSubHeader, body.darkmode .tblsubHeader,
body.darkmode .tblSubHeader a, body.darkmode .tblSubHeader a * {
	color: var(--primary-text) !important;
}

body.darkmode .sysmelding, body.darkmode .sysmelding a {
	color: #ff6b6b !important; /* rode systeemmelding, iets lichter voor dark */
}

body.darkmode .HelpLink a {
	color: var(--text-color) !important;
}

/* Achtergronden: tabellen/cellen zijn transparant en liggen op
   containers die (via claro of inline styles) wit blijven.
   Geef ze in dark mode expliciet een donkere achtergrond.
   GEEN !important hier: dan winnen specifiekere class-regels
   (tblSubHeader, statuskleuren, zebra) gewoon. */
body.darkmode .tblTable,
body.darkmode .tblTable tbody,
body.darkmode .tblTable td,
body.darkmode .tblTable th,
body.darkmode .tblTablewrapper,
body.darkmode .tblTablewrapper td,
body.darkmode .tblTableIntern,
body.darkmode .tblTableIntern td,
body.darkmode table {
	background-color: var(--page-bg);
}

/* Als een tabel direct of indirect op een container met
   hardcoded witte achtergrond ligt, geef die container dan
   ook een donkere achtergrond (dijit-paneel: */
body.darkmode .dijitContentPane,
body.darkmode .dijitContentPane * {
	background-color: var(--page-bg);
}

	/* ...maar laat de dijit-elementen met eigen kleur met rust: */
	body.darkmode .dijitContentPane .dijitTab,
	body.darkmode .dijitContentPane .dijitTitlePaneTitle {
		background-color: revert;
	}

/* Inline styles winnen van alles -- als elementen nog steeds
   wit/zwart blijven, zoek dan in de PHP/HTML naar
   style="background:..." en style="color:...black"
   en vervang dat door een CSS-class. */

/*********************************************

   DARK MODE: DIJIT INPUT- EN COMBOBOXVELDEN

*********************************************/
/* claro kleurt de inputtekst met hoge specificiteit zwart
   (.claro .dijitInputInner etc.) -- overschrijf met !important: */
body.darkmode .dijitTextBox,
body.darkmode .dijitComboBox,
body.darkmode .dijitDateTextBox,
body.darkmode .dijitTimeTextBox,
body.darkmode .dijitSelect,
body.darkmode .claro .dijitInputInner,
body.darkmode .claro .dijitTextBox,
body.darkmode .claro .dijitSelectLabel,
body.darkmode .dijitInputField,
body.darkmode .dijitInputContainer,
body.darkmode .claro .dijitTextBox .dijitInputInner,
body.darkmode .dj_gecko .claro .dijitTextBox .dijitInputInner,
body.darkmode .dj_webkit .claro .dijitTextBox .dijitInputInner {
	color: var(--text-color) !important;
	background-color: var(--page-bg) !important;
}

	/* De rand van de invoerbak (claro gebruikt daar een lichtblauwe rand): */
	body.darkmode .dijitTextBox,
	body.darkmode .dijitComboBox,
	body.darkmode .dijitSelect .dijitButtonContents {
		border-color: var(--input-border) !important;
		background-color: var(--page-bg) !important;
	}

/* Hover/focus (claro maakt de bak dan juist lichter): */
body.darkmode .claro .dijitTextBoxHover,
body.darkmode .claro .dijitTextBoxFocused,
body.darkmode .claro .dijitComboBoxHover {
	background-color: var(--hover-bg) !important;
}

/* De dropdown-pijl-knop: */
body.darkmode .dijitArrowButton,
body.darkmode .dijitDownArrowButton,
body.darkmode .claro .dijitArrowButtonInner {
	background-color: var(--panel-bg) !important;
	color: var(--text-color) !important;
}

/* De kalender-/tijd-popup van de DateTextBox/TimeTextBox
   (die verschijnt in een aparte popup buiten de pagina).
   LET OP: claro tekent de dagen met background-image-
   gradients -- dus ook background-image uitschakelen! */
body.darkmode .dijitCalendar,
body.darkmode .dijitCalendarMonthContainer,
body.darkmode .dijitCalendarDayLabelTemplate,
body.darkmode .dijitCalendarDateTemplate,
body.darkmode .dijitCalendarYearContainer,
body.darkmode .dijitTimePicker,
body.darkmode .dijitTimePickerItem,
body.darkmode .dijitMenu,
body.darkmode .dijitMenuTable,
body.darkmode .dijitComboBoxMenu,
body.darkmode .dijitComboBoxMenuPopup,
body.darkmode .dijitCalendarPopup {
	background-color: var(--panel-bg) !important;
	background-image: none !important;
	color: var(--text-color) !important;
	border-color: var(--border-color) !important;
}

	/* de tekst in de cellen zit vaak in een td/span onder de template: */
	body.darkmode .dijitCalendar td,
	body.darkmode .dijitCalendar td span,
	body.darkmode .dijitCalendarMonthLabel,
	body.darkmode .dijitCalendarYearLabel,
	body.darkmode .dijitTimePickerItem,
	body.darkmode .dijitMenuItem,
	body.darkmode .dijitComboBoxMenu .dijitMenuItem {
		color: var(--text-color) !important;
	}

body.darkmode .dijitCalendarSelectedDate,
body.darkmode .dijitTimePickerItemHover,
body.darkmode .dijitMenuItemHover,
body.darkmode .dijitCalendarHoveredDate,
body.darkmode .dijitCalendarActiveDate {
	background-color: var(--surface-2) !important;
	background-image: none !important;
	color: var(--text-color) !important;
}

body.darkmode .dijitCalendarMonthLabel,
body.darkmode .dijitCalendarIncrementControl,
body.darkmode .dijitCalendarDecrease,
body.darkmode .dijitCalendarIncrease {
	color: var(--text-color) !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* De verborgen hulp-inputs (pijl/validation) mogen mee: */
body.darkmode .dijitValidationContainer {
	background-color: transparent !important;
}

.mijnthema .dijitTextBox .dijitInputField,
.mijnthema .dijitSelect .dijitInputField {
	padding: 4px 8px; /* was 1px 2px via mijnthema.css */
}

.mijnthema .dijitTextBox .dijitInputInner,
.mijnthema .dijitSelect .dijitButtonContents {
	line-height: 1.4;
}

.foutmelding {
	color: var(--danger-text);
	background-color: var(--danger-bg);
	border: 1px solid var(--danger-border);
	border-radius: 0.375rem;
	padding: 8px 12px;
}

	.foutmelding em {
		font-style: italic; /* <I> is vervangen door <em>, zelfde beeld */
	}

.td-top {
	vertical-align: top;
}
/* vervangt alle style="vertical-align:top" */
.td-alarm {
	color: var(--danger-text);
	font-weight: 600;
}

.melding-kritiek {
	color: var(--danger-text);
	margin-top: 0; /* stond inline: margin-top:0 */
	font-size: 15px; /* of wat je h2-maat is, check je type-schaal */
	font-weight: 600;
}
/* De strip achter de tabs: iets rustiger dan nu */
.mijnthema .dijitTabContainerTop-tabs {
	background-color: transparent; /* strip weg: wit van de pagina doet het werk */
	padding: 4px 4px 0;
	gap: 4px; /* als het flexbox is; anders via margin hieronder */
}

/* Elke tab: eigen pil-vlak met lucht eromheen */
.mijnthema .dijitTab {
	background-color: var(--panel-bg); /* zachtgrijs, niet wit */
	border: 1px solid var(--border-color);
	border-radius: 0.375rem 0.375rem 0 0; /* afgerond aan de bovenkant, classic tab-look */
	padding: 4px 12px;
	margin-right: 4px; /* ← de witte ademing tussen de tabs */
	color: var(--text-soft);
}

/* Actieve tab: wit, duidelijk verheven */
.mijnthema .dijitTabChecked,
.mijnthema .dijitTabCheckedHover {
	background-color: var(--page-bg); /* wit */
	border-color: var(--border-color);
	border-bottom-color: var(--page-bg); /* smelt samen met het inhoudsvlak eronder */
	color: var(--text-color);
	font-weight: 600;
}

/* Hover op inactieve tab */
.mijnthema .dijitTabHover {
	background-color: var(--surface-2);
}

/* ===== cssvernieuwd.css — tab-overrides (moet ná mijnthema.css laden) ===== */

/* Ruimte en pil-vorm: de belangrijkste correctie */
.mijnthema .dijitTabContainerTop-tabs .dijitTab {
	font-size: 14px; /* expliciet vastleggen, niet mee laten schalen met body (12px) */
	padding: 6px 14px; /* was 4px 12px — meer verticaal geeft "klikbaar" gevoel */
	margin-right: 6px; /* was 4px — wat mee-groeien met de grotere pil */	
	border-radius: 0.375rem 0.375rem 0 0;
}

.mijnthema .dijitTabContainerBottom-tabs .dijitTab {
	margin-right: 4px;
	border-radius: 0 0 0.375rem 0.375rem;
}

/* Actieve tab: wit + wat gewicht */
.mijnthema .dijitTabContainerTop-tabs .dijitTabChecked {
	font-weight: 600;
}

.mijnthema .dijitTabChecked {
	background-color: var(--page-bg); /* was --surface-2: grijs, nu wit */
	color: var(--text-color);
}

/* Hardcodes uit de erfenis omzetten */
.mijnthema .dijitTabDisabled {
	background-color: var(--surface-2); /* was #d3d3d3 */
}

.mijnthema .tabStripButtonHover,
.mijnthema .tabStripButtonActive {
	background-color: var(--surface-2); /* was #b5b5b5 */
}


/* Overflow-menuknop (▼) en scrollpijlen: compact houden */
.mijnthema .dijitTabContainerTop-tabs .tabStripButton {
	padding: 2px 6px; /* compact, i.p.v. de 4px 12px van de tabs */
	margin-right: 0;
	margin-left: 8px; /* wat lucht vóór de knop, zodat hij los van de tabs staat */
	min-width: 0;
	font-size: 12px; /* tabs zijn 14px, dit piiltje hoeft niet mee te doen */
	border-radius: 0.375rem; /* rond pilletje, hij is geen "tab" */
	border: 1px solid var(--border-color);
	background-color: var(--panel-bg);
	line-height: 1;
}

.mijnthema .dijitTabContainerTop-tabs .tabStripButtonHover,
.mijnthema .dijitTabContainerTop-tabs .tabStripButtonActive {
	background-color: var(--surface-2);
	border-color: var(--border-menu);
}

.mijnthema .dijitTabListContainer-top .tabStripButton {
	height: 24px !important; /* verslaat de inline height van dijit */
	padding: 2px 6px !important; /* verslaat de overgeërfde 4px 12px van .dijitTab */
	margin: 0;
	min-width: 0;
	font-size: 12px;
	line-height: 18px; /* 24px - 2×2px padding - rand ≈ 18px, centreert het ▼-pictogram */
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	background-color: var(--panel-bg);
	box-sizing: border-box !important; /* zodat 24px de ECHTE hoogte is, inclusief padding */
	top: 10px !important;
}

/* Het popup-menu zelf */
.mijnthema .dijitMenu {
	background-color: var(--page-bg);
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	padding: 4px 0;
}

/* Elk tab-item */
.mijnthema .dijitMenuItem {
	padding: 6px 16px;
	color: var(--text-color);	
	white-space: nowrap;
	border-radius: 0.25rem;
	margin: 0 4px;
}

/* Hover: zachte markering i.p.v. dijit's default blauw */
.mijnthema .dijitMenuItemHover,
.mijnthema .dijitMenuItemSelected {
	background-color: var(--surface-2);
	color: var(--text-color);
}

/* Het item van de actieve tab markeren */
.mijnthema .dijitMenuItemChecked {
	font-weight: 600;
	color: var(--link-color);
}

/* Het vlak terwijl tab-inhoud laadt */
.dijitTabPaneWrapper .dijitContentPaneLoading,
.dijitContentPaneLoading {
	background: transparent !important; /* dijit zet hier soms blauw op */
}

	.dijitContentPaneLoading .dijitIconLoading,
	.dijitIconLoading {
		/* vervang blokjes door eigen spinner */
		background-image: none !important;
	}

	.dijitContentPaneLoading::after {
		content: "";
		display: inline-block;
		width: 16px;
		height: 16px;
		border: 2px solid var(--border-color);
		border-top-color: var(--link-color);
		border-radius: 50%;
		animation: mijnthema-spin 0.7s linear infinite;
		vertical-align: middle;
		margin-right: 6px;
	}

@keyframes mijnthema-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Universele spinner in jouw palet */
.spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-color);
	border-top-color: var(--link-color);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
	vertical-align: middle;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.dots {
	display: inline-flex;
	gap: 4px;
}

	.dots span {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--text-soft);
		animation: pulse 1s ease-in-out infinite;
	}

		.dots span:nth-child(2) {
			animation-delay: 0.15s;
		}

		.dots span:nth-child(3) {
			animation-delay: 0.3s;
		}

@keyframes pulse {
	0%, 100% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}
}

/* cssvernieuwd.css */
.mijnthema .dijitToggleButton,
.mijnthema .dijitButton,
.mijnthema .dijitDropDownButton,
.mijnthema .dijitComboButton {
	margin: 0;
	vertical-align: middle;
}

	.mijnthema .dijitButton .dijitButtonNode,
	.mijnthema .dijitToggleButton .dijitButtonNode,
	.mijnthema .dijitDropDownButton .dijitButtonNode {
		background-color: var(--btn-primary-bg);
		border: 1px solid var(--btn-primary-bg);
		border-radius: var(--btn-radius);
		padding: var(--btn-padding);
		font-size: var(--btn-font-size);
		color: var(--btn-primary-text);
		transition: var(--btn-transition);
		line-height: 1.4em;
	}

.mijnthema .dijitButtonHover .dijitButtonNode,
.mijnthema .dijitToggleButtonHover .dijitButtonNode {
	background-color: var(--btn-primary-hover);
	border-color: var(--btn-primary-hover);
}

.sticky-paneel {
	position: sticky;
	top: 0;	
}

.sticky-scroll {	
	overflow-y: auto;
	box-sizing: border-box;
}

.master-detail {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
}

	.master-detail > div:first-child {
		flex: 0 0 auto; /* linkerlijst: eigen breedte */
		max-width:30%;
	}

	.master-detail > .sticky-paneel {
		flex: 1 1 auto; /* vult alle resterende ruimte */
		margin-left: 5px;
		min-width: 0; /* belangrijk: voorkomt dat brede tabellen het paneel oprekken */
	}