* { padding:0; margin:0; outline:0; }

:root {
  --form-control-color: green;
  --form-control-disabled: #959495;
}

::-webkit-scrollbar {width: 8px;}						 								 /* width */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #1D3A60; border-radius: 10px;}	/* Track */
::-webkit-scrollbar-thumb {background: #32557f; border-radius: 10px;}					/* Handle */
::-webkit-scrollbar-thumb:hover {background: #1D3A60;}									/* Handle on hover */

/*

body {
	background: rgb(20,55,91);
	background: -moz-radial-gradient(circle, rgba(151,187,222,1) 0%, rgba(20,55,91,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(151,187,222,1) 0%, rgba(20,55,91,1) 100%);
	background: radial-gradient(circle, rgba(151,187,222,1) 0%, rgba(20,55,91,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#97bbde",endColorstr="#14375b",GradientType=1);
	font-family: Verdana, sans-serif;
	font-size:11px;
	line-height:13px;
	color:#32557f;
	text-align: justify;
	cursor: default;
}

body {
	background: linear-gradient(-45deg, rgba(151,187,222,1), rgba(20,55,91,1), rgba(151,187,222,1));
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
	font-family: Verdana, sans-serif;
	font-size:11px;
	line-height:13px;
	color:#32557f;
	text-align: justify;
	cursor: default;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body {
	background-color: #1D3A60;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg fill-opacity='0.92'%3E%3Ccircle fill='%231D3A60' cx='50' cy='0' r='50'/%3E%3Cg fill='%23203e66' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%2324436b' cx='50' cy='100' r='50'/%3E%3Cg fill='%23274771' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%232a4c77' cx='50' cy='200' r='50'/%3E%3Cg fill='%232e507d' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%23315482' cx='50' cy='300' r='50'/%3E%3Cg fill='%23345988' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%23375d8e' cx='50' cy='400' r='50'/%3E%3Cg fill='%233b6293' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%233e6699' cx='50' cy='500' r='50'/%3E%3Cg fill='%23416a9f' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%23456fa4' cx='50' cy='600' r='50'/%3E%3Cg fill='%234873aa' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%234b78b0' cx='50' cy='700' r='50'/%3E%3Cg fill='%234f7cb6' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%235280bb' cx='50' cy='800' r='50'/%3E%3Cg fill='%235585c1' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%235889c7' cx='50' cy='900' r='50'/%3E%3Cg fill='%235c8ecc' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%235F92D2' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	background-size: contain;
	font-family: Verdana, sans-serif;
	font-size:11px;
	line-height:13px;
	color:#32557f;
	text-align: justify;
	cursor: default;
}

*/

body {
	background-color: #003366;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23093869' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23123e6c' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%231c436f' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23254972' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%232E4E75' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23254972' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%231c436f' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23123e6c' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23093869' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23003366' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	background-size: cover;
	font-family: Verdana, sans-serif;
	font-size:11px;
	line-height:13px;
	color:#32557f;
	text-align: justify;
	cursor: default;
}

.lidgeld-container {display: flex; align-items: flex-start; gap: 30px;}
.lidgeld-lijst {padding-left: 45px; flex: 0 0 auto;}
.lidgeld-afbeelding {flex: 0 0 100px; padding-top: 25px;}
.lidgeld-afbeelding img {width: 220px; height: auto; display: block;}

.gdpr-container{display:flex; justify-content:space-between; align-items:flex-start;}
.gdpr-lijst{flex:1;}
.gdpr-afbeelding {flex: 0 0 100px; padding-top: 20px;}
.gdpr-afbeelding img {width: 150px; height: auto; display:block;}
.gdpr-lijst ul{margin:0; padding-left:20px;}


::selection {
    background: #d6c5bc;
    color: #c25114;
    text-shadow: none;
}

::-moz-selection {
    background: #d6c5bc;
    color: #c25114;
    text-shadow: none;
}

/* 4-Color border effect */

.rainbow {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 0.3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: sans-serif;
	font-weight: bold;
	
	&::before {
	  content: '';
	  position: absolute;
	  z-index: -2;
	  left: -50%;
	  top: -50%;
	  width: 200%;
	  height: 200%;
	  background-color: #399953;
	  background-repeat: no-repeat;
	  background-size: 50% 50%, 50% 50%;
	  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
	  background-image: linear-gradient(#bdcfa9, #bdcfa9),linear-gradient(#ff7d38, #ff7d38),  linear-gradient(#fffac2, #fffac2), linear-gradient(#32557f, #32557f);
	  animation: rotate 15s linear infinite;
	}
	
	&::after {
	  content: '';
	  position: absolute;
	  z-index: -1;
	  left: 6px;
	  top: 6px;
	  width: calc(100% - 12px);
	  height: calc(100% - 12px);
	  background: white;
	  border-radius: 5px;
	}
  }

  @keyframes rotate {
	100% {
	  transform: rotate(1turn);
	}
  }

/* End 4-Color */

article.phrase:first-letter {
	-webkit-initial-letter: 2;
    initial-letter: 2;
	font-family: 'Times New Roman', Times, serif;
  	color: #32557f;
  	font-weight: bold;
  	margin-right: .25em;
}

input, textarea, select { font-family: Verdana, sans-serif; font-size:10px; color:#32557f; border:solid 1px #d3cfc7; }
textarea { overflow:hidden; }

option:checked {
	box-shadow: 0 0 0 3px lime;
	color: Chocolate ;
}

iframe {
	width: 100%; 
	height: 700px;
	border:solid 1px #fff;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
}

.field { border:solid 1px #d3cfc7; background:#fff; padding:5px; }
.small-field { border:solid 1px #d3cfc7; background:#fff; padding:3px 1px; font-size:11px; }

.checkbox { width:13px; height:13px; vertical-align:top; position:relative; top:2px; }

.buttons { 
	text-align: right; 
	padding:10px; 
	border-top:solid 1px #e0e0e0; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	margin: 5px 5px 5px 5px;
}

.buttons { text-align: right; padding:10px; background:#eee; border-top:solid 1px #e0e0e0; clear: both;}
.buttons .button{ margin-left:3px;}
.buttons .control {margin-right: 300px;}

.button {
	background: #32557f;
	display: inline-block;
	color: #fff;
	border: 1px solid #fff; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	cursor:pointer;
	font-size: 10px;
	font-weight:bold;
	padding:4px 12px;
	text-decoration:none;
}
.button:hover {
	background: #663300;
	color: #fff;
	border: 1px solid #fff; 
}
.button:active {position: relative; top: 1px;}

.pdf {
	background: tomato;
	display: inline-block;
	color: #fff;
	border: 1px solid #fff; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	display:inline-block;
	cursor:pointer;
	font-size: 10px;
	font-weight:bold;
	padding:4px 12px;
	text-decoration:none;
}
.pdf:hover {
	background: #663300;
	color: #fff;
	border: 1px solid #fff; 
}

.xls {
	background: #289141;
	display: inline-block;
	color: #fff;
	border: 1px solid #fff; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	display:inline-block;
	cursor:pointer;
	font-size: 10px;
	font-weight:bold;
	padding:4px 12px;
	text-decoration:none;
}
.xls:hover {
	background: #663300;
	color: #fff;
	border: 1px solid #fff; 
}

.task {
	background: #378de5;
	display: inline-block;
	color: #fff;
	border: 1px solid #fff; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	display:inline-block;
	cursor:pointer;
	font-size: 10px;
	font-weight:bold;
	padding:4px 12px;
	text-decoration:none;
}
.task:hover {
	background: #663300;
	color: #fff;
	border: 1px solid #fff; 
}

.gdpr_small {
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
	font-size:10px;
	font-weight:bold;
	padding:4px 12px;
	background: #ffec64;
	color: #663300;
	border: 1px solid #663300; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
}
.gdpr_small:hover {
	background: #663300;
	color: #fff;
	border: 1px solid #fff; 
}

.ai {
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
	font-size:10px;
	font-weight:bold;
	padding:4px 12px;
	background: #5647aa;
	color: #fff;
	border: 1px solid #fff; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
}
.ai:hover {
	background: #663300;
	color: #fff;
	border: 1px solid #fff; 
}

.clearthis {
	margin : 0px;
	height : 4px;
	clear : both;
	float : none;
	font-size : 1px;
	line-height : 0px;
	overflow : hidden;
}

.reserveer_small {
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
	font-size:10px;
	font-weight:bold;
	padding:4px 12px;
	background: #FF7D38;
	color: #663300;
	border: 1px solid #663300; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
}

.reserveer_small:hover {
	background: #663300;
	color: #fff;
	border: 1px solid #fff; 
}

.slide-custom {
	position: relative;
	-webkit-animation: slideIn 2s forwards;
	animation: slideIn 2s forwards;
}
    
  @keyframes slideIn {
	0% {
	  transform: scaleX(0);
	}
	100% {
	  transform: scaleX(1);
	}
  }

/* glowing button	*/

.reserveer {
	text-decoration: none;
	text-transform:uppercase;
	font-weight: bold;
	font-size:14px; 
	text-align: center;
	cursor: pointer;
	padding: 6px 12px;
	background: #FF7D38;
	color: #663300;
	border: 1px solid #663300; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-webkit-animation: glowRes 1300ms infinite;
    -moz-animation: glowRes 1300ms infinite;
    -o-animation: glowRes 1300ms infinite;
    animation: glowRes 1300ms infinite;
}

.reserveer:hover {
	color: #fff;
	border: 1px solid #fff; 
	animation: none;
}

@keyframes glowRes {
	0% {
	  background-color: #FF7D38;
	  box-shadow: 0 0 5px #1b3350;
	}
	50% {
	  background-color: #FF7D38;
	  box-shadow: 0 0 20px #1b3350;
	}
	100% {
	  background-color: #FF7D38;
	  box-shadow: 0 0 5px #1b3350;
	}
  }

/* End glowing button	*/

/* Shake button  */

.wiggle {
	-webkit-animation: shake 2.5s infinite;
    -moz-animation: shake 2.5s infinite;
    -o-animation: shake 2.5s infinite;
    animation: shake 2.5s infinite;
}

.wiggle:hover {
	animation: none;
}

@keyframes shake {
	0%, 7%	{transform: rotateZ(0);}
	15%		{transform: rotateZ(-12deg);}
	20%		{transform: rotateZ(10deg);}
	25%		{transform: rotateZ(-10deg);}
	30%		{transform: rotateZ(6deg);}
	35%		{transform: rotateZ(-4deg);}
	40%, 100% {transform: rotateZ(0);}
}

 /* END Shake button  */ 

.field:focus {color:#000; border-color:#857b42;}

a img { border:0; }

.foto { 
	border: 3px solid #32557f;
	/* background-color: rgba(20,55,91,1); */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 3px 3px 8px 3px rgba(0,0,0,0.4);
	margin-top: 5px;
	margin-left: 5px;
}

.foto.img1 {transition-duration: 2s;}
.foto.img1:hover {transform: scale(2.2);}

.image span {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #888;
	background: rgba(0,0,0,.5);
	color: #fff;
	padding: 3em 1em 0;
  }

  .image:hover span {
	display: block;
	border: 3px solid #FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
  }

a { color:#4e4f78; text-decoration: underline; cursor:pointer; }
a:hover { color:#FF7D38; text-decoration: none;}

.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center !important; }

h1 {
	font-size:32px; 
	line-height:24px; 
	font-weight:bolder;
	-webkit-animation: changecolorh1 2s infinite ease-in-out;  /* Safari 4+ */
	-moz-animation: changecolorh1 2s infinite ease-in-out;  /* Fx 5+ */
	-o-animation: changecolorh1 2s infinite ease-in-out;  /* Opera 12+ */
	animation: changecolorh1 2s infinite ease-in-out;   /* IE 10+, Fx 29+ */ 
}

@keyframes changecolorh1 {
	0%, 49% {background-color: #fff; color:#036; }
	50%, 100% {background-color: #036; color:#fff; }
}
@-webkit-keyframes changecolorh1 {
	0%, 49% {background-color: #fff; color:#036; }
	50%, 100% {background-color: #036; color:#fff; }
}

h1:hover {animation-play-state: paused;}
h1 a{ color:#fff; text-decoration: none; }
h2 { font-size:15px; font-weight: bold; }
h3 { font-size:12px;  font-weight: normal; }
h3 a{ text-decoration: none; }

.shell { width:988px; margin:0 auto; }
#chart {width: 440px; margin: 15px auto;}

.quadrat td {
	-webkit-animation: changecolor 2s infinite;  /* Safari 4+ */
	-moz-animation: changecolor 2s infinite;  /* Fx 5+ */
	-o-animation: changecolor 2s infinite;  /* Opera 12+ */
	animation: changecolor 2s infinite;   /* IE 10+, Fx 29+ */
  }
  
  @-webkit-keyframes changecolor {
	0%, 49% {background-color: rgb(163, 216, 156);}
	50%, 100% {background-color: var(--color);}
  }

.blink_fast {animation: blinker 2s linear infinite; }
.blink_slow {animation: blinker 5s linear infinite; }
 @keyframes blinker {50% {opacity: 0;} }

#header { height:89px; /* background:url(images/header.gif); */ white-space:nowrap; }

#header h1{ 
	float:left; 
	display:inline; 
	padding-top:18px; 
	padding-left: 20px;
	letter-spacing: -2px;
	word-spacing: -3px;
	text-shadow: 0 0 5px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff, 0 0 40px #ffffff, 0 0 60px #036, 0 0 10px #76779e, 0 0 98px #036;
	color: #32557f;
	text-align: center;
	animation: blink 12s infinite;
	-webkit-animation: blink 12s infinite;
}

@-webkit-keyframes blink {
	20%,
	24%,
	55% {
	  color: #32557f;
	  text-shadow: none;
	}
  
	0%,
	19%,
	21%,
	23%,
	25%,
	54%,
	56%,
	100% {
	text-shadow: 0 0 5px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff, 0 0 40px #ffffff, 0 0 60px #036, 0 0 10px #76779e, 0 0 98px #036;
	  color: #76779e;
	}
  }
  
  @keyframes blink {
	20%,
	24%,
	55% {
	  color: #32557f;
	  text-shadow: none;
	}
  
	0%,
	19%,
	21%,
	23%,
	25%,
	54%,
	56%,
	100% {
	text-shadow: 0 0 5px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff, 0 0 40px #ffffff, 0 0 60px #036, 0 0 10px #76779e, 0 0 98px #036;
	  color: #32557f;
	}
  }

/* SVG text animation */

svg text {
	float:left; 
	display:inline; 
	font-family: sans-serif;
	letter-spacing: 2px;
	stroke: #ffa5d8;
	font-size: 30px;
	font-weight: 700;
	stroke-width: 3;
	animation: textAnimate 5s infinite alternate;
}
  
  @keyframes textAnimate {
	0% {
	  stroke-dasharray: 0 50%;
	  stroke-dashoffset:  20%;
	  fill:hsl(189, 68%, 75%)
	}
	
	100% {
	  stroke-dasharray: 50% 0;
	  stroke-dashoffstet: -20%;
	  fill: hsla(189, 68%, 75%,0%)
	}
}

/* Begin Tab menu */

#top-navigation {
	float:right;
	white-space:nowrap;
	color:#fff;
	padding-top:16px;
	padding-right: 20px;
}
#top-image img {
	float: right;
	max-width: 48px;
    max-height: 48px;
	margin-top:5px;
	margin-right: 5px;
	border: 1px solid #fff;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
#top-navigation a{ color:#fff; }
#top-navigation span{ color:yellow; font-weight: bold;}
#top {
	height:60px;
	background: #32557f;
	border: 1px solid #fff;
	margin-top: 10px;
	margin-bottom: 5px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
}

#navigation { height:30px;}
#navigation ul{ list-style-type: none; padding-left: 10px;}
#navigation ul li{ float:left; display:inline; margin-right:2px;}

#navigation ul li a span {
	width: 82px;
	font-size:11px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	padding: 3px 3px;
	margin: 2px 2px;
	background: #32557f;
	display: inline-block;
	color: #fff;
	border: 1px solid #fff; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
}
#navigation ul li a span { background-position:right 0; }
#navigation ul li a {  }

#navigation ul li a.active,
#navigation ul li a:hover { }

#navigation ul li a:before span {
	content: '';
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:50%;
	background: #fff;
	transition: .5s;
	transform: scale(.9);
	z-index: -1;
  }
  
 #navigation ul li a:hover:before span {
	transform: scale(1.2);
	box-shadow: 0 0 15px #fff;
	filter: blur(3px);
  }
  
#navigation ul li a:hover span,
#navigation ul li a.active span {
	color: #fff; 
	background: #663300;
	box-shadow: 0 0 15px #fff;
	text-shadow: 0 0 15px #fff;
  }

#navigation ul li a.active span {
	-webkit-animation: glowTab 1300ms infinite;
    -moz-animation: glowTab 1300ms infinite;
    -o-animation: glowTab 1300ms infinite;
    animation: glowTab 1300ms infinite;
}

#navigation ul li a.active { }

@keyframes glowTab {
	0% {
	  background-color: #663300;
	  box-shadow: 0 0 5px #fff;
	}
	50% {
	  background-color: #663300;
	  box-shadow: 0 0 15px #fff;
	}
	100% {
	  background-color: #663300;
	  box-shadow: 0 0 5px #fff;
	}
  }

/* End Tab menu */

/*** Begin Registratie ***/

#registreren {margin: 10px 0px 0px 50px;}

#reg_container ul {
	margin: 0;
	padding: 0px 0px 10px 0px;
	list-style-type: none;
}

#reg_container a {
	display: block;
	color: #FFF;
	background-color: #036;
	width: 600px;
	padding: 3px 12px 3px 8px;
	text-decoration: none;
	border-bottom: 1px solid #fff;
	font-weight: bold;
}

#reg_container a:hover {background-color: #369; color: #FFF;}

#reg_container li li a {
	display: block;
	color: #FFF;
	background-color: #69C;
	width: 600px;
	padding: 3px 3px 3px 17px;
	text-decoration: none;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
/*** Einde Registratie ***/

/* begin foto galerij */

.slider{
  height: 248px;
  width: 330px;
  overflow: hidden;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #FFF;
  -webkit-box-shadow: 3px 10px 89px -28px rgba(0,0,0,1);
  -moz-box-shadow: 3px 10px 89px -28px rgba(0,0,0,1);
  box-shadow: 3px 10px 89px -28px rgba(0,0,0,1);
}

.slider .fotos{
  height: 100%;
  width: 100%;
}

.fotos img{
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

/* einde foto galerij */

.verwacht {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 40px;
}


/* begin productie countdown */

#clockdiv{
    font-family: sans-serif;
    color: #1A334D;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 20px;
}

#clockdiv > div{
    padding: 4px;
    border-radius: 3px;
    display: inline-block;
}

#clockdiv div > span{
    padding: 10px 5px 10px 5px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 1px 1px 4px grey;
}

.smalltext{
    padding-top: 5px;
    font-size: 10px;
}

/* NAV LETTER BAR */

.nav {
	display: inline-block;
	padding: 4px 10px;
	margin-left: 60px;
	background-color: #E4EFFF;
	border: 1px solid #292E41;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	-moz-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
}

.letter_nav {
	display:inline-block;
	background-color: #E4EFFF;
	color: #292E41;
	border: 1px solid #292E41;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 11px;
	margin-left: 4px;
	padding: 2px;
	text-align: center;
	-webkit-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	-moz-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
}

.letter_show, .letter_nav:hover  {
	display:inline-block;
	background-color: #292E41;
	color: #E4EFFF;
	border: 1px solid #E4EFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 11px;
	margin-left: 4px;
	padding: 2px;
	text-align: center;
	-webkit-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	-moz-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
}

#refresh {
	margin: 40px 0px 20px 40px;
	color: #6f6636;
	font-size: 8px;
}

/* END NAV LETTER BAR */

/* einde productie countdown */

#container { padding:10px; margin-top: 3px;}

.small-nav { color:#978b48; padding-bottom:20px; }
.small-nav a{ color:#6f6636; }

#content { display: block; float:left; width:750px; }
#sidebar { display: block; float:right; width:230px; }
#name {
    position: absolute;
    width: 500px;
    font-size: 30px;
    letter-spacing: -1px;
    word-spacing: -4px;
    color: #663300;
    margin: 15px 0px 0px 250px;
    
    /* Jouw 3D-schaduw */
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15);

    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;

    /* Intro animatie & de subtiele glans-puls */
    opacity: 0;
    filter: blur(8px);
    transform: translateX(-25px) scale(0.95);
    
    animation: 
        fadeInFocus 1s ease-out forwards, 
        softGlow 4s ease-in-out infinite alternate 1s;
}

#name:hover {
    color: #854d14;
    transform: translateY(-5px) scale(1.03);
    text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 12px 20px rgba(102, 51, 0, 0.35);
}

/* De subtiele glans: alleen de diepste schaduw verbreedt iets */
@keyframes softGlow {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.15); } /* De tekst licht heel even subtiel op */
    100% { filter: brightness(1); }
}

@keyframes fadeInFocus {
    0% { opacity: 0; filter: blur(8px); transform: translateX(-25px) scale(0.95); }
    60% { opacity: 0.8; filter: blur(2px); }
    100% { opacity: 1; filter: blur(0px); transform: translateX(0) scale(1); }
}

#name_small {
	position: absolute;
	float: right;
	width: 400px;
	text-align: right;
	font-size: 18px;
	color: #663300;
	margin: 45px 0px 0px 125px;
	text-shadow: 0 1px 0 #ccc,
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,.1),
	0 0 5px rgba(0,0,0,.1),
	0 1px 3px rgba(0,0,0,.3),
	0 3px 5px rgba(0,0,0,.2),
	0 5px 10px rgba(0,0,0,.25),
	0 10px 10px rgba(0,0,0,.2),
	0 20px 20px rgba(0,0,0,.15);
}

.circle {
	position: absolute;
	margin: 30px 0px 0px 10px;
	display: block;
	width: 165px;
	height: 165px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	border-radius: 99em;
	border: 5px solid #32557f;
	box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}

.circle.img1 {position: absolute; margin: 30px 0px 0px 10px;transition-duration: 2s;}
.circle.img1:hover {transform: scale(2.2);}
.circle.img2 {position: absolute; margin: 30px 0px 0px 540px;}
.circle.img3 {position: absolute; margin: 10px 0px 0px 500px;}

/* Maak van de hoofdcontainer een flexbox die elementen naast elkaar zet */
.msg-content {
    width: 100%;
    box-sizing: border-box;
}

.msg-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px;				/* Ruimte tussen logo en tekst */
    width: 100%;
    padding-top: 15px;
    padding-left: 15px; 
    box-sizing: border-box;
}

.msg-logo {
    flex: 0 0 150px;
    width: 150px;
}

.msg-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.msg-text {
    flex: 1 1 auto;
    min-width: 0;                   /* Voorkomt dat lange teksten de flexbox breken */
	padding-right: 40px;
    box-sizing: border-box;
}



.msg-content p{
	background: #ffffff ;
	border:solid 0px #dbd6a2;
	padding: 10px 10px 15px 10px;
}

/* BEGIN FADE IN ID   */

#fade-in-content  {
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: 1s fadein; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/* END FADE IN ID   */
/* BEGIN FADE UP ID   */

#fade-up-content {
	animation: 1.5s fadeInUp;
}

@keyframes fadeInUp {
	0% {
	  transform: translateY(100%);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0%);
	  opacity: 1;
	}
}

/* END FADE UP ID   */
/* BEGIN FADE IN TO RIGHT ID   */

#fade-into-right {
	animation: left-to-right-fade-in 1s ease-in;
	-webkit-mask-repeat: no-repeat;
  }
  
  @keyframes left-to-right-fade-in {
	0% {
	  -webkit-mask-size: 0%;
	  -webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 1) 70%,
		rgba(0, 0, 0, 0)
	  );
	}
	100% {
	  -webkit-mask-size: 100%;
	  -webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 1) 70%,
		rgba(0, 0, 0, 0)
	  );
	}
  }

  /* END FADE IN TO RIGHT ID   */

.msg-content {
	background: #ffffff 
	url(images/content_bg.gif) bottom right no-repeat;
	margin-bottom: 10px;
}

.msg-content ul {margin-left: 40px;}
.msg-content ol {
	margin-left: 40px;
	list-style-position: inside;
	list-style-type: decimal-leading-zero;
	border-left: solid 2px #663300;
}
.msg-content li {margin-left: 15px;}
.msg-jarig {background: #ffffff url(images/ballon.jpg) bottom left no-repeat;}

.table th { background:#32557f; color:#fff; text-align: left; padding:3px 2px 3px 4px;}
.table td { background:#fbfcfc;  border-bottom:solid 1px #e0e0e0; padding:2px 3px; }
.odd,    .table tr.odd    td{ background:#d3dae4;}
.groen,  .table tr.groen  td{ background:#E0F5C8; color: #198613;}
.oranje, .table tr.oranje td{ background:#F3E3D3; color: #8d6e4e;}
.geel,   .table tr.geel   td{ background:#FFFF89; color: #969647;}
.violet, .table tr.violet td{ background:#D2CDEE;}
.rood,   .table tr.rood   td{ background:#FF8787; color: maroon;}
.grijs,  .table tr.grijs  td{ background:#DCDCDC;}
.blauw,  .table tr.blauw  td{ background:#ADDFFF;}
.table tr:hover  td{ background:#32557f; color: #fff; cursor: help;}

.table_thumb td{ background:#fbfcfc; padding:3px 3px;  z-index:5; cursor:pointer;}
.table_thumb td:hover {background:#E0F5C8;}

.pulse_totaal {animation: pulser 20s infinite; }
 @keyframes pulser {
	0%, 100% {background-color: #d3dae4;}
	25% {background:#FFFF89; color: #969647;}
	50% {background:#E0F5C8; color: #198613;}
	75% {background:#F3E3D3; color: #8d6e4e;}	
}

.box { 
	background:#fbfcfc; 
	height:100%; 
	padding:1px; 
	margin-bottom:10px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);	
}

.box-head { 
	background:#32557f url(images/bluebar.gif); 
	height:32px; 
	color:#fff; 
	padding: 0 10px; 
	line-height:32px; 
	white-space:nowrap; 
	-webkit-border-radius: 15px;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius: 15px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-radius: 15px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

.box-head .right{ padding-top:5px; line-height:13px;}
.box-head .right label,
.box-head .right input { float:left; }
.box-head .right label { padding:4px 0 0 0;}
.box-head .right input { margin-left:5px;}

.pagging { height:20px; padding:8px 10px; line-height:19px; color:#949494; }
.pagging a{ background:url(images/pagging.gif) repeat-x 0 0; height:20px; float:left; padding:0 8px; border:solid 1px #d5d5d5; text-decoration: none; color:#949494; margin-left:5px;  }
.pagging a:hover { border-color:#8c3521; background:#ba4c32; color:#fff; }
.pagging span{ float:left; margin-left:5px; padding-top:2px; }


a.ico { color:#9d9c9a; font-size:10px; text-decoration: none; padding:0 0 0 14px; background-repeat:no-repeat; background-position:0 0; }
a.ico:hover { color:#333;}
a.del { background-image:url(images/del.gif)}
a.edit { background-image:url(images/edit.gif); margin-left:14px;}
a.link {text-decoration: none;}

div.tabel{float: Left; margin: 60px 0px 20px 210px;}
div.kl_tabel {float: Left; margin-bottom: 10px;}

div.res_tabel {
	float: Left; 
	margin: 10px 0px 20px 10px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(12, 16, 61, 0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(12, 16, 61, 0.45);
	box-shadow: 10px 10px 32px 5px rgba(12, 16, 61, 0.45);	
}

div.row {
	clear: both; 
	display: table;
}

span.rounded {
	float: left;
	border: 1px solid #1D3A60;
	background:#32557f  ;
	color: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 36px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	font-size: 11px;
	padding: 1px 10px;
	margin-right: 4px;
	outline: 0;
	width: 110px;
}

span.link {
	text-decoration: none;
	float: left;
	width: 90px;
}

span.tab {
	text-align: right;
	padding-right: 45px;
}

span.info {
	background-color: #fff;
	color: #1D3A60;
	width: 330px;
	margin-left: -40px;
}

span.rounded a {text-decoration: none;}

span.reservation_label {
	float: left;
	border-left: 2px solid #1D3A60;
	border-right: 2px solid #1D3A60;
	background:#32557f ;
	text-align: right;
	color: #fff;
	font-size: 11px;
	padding-right: 10px;
	margin-left: 3px;
	width: 130px; 
}

span.corner_up_left {
	border-top: 2px solid #1D3A60;
	-moz-border-radius: 10px;
	padding-top: 10px;
	-webkit-border-radius: 10px;
	border-radius: 20px 0px 0px 0px;
}

span.corner_down_left {
	border-bottom: 2px solid #1D3A60;
	-moz-border-radius: 10px;
	padding-bottom: 10px;
	-webkit-border-radius: 10px;
	border-radius: 0px 0px 0px 20px;
}

span.corner_up_right {
	border-top: 2px solid #1D3A60;
	-moz-border-radius: 10px;
	padding-top: 10px;
	-webkit-border-radius: 10px;
	border-radius: 0px 20px 0px 0px;
}

span.corner_down_right {
	border-bottom: 2px solid #1D3A60;
	-moz-border-radius: 10px;
	padding-bottom: 10px;
	-webkit-border-radius: 10px;
	border-radius: 0px 0px 20px 0px;
}

span.cost {
	position: absolute;
	width: 180px;
	margin: 40px 0px 0px -200px;
	color: #fff;
	font-size: 55px;
	font-weight: bolder;
	text-align: right;
}

span.reservation_info {
	background-color: #32557f;
	border-color: #1D3A60;
	text-align: left;
	padding-left: 20px;
	color: #fff;
	width: 500px;
}

span.profiel_info {
	border-color: #1D3A60;
	background-color: #FFF;
	color: #1D3A60;
	text-align: left;
	padding-left: 20px;
	width: 330px;
}

span.reservation_info  a {text-decoration: none; color: #faf600;font-weight: bold;}
span.reservation_info  a:hover {color: #fff;}
span:hover.link {font-size: bolder; color: #FF7D38;}

/* Animated Cost */

animo {
	font-weight: 700;
	text-align: center;
	font-family: sans-serif;
	text-transform: uppercase;
	background: linear-gradient(90deg, #1D3A60, #fff, #1D3A60);
	letter-spacing: 5px;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-repeat: no-repeat;
	background-size: 80%;
	animation: shine 5s linear infinite;
	position: relative;
  }
  
  @keyframes shine {
	0% {
	  background-position-x: -500%;
	}
	100% {
	  background-position-x: 500%;
	}
  }

/* START REVIEWS   */

div.msg-content h1 {
	display: inline-block;
	margin: 20px 0px 10px -1px;
	padding: 0px 20px;
	font-size: 14px;
	text-align: left;
    color: white;
	background-color: #1D3A60;
	/* border: 1px solid #1D3A60; */
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	-webkit-box-shadow: 4px 7px 20px 1px #1D3A60;
	-moz-box-shadow: 4px 7px 20px 1px #1D3A60;
	box-shadow: 4px 7px 20px 1px #1D3A60;
}

div.msg-content h1:hover {
	color: #1D3A60;
	background-color: white;
}

div.msg-content.review {float: right;}

div.rev_container {
	padding: 15px 15px 20px 125px; 
	background: #1D3A60;
	margin: 15px;
	margin-bottom: 30px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	border: 3px solid #eee;
	-webkit-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	-moz-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
}

div.casting {font-size: 11px; }
div.castnum {float: right; margin-top: 15px; margin-right: 10px; vertical-align: middle;}

span.casting {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #FEE680;
	background-color: #3E3724;
	color: #FEE680;
	-webkit-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	-moz-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	padding: 3px 30px 3px 8px;
	margin-right: 10px;
}

span.trash {
	margin-left: 20px;
	float: left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #AD0F81;
	background-color: #F9C4EA;
	color: #AD0F81;
	font-weight: bolder;
	-webkit-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	-moz-box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	box-shadow: 4px 7px 40px 1px rgba(0,0,0,0.55);
	padding: 3px 10px;
}

span.cast {
	font-size: 16px;
	font-weight: bolder;
	text-align: center;
	vertical-align: middle;
	border: 2px solid #3E3724;
	background-color: #FEE680;
	color: #3E3724;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	margin-left: -35px;
	margin-right: 8px;
	padding: 3px 6px 3px 6px;
}

div.picture {padding: 10px 0px 15px 35px;}
div.dummy {margin-top: 60px;}

span.review_item {
	float: left;
	/* border: 1px solid #1D3A60; */
	/* background:#32557f; */
	color: #fff;
	font-size: 11px;
	padding: 3px 10px;
	margin-left: 15px;
	outline: 0;
	width: 110px;
}

span.review_inhoud {
	border-color: #1D3A60;
	background-color: #FFF;
	color: #1D3A60;
	text-align: left;
	padding-left: 20px;
	width: 350px;
	float: left;
	border: 1px solid #1D3A60;
	-webkit-border-radius: 10px;
  	-moz-border-radius: 10px;
  	border-radius: 10px;
  	-webkit-box-shadow: 3px 10px 89px -28px rgb(246, 247, 248);
  	-moz-box-shadow: 3px 10px 89px -28px rgba(246, 247, 248,1);
  	box-shadow: 3px 10px 89px -28px rgba(246, 247, 248,1);
	padding: 3px 10px 3px 10px;
	margin: 1px;
}

progress[value] {
	--w: 270px; /* the width*/
	--color:  /* the progress color */
	  linear-gradient(90deg,#ff6161,#1ecd1e) 0/var(--w);
	--background: lightgrey; /* the background color */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	width: var(--w);
	margin: 0 15px;
	border-radius: 10em;
	background: var(--background);
 }
 progress[value]::-webkit-progress-bar {
	border-radius: 10em;
	background: var(--background);
 }
 progress[value]::-webkit-progress-value {
	border-radius: 10em;
	background: var(--color);
 }
 progress[value]::-moz-progress-bar {
	border-radius: 10em;
	background: var(--color);
 }

/* END REVIEWS   */

label.rounded {
	float: left;
	border-left: 2px solid #1D3A60;
	border-right: 2px solid #1D3A60;
	background-color: #32557f;
	color: #fff;
	font-size: 11px;
	padding: 1px 10px;
	margin-right: 5px;
	width: 125px;
	text-align: right;
}

select.rank_txt {
	height:32px;
	margin-top: 3px;
	margin-left: 16px;
	padding: 3px 3px 3px 20px;
	border: 2px solid #1D3A60;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	z-index: 1;
}

label.rank_num {
	position: absolute;
	float: left;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background-color: tomato;
	border: 2px solid #1D3A60;
	border-radius:50%;
	color: #fff;
	font-size: 14px;
	font-weight: bolder;
	width:28px;
	height:28px;
	margin-top: 3px;
	margin-bottom: 3px;
	z-index: 4;
}

label.up 	{border-radius: 20px 0px 0px 0px; border-top: 2px solid #1D3A60; padding-top: 5px;}
label.down	{border-radius: 0px 0px 0px 20px; border-bottom: 2px solid #1D3A60; padding-bottom: 5px;}
label.down_more {height: 55px;}

input.rounded {
	float: left;
	border: 1px solid #1D3A60;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 36px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	font-size: 11px;
	padding: 0px 10px; */
	outline: 0;
	width: 330px;
}

input.profiel {
	float: left;
	border: transparent;
	border-bottom: 1px dashed #1D3A60;
	font-size: 11px;
	padding-left: 10px;
	width: 330px;
}

input.up {margin-top: 5px;}
input.profiel:focus {background-color: #eafcff; border-bottom: 1px solid #1D3A60;}
input.profiel:hover {background-color: #eafcff;}
select.profiel:hover {background-color: #eafcff;}
input.rounded:focus {background-color: #eafcff; color: #1D3A60; border-bottom: 1px solid #1D3A60;}
input.rounded:hover {background-color: #eafcff;}
select.rounded:hover {background-color: #eafcff;}

select.rounded {
	border: 1px solid #1D3A60;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	font-size: 10px;
	padding: 1px 10px;
	margin-bottom: 2px;
}

select.num {width: 50px;}

select.profiel {
	border: transparent;
	border-bottom: 1px dashed #1D3A60;
	font-size: 10px;
	padding: 0px 10px;
}

select.palm {margin-left: 0px;}

textarea.profiel {
	border: transparent;
	border-bottom: 1px dashed #1D3A60;
	font-size: 10px;
	padding: 5px 10px;
	width: 220px;
	height: 50px;
}

hr {
	border:none;
	height: 20px;
	width: 95%;
	height: 50px;
	padding-top: 10px;
	border-bottom: 1px solid #1f1209;
	box-shadow: 0 20px 20px -20px #1D3A60;
	margin: -50px auto 20px; 
  }

textarea {
	border: 1px solid #1D3A60;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	font-size: 10px;
	padding: 10px 15px;
}

.round {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

fieldset {
  /* background:#77A3D2 url(images/bg.jpg) ; */
  background: #1D3A60;
  max-width:100px;
  padding:6px;
  margin: 6px;
  -moz-border-radius:12px;	
  border-radius:12px;
  -webkit-box-shadow: 10px 10px 67px -10px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 67px -10px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 67px -10px rgba(0,0,0,0.75);
}

.ButtonMelden { text-align: right; padding:10px 30px 10px 10px;  clear: both;}

.naar-links {
	float:left; 
}

.podium {
	color: #fff;
	max-width:140px;
	width: fit-content;
	float: none;
	font-size: 22px;
	font:bolder;
	padding: 10px 205px 10px 205px;
	margin-top: 15px;
	margin-bottom: 30px;
}

.legend {
  padding: 2px 10px;
  margin-bottom:0px;
  margin-left:16px;
  /* background:url(images/header.gif); */
  background: #1D3A60;
  color: #fff;
  border: 1px solid #fff;
  -moz-border-radius:15px;	
  border-radius:15px;
}

fieldset textarea {
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	width: 170px;
	margin-bottom: 10px;
	color: #a17420;
	font-weight: bold;
}

fieldset label {
	float: left;
	border: 1px solid #fff;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;	
	background-color: #1D3A60;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px;
	padding: 1px 10px;
	margin-right: 5px;
	outline: 0;
	width: 180px;
	text-align: center;
}

.form { padding:5px 10px 5px 10px; }
.formold label span{ width:200px; color:#999; font-weight: normal; }
.formold .field { display:block; }
.formold .inline-field .field { display:inline;}
.formold .req { display:block; font-size:11px; float:right; white-space:nowrap; color:#999; }
.formold p{ padding-bottom:15px; }

.size1 { width:716px; }
.size2 { width:80px; }
.size3 { width:120px; }
textarea.size1 { height:180px; }

.box-content { padding: 10px 10px 20px 10px; }

.sort { border-top:solid 1px #e0e0e0; padding-top:10px; margin-top:15px;   }
.sort label{ display:block; font-weight: bold;}
.sort .field{ display:block; margin-top:5px; }
.sort select.field{ width:203px; }


.box-content p { padding-top:5px; }

.select-all label{ text-decoration: underline; padding-left:4px; }

.add-button,
.add-button span { float:left; height:26px; background:url(images/add-button.gif) no-repeat 0 0; padding:0 0 0 28px; }
.add-button span { background-position:right 0; padding:0 10px 0 0; }
.add-button { font-weight: bold; font-size:12px; color:#747474; text-decoration: none; line-height:26px; }
.add-button:hover { color:#333;}


#footer { height:44px; line-height:44px; color:#fff; }
#footer a { color:#5f92d2; text-decoration: none;}
#footer a:hover { color:#FF7D38;}


.msg { position:relative; padding-right:35px; margin-bottom:10px; }
.msg p{ padding:9px 10px 9px 10px; font-size:12px; background-repeat:no-repeat; background-position:10px 5px;}
.msg a.close{ font-size:0; line-height:0; position:absolute; top:0; right:0; width:34px; height:34px; background:url(images/close.gif); text-indent: -4000px;}

.msg-ok p{
	color:#5e5c40;
	font-weight: bold;
	padding-left: 40px;
	width: 98%; 	
	background-color:#fffac2; 
	border:solid 1px #5e5c40;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	background-image:url(images/msg-ok.gif);
}

.msg-error p{
	color:tomato;
	font-weight: bold;
	padding-left: 40px;
	width: 98%; 
	background-color:#f3c598;
	border:solid 1px #e8b084;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	-moz-box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	box-shadow: 10px 10px 32px 5px rgba(35,24,66,0.45);
	background-image:url(images/msg-error.gif);
}

/*** Begin Kalender ***/

div.kalender {margin-top: 5px;}
div.kalender table {width: 100%; border: 0px;}

div.kalender td {
	padding:2px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

div.agenda_dag {
	position: relative; /* Dit zorgt ervoor dat de afbeelding binnen dit blok blijft */
    padding-right: 180px;
	margin: 15px 25px 30px 25px;
	padding: 15px 30px 30px 20px;
	background-color: #EDEFFF;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: -1px 6px 29px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 6px 29px -4px rgba(0,0,0,0.75);
	box-shadow: -1px 6px 29px -4px rgba(0,0,0,0.75);
}

div.agenda_dag::after {
    content: "";
    background-image: url('images/Pierot_kalender.png'); /* Verwijs hier naar jouw bestand */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Positionering strak aan de rechterkant */
    position: absolute;
    right: 60px;        /* Afstand vanaf de rechter paarse rand */
    top: 50%;           /* Begint halverwege de hoogte */
    transform: translateY(-50%); /* Schuift exact verticaal in het midden */
    z-index: 10;
    height: 10px;  
    aspect-ratio: 1 / 1;
}
 
.sidered {color: #036; font-size: 11px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
li.side {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; margin-left: 10px; list-style: none;}
li.side_txt {margin-left: 40px;}
li.side_none {color: #bbb8b2; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; margin-left: 10px; list-style: none;}
div.agenda_dag li:before {content:"\2B9A"; padding-right: 5px;}
  
td.kalalg { 
	padding: 0px; 
	margin: 0px; 
	font: 11px Verdana, Arial; 
	font-weight: bold;
	color: #ffff; 
	line-height: 16px; 
}

td.kaltit { 
	font-weight: bold; 
	text-align: center;
	background-color: #32557f; 
	color: #fff; 
	border:solid 1px #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

td.kaltit_pdf {
	color:white;
	background-color: red;
	border:solid 1px white;
	text-align: center;
	cursor: pointer;
}

td.kaltit_pdf:hover {background-color: white; color:red; border:solid 1px red;}

td.kaltexr_sunday {
	width: 117px; 
	height: 100px; 
	padding: 2px;
	cursor: pointer; 
	font: 11px Verdana, Arial; 
	font-weight: normal;
	color: #036; 
	background-color: #CBCAF4;
	border:solid 1px #CBCAF4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

td.kaltexr { 
	width: 117px; 
	height: 100px; 
	padding: 2px;
	cursor: pointer; 
	font: 11px Verdana, Arial; 
	font-weight: normal;
	color: #036; 
	background-color: #EDEFFF;
	border:solid 1px #EDEFFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

td.kaltexr:hover, td.kaltexr_sunday:hover {background-color:transparent; border:solid 1px #fff; color: #FFF}
td.kaltexr_now {background-color: #FEFFBF; cursor: pointer;}
td.kaltexr_now:hover {background-color: #FFFF00;}

td.datum {
	cursor: pointer;
	font-weight: bold; 
	text-align: center;
	background-color: #32557f; 
	border:solid 1px #fff;
	color: #fff; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

td.datum_ext {
	padding: 2px 5px 2px 5px;
}

td.datum_now, td.datum:hover, td.datum_now:hover {
	cursor: pointer;
	font-weight: bold; 
	text-align: center;
	color: #fff; 
	background-color: #663300;
	border:solid 1px #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

div.kalender span {font-size: 70%; font-weight: bold;}
div.kalender span:hover {color: #fff;}
.vergadering	{color: maroon;}
.vertoning		{color: #FF0000;}
.activiteit 	{color: #008000;}
.repetitie		{color: #0b2a4d;}
.feestdag		{color: #C900C9;}
.verjaardag		{color: #DD9C40;}

/*** Einde Kalender ***/

/*** Begin Pagination ***/

ul.paging {
	margin:0px;
	padding:0px;
	list-style:none;
	float: right;
}

ul.paging li {
	margin:0px;
	padding:0px;
	float:left;
}

ul.paging li a {
	float:left;
	padding:5px;
	margin-right:5px;
	border:solid 1px #292E41;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	-moz-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	text-decoration:none;
	background:#E4EFFF;
	color:#292E41;
}

ul.paging li.paging-active a, ul.paging li a:hover {
	background:#2e4a6c;
	color:#FFFFFF;
	border:solid 1px #FFFFFF;
}

ul.paging li.paging-disabled a, ul.paging li.paging-disabled a:hover {
	cursor:default;
	background:#E4EFFF;
	border:solid 1px #BBBBBB;
	color:#BBBBBB;
}

ul.paging li.paging-current {
	padding:5px;
	margin-right:5px;
	border:solid 1px #292E41;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	-moz-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	background:#E4EFFF;
	color:#292E41;
}

/*** Einde Pagination ***/

table th.fiche {
	font-size: 10px;
	border:solid 1px #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	-moz-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	padding: 2px 5px 2px 5px;
	background:#32557f;
	color: #fff;
}

table td.fiche {
	font-size: 10px;
	border:solid 1px #32557f;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	-moz-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	padding: 2px 5px 2px 5px;
	background:#e2e7ec;
	color: #32557f;
}

table th.fiche_res {
	font-size: 10px;
	border:solid 1px #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	-moz-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	padding: 2px 5px 2px 5px;
	background:#32557f;
	color: #fff;
}

table td.fiche_res {
	font-size: 10px;
	border:solid 1px #32557f;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	-moz-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	padding: 2px 5px 2px 5px;
	/* background:#fff; 
	color: #32557f;	*/
}

table tr.fiche_res:hover td{background:#32557f;color: #fff; border-color:#fff; cursor:help;}
table td.fiche_bg {background:#d3dae4;}

/*GROW*/
.grow img {
	height: 150px;
	width: 150px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.grow img:hover {width: 160px; height: 160px;}

/*B&W*/
.bw {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.bw:hover {-webkit-filter: grayscale(100%);}

/*MORPH*/
.morph {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.morph:hover {
	border-radius: 50%;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-filter: grayscale(100%);
}

/*TILT*/
.tilt {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.tilt:hover {
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
}

/*B&W*/
.Transform {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.Transform:hover {
	-webkit-transform: rotate(+10deg);
	-moz-transform: rotate(+10deg);
	-o-transform: rotate(+10deg);
	-ms-transform: rotate(+10deg);
	transform: rotate(+10deg);
	-webkit-filter: grayscale(100%);
}

/*TRANSFORM2*/
.transform2 {
	position: absolute;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.transform2:hover {
	border-radius: 50%;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-filter: grayscale(100%);
}

/* Checkbox wrapper */

.checkbox-wrapper {
    --size: 9px;
    --background: #fff;
    font-size: var(--size);
  }

  .checkbox-wrapper *,
  .checkbox-wrapper *::after,
  .checkbox-wrapper *::before {
    box-sizing: border-box;
  }

  .checkbox-wrapper input[type="checkbox"] {
    visibility: hidden;
    display: none;
  }

  .checkbox-wrapper .checkbox__label {
    width: 100px;
  }

  .checkbox-wrapper .checkbox__label:before {
    content: ' ';
    display: block;
    height: var(--size);
    width: var(--size);
    position: absolute;
    top: calc(var(--size) * 0.125);
    left: 0;
    background: var(--background);  
  }

  .checkbox-wrapper .checkbox__label:after {
    content: ' ';
    display: block;
    height: var(--size);
    width: var(--size);
    border: calc(var(--size) * .10) solid rgb(151, 146, 145);
    transition: 200ms;
    position: absolute;
    top: calc(var(--size) * 0.125);
    left: 0;
    background: var(--background);  
  }

  .checkbox-wrapper .checkbox__label:after {
    transition: 100ms ease-in-out;
  }

  .checkbox-wrapper .checkbox__input:checked ~ .checkbox__label:after {
    border-top-style: none; 
    border-right-style: none;
    -ms-transform: rotate(-45deg); /* IE9 */
    transform: rotate(-45deg);
    height: calc(var(--size) * .5);
    border-color: green;
  }

  .checkbox-wrapper .checkbox {
    position: relative;
    display: flex;
    cursor: pointer;
    /* Mobile Safari: */
    -webkit-tap-highlight-color: rgba(0,0,0,0);   
  }

  .checkbox-wrapper .checkbox__label:after:hover,
  .checkbox-wrapper .checkbox__label:after:active {
     border-color: green; 
  }

  .checkbox-wrapper .checkbox__label {
    margin-right: calc(var(--size) * 2);
  }

  /* FADE CONFIRMATION */

  .confirm {
	position: absolute;
	background-color: Palegreen;
	background-position: left top;
	color: Forestgreen;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding:8px 10px 8px 10px;
	margin:10px 30px 5px 300px;
	border: 2px solid Forestgreen;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 7px 10px 49px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 7px 10px 49px -15px rgba(0,0,0,0.75);
	box-shadow: 7px 10px 49px -15px rgba(0,0,0,0.75);
	-webkit-animation-duration: 20s;
	-webkit-animation-fill-mode: both;
 }
  
  /* FADE ALERT */

 .alerting {
	position: absolute;
	background-color: tomato;
	background-position: left top;
	color: maroon;
	width: 400px;
	font-size: 11px;
	font-weight: bold;
	text-align: left;
	padding:8px 5px 8px 5px;
	margin:5px 30px 5px 300px;
	border: 2px solid maroon;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 7px 10px 49px -15px rgba(0,0,0,0.75);
	-moz-box-shadow: 7px 10px 49px -15px rgba(0,0,0,0.75);
	box-shadow: 7px 10px 49px -15px rgba(0,0,0,0.75);
	-webkit-animation-duration: 40s;
	-webkit-animation-fill-mode: both;
 }

 @-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
 }

 @keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
 }

 
 .fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
 }

/*scroll tear drop shape styling*/
.scroll-arrow {
	position: fixed;
	right: 76px;
	bottom: 26px;
	width: 36px;
	height: 36px;
	background: #1D3A60;
	border-radius: 50% 0 50% 50%;
	transform: rotate(-45deg);
	z-index: 9;
  }
  
  /*scroll text styling*/
  #scroll-text {
	color: white;
	position: fixed;
	right: 80px;
	bottom: 23px;
	font-size: 14px;
	z-index: 10;
	text-shadow: 2px 2px 10px #4BACC6;
	font-family: Arial, sans-serif;
	font-weight: bold;
  }
  #scroll-text:hover {
	color: orange;
  }
  
  /*for smooth scrolling*/
html {
	scroll-behavior: smooth;
}

  /* Style title atribut alternatif */

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
	background-color: #ffff99;
    color: #333333;
    font-size: 11px;
    position: absolute;
	width: 200px;
	padding: 1px 5px 2px 5px;
    bottom: -1.6em;
    /* white-space: nowrap; */
	right: 50%;
    opacity: 0;
    border: 1px solid #333333;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	-moz-box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
	box-shadow: 10px 10px 29px 5px rgba(0,0,0,0.46);
    z-index: 99999;
    visibility: hidden;
}

[data-title] {
    position: relative;
}


 /* Tooltip */

.tooltip {position: relative; display: inline-block; font-size: 10px; color: yellow;
	/*  border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
		visibility: hidden;
		width: 280px;
		font-size: 11px;
		background-color: #ffff99;
		color: #333333;
		text-align: left;
		border-radius: 8px;
		padding: 4px 4px;
		padding-left: 10px;
		/* Position the tooltip */
		position: absolute;
		z-index: 1;
}
  
.tooltip:hover .tooltiptext {visibility: visible;}

/* Search button */

	.search_container {
		position: relative;
		left: 82%;
		transform: translate(-80%);
	}
	.search-box input[type=text] {
		border: none;
		background: none;
		z-index: 1;
		width: 20px;
		height: 20px;
		transition: all 0.25s ease-in 0.25s;
		color: transparent;
		font-size: 0.70rem;
		line-height: 25px;
	}
	.search-box input[type=text]:hover {
		cursor: pointer;
	}
	.search-box input[type=text]:hover:focus {
		cursor: text;
	}
	.search-box input[type=text]:hover + span {
		background: rgba(255, 255, 255, 0.2);
	}
	.search-box input[type=text]:focus {
		width: 200px;
		padding: 0 10px;
		outline: none;
		color: black;
		background: none;
		color: #1D3A60;
	}
	.search-box input[type=text]:focus + span {
		width: 200px;
	}
	.search-box input[type=text]:focus + span::before {
		width: 2px;
		opacity: 0;
		transition: all 0.25s ease-in;
	}
	.search-box input[type=text] + span {
		z-index: -1;
		position: absolute;
		border: 2px solid #1D3A60;
		top: 0;
		width: 20px;
		height: 20px;
		transition: all 0.25s ease-in 0.25s;
		border-radius: 25px;
		left: 0;
	}
	.search-box input[type=text] + span::before {
		transition: all 0.25s ease-in 0.5s;
		transform-origin: left top;
		content: "";
		position: absolute;
		width: 10px;
		height: 5px;
		border-radius: 5px;
		background: #1D3A60;
		transform: rotate(45deg) translate(26px, -2px);
	}

/* FOLDER-TREE-ViEWS */

.tree{
	--spacing : 1.5rem;
	--radius  : 10px;
	line-height: 24px;
	width: 550px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: -1px 6px 29px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 6px 29px -4px rgba(0,0,0,0.75);
	box-shadow: -1px 6px 29px -4px rgba(0,0,0,0.75);
	padding: 10px 5px 15px 5px;
	margin-bottom: 30px;
	margin-top: 10px;
	caret-color: transparent; /* No blinking caret */
  }
  
  .tree li{
	display      : block;
	position     : relative;
	padding-left : calc(1.5 * var(--spacing) - var(--radius) - 4px);
  }
  
  .tree ul{
	margin-left  : calc(var(--radius) - var(--spacing));
	padding-left : 0;
  }
  
  .tree ul li{
	border-left : 2px solid #d1dbeb;
  }
  
  .tree ul li:last-child{
	border-color : transparent;
  }
  
  .tree ul li::before{
	content      : '';
	display      : block;
	position     : absolute;
	top          : calc(var(--spacing) / -2);
	left         : -2px;
	width        : calc(var(--spacing) + 2px);
	height       : calc(var(--spacing) + 1px);
	border       : solid #d1dbeb;
	border-width : 0 0 2px 2px;
  }
  
  .tree summary{
	display : block;
	cursor  : pointer;
  }
  
  .tree summary::marker,
  .tree summary::-webkit-details-marker{
	display : none;
  }
  
  .tree summary:focus{
	outline : none;
  }
  
  .tree summary:focus-visible{
	outline : 1px dotted #000;
  }
  
  .tree li::after,
  .tree summary::before{
	content       : '';
	display       : block;
	position      : absolute;
	top           : calc(var(--spacing) / 2 - var(--radius));
	left          : calc(var(--spacing) - var(--radius) - 1px);
	width         : calc(2 * var(--radius));
	height        : calc(2 * var(--radius));
	border-radius : 50%;
	background    : #d1dbeb;
  }
  
  .tree summary::before{
	z-index    : 1;
	background : #173a75 url('expand-collapse.svg') 0 0;
  }
  
  .tree details[open] > summary::before{
	background-position : calc(-2 * var(--radius)) 0;
  }

  span.spaces {padding-left: 20px;}
  span.spaces:hover {color:#378de5;}
  span.spaces a {text-decoration: none;}
  span.spaces a:hover {color:chocolate;}

/* END FOLDER-TREE-ViEWS */

/* RATING STARS */

.rating-stars {
	display: block;
	width: 34vmin;
	padding: 1.75vmin 5vmin 2vmin 2vmin;
	background: linear-gradient(90deg, #ffffff90 50vmin, #fff0 50vmin 100%);
	border-radius: 5vmin;
	position: relative;
}

.rating-counter {
	font-size: 2vmin;
    font-family: Arial, Helvetica, serif;
    color: #e8ecf3;
    width: 3.5vmin;
    text-align: center;
    background: #173a75;
    position: absolute;
    top: 7px;
    right: 0;
    height: 60%;
    border-radius: 3vmin 3vmin 3vmin 3vmin;
    line-height: 4vmin;
}

.rating-counter:before {content: "0";transition: all 0.25s ease 0s;}
.rating-stars input { display: none; }

.rating-stars label {
	width: 2vmin;
	height: 2vmin;
	background: #000b;
	display: inline-flex;
	cursor: pointer;
	margin: 0.1vmin 0.35vmin;
	transition: all 1s ease 0s;	
	clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
}

.rating-stars label[for=rs0] {display: none;}

.rating-stars label:before {
	width: 90%;
	height: 90%;
	content: "";
	background: orange;
	z-index: -1;
	display: block;
	margin-left: 5%;
	margin-top: 5%;
	clip-path: polygon(50% 0%, 66% 32%, 100% 38%, 78% 64%, 83% 100%, 50% 83%, 17% 100%, 22% 64%, 0 38%, 34% 32%);
	background: linear-gradient(90deg, yellow, orange 30% 50%, #184580 50%, 70%, #173a75 100%);
	background-size: 205% 90%;
	background-position: 0 0;
}

.rating-stars label:hover:before {transition: all 0.25s ease 0s;}
.rating-stars input:checked + label ~ label:before {background-position: 100% 0;transition: all 0.25s ease 0s;}
.rating-stars input:checked + label ~ label:hover:before {background-position: 0% 0}

#rs1:checked ~ .rating-counter:before {content: "1";}
#rs2:checked ~ .rating-counter:before {content: "2";}
#rs3:checked ~ .rating-counter:before {content: "3";}
#rs4:checked ~ .rating-counter:before {content: "4";}
#rs5:checked ~ .rating-counter:before {content: "5";}
#rs6:checked ~ .rating-counter:before {content: "6";}
#rs7:checked ~ .rating-counter:before {content: "7";}
#rs8:checked ~ .rating-counter:before {content: "8";}
#rs9:checked ~ .rating-counter:before {content: "9";}
#rs10:checked ~ .rating-counter:before {content: "10";}

.rating-stars label + input:checked ~ .rating-counter:before {
	color: #ffab00 !important;
	transition: all 0.25s ease 0s;
}

.rating-stars label:hover ~ .rating-counter:before {
	color: #ffab00 !important;
	transition: all 0.5s ease 0s;	
	animation: pulse 1s ease 0s infinite;
}

@keyframes pulse {50% { font-size: 3.0vmin; }}

label[for=rs1]:hover ~ .rating-counter:before {content: "1" !important;}
label[for=rs2]:hover ~ .rating-counter:before {content: "2" !important;}
label[for=rs3]:hover ~ .rating-counter:before {content: "3" !important;}
label[for=rs4]:hover ~ .rating-counter:before {content: "4" !important;}
label[for=rs5]:hover ~ .rating-counter:before {content: "5" !important;}
label[for=rs6]:hover ~ .rating-counter:before {content: "6" !important;}
label[for=rs7]:hover ~ .rating-counter:before {content: "7" !important;}
label[for=rs8]:hover ~ .rating-counter:before {content: "8" !important;}
label[for=rs9]:hover ~ .rating-counter:before {content: "9" !important;}
label[for=rs10]:hover ~ .rating-counter:before {content: "10" !important;}

.rating-stars input:checked:hover ~ .rating-counter:before {animation: none !important;color: #ffab00 !important;}

/* Hidden text */

.readmore__content {
	max-width: 45rem;
	width: 100%;
	display: flex;
  }
  
  button.readmore__toggle {
	display: flex;
	float: right;
	font-size: 11px;
	background: transparent;
	border: none;
	color: orange;
	cursor: pointer;
  }

/* Checkbox control */

.form-control {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  margin-left: 3em;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

.form-control + .form-control {
  margin-top: 0.5em;
}

.form-control--disabled {
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.form-control input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.form-control input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

.form-control input[type="checkbox"]:checked::before {
  transform: scale(1);
}


.form-control input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

/* GEEN JARIGEN */

.birthday-card {
  background: #ffffff;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  max-width: 450px;
  margin: 20px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
  animation: fadeInIcon 0.8s ease-out;
}

.birthday-content {
  display: flex;
  align-items: center;    /* Zorgt dat Pierrot en het tekstblok verticaal mooi uitlijnen */
  gap: 20px;
  text-align: center;     /* Dwingt de tekst/taart naast Pierrot naar het midden */
}

.birthday-image {
  width: 120px;           /* Nette grootte voor Pierrot op desktop */
  height: auto;
  flex-shrink: 0;
  display: block;
}

.birthday-text {
  flex: 1;
  text-align: center;     /* Zorgt dat het complete tekstblok intern gecentreerd is */
}

.birthday-icon::before {
  content: "\1F382";      /* taart-emoji */
  font-size: 45px;
  filter: grayscale(70%);
  opacity: 0.8;
}

.icontart {
  font-size: 40px;
  margin: 0 auto 10px auto; /* Centreert de taart in zijn container */
  filter: grayscale(100%);
  opacity: 0.6;
  display: block;           /* Maakt er een blok van zodat margin: 0 auto werkt */
}

/* --- Responsive aanpassing voor mobiel --- */
@media (max-width: 480px) {
  .birthday-content {
    flex-direction: column; /* Pierrot en tekst onder elkaar op mobiel */
    gap: 15px;
  }

  .birthday-image {
    width: 90px;            /* Pierrot iets compacter op mobiel */
    margin: 0 auto;         /* Centreert Pierrot op het mobiele scherm */
  }
}

/* EINDE GEEN JARIGEN */

.message {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #32557f;
  margin: 0;
}

.subtext {
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  color: #999;
  margin-top: 8px;
}

/* Subtiele animatie */
@keyframes fadeInIcon {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
} 

/* Maps-icoon: behoud de bestaande tabelrijen en hun regelhoogte. */
.profiel_info .profiel-maps-link {
    display: inline-block;
    vertical-align: top;
    margin-left: 8px;
    padding: 0;
    width: 10px;
    height: 13px;
    line-height: 0;
    text-decoration: none;
}
.profiel_info .profiel-maps-icon {
    display: block;
    width: 10px;
    height: 13px;
    /* Alleen visueel vergroten; de regelhoogte blijft gelijk. */
    transform: scale(1.8);
    transform-origin: center center;
}
.profiel_info .profiel-maps-link:focus-visible {
    outline: 2px solid #4285F4;
    outline-offset: 2px;
}