/* 
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto.ttf') format('truetype');
}
 */

.thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}	

body { 
	color: #404040; 
  	font-size: 10px;
 	font-family: "Roboto", sans-serif;
	font-weight: normal; 
	font-style: normal; 
	text-decoration: none; 
}
a.header:active {
  color: #404040;
  font-weight: bold;
  background-color: #A3CCEA;
}
a.header:link {
  color: #404040;
  font-weight: bold;
  background-color: #A3CCEA;
}
a.header:visited {
  color: #404040;
  font-weight: bold;
  background-color: #A3CCEA;
}
td.grijs{
  background-color: #c6c7c8;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
td.zwart{
  background-color: #404040;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #FFFFFF;
  text-align: right;
}
td.rood{
  background-color: #f5b093;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
td.bruin{
  background-color: #c7742b;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #ffffff;
  text-align: right;
}
td.donkerOranje {
  background-color: #fac073;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
td.oranje{
  background-color: #ffe595;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
td.logo_S4P{
  background-color: #fac093;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
td.paars{
  background-color: #bca4cc;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
tr.groen, td.groen{
  background-color: #c5db98;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
td.blauw{
  background-color: #a3ccea;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
td.lichtblauw{
  background-color: #d4eafb;
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #404040;
  text-align: right;
}
tr.header {
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  line-height: 14px; 
  color: #404040;
  font-weight: bold;
}
tr.header2 {
  font-family: "Roboto", sans-serif;
  font-size: 0;
  line-height: 0; 
  color: #404040;
  height:5px;
  background-color: #fff;
}
tr.headerPrint {
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  line-height: 14px; 
  color: black;
  font-weight: bold;
  background-color: #FFFFFF;
}
tr.gewijzigd {
  color: #404040; 
  font-size: 11px;
  line-height: 14px; 
  text-align: left; 
  font-family: "Roboto", sans-serif;
  background-color: #DDDDDD;
}
tr.gewijzigd2 {
  color: #404040; 
  font-size: 11px;
  line-height: 14px; 
  text-align: left; 
  font-family: "Roboto", sans-serif;
  background-color: #f0d090;
}
tr.print {
  color: #000000; 
  font-size: 11px;
  line-height: 14px; 
  text-align: left; 
  font-family: "Roboto", sans-serif;
  background-color: #ffffff;
}
tr.even, tr.evenReserve {
  color: #404040; 
  font-size: 11px;
  line-height: 14px; 
  text-align: left; 
  font-family: "Roboto", sans-serif;
  background-color: #fcfcfc;
}
tr.odd, tr.oddReserve {
  color: #404040; 
  font-size: 11px;
  line-height: 14px; 
  text-align: left; 
  font-family: "Roboto", sans-serif;
  background-color: #f2f2f2;
}
tr.evenReserve, tr.oddReserve {
  color: #ccc; 
}
tr.evenPC {
  color: #FFFFFF; 
  font-size: 11px;
  line-height: 14px; 
  text-align: left; 
  font-family: "Roboto", sans-serif;
  background-color: #4770d6;
}
tr.oddPC {
  color: #FFFFFF; 
  font-size: 11px;
  line-height: 14px; 
  text-align: left; 
  font-family: "Roboto", sans-serif;
  background-color: #4770d6;
}
td.form { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
	word-spacing: 1px; 
	letter-spacing: 0px; 
}
td.form2 { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
	word-spacing: 1px; 
	letter-spacing: 0px; 
}
a.formlink:link { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
	word-spacing: 1px; 
	letter-spacing: 0px; 
	text-decoration: underline; 
}
a.formlink:visited { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
	word-spacing: 1px; 
	letter-spacing: 0px; 
	text-decoration: underline; 
}
a.formlink:hover { 
	color: #000000; 
	background: #DDDDDD;
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
	word-spacing: 1px; 
	letter-spacing: 0px; 
	text-decoration: underline; 
}
a.formlink:active { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
	word-spacing: 1px; 
	letter-spacing: 0px; 
	text-decoration: underline; 
}
a.mainNoRef:link { 
	color: #d1d1db; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.mainNoRef:visited { 
	color: #d1d1db; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.mainNoRef:hover { 
	color: #d1d1db; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.mainNoRef:active { 
	color: #d1d1db; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.main:link { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.main:visited { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.main:hover { 
	color: #000000; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
	text-decoration: underline; 
}
a.main:active { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.klein:link { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	text-decoration: none; 
}
a.klein:visited { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	text-decoration: none; 
}
a.klein:hover { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	text-decoration: none; 
	background: #DDDDDD;
}
a.klein:active { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	text-decoration: none; 
}
a.titelLink:link { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.titelLink:visited { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
a.titelLink:hover { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: underline; 
}
a.titelLink:active { 
	color: #404040; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
.kleineTekstPlank { 
	color: #404040; 
	font-size: 9px; 
	width:50px;
	height:70px;
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 11px; 
	text-align: center; 
}
a.kleineTekstPlank:link { 
	color: #404040; 
	font-size: 9px; 
	width:50px;
	height:70px;
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 11px; 
	text-align: center; 
	text-decoration:none;
}
a.kleineTekstPlank:visited { 
	color: #404040; 
	font-size: 9px; 
	width:50px;
	height:70px;
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 11px; 
	text-align: center; 
	text-decoration:none;
}

a.kleineTekstPlank:hover { 
	color: #404040; 
	background: #DDDDDD;
	font-size: 9px; 
	width:50px;
	height:70px;
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 11px; 
	text-align: center; 
	text-decoration:none;
}

a.kleineTekstPlank:active { 
	color: #404040; 
	font-size: 9px; 
	width:50px;
	height:70px;
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 11px; 
	text-align: center; 
	text-decoration:none;
}



.titel { 
	color: black; 
	font-size: 20px; 
	font-family: "Roboto", sans-serif; 
	font-weight: 400; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
}
.titel2 { 
	color: #404040; 
	font-size: 14px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
	text-decoration: none; 
}
.naamUiting { 
	color: #404040; 
	font-size: 10px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 0px; 
	letter-spacing: 0px; 
}
.meldingRood { 
	color: #ED713D; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 1px; 
}
.meldingGroen { 
	color: #99cc33; 
	font-size: 11px; 
	font-family: "Roboto", sans-serif; 
	font-weight: bold; 
	font-style: normal; 
	line-height: 14px; 
	text-align: left; 
	word-spacing: 1px; 
}
.meldingGrijs { 
	color: #404040; 
	font-size: 10px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 12px; 
	text-align: left; 
	word-spacing: 1px; 
}
.kleineTekst { 
	color: #404040; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
}
.kleineTekstGrijs { 
	color: #a5a5a5; 
	font-size: 9px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 16px; 
}
.menuTekst { 
	color: #404040; 
	font-size: 12px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 14px; 
	color:black;
}
.select {
	color: #404040; 
	background-color:#FFFFFF; 
	BORDER-RIGHT: #404040 1px groove; 
	BORDER-TOP: #404040 1px groove; 
	FONT-SIZE: 10px; 
	BORDER-LEFT: #404040 1px groove; 
	WIDTH: 150px; 
	BORDER-BOTTOM: #404040 1px groove; 
	font-style:normal; 
	font-family: "Roboto", sans-serif; 
	padding-top:3px;
	padding-left:3px;
}
.selectOud {
	background-color:#EEEEEE; 
	border-bottom-style:solid; 
	border:thin ; 
	font-size:10px; 
	height:18px; 
	width:150px; 
	font-style:normal; 
	font-family: "Roboto", sans-serif; 
	padding-top:3px;
	padding-left:3px;
}
.input_nietGebruik {
	color: #404040; 
	font-family: "Roboto", sans-serif; 
	background-color:#FFFFFF; 
	BORDER-RIGHT: #404040 1px groove; 
	BORDER-TOP: #404040 1px groove; 
	FONT-SIZE: 10px; 
	BORDER-LEFT: #404040 1px groove; 
	WIDTH: 200px; 
	BORDER-BOTTOM: #404040 1px groove; 
}
.inputOud {
	background-color:#EEEEEE; 
	border-bottom-style:solid; 
	border:thin ; 
	font-size:10px; 
	height:18px; 
	width:150px; 
	font-style:normal; 
	font-family: "Roboto", sans-serif; 
	padding-top:2px;
	padding-left:3px;
}
.radio {
	WIDTH: 10px; 
	HEIGHT: 10px; 
}
.checkBox {
	WIDTH: 11px; 
	HEIGHT: 11px; 
}

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.formZezar {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius:8px;
}
.formZezar input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.formZezar button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #a3ccea;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  cursor: pointer;
}
.formZezar button:hover,.form button:active,.form button:focus {
  background: #fbc77d;
}
.formZezar .message {
  margin: 15px 0 0;
  color: #c00;
  font-size: 12px;
}
.formZezar .message a {
  color: #4CAF50;
  text-decoration: none;
}
.formZezar .register-form {
  display: none;
}
.password-wrapper {
  position: relative;
  width: 100%;
}

.password-input {
  padding-right: 30px; /* Zorgt ervoor dat tekst niet onder het oog-symbool komt */
}
.toggle-password {
  position: absolute;
  right: 10px;
  top: 18px;
  cursor: pointer;
  width: 20px; /* Aanpassen op basis van de grootte van je icoon */
  height: 12.5px; /* Aanpassen op basis van de grootte van je icoon */
}

/* CSS */
button, .button, .button-Z1, .button-ABC,
input, .input, .inputButton,
select, .select,
textarea, .textarea,
radio, .radio {
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #d5d9d9;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  color: #0f1111;
}

button, .button, .button-Z1, .button-ABC,
.inputButton {
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  line-height: 29px;
  padding: 0 10px 0 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

button:hover, .button:hover, .button-Z1:hover, .button-ABC:hover, 
.inputButton:hover {
  background-color: #f7fafa;
}

button:focus, .button:focus, .button-Z1:focus, .button-ABC:focus, 
.inputButton:focus,
radio:focus, .radio:focus, radio:active, .radio:active {
  border-color: #008296;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  outline: 0;
}

radio, .radio {
  opacity:.6;
}

select, input, textarea {
	font-family: "Roboto", sans-serif;
	font-size:11px;
}

.button-ABC, .button-ABC:hover, .button-ABC:focus {
  font-size:13px;
  width: 222px;
}
.b40 {
 width:40px;
}
.b50 {
 width:50px;
}
.b60 {
 width:60px;
}
.b70 {
 width:70px;
}
.b80 {
 width:80px;
}
.b90 {
 width:90px;
}
.b100 {
 width:100px;
}
.b110 {
 width:110px;
}
.b120 {
 width:120px;
}
.b130 {
 width:130px;
}
.b140 {
 width:140px;
}
.b150 {
 width:150px;
}
.b160 {
 width:160px;
}
.b170 {
 width:170px;
}

.b180 {
 width:180px;
}

.b190 {
 width:190px;
}
.b200 {
 width:200px;
}
.b210 {
 width:210px;
}
.b220 {
 width:220px;
}
.b240 {
 width:240px;
}
.b250 {
 width:250px;
}
.b260 {
 width:260px;
}
.b280 {
 width:280px;
}
.b290 {
 width:290px;
}
.b300 {
 width:300px;
}
.b350 {
 width:350px;
}
.b400 {
 width:400px;
}
.b450 {
 width:450px;
}


#titleBack {
	background: white;
	height: 20px;
	margin-left:-200px;
	margin-top:70px;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
	from(rgba(255,0,0,1)), to(rgba(0,0,0,0)));
	z-index:9999;
}	

#headerBack {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:80px;
	background:white;
	z-index:99
}
#headerBackGradient {
	background: white;
	height: 20px;
	margin-left:0px;
	margin-top:80px;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
	from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	z-index:9999;
}	
#overlayHelpdesk {
  height: 100vh;
  width: 100vw;
  position:fixed;
  top:0;
  left:0;
  margin:0;
  background:rgba(0, 0, 0, 0.6);
  z-index:99999999;
  display:none;
}
.frameHD {
	position:absolute;
	width:80vw;
	height:80vh;
	left:10vw;
	top:0;
	padding:1vw;
	background:#fff;
	border-color:gray;
	overflow:hidden;
}
.breed {
	width:1485px;
}
.size12 {
	font-size: 12px;
	line-height: 14px;
}
.size14 {
	font-size: 14px;
	line-height: 16px;
}
.size16 {
	font-size: 16px;
	line-height: 18px;
}
.size20 {
	font-size: 20px;
	line-height: 24px;
}
.size24 {
	font-size: 24px;
	line-height: 28px;
}
.uit {
	color:#ccc;
}
.codeZezar {
	display:block;
}
.codeKlant {
	display:none;
}

.fixed {
	position:fixed;
}
label {
	color:#777;
}
.h24 {
height:24px;
}
.h30 {
height:30px;
}
.h40 {
height:40px;
}
.h50 {
height:50px;
}
.h60 {
height:60px;
}
.h70 {
height:70px;
}
.h80 {
height:80px;
}
.h90 {
height:90px;
}
.h100 {
height:100px;
}
.linkZezar {
	text-decoration:none;
	border-bottom:1px solid #ccc;
	color:#404040;
}
.linkZezar:hover {
	color:#000;
	background:#fac073;
}
.linkZezarDropdown {
	color:#777;
	text-decoration:none;
	border-bottom:0px solid #ccc;
	margin-left:10px;
}
.linkZezarDropdown:hover {
	color:#000;
}
#titelUitgave {
  display: flex; /* of 'display: grid;' */
  align-items: center; /* Verticale uitlijning voor flexbox */
}
.dropdown-zezar {
	display: inline-block;
	position: relative;
	z-index: 99999;
}
.dropdown-zezar .hoofditem-zezar {
	cursor: pointer;
	font-size:13px;
	padding: 0px;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	height:30px;
}
.dropdown-zezar .hoofditem-Ed {
	cursor: pointer;
	padding: 0px;
	height:18px;
}
.dropdown-Ed {
	position:fixed;
	margin-top:-15px;
	margin-left:-20px;
	z-index: 999999999;
}
.hoofditem-Ed {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%; /* Maakt het cirkelvormig */
	font-size: 12px; /* Aan te passen op basis van de werkelijke grootte */
	cursor:pointer;
	margin-right:8px;
	position: relative;
	top:-7px;
} 
.hoofditem-zezar {
	background-color: #fff;
	border: 1px solid #d5d9d9;
	border-radius: 8px;
	box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
	box-sizing: border-box;
	color: #0f1111;
	cursor: pointer;
	display: inline-block;
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	line-height: 29px;
	padding: 0 10px 0 11px;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	position:relative;
	z-index:1;
}
.submenu-zezar {
	background-color: #fff;
	border: 1px solid #d5d9d9;
	border-radius: 4px;
	box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
	box-sizing: border-box;
	color: #0f1111;
	cursor: pointer;
	display: inline-block;
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	line-height: 29px;
	padding: 0 ;
	position: relative;
	text-align: left;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	display: none;
	position: absolute;
	left: 85%;
	top: 0;
	list-style: none;
	z-index: 99999999;
	white-space: nowrap; /* Zorgt ervoor dat submenu-items niet afbreken */
	margin-top: 5px;
}
.submenu-item-zezar {
	cursor: pointer;
	padding: 0 2px 0 2px;
	border-bottom: 1px solid #ddd;
}
.submenu-item-zezar:last-child {
	border-bottom: none;
}
.submenu-item-zezar:hover, .hoofditem-zezar:hover + .submenu-zezar, .hoofditem-Ed:hover + .submenu-zezar  {
	display: block;
}
.hoofditem-zezar:hover + .submenu-zezar, .hoofditem-Ed:hover + .submenu-zezar, .submenu-zezar:hover {
	display: block;
}

.submenu-item-zezar {
	position: relative; /* Belangrijk voor de positionering van geneste submenu's */
}

.submenu-item-zezar:hover .submenu {
	display: block; /* Toont de geneste submenu bij hover */
}

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

.submenu-zezar .submenu-zezar {
	top: 0; /* Zorgt ervoor dat geneste submenu's op dezelfde hoogte beginnen als hun ouder-item */
}
		.submenu-zezar {
			display: none;
			position: absolute;
			background-color: #f9f9f9;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
			max-height: 400px; /* Maximale hoogte van het submenu */
			overflow-y: auto; /* Activeert verticale scroll als de inhoud groter is dan de maximale hoogte */
			overflow-x: hidden; /* Voorkomt horizontale scroll */
		}
.submenu-item:hover .submenu {
    display: block; /* Zorgt dat het submenu wordt getoond bij hover */
    position: absolute;
    left: 100%; /* Positioneert het submenu rechts van het item */
    top: 0;
}
.A2P, .ads, .ads-active, .adsHover:hover, .submenu-item-ads:hover, .submenu-item-A2P-active, .submenu-item-ads-active {
	background-color:#ffe595;
}
.B2B, .banners, .banners-active, .bannersHover:hover, .submenu-item-banners:hover, .submenu-item-B2B-active, .submenu-item-banners-active {
	background-color:#bca4cc;
}
.M2M, .web, .web-active, .webHover:hover, .submenu-item-web:hover, .submenu-item-M2M-active, .submenu-item-web-active {
	background-color:#c5db98;
}
.DM, .dm, .dm-active, .dmHover:hover, .submenu-item-dm:hover, .submenu-item-DM-active, .submenu-item-dm-active, tr.bannersDM, .bannersDM {
	background: #795f99;
	color:#fff;
}
.SM, .sm, .sm-active, .smHover:hover, .submenu-item-sm:hover, .submenu-item-SM-active, .submenu-item-sm-active {
	background-color:#fed060;
}
.S2P, .content, .content-active, .contentHover:hover, .submenu-item-content:hover, .submenu-item-S2P-active, .submenu-item-content-active {
	background-color:#a3ccea;
}
.S4P, .zezar, .zezarHeader, .zezarHover:hover, .submenu-item-zezar-zezar:hover, .submenu-item-S4P-active, .sfp, .s4p, .submenu-item-zezar-active {
	background-color: #fac073;
}
.zezar:hover {
	background-color: #ea9f3b;
}
.submenu-zezar-tk {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
	margin-left:5px;
}
.disabled {
color:#ccc;
}
.reserve {
	color:#aaa;
}
.tooltip-container1, .tooltip-container2, .tooltip-containerAd1, .tooltip-containerAd2, .tooltip-containerAd3 {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip1, .tooltip2, .tooltip3, .tooltipAd1, .tooltipAd2, .tooltipAd3 {
  min-width:300px;
  max-width:500px;
  min-height:50px;
  position: absolute;
  background-color: #e8f5ff;
  border: 4px solid #A3CCEA;
  color: #000;
  padding: 5px;
  border-radius: 5px;
  top: 10px;
  left: 100%; 
  transform: translateX(20px); 
  z-index: 1;
  visibility: hidden; /* Maakt de tooltip standaard onzichtbaar */
  opacity: 0; /* Start met een doorzichtigheid van 0 */
  transition: opacity 0.3s, visibility 0.3s; /* Voegt een transitie toe */
  text-align:left;
}
.tooltip1, .tooltipAd1 {
  min-width:400px;
  max-height:300px;
  overflow-y:auto;
}
.tooltip2, .tooltipAd2 {
  transform: translateX(-330px); 
}
.tooltip3, .tooltipAd3 {
	min-width:750px;
	transform: translateX(-775px); 
}
.toolTipInfo {
  background-color: #e8f5ff;
  border: 4px solid #A3CCEA;
  color: #000;
  padding: 5px;
  border-radius: 5px;
  transform: translateX(20px); 
  visibility: hidden; /* Maakt de tooltip standaard onzichtbaar */
  opacity: 0; /* Start met een doorzichtigheid van 0 */
  transition: opacity 0.3s, visibility 0.3s; /* Voegt een transitie toe */
  text-align:left;
}
.toolTipTitle {
	max-width:400px;
	display: none; 
	position: absolute; 
	padding: 15px; 
	background-color: #777; 
	color: white; 
	font-size:12px;
	line-height:20px;
	border-radius: 5px; 
	z-index: 99999999999999999;
}

.tooltip-container1:hover .tooltip1,
.tooltip-container2:hover .tooltip2,
.tooltip-container3:hover .tooltip3,
.tooltip-containerAd1:hover .tooltipAd1,
.tooltip-containerAd2:hover .tooltipAd2,
.tooltip-containerAd3:hover .tooltipAd3 {
	visibility: visible; /* Maakt de tooltip zichtbaar */
 	opacity: 1; /* Volledige doorzichtigheid */
}

.tooltipAd1, .tooltipAd2, .tooltipAd3 {
  background-color: #ffe595;
  border: 4px solid #fac093;
}
.topRight1, .topRight2, .topRight3 {
	position:absolute;
	left:0px;
	top:104px;
	left:1480px;
	width:16px;
	z-index:999999;
}
.topRight2 {
	left:1450px;
}
.topRight3 {
	left:1270px;
}


.symbolEd, .symbol16  {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%; /* Maakt het cirkelvormig */
  font-size: 12px; /* Aan te passen op basis van de werkelijke grootte */
  cursor:pointer;
}
.symbolEd {
margin-right:8px;
}
.symbol16 {
  width: 16px;
  height: 16px;
  border: 1px solid black; /* Zwarte rand */
  color: black; /* Kleur van de letter */
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.lijn1 {
  width: 30px; /* Breedte van de lijn */
  height: 1px; /* Hoogte van de lijn */
  background-color: #777; /* Kleur van de lijn */
  margin-top: 5px; /* Ruimte boven de lijn */
  float: left; /* Laat het element aan de linkerkant zweven */
}
/*
input:focus {
  outline: 2px solid #a3ccea; 
}
*/
input:focus {
  outline: none; 
  box-shadow: 0 0 0 2px #a3ccea; 
  border-radius: 5px; 
}
.file-upload-wrapper {
	position: relative;
	display: inline-block;
}
.file-upload-input {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
.file-upload-button {
	display: inline-block;
}
.buttonSFP {
	border: 2px solid #fac073;
}
.buttonNwA {
	border: 2px solid #edc753;
}
.buttonNwB {
	border: 2px solid #BCA4CC;
}
.buttonNwC {
	border: 2px solid #a3ccea;
}
.buttonNwW {
	border: 2px solid #C5DB98;
}
.buttonR {
	border: 2px solid #FFE595;
}
.buttonER {
	border: 2px solid #FBD7A8;
}
.buttonHR {
	border: 2px solid #FAC073;
}
.buttonR:hover, .buttonRBack {
	border: 2px solid #FFE595;
	background: #FFE595;
}
.buttonER:hover, .buttonERBack {
	border: 2px solid #FBD7A8;
	background: #FBD7A8;
}
.buttonHR:hover, .buttonHRBack {
	border: 2px solid #FAC073;
	background: #FAC073;
}
.oranje {
	background: #FAC073;
}
.orangeBack {
	background: #ffe595;
}
.redBack {
	background: #F5B093;
}
.greenBack {
	background: #C5DB98;
}
.purpleBack {
	background: #BCA4CC;
}
.blueBack {
	background: #a3ccea;
}
.orangeBack:hover, .adsHover:hover {
	background: #edc753;
}
.redBack:hover {
	background: #d98c6b;
}
.greenBack:hover {
	background: #a1bc69;
}
.purpleBack:hover {
	background: #9a78b1;
}
.blueBack:hover, .contentHover:hover {
	background: #77a7ca;
}

.donkerPaars {
	background: #8959a9;
	color:white;
	font-weight:bold;
}
.opmerking {
	border:3px solid #fac073;
	border-radius:10px;
	padding:10px;
	color: #404040; 
	font-size: 14px; 
	font-family: "Roboto", sans-serif; 
	font-weight: normal; 
	font-style: normal; 
	line-height: 25px; 
	text-align: center; 
	word-spacing: 1px; 
}
.button {
	box-sizing: border-box;
}
.pointer {
	cursor:pointer;
}