@charset "ISO-8859-1";

* {
	-webkit-tap-highlight-color: transparent; /* Verwijder blauwe tap highlight op iOS */
	user-select: auto;
	-webkit-user-select: auto;
	-moz-user-select: auto;
}

html {
  height: 100%;
  overflow-x: hidden;
}

/* voor kleuren palet: background-color: hsl(var(--hue), 70%, 80%); */
:root {
  --hue: 0;
}

/* Verbeterde focus voor toegankelijkheid */
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	barItem:focus-visible,
	.treeItem:focus-visible {
 	outline: 2px solid #0066cc;
 	outline-offset: 2px;
}

body {
	min-height: 100vh;
 	min-height: -webkit-fill-available; /* Voor mobile browsers */
	font-family: Arial, sans-serif;
	font-size: 0.9rem;
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: lightgreen;
	display: flex;
	z-index: 900;
}

#mainContainer {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 901;
}

#aside {
	position: fixed;
	padding-left: 3px;
	background-color: #f4f4f4;
	overflow-y: auto;
	z-index: 902;
}

#main {
	position: fixed;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #f9f9f9;
	overflow-y: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* Smooth scrolling op iOS */
	z-index: 903;
}

#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 0.8rem;
	background-color: #333;
	color: white;
	text-align: center;
	padding: 5px;
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	z-index: 900;
}
.footer-left {
	font-size: inherit;
}
.footer-center {
	font-size: inherit;
}
.footer-right {
	font-size: inherit;
	margin-right: 2rem;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Arial', sans-serif;
	margin: 1rem 0;
}

h1 {
	font-size: 2.5rem;
	font-weight: bold;
	color: blue;
	text-align: center;
}

h2 {
	font-size: 2rem;
	font-weight: bold;
	color: green;
	text-align: center;
}

h3 {
	font-size: 1.75rem;
	font-weight: bold;
	color: #FF6961;
}

h4 {
	font-size: 1.5rem;
	font-weight: bold;
	color: #1b4655;
}

h5 {
	font-size: 1.25rem;
	font-weight: bold;
}

h6 {
	font-size: 1rem;
	font-weight: bold;
	color: #FF6961;
}

p {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

pre {
	font-family: 'Courier New', monospace;
	font-size: 12px;
	background-color: #f4f4f4;
	padding: 1rem;
	border: 1px solid #ccc;
	overflow: scroll;
	height: auto;
	max-height: 75vh;
	width: auto;
	max-width: max-content;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.wallpaper {
	/*background-image: url(imagefile); */
	background: transparent top no-repeat;
	background-size: cover;
	margin: 0px 2px 0px -11px;
	height: 100%;
	width: 100%;
}

/* logo */
.logo-container {
	position: fixed;
	top: 100px; /* Afstand van de bovenkant van het scherm */
	right: 7%;
}
.logo-container img {
	width: 130px; /* Pas de grootte van het logo aan */
	height: auto;
}


/* styles for menubar and menutree */
.menubar {
	width: 100%;
	top: 0;
	left: 0;
	background-color: transparent;
	font-size: 0.8rem;
	padding: 0;
}

/* bar items */
.barItem {
	font-size: inherit;
	padding: 1rem;
	cursor: pointer;
	display: inline-block;
	position : relative;
}
.barItem:hover {
	color: white !important;
	background-color: gray !important
}
.barItem.red {
	background-color: #FF6961;
}
.barItem.green {
	background-color: #B9FBC0;
}
.barItem.blue {
	background-color: #A2D2FF;
}
.barItem.yellow {
	background-color: #afaf2c;
}
.barItem.white {
	background-color: white;
	color: black;
}
.barItem.black {
	background-color: black;
	color: white;
}
.barItem.transparent {
	background-color: transparent;
	color: white;
}
.barItem.disabled {
	background-color: #70706e;
	color: black;
	cursor: not-allowed;
}
.barItem.hide {
	display: none;
}

.barSubcontainer {
	display: none;
	font-size: inherit;
	position: absolute; /* Absolute positioning to place under menu item*/
	top: 100%; /* position under menu item*/
	left: 0;
	background-color: #fff;
	z-index: 1000; /* always on top */
}
.barSubitem {
	font-size: inherit;
	padding: 1rem;
	cursor: pointer;
	background-color: lightgray;
	color: black;
}
.barSubitem:hover {
	color: white !important;
	background-color: gray !important
}
.barSubitem.disabled {
	color: #70706e;
	cursor: not-allowed;
}
.barSubitem.hide {
	display: none !important;
}

#treeContainer {
	margin-bottom: 40px;
	margin-right: 15px;
}
.hamburger {
	font-size: 130%;
	width: 21px;
	color: #FF6961;
	font-weight: bold;
	background-color: transparent;
	padding-left: 10px;
	cursor: pointer;
	border-radius: 8px;
	z-index: 9;
}

.menutree {
	font-size: 0.8rem;
	width: fit-content;
	padding: 10px 10px 10px 0px;
	margin: 10px 10px 10px 10px;
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	height: auto;
	background-color: transparent;
	border-radius: 8px;
	display: block;
	z-index: 9;
}
.menutree.hide {
	display: none;	/*shift tree left outside screen when closing tree*/
}

.treeItem {
	font-size: inherit;
	color: black;
	margin-bottom: 2px;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
}
.treeItem:hover {
	color: white !important;
	background-color: gray !important;
}
.treeItem:active{
	background-color: black;
	color: white;
}
.treeItem.red {
	color: white;
	background-color: #FF6961;
}
.treeItem.green {
	color: white;
	background-color: #B9FBC0;
}
.treeItem.blue {
	color: black;
	background-color: #A2D2FF;
}
.treeItem.white {
	color: black;
	background-color: white;
}
.treeItem.yellow {
	color: black;
	background-color: #FFF9C4;
}
.treeItem.lightgray {
	color: black;
	background-color: lightgray;
}
.treeItem.orange {
	color: black;
	background-color: #FFD580;
}
.treeItem.transparent {
	color: black;
	background-color: transparent;
}
.treeItem.disabled {
	background-color: rgb(214, 214, 214);
	color: white;
	cursor: not-allowed;
}
.treeItem.hide {
	display: none;
}

.treeSubcontainer {
	display: none;
	font-size: inherit;
	background-color: transparant;
}

table {
	font-size: 1rem;
}
/* ------------------------------------------------------------------*/
/* div to hold forms*/
.formContainer {
	position:fixed;
	top:10%;
	right:5%;
	background: transparent;
	width:max-content;
	max-height:95vh;
	overflow-y: scroll;
	display: none;
}
	
/* ------------------------------------------------------------------*/
/* HTMLforms */
.HTMLform {
	padding: 0;
	width: fit-content;
	text-align: left;
}
.HTMLform .container {
	display: flex;
}
.HTMLform .column {
	flex: 1;
	box-sizing: border-box;
	padding: 2px;
	margin-right: 100px;
}
.HTMLform .itemContainer{
	margin-bottom: 5px;
	display: flex;
}
.HTMLform .item {
	margin-bottom: 10px;
	align-items: center;
	display: flex;
}

.HTMLform label {
	display: inline-block;
	width: 150px;
	text-align: right;
	margin: 10px 10px 5px 10px;
	font-weight: bold;
	vertical-align: top;
	word-wrap: break-word;
}

.HTMLform input,
.HTMLform textarea,
.HTMLform select {
	width: auto;
	height: fit-content;
	padding: 7px;
	margin: 0px 0px;
	border: 1px solid #c32828;
	border-radius: 4px;
	font-size: 1em;
}
.HTMLform select {
	height: 30px;
	padding: 0px 7px;
	outline: none;
}
.HTMLform textarea {
	resize: both;
	min-height: 45px;
	width:500px;
}
.HTMLform input[type="number"] {
	width: 100px;
}
.HTMLform .amount {
	width: 100px;
}
.HTMLform input[type="file"] {
	width: 380px;
}
.HTMLform input[type="radio"],
.HTMLform input[type="checkbox"]
 {
	margin: 4px 3px 0px 5px;
	height: 20px;
	width:20px;
}
.HTMLform .radioLabel {
	font-weight: normal;
	margin-right: 20px;
}

.HTMLform select[disabled] {
	background-color: cadetblue;
	color: white;
	border: none;
	outline: none;
}

.HTMLform input[readonly] {
	background-color: transparent;
	color: black;
	border: none;
	outline: none;
}
.HTMLform input[readonly]:focus {
	border: none;
	outline: none;
}

.HTMLform input[type="hidden"] {
	display: none;
}

.HTMLform .error-message {
	color: #f44336;
	font-size: 14px;
	font-weight: bolder;
	margin-bottom: 10px;
}
.HTMLform .showHTML {
	padding: 10px;
	border: 1px solid red;
	background-color: #b5e5f5;
	width: fit-content;
	display: none;
}
.HTMLform .flex {
	display: flex;
}
@media (max-width: 768px) {
	.formContainer {top:5%; left: 5%; right: unset; width:95%;}
	.HTMLform input[type="number"] {width: 60px;}
	.HTMLform button {width: 75px}
	.HTMLform textarea {width: 60%;}
	.HTMLform .flex {display: block;}
}

.tooltip {
	position: relative;
}
.tooltiptext {
	font-size: 11px;
}
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 0px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 100%;
	opacity: 0;
	transition: opacity 0.3s;
}

/* ------------------------------------------------------------------*/
/* div to hold popups*/
.popupOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	cursor: not-allowed;
	z-index: 99;
}

.popupContainer {
	border: 1px solid lightgray;
	position:absolute;
	min-width:10%;
	background-color: #c0c0c0;
	z-index: 100;
}
@media (max-width: 768px) {
	.popupContainer {left: 5%; width:90%;}
}

.popupHeader {
	background-color: transparent;
	font-size: 1rem;
	font-weight: bolder;
	padding-left: 10px;
	align-items:center;
	text-align: center;
	display: flex;
	justify-content: space-between;
	cursor: move;
}
.popupX {
	padding:6px 0px;
	margin: 0px;
	cursor:pointer;
	color: #fff;
	font-weight: bolder;
	background:red;
	font-size: 1rem;
	width:40px;
	border-radius: 0;
}
.popupContent {
	padding: 10px;
	background-color: #fff9c494;
	text-align: center;
	min-height: 100px;
	overflow-y: auto;
}

/* Prompt box specific styling */
.radioOption {
	display: block;
	padding: 5px 0;
	cursor: pointer;
}

.radioOption:hover {
	background-color: #f5f5f5;
}

.radioOption input[type="radio"] {
	margin-right: 10px;
}

/* Form elements styling */
.popupContent form {
	width: auto;
}

/* ------------------------------------------------------------------*/
.formLogin {
	width: 350px;
	left: 45%;
	top: 25%;
	margin: auto;
	background-color: #fff;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
	.formLogin {left: 5%; width:90%;}
}
.formLogin h2 {
	text-align: center;
	margin-bottom: 20px;
}
.formLogin.left {
	margin-left: 20px;
}
.formLogin .form-group {
	margin-bottom: 15px;
	text-align: left;
}
.formLogin label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
}
.formLogin span {
	margin-bottom: 5px;
}
.formLogin input[type="text"],
.formLogin input[type="password"],
.formLogin input[type="email"] {
	width: 96%;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
.formLogin input[readonly] {
	background-color: #f0f0f0;
	color: #333;
}
.formLogin .btn {
	display: inline-block;
	width: 49%;
	padding: 10px;
	background-color: #4caf50;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}
.formLogin .btn:hover {
	color:black;
}
.formLogin .cancel {
	background-color: #ff0000;
}
.formLogin .cancel:hover {
	background-color: #ff9b9b;
}
.formLogin .message {
	text-align: center;
	margin-top: 10px;
	color: #666;
}
.formLogin .error {
	text-align: center;
	margin-top: 10px;
	color: red;
}

/* ------------------------------------------------------------------*/
.password-container {
	position: relative;
}

.togglePassword {
	font-size: 200%;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-56%);
	cursor: pointer;
}

/* ------------------------------------------------------------------*/
.message {
	color: black;
	font-style: normal;
	text-align: center;
	margin-bottom : 10px;
	}
.message .title {
	font-size: 2.5rem;
	font-weight: bold;
	line-height: 120% !important;
	margin-top: 30px;
	}
.message .bericht {
	color: #000000;
	background-color: #e5eecc;
	font-size: 14px;
	width: 80%;
	text-align: left;
	padding: 8px;
	margin: 0 auto; /* Horizontaal centreren */
	display: block; /* Om de margin:auto eigenschap te activeren */
	border: 1px solid #d4d4d4;
	clear: both;
	}
.message .left {
	margin-left: 20px;
}
.message .font12 {
	font-size: 12px;
}
@media (max-width: 768px) {
	.message .bericht {width:95%;}
	.message .left {margin-left: 5px;}
}
/* ------------------------------------------------------------------*/
.row {
	display: flex;
}

.column {
	padding: 10px 20px;
	/*  border: 1px solid #ccc; */
}

.column10 {flex: 10%;}
.column20 {flex: 20%;}
.column30 {flex: 30%;}
.column40 {flex: 40%;}
.column50 {flex: 50%;}
.column60 {flex: 60%;}
.column70 {flex: 70%;}
.column80 {flex: 80%;}
.column90 {flex: 90%;}
.columnAuto {flex: auto;}

.cell {
	flex: 1;
	margin-right: 10px;
}

@media (max-width: 768px) {
	.row {
		display: block;
	}
	.column {
	width: 95%;
	margin-bottom: 10px;
	}
}
/* ------------------------------------------------------------------*/
.buttonGroup {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 15px;
}

button {
	display: inline-block;
	width: auto;
	margin: 0 10px;
	padding: 10px 20px;
	background-color: #A2D2FF; /*pastel-blue */
	color: rgb(0, 0, 0);
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}
button:hover {
	background-color: #c0c0c0;
}
button[disabled] {
	background-color: lightgray !important;
	cursor: auto;
}

.success {
	background-color:#27ae60;
}
.cancel {
	background-color:#e74c3c;
}

.genpsw {
	background-color: #c0c0c0;
	font-size: 9px;
	height: 15px;
	padding: 2px;
	margin: 4px;
}

/* ------------------------------------------------------------------*/
.multicolumn-dropdown {
	font-family: 'Courier New', Courier, monospace; /* use monospace-font */
	color: black;
	width: fit-content;
}
.multicolumn-dropdown option {
	color: black;
	font-size: 0.8rem;
}
.multicolumn-dropdown .header {
	color: #fff;
	background: black;
}
@media (max-width: 768px) {
	.multicolumn-dropdown {font-size: 12px; max-width:60%;}
}

/* ------------------------------------------------------------------*/
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; margin-left:20px;}
.bold { font-weight: bold; }
.flex { display:flex; }
.fontred {color: #FF6961;}
.fontblue {color: #A2D2FF;}
.fontgreen {color: #B9FBC0;}
.pointer {cursor: pointer}
.inline-block {display: inline-block}

.width25 {width:25% !important;}
.width50 {width:50% !important;}
.width75 {width:75% !important;}
.width100 {width:100% !important;}

/* colors */
.pastel-pink { background-color: #FADADD; }
.pastel-blue { background-color: #A2D2FF; }
.pastel-yellow { background-color: #FFF9C4; }
.pastel-green { background-color: #B9FBC0; }
.pastel-purple { background-color: #DABFFF; }
.pastel-orange { background-color: #FFD580; }
.pastel-red { background-color: #FF6961;}

@media (max-width: 768px) {
	.scaleMobielDiv {width: 125%;}  /* 100/0.8 */ 
	.scaleMobiel {transform: scale(0.8); transform-origin:left top;}
	}

.spanlabel {
	width: fit-content;
	font-weight: bold;
	padding-left: 30px;
}
@media (max-width: 768px) {
	.spanlabel {width: 60%; padding-left: 5px; display: block;}
}

/* ----------------------------------------------------------HTMLtable*/
.HTMLtable {
	font-family: Helvetica, sans-serif;
	/* border-collapse: ;*/
	width: fit-content;
	max-width: 100%;
	table-layout: auto;
	background : transparent;
	padding-bottom: 20px;
}
.HTMLtable .table-container {
		overflow-y: auto;
		max-height: 70vh;
}
.HTMLtable caption {
	background-color: black;
	color: white;
	font-weight: bold;
	text-align: center;
	padding: 5px;
}
.HTMLtable thead {
	position: sticky; /* Vaste positie gebruiken */
	top: 0; /* Houdt de header bovenaan */
	z-index: 1; /* Zorgt dat de header voor andere inhoud komt */
}
.HTMLtable tr {
	vertical-align: top;
}
.HTMLtable tr:nth-child(odd) {
	background-color: rgb(244, 244, 244);
}
.HTMLtable tr:nth-child(even) {
	background-color: rgb(228, 228, 228);
}
.HTMLtable tr:hover td {
	color: white;
	background-color: #70706e;
}
tr:hover a {
	color: white;
}
.HTMLtable .rowSelect {
	background-color: #fff9c494 !important;
}
.HTMLtable th, td {
	padding: 4px 5px;
	vertical-align: top;
}
.HTMLtable th {
	background-color: #A2D2FF;
	font-weight: bold;
	text-align: center;
}
.HTMLtable input[type="checkbox"] {
	height: 15px;
	width: 15px;
	margin: 0px;
	padding: 0px;
}

.HTMLtable .sort:hover {
	background-color: #e6e6e6;
	color: black;
	cursor: pointer;
}
.HTMLtable td span {
	text-decoration:none;
	background-color:transparent;
	cursor: pointer;
	margin-top: 4px;
}

.HTMLtable .buttonContainer {
	display: inline-block;
	margin-bottom: 15px;
}

.HTMLtable buttonspan {
	min-width: 30px;
	text-align: center;
	display: inline-grid;
	padding: 8px 12px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin: 5px 5px 5px 5px;
}

.HTMLtable .btn-icon {
	padding: 5px;
	margin: 0px 3px 0px 2px;
	align-items: center;
}

.HTMLtable .btn-primary {
	background-color: #4e73df;
	color: white;
}

.HTMLtable .btn-primary:hover {
	background-color: #2e59d9;
	transform: translateY(-2px);
}

.HTMLtable .btn-success {
	background-color: #1cc88a;
	color: white;
}

.HTMLtable .btn-success:hover {
	background-color: #17a673;
	transform: translateY(-2px);
}

.HTMLtable .btn-danger {
	background-color: #e74a3b;
	color: white;
}

.HTMLtable .btn-danger:hover {
	background-color: #d52a1a;
	transform: translateY(-2px);
}

/* navigation */
.HTMLtable .navContainer {
	display: inline-block;
}

.HTMLtable nav {
	font-family: Helvetica, sans-serif;
	text-decoration: none;
	text-align: center;
	background-color: transparent;
	margin: 9px 0px;
	display: inline-block;
	cursor: pointer;
}
nav.current {
	color:#FF6961;
	font-weight: bold;
	cursor: default;
}
nav.active {
	font-weight: bold;
	cursor: pointer;
}

nav.indicator {
	color: black;
	text-align: center;
	border: 3px ridge #336699;
}

nav.ministat {
	display: inline-block;
	margin: 0px 3px;
}
nav.fullPage {
	background-color: lightgray;
	padding: 5px;
	margin-right: 50px;
	cursor: pointer;
}
nav.fullPage:hover {
	background-color: #00ff99;
	color: black;
}

nav input {
	text-align: center;
}

/*end of navigation*/

.HTMLtableDetails {
	display: none;
	border: none
}

.HTMLtable .closer {
	font-weight: bold;
	color:#FF6961;
	border-top: 2pt solid;
}

.HTMLtable .editable {
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	cursor: text;}
.HTMLtable .editable:focus {
	background-color: #e3f2fd important;
	border: 2px solid #007bff;
	outline: none;
}

.HTMLtable .error-message {
	font-size : 18px;
	font-weight: bold;
	color: red;
	border: solid;
	padding: 3px;
}

/* Verbeterde focus voor toegankelijkheid */
button:focus-visible,
input:focus-visible,
select:focus-visible,
.barItem:focus-visible,
.treeItem:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}