html {background: url(images/fretten_html_bg.jpg) repeat;}

/* Main Colors */
:root {
	--tab_bg: #9D998E;
	--tab_border: #6d6857;
	--tab_hover: #8a7f62;
	--tab_txt: #EDEFF3;
	--tab_txt_dark: #787363;
	--tab_txt_hover: #ffff99;
	--tab_txt_bg: maroon;
}

body {
	margin: 0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	color: var(--tab_txt_dark);
	background: url(images/fretten_page_bg.jpg) repeat-x  center top;
	width: 100%;
	display: table;
}

::selection {
    background: #4b8f29;
    color: #ffff99;
    text-shadow: none;
}

::-moz-selection {
    background: #4b8f29;
    color: #ffff99;
    text-shadow: none;
}

.blink {animation: blinker 5s infinite; }
@keyframes blinker {
	from { opacity: 1.0; }
	50% { opacity: 0.5; }
	to { opacity: 1.0; }
}
 
.altcolor {animation: changeColor 3s infinite; }
@keyframes changeColor {
	0% {background-color:	#c0dda8;}
  	50% {background-color:  #ffff99;}
  	100% {background-color: #c0dda8;}
}

.altcolor:hover {
	animation: scrollstop 2s forwards ease-out !important;
 	animation-iteration-count: 0;
	background: #4b8f29;
    color: #ffff99;
}

table {width: 480px;font-size: 11px;}
tr:nth-child(even) {background-color: #D6EEEE;}
tr {border-bottom: 1px solid #ddd;text-align: center;}
tr:hover {background-color: #D6EEEE;}


/* gradient-border */

 .gradient-border {
	 --border-width: 3px;
	 position: relative;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 /* text-transform: uppercase; */
	 border-radius: 10px;
   
	 &::after {
	   position: absolute;
	   content: "";
	   top: calc(-1 * var(--border-width));
	   left: calc(-1 * var(--border-width));
	   z-index: -1;
	   width: calc(100% + var(--border-width) * 2);
	   height: calc(100% + var(--border-width) * 2);
	   background: linear-gradient(
		 60deg,
		 hsl(224, 85%, 66%),
		 hsl(269, 85%, 66%),
		 hsl(314, 85%, 66%),
		 hsl(359, 85%, 66%),
		 hsl(44, 85%, 66%),
		 hsl(89, 85%, 66%),
		 hsl(134, 85%, 66%),
		 hsl(179, 85%, 66%),
		 hsl(0, 0%, 100%)
	   );
	   background-size: 300% 300%;
	   background-position: 0 50%;
	   border-radius: 10px;
	   animation: moveGradient 4s alternate infinite;
	 }
   }
   
   @keyframes moveGradient {
	 50% {
	   background-position: 100% 50%;
	 }
   }
 
 /* END gradient-border */

a:link, a:visited {color: #1E1D19; text-decoration: none;} 
a:active, a:hover {color: #e29522; text-decoration: none;}
a.end {color: #4b8f29;text-decoration: none;}
a.end:hover {color: #e29522; text-decoration: none;}

h5 {
	text-align: right;
	font-size: 18px;
	font-weight: bold;
	color: #86c111;
	background: url(images/fretten_h1.jpg) no-repeat;
	background-position: right;
	height: 48px;
	width: 520px;
	padding-top: 20px;
}

h1 {
	text-align: right;
	font-size: 18px;
	font-weight: bold;
	color: #86c111;
	background-image: url(images/fret_h1.png);
    background-repeat: no-repeat;
    background-size: 23% auto;
    background-position: left top;
	height: 40px;
	width: 485px;
	padding-top: 20px;
	padding-right: 10px;
	border-bottom: 2px dashed #86c111;
	margin-bottom: 20px;
}

h2 {
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	background-color:#77b55a;
	border-radius:10px;
	border:1px solid #4b8f29;
	width: 450px;
	display:inline-block;
	cursor:default;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:5px 20px;
	margin: 5px 3px 5px 3px;
	text-decoration:none;
	text-shadow:0px 1px 0px #23410f;
}

h3 {
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:linear-gradient(to bottom, #d2ebc6 5%, #b4dba1 100%);
	background-color:#639c46;
	border-radius:20px;
	border:1px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#609c38;
	font-family:Arial;
	font-size:12px;
	margin: 10px 2px 2px 50px;
	padding: 5px 15px 5px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #23410f;
}

h4 {
	color:#5A564A;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	margin: 5px 1px;
}

img {border-radius: 25%;}

/* li {list-style-image: url(favicon.ico);} */

div.gallery {
	display: inline-table;
  	justify-content: center;
	margin: 5px;
}

div.gallery img:hover {transform: scale(1.6);}

#fretten_container {
	width: 930px;
	margin: auto;
}

#fretten_topsection {
	float: left;
	width: 940px;
	height: 108px;
}

.shining {
	position: relative;
	font-family: sans-serif;
	text-transform: uppercase;
	font-size: 1.5em;
	letter-spacing: 4px;
	overflow: hidden;
	background: linear-gradient(90deg, #e7e5cd, #3c6627, #e7e5cd);
	background-repeat: no-repeat;
	background-size: 80%;
	animation: animate 3s linear infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(255, 255, 255, 0);
}

  @keyframes animate {
	0% {
	  background-position: -500%;
	}
	100% {
	  background-position: 500%;
	}
  }

 .stripes {
	letter-spacing: 0;
	text-shadow: 0 0 80px rgba(255,255,255,.5);
	background: url(images/animated-text-fill.png) repeat-y;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: aitf 80s linear infinite;
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
}

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

#fretten_topsection_title {
	float: left;
	width: 560px;
	font-size: 48px;
	font-weight: bold;
	font-family: Tahoma, Arial ;
	margin-top: 20px;
	height: 34px;
	cursor:default;
	padding-top: 10px;
	padding-left: 5px;
/*	background: url(images/fretten_logo.png) no-repeat; */
}

#fretten_topsection_title img {
	float: left;
}

/* glowing button	*/

.registration {
	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;
}

.registration: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  */ 

.fretten_topmenu{float: right; margin-top: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
button.dropbtn a {all: unset; }
button.adminbtn a {all: unset;}

button.dropbtn {
	cursor: pointer;
	background:#639c46;
	color: #f3f3bf; ;
    width: 85px;
	margin-left: 5px;
	padding: 2px 0px 2px 0px;
	border:1px solid #3c6627;
    border-radius:6px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	display: inline;
}

button.dropbtn:hover {color:#79786b; border:1px solid #79786b; background: #e7e5cd;}

button.adminbtn {
	cursor: pointer;
	background:#fff;
	color:maroon;
    width: 85px;
	margin-left: 5px;
	padding: 2px 0px 2px 0px;
	border:1px solid #fff;
    border-radius:6px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	display: inline;
}

button.adminbtn:hover {color:#fff; border:1px solid #fff; background: lightcoral;}

#fretten_left_column {
	float: left;
	width: 323px;
}

#fretten_left_top {
	float: left;
	width: 317px;
	height: 210px;
	background: url(images/fretten_left_header.jpg) no-repeat;
/*	animation: fadeIn 2s;	*/
	border-radius: +5%;
	border:3px solid #ffffff;
	-webkit-box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
	-moz-box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
	box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
	transition-duration: 2s;
}

#menu_left {
	display: inline-block;
	position: left;
}

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

#fretten_left_top:hover {
	transform: scale(1.1);
}

#fretten_right_column {
	float: right;
	width: 577px;
/*	background: url(images/fretten_right_bg.png) repeat-y; */
}

#fretten_right_leden {
	float: left;
	width: 500px;
	margin: 0px auto;
	background: #fff;
	color: var(--tab_txt_dark);
	padding: 0px 45px 30px 45px;
	text-align: justify;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border:1px solid #ffffff;
	-webkit-box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
	-moz-box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
	box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
}

#fretten_right_mid {
	float: left;
	width: 500px;
	margin: 0px auto;
	background: #fff;
	color: var(--tab_txt_dark);
	padding: 0px 45px 30px 45px;
	text-align: justify;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	border:1px solid #ffffff;
	-webkit-box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
	-moz-box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
	box-shadow: -2px 6px 35px -9px rgba(7,31,5,1);
    animation: fadein 1.5s;
    -moz-animation: fadein 1.5s; /* Firefox */
    -webkit-animation: fadein 1.5s; /* Safari and Chrome */
    -o-animation: fadein 1.5s; /* Opera */	
}

/* BEGIN FADE IN fretten_right_mid */

@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 fretten_right_mid */

#fretten_right_mid img {
	float: right;
	padding-left: 10px;
}

#fretten_right_mid strong {
	float: right;
	padding-right: 30px;
	padding-bottom: 10px;
	background-position: right;
	font-weight: bold;
	font-size: 12px;
	color: #86c111;
}

#fretten_right_bot {
	float: left;
	margin-bottom: 60px;
	padding-top: 10px;
	width: 536px;
	height: 5px;
	color: #787363;
	text-align: center;
	font-weight: bold;
	font-size: 11px;
}

/* 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   */

.button {
	font-family: Tahoma, "Arial Black";
	float: left;
	width: 165px;
	padding: 10px 0px 0px 50px;
	margin: 20px 0px 0px 50px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	height: 30px;
	background: url(images/fretten_h3.png) no-repeat;
}

.menubar {
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	background-color:#77b55a;
	border-radius:20px;
	border:1px solid #4b8f29;
	width: 120px;
	display:inline-block;
	cursor:default;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:7px 50px;
	margin: 20px 0px 0px 50px;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}

.menubar:hover {
	background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
	background-color:#72b352;
}

.menubar:active {
	position:relative;
	top:1px;
}

.check {
	float: left;
	width: 323px;
	text-align: center;
}

.circle {
	display: block;
	float: right;
	position:relative;
	margin-top: 20px;
	width: 160px;
	height: 160px;
	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 #72b352;
	box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}

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

/* Gastenboek */

td.zone1 {
	width: 80px;
	padding-left: 10px;
	font-family: tahoma; 
	color: var(--tab_txt); 
	font-size: 8pt;
	text-align: left;
	background-color: var(--tab_bg);
	border: 1px solid #72b352;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
}

td.zone2 {
	padding-left: 10px;
	font-family: tahoma; 
	color: var(--tab_bg); 
	font-size: 8pt; 
	background-color: var(--tab_txt);text-align: left;
	border: 1px solid #72b352;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;	
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
}

td.zone2:hover {background:#639c46; color:#ffff99; border-color: #ffff99; cursor: default;}
td.zone3:hover {cursor:pointer}

/*	INVULFORMULIER */

div.table {font-size:12px;}
div.row {float: left; margin-left: 20px; padding: 0px;}
div.row_space {float: left; padding: 5px 5px;}

div.row img {margin-top: 20px;}

span.rounded {
	border: 1px solid #4b8f29;
	background:#77A3D2  ;
	color: #fff;
	-moz-border-radius: 36px;
	-webkit-border-radius: 36px;
	border-radius: 36px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	padding: 1px 10px;
	margin-right: 4px;
	outline: 0;
	width: 130px;
	height: 18px;
	-webkit-appearance: none;
}

span.link {
	text-decoration: none;
	float: left;
	border: 1px solid #4b8f29;
	background-color: #6ccf8a;
	-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;
	padding: 1px 10px;
	margin-right: 4px;
	outline: 0;
	width: 150px;
	height: 18px;
	-webkit-appearance: none;
}

span.info {
	background-color: #fff;
	border: 1px solid #4b8f29;
	color: var(--tab_txt_dark);
	width: 330px;
	height: 18px;
	margin-left: 5px;
}

span:hover.link {background-color: #fff6af; color: #f24437; font-weight: bold;}
span:hover.info {font-weight: bold;}

span.register {
	background-color: maroon;
	color: white;
	font-size: 8px;
	font-weight: bold;
	padding: 3px 7px;
	margin-left: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 36px;
}

label.rounded {
	float: left;
	border: 1px solid var(--tab_border);
	text-align: right;
	background-color: #9D998E;
	color: #EFEFED;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	padding: 0px 10px;
	outline: 0;
	width: 110px;
	height: 18px;
	-webkit-appearance: none;
}

input.rounded {
	float: left;
	border: 1px solid var(--tab_border);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	background-color: #EFEFED;
	color: var(--tab_txt_dark);
	padding: 0px 10px;
	margin-left: 2px;
	outline: 0;
	width: 250px;
	height: 18px;
	-webkit-appearance: none;
}

/* Change autocomplete styles in WebKit */

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid var(--tab_border);
  -webkit-text-fill-color: var(--tab_txt_dark);
  -webkit-box-shadow: 0 0 0px 1000px #EFEFED inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* END autocomplete */

input.rounded:focus, select.rounded:hover, textarea.rounded:focus {color: var(--tab_txt_dark); background-color: #DAD9D4; border: 1px solid #e29522;}
input.rounded:hover, select.rounded:hover, textarea.rounded:hover {color: var(--tab_txt_dark); background-color: #DAD9D4; border: 1px solid #e29522;}
input.rounded::placeholder {color: #cdd4cd;}

select.rounded {
	float: left;
	border: 1px solid var(--tab_border);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	background-color: #EFEFED;
	padding: 0px 10px;
	margin-left: 2px;
	color: var(--tab_txt_dark);
	height: 20px;
}

select.broad {width: 140px;}
select.extend {border-radius: 35px}

label.expand {
	height: 100px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

textarea.rounded {
	border: 1px solid var(--tab_border);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	background-color: #EFEFED;
	color: var(--tab_txt_dark);
	padding: 0px 10px;
	margin-left: 2px;
	resize: none;
	width: 250px;
	height: 100px;
	-webkit-appearance: none;
}

.required:before {content:"* "; color: tomato;}
.required_text:before {float: left; content: "* Verplicht invullen"; color: tomato;	padding-top: 15px;}

/*  My button */

.myButton {
	box-shadow: 0px 10px 14px -7px #666;
	background:linear-gradient(to bottom, #9A968A 5%, #9D998E 100%);
	background-color:#9A968A;	
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#EFEFED;
	font-family:Arial;
/*	font-size:20px; */
	font-weight:bold;
	padding:3px 10px 3px 10px;
	margin: 10px 2px 2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #6d6857;
}

.myButton:hover {
	background:linear-gradient(to bottom, #9D998E 5%, #CECCC6 100%);
	background-color:#9D998E;
}

.myButton:active {
	position:relative;
	top:1px;
}

.xls {
	background: #74b807;
	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:3px 10px 3px 10px;
	margin: 10px 2px 2px 2px;
	text-decoration:none;
}

.xls:hover {
	background:linear-gradient(to bottom, #9D998E 5%, #CECCC6 100%);
	background: #9D998E;
	color: #fff;
	border: 1px solid #fff; 
}

.myButtonold  {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #77b55a 5%, #8ecf70 100%);
	background-color: #77b55a;
	border-radius:8px;
	border:1px solid #74b807;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-weight:bold;
	padding: 5px 10px 5px 10px;
	margin: 10px 2px 2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3a5a07;
}

.myButtonold:hover {
	background:linear-gradient(to bottom, #8ecf70 5%, #77b55a 100%);
	background-color:#8ecf70;
}

/* Event Calender */

/* TableDate  */

.gallery {table-layout:fixed; width:110px;}	/*Setting the table */
.gallery td {cursor: help; -moz-box-shadow: 2px 2px 3px #666; -webkit-box-shadow: 2px 2px 3px #666; box-shadow: 2px 2px 3px #666; }
.gallery td:nth-of-type(1) {width:35px;}	/*Setting the width of column 1.*/
.gallery td:nth-of-type(2) {width:70px;}		/*Setting the width of column 2.*/
.gallery td:nth-of-type(3) {width:5px;}	/*Setting the width of column 3.*/

.lidtab {table-layout:fixed; width:200px;}	/*Setting the table */
.lidtab td {cursor: help; border: 1px solid #72b352; -moz-box-shadow: 2px 2px 3px #666; -webkit-box-shadow: 2px 2px 3px #666; box-shadow: 2px 2px 3px #666; }
.lidtab td:nth-of-type(1) {width:50px;}		/*Setting the width of column 1.*/
.lidtab td:nth-of-type(2) {width:30px;}		/*Setting the width of column 2.*/
.lidtab td:nth-of-type(3) {width:30px;}		/*Setting the width of column 3.*/
.lidtab td:nth-of-type(4) {width:90px;}		/*Setting the width of column 4.*/

.fixed {table-layout:fixed; width:110px;}	/*Setting the table */
.fixed td {cursor: help; -moz-box-shadow: 2px 2px 3px #666; -webkit-box-shadow: 2px 2px 3px #666; box-shadow: 2px 2px 3px #666; }
.fixed td:nth-of-type(1) {width:35px;}		/*Setting the width of column 1.*/
.fixed td:nth-of-type(2) {width:13px;}		/*Setting the width of column 2.*/
.fixed td:nth-of-type(3) {width:62px;}		/*Setting the width of column 3.*/

.headTable {color: #EDEFF3; width: 500px; font-size: 11px;}
.headTable td {padding:1px 5px; border: 1px solid #72b352; border-radius:4px; text-align: left;}
.headTable tr {background: #9D998E; width: 400px;}

.hoverTable {width: 500px; }
.hoverTable td {padding:1px 5px; border: 1px solid #72b352; border-radius:4px; text-align: left; }
.hoverTable tr {background: #EDEFF3; width: 400px;}
.hoverTable a {color: #9D998E;}
.hoverTable tr:hover {background:#639c46; color:#f3f3bf; border-color: #f3f3bf;}
.FocusTable {color:maroon;}
/* Tooltip info */

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

.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #ffff99;
  color: var(--tab_txt_dark);
  text-align: left;
  border-radius: 8px;
  padding: 5px 5px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {visibility: visible;}

/* Breadcrumb Arrows */

.breadcrumb {
	font: .75em sans-serif;
	list-style: none;
  }
  
  .breadcrumb.bc2x {
	font-size: 1em;
  }
  
  .breadcrumb.bc3x {
	font-size: 1.25em;
  }
  
  .breadcrumb p {
	margin: 0;
  }
  
  .breadcrumb li {
	display: inline-block;
	margin-bottom: .2em;
  }
  
  .breadcrumb li a {
	background-color: var(--tab_bg);
	box-sizing: border-box;
	color: #fff;
	display: block;
	max-height: 2em;
	padding: .5em 1em .5em 1.5em;
	position: relative;
	text-decoration: none;
	transition: .35s;
  }
  
  .breadcrumb li a:before {
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 1em solid #fff;
	content: "";
	position: absolute;
	top: 0;
	right: -1.25em;
	z-index: 1;
  }
  
  .breadcrumb li a:after {
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 1em solid var(--tab_bg);
	content: "";
	position: absolute;
	top: 0;
	right: -1em;
	transition: .35s;
	z-index: 1;
  }
  
  .breadcrumb li a:hover {
	background-color:var(--tab_hover);
	color: var(--tab_txt);
  }
  
  .breadcrumb li a:hover:after {
	border-left-color: var(--tab_border);
	color:  var(--tab_txt);
  }
  
  .breadcrumb li:last-child a {
	background-color: var(--tab_border);
	color:  var(--tab_txt);
	pointer-events: none;
  }
  
  .breadcrumb li:last-child a:after {
	border-left-color: var(--tab_border);
	color:  var(--tab_txt);
  }

  /* Eroor form */
  
  label.error {
	float: left;
	background-color: tomato;
	border: 1px solid #e3ecf8;
	color: #fff;
	text-align: left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 20px;
	-moz-box-shadow: 2px 2px 3px #666;
	-webkit-box-shadow: 2px 2px 3px #666;
	box-shadow: 2px 2px 3px #666;
	font-size: 10px;
	font-weight: bold;
	padding: 5px 5px 5px 15px;
	margin: 0px 0px 15px 20px;
	outline: 0;
	width: 350px;
	-webkit-appearance: none;
}

/* Namenarchief */

.naam_categorie {
	background: linear-gradient(to bottom, #9a968a 5%, #9D998E 100%);
	background-color: #9A968A;
	border: 1px solid var(--tab_border);
	text-align: left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 5px 5px 5px #666;
	-webkit-box-shadow: 5px 5px 5px #666;
	box-shadow: 5px 5px 5px #666;
	margin-top: 20px;
	padding: 5px 1px 5px 40px;
}

.naam_fret {
	display: inline-flex;
	background-color: var(--tab_txt);
	color: var(--tab_border);
	cursor: default;
	width: 90px;
	margin: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
	border: 1px solid var(--tab_border);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	/* Disable caret */
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
}

.naam_letter {
	position: absolute;
	font-size: 240px;
	margin-top: 90px;
	margin-left: 20px;
    color: #f3f3bf;
}

.letter_nav {
	display:inline-block;
	background-color: var(--tab_txt);
	color: var(--tab_border);
	border: 1px solid var(--tab_border);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 5px 5px 5px #666;
	-webkit-box-shadow: 5px 5px 5px #666;
	box-shadow: 5px 5px 5px #666;
	width: 11px;
	margin-left: 2px;
	padding: 2px;
	text-align: center;
}

.letter_show  {
	display:inline-block;
	background:#639c46;
    color:#f3f3bf;
	border: 1px solid #f3f3bf;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 5px 5px 5px #666;
	-webkit-box-shadow: 5px 5px 5px #666;
	box-shadow: 5px 5px 5px #666;
	width: 11px;
	margin-left: 2px;
	padding: 2px;
	text-align: center;
}

.letter_nav:hover, .naam_fret:hover {
	background:#639c46;
    color:#f3f3bf;
	border-color: #f3f3bf;
}

.nav a {text-decoration: none;}

/* END Namenarchief */

/* Social Media Buttons  */

.social-buttons {
	display: flex;
	justify-content: right;
	margin-top: 20px;
}
  
.social-buttons a {
	display: inline-block;
	margin: 0 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	color: #ffffff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	transition: background-color 0.3s ease;
}
  
.facebook  {background-color: #3b5998;}
.twitter   {background-color: #1da1f2;}
.instagram {background-color: #c13584;}
.social-buttons a:hover {background-color: #6d6857;}