/* 2023 created by Pieter | pieterdemoor.com */

/* site layout */

.page {
	width: 900px;
	margin: 8px 0;
}

.item_uitleg
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #000;
	text-align: left;
	line-height: 12px;
	margin-left: 0;
	background-color: #FFF6BE;
	padding: 5px;
	border-color: #B72D00;
	border-width: 2px;
	border-style: solid;
}

.item_uitleg strong { color: #FF1C00; }

body {
	text-align: left;
	color: #000;
	background-color: #D9D9D9; /*background color */
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
		
html { 
	margin: 0; 
	padding: 0;
}

button {
	font-size: 10px;
	color: #000;
	/* border-width: 1px; */
}

button:hover {
	color: #23527c !important;
	text-decoration: underline;
}
				
div {
	margin: 0; 
	padding: 0; 
}
	
/* div#site {
	position: absolute;
	width: 770px;
	left: 0;
	top: 0;
	margin: 0; 
	padding: 0;
}

	div#header_bg_top, div#header_bg_bottom {
		position: relative;
		left: 0;
		top: 0;
		width:770px;
		float:left;
		margin: 0; 
		padding: 0;
		line-height: 1px;
		z-index:0;
	}

	div#header {
		position: relative;
		left: 0;
		top: 0;
		width: 770px;
		height: 50px;
		float: left;
		margin: 0; 
		padding: 0;
		background-image: url(../images/header_bg.gif);
		background-repeat: repeat-y;
		line-height: 1px;
		z-index:0;
	}


	div#content_bg_top, div#content_bg_bottom {
		position: relative;
		left: 0;
		top: 0;
		width:770px;
		height:13px;
		float:left;
		margin: 0; 
		padding: 0;
		line-height: 1px;
		z-index:0;
	}

	div#content_bg {
		position: relative;
		left: 0;
		top: 0;
		width: 770px;
		float: left;
		padding: 10px; 
		margin: 0;
		background-image: url(../images/content_bg.gif);
		background-repeat: repeat-y;
		line-height: 16px;
		z-index:0;
	}

	div#content {
		position: relative;
		left: 0;
		top: 0;
		width: 730px;
		float: left;
		padding: 0 0 0 5px; 
		margin: 0;
		line-height: 16px;
		z-index:0;
		vertical-align:top;
	} */

	/* div#locator {
		position: relative;
		left: 0;
		top: 0;
	  	float: right;
		padding: 0; 
		margin: 0;
		vertical-align:top;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-weight: bold;
		text-align: right;
		background-color: none;
		line-height: 12px;
		z-index:1;
		}

	div#locator dt,#locator a {
		padding: 0; 
		margin: 0 3px 0 0;
		list-style: none;
		display: inline;
		text-decoration: none;
		}

	div#locator a:hover {
		text-decoration: underline;
		}

	div#calendar	
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-weight: bold;
		text-align: right;
		line-height: 12px;
		display: block;
		width: 100%;
		text-transform: inherit;
		margin: 0 0 3px 0;
		padding: 3px;
	}
	.selectedmonth	
	{
		color: #5757C1;
	}

	div#calendar dt,#calendar a {
		padding: 0; 
		margin: 0 3px 0 0;
		list-style: none;
		display: inline;
		text-decoration: none;
		}

	div#calendar a:hover {
		text-decoration: underline;
		} */



	/* div#footer_bg_top, div#footer_bg_bottom {
		position: relative;
		left: 0;
		top: 0;
		width:770px;
		height:13px;
	  	float:left;
		margin: 0; 
		padding: 0;
		line-height: 1px;
		z-index:0;
		} */

/* site type */

	/* div#content dl {
		text-align: left;
		background-color: none;
		padding: 0; 
		margin: 0;
		}

	div#content dd {
		text-align: left;
		background-color: none;
		padding: 0; 
		margin: 0;
		}

	div#specs p {
		float:right;
		padding:0 30px 0 0;
	  	margin:0;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		color: #666;
		text-decoration: none;
		text-align: right;
		}

	div#specs p a {
		color: #666;
		text-decoration: underline;
		}
		
	div#specs p a:hover {
		color: #666;
		text-decoration: none;
		}
		
	.type00 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 22px;
		font-weight: bold;
		color: #000000;
		background-color: #FFFFFF;
		text-align: left;
		line-height: 22px;
		font-variant: normal;
		vertical-align:top;
		}
	
	.type01 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-weight: bold;
		color: #999;
		text-align: left;
		background-color: none;
		line-height: 12px;
		padding: 0; 
		margin: 0;
		vertical-align:top;
		}
		
	.type02 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: bold;
		color: #000;
		text-align: left;
		background-color: #FFFFFF;
		line-height: 12px;
		vertical-align:top;
		}
	
	.type02 a {
		text-decoration: none;
		}
	
	.type02 a:hover {
		text-decoration: underline;
		}
	
	.type03 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		color: #000;
		text-align: left;
		line-height: 12px;
		margin: 0;
		vertical-align:top;
		}

	.type03 a {
		text-decoration: none;
		}
	
	.type03 a:hover {
		text-decoration: underline;
		}

	.type04 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		color: #999;
		text-align: left;
		line-height: 12px;
		margin-left: 0;
		vertical-align:top;
		}

	.type05 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: bold;
		color: #000066;
		text-align: left;
		background-color: none;
		line-height: 12px;
		padding: 0; 
		margin: 0;
		vertical-align:top;
		}

	.type06 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: normal;
		color: #000066;
		text-align: left;
		line-height: 12px;
		margin-left: 0;
		vertical-align:top;
		} */
		
/*table stuff*/	
	
	.tabletop td {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: bold;
		color: #fff;
		text-align:center;
		line-height: 16px;
		margin: 0;
		padding: 0;
		vertical-align:top;
		background-color: #000066;
		}

	.table_body_left {
		margin: 0;
		padding: 0 10px 0 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		line-height: 12px;
		z-index:0;
		vertical-align:center;
		}

	.table_body_left_gray	
	{
		margin: 0;
		padding: 0 10px 0 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		line-height: 12px;
		z-index: 0;
		vertical-align: center;
		color: #A0A0A0;
		font-style: italic;
	}

	.table_body_right {
		margin: 0;
		padding: 0 10px 0 10px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		line-height: 12px;
		z-index:0;
		vertical-align:center;
		text-align:right;
		}


	.table_body_center {
		margin: 0;
		padding: 0 5px 0 5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		line-height: 12px;
		z-index:0;
		text-align:center;
		vertical-align:center;
		}

	.table_body_center_noline {
		margin: 0;
		padding: 0 5px 0 5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		line-height: 12px;
		z-index:0;
		text-align:center;
		vertical-align:center;
		border-width: 0px 0px 0px 0px;
		border-style: solid;
		border-color: #ccc;
		}

	.table_bodybold_center_noline {
		margin: 0;
		padding: 0 5px 0 5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-weight: bold;
		line-height: 12px;
		z-index:0;
		text-align:center;
		vertical-align:center;
		border-width: 0px 0px 0px 0px;
		border-style: solid;
		border-color: #ccc;
		}


	.table_body_right_noline {
		margin: 0;
		padding: 0 5px 0 5px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		line-height: 12px;
		z-index:0;
		text-align:right;
		vertical-align:center;
		border-width: 0px 0px 0px 0px;
		border-style: solid;
		border-color: #ccc;
		}

	.empty {
		background: #fff;
		border-width: 0 0 0 0;
		border-style: none;
		border-color: #fff;
		padding: 0;
		margin: 0;
		}

	.none {
		background: #ccc;
		border-width: 0 0 0 0;
		border-style: none;
		border-color: #fff;
		padding: 0;
		margin: 0;
		}

	.free {
		background: #6C3;
		border-width: 0 0 0 0;
		border-style: none;
		border-color: #fff;
		padding: 0;
		margin: 0;
		}

	.busy {
		background: #F30;
		border-width: 0 0 0 0;
		border-style: none;
		border-color: #fff;
		padding: 0;
		margin: 0;
		}

	.prestatie {
		background: #00C;
		border-width: 0 0 0 0;
		border-style: none;
		border-color: #fff;
		padding: 0;
		margin: 0;
		}

	.unconfirmedprestatie {
		background: #FC0;
		border-width: 0 0 0 0;
		border-style: none;
		border-color: #fff;
		padding: 0;
		margin: 0;
		}

	td.vspace {
		width: 1px;
		background-color: #fff;
		border-width: 0;
		}

	td {
		margin: 0;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		line-height: 12px;
		z-index:0;
		/* vertical-align:center; */
		vertical-align:top;
		border-width: 0px 0px 1px 0px;
		border-style: solid;
		border-color: #ccc;
		}
		
	table a {
		font-weight: bold;
		text-decoration: none;
		}
	
	table a:hover {
		text-decoration: underline;
		}
				
/*form stuff*/
	
	input, textarea {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		/* font-size: 9px; */
		font-size: 1rem;
		font-weight: normal;
		color: #000;
		text-align: left;
		line-height: 12px;
		padding: 0; 
		margin: 0 0 5px 0;
		vertical-align:center;
		z-index:0;
	}

	submit {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-weight: normal;
		color: #000;
		text-align: center;
		line-height: 16px;
		padding: 0; 
		margin: 0 0 5px 0;
		vertical-align:center;
		}


	form {
		padding: 0; 
		margin: 0;
		}
		
/* site content */

	hr {
		padding: 5px 0 5px 0px; 
		margin: 0;
		height: 1px;
		/* width: 730px; */
		line-height: 1px;
		border-width: 0px 0px 1px 0px;
		border-style: dashed;
		border-color: #666;
		}

	p {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		color: #000;
		text-decoration: none;
		text-align: left;
		padding: 0; 
		margin: 0;
		clear: both;
		}
		
	a {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		/* color: #E64100; */
		text-decoration: underline;
		text-align: left;
	}

	/* div#logo {
		position: relative;
		width:65px;
		top: 35px;
		left: 665px;
		text-align: left;
		z-index:1;
	} */

/* navigation */
	div#nav {
		margin:30px 0 0 10px;
		padding:0;
		position: absolute;
		left: 0;
		top: 10px;
		width: 645px;
		line-height:15px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight:bold;
		color: #3366FF;
		float:left;
		clear:none;
		z-index:1;
	}

	div#nav ul {
		margin:0;
		padding:0;
		list-style:none;
	}
	  	
	div#nav li {
	  	display:inline;
		float:left;
		margin:0 10px 0 0;
		padding:0;
	}
	  	
	div#nav a {
		float:left;
		padding:5px;
		text-decoration:none;
		color:#3366FF;
		border: #3366FF;/*borders of nav*/
		border-width: 1px;
		border-style: solid;
	}

	div#nav a:hover {
		border: #FFF;
		border-width: 1px;
		color:#FFF;
		border-style: solid;
	}

	div#nav #current_nav a {
	  	border: #FFF;
		border-width: 1px;
		border-style: solid;
		color:#000066;
	  	}

	div#nav #current_nav {
	  	padding:0;
		position: relative;
		height:50px;
	  	line-height:15px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 9px;
	  	font-weight:bold;
		color: #3366FF;
		float:left;
	  	clear:none;
		z-index:1;
		background: #FFF;
		}


.button {
	border: 1px solid black;
	font-size: 12px;
	text-decoration: none;
	border-radius: 2px;
	background:#eee;
	color:black;
	padding: 2px 4px;
}

/* NAV NEW */

header {
	display: flex;
	/* align-items: end; */
	height: 65px;
	/* margin:30px 0 0 10px; */
	/* style="background:#000066ff;border-top-right-radius:6px;border-bottom-right-radius:6px;" */
}

nav {
	padding: 5px 20px;
	display: flex;
	align-items: end;
	width: 100%;
	line-height:15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight:bold;
	color: #3366FF;
	background:#000066ff;
	position: relative;
}

nav ul {
	margin:0;
	padding:0;
	list-style:none;
	display: flex;
	/* align-items: end; */
	position: absolute;
	/* height: 50px;
	top: 25px; */
	height: 45px;
	top: 30px;
}
		
nav li {
	margin:0 10px 10px 0;
	padding:0;
}
		
nav a {
	float:left;
	padding:5px;
	text-decoration:none;
	color:#3366FF;
	border: #3366FF;
	border-width: 1px;
	border-style: solid;
}

nav a:hover {
	border: #FFF;
	border-width: 1px;
	color:#FFF;
	border-style: solid;
}

nav #current_nav a {
	border: #FFF;
	border-width: 1px;
	border-style: solid;
	color:#000066;
}

nav #current_nav {
	padding:0;
	line-height:15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight:bold;
	color: #3366FF;
	background: #FFF;
	margin-bottom: 0px;
}

.logo {
	background:#3366ffff;
	padding: 10px 8px;
	display: flex;
	align-items: end;
	width: 120px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;	
}

.content {
	background:white;
	padding: 20px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;	
	margin-top: 10px;
	margin-bottom: 10px;
}

footer {
	line-height: 13px;
	background:#3366ffff;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 8px 20px;
}

footer #colofon p {
	padding: 0;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	text-align: right;
}

.w-2 {
	width: 1.5rem;
}

.h-2 {
	height: 1.5rem;
}

/* .rounded {
	border-radius: 99px;
	-moz-border-radius: 99px;
	-webkit-border-radius: 99px;
} */

.rounded-md	{
	border-radius: 0.375rem; /* 6px */
}

.border {
	border: 1px solid #ccc;
}

.px-1 {
	padding-left: .5rem;
	padding-right: .5rem;
}

.py-\.5 {
	padding-top: .25rem;
	padding-bottom: .25rem;
}

.ml-2 {
	margin-left: 1rem;
}

.text-xs {
	font-size: .875rem;
}

.flex {
	display: flex;
}

.z-3 {
	z-index: 3
}

.top-0 {
	top: 0
}

.left-0 {
	left: 0
}

.fixed {
	position: fixed
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

.align-center {
	align-items: center;
}

.m-0 {
	margin: 0;
}

.mr-1 {
	margin-right: .5rem;
}

.p-\.5 {
	padding: .125rem;
}

.p-1 {
	padding: .5rem;
}

.p-4 {
	padding: 1rem;
}

.rounded {
	border-radius: 4px;
}

.bg-red-300	{
	background-color: rgb(252 165 165);
}

.ml-auto {
	margin-left: auto;
}

.mt-4 {
	margin-top: 1rem;
}

.mt-0 {
	margin-top: 0;
}

.mb-1 {
	margin-bottom: .5rem;
}

.mb-2 {
	margin-bottom: .75rem;
}

.w-1\/3 {
	width: 33.333333%;
}

.w-1\/2 {
	width: 50%;
}

.w-2\/3 {
	width: 66.666667%;
}

.w-100 {
	width: 100%
}

.py-2 {
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.font-bold {
	font-weight: bold;
}

.text-normal {
	font-size: 1rem;
}

.rounded-md	{
	border-radius: 0.375rem; /* 6px */
}

.text-white {
	color: #fff;
}

.text-black {
	color: #000;
}

.text-green-700	{
	color: rgb(21 128 61);
}

.border-green-700	{
	border-color: rgb(21 128 61);
}

.border-black {
	border-color: black;
}

.bg-green-200	{
	background-color: rgb(187 247 208);
}

.inline-flex {
	display: inline-flex;
}

.align-items-center {
	align-items: center;
}

.align-items-start {
	align-items: start;
}

.bg-white {
	background-color: #fff;
}

.bg-black {
	background-color: #000;
}

.bg-light-gray {
	background: #eee;
}

.bg-gray-400\/90 {
	background-color: rgba(156, 163, 175, .9);
}

.border {
	border-style: solid;
	border-width: 1px;
}

.border-gray-blue {
	border-color: #828CC1;
}

.cursor-pointer {
	cursor: pointer;
}

.hover\:bg-gray-blue:hover {
	background-color: #828CC1 !important;
}

.hover\:text-white:hover {
	color: #fff;
}

.rounded {
	border-radius: 0.25rem; /* 4px */
}

.text-button {
	font-size: 12px;
	line-height: .6rem;
}

.text-center {
	text-align: center;
}

.hidden {
	display: none;
}

.m-4 {
	margin: 1rem;
}

.space-x-1 > * + * {
	margin-left: 0.25rem;
}

.space-x-2 > * + * {
	margin-left: 0.5rem;
}

.space-x-4 > * + * {
	margin-left: 1rem;
}

.text-lg {
	font-size: 1.4rem;
}

.font-semibold {
	font-weight: 600;
}

.decoration-none {
	text-decoration: none;
}

@media (min-width: 768px) {
	.md\:mr-2 {
		margin-right: .75rem !important;
	}

	.md\:ml-0 {
		margin-left: 0 !important;
	}

	.md\:w-1\/4 {
		width: 25%;
	}

	.md\:mx-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}