/* ######################################################################## */
/* Copyright 2013     		 Nijboer IT 			    https://www.nijboer.it  */
/*                                                                          */
/* Licensed under the Apache License, Version 2.0 (the "License");          */
/* you may not use this file except in compliance with the License.         */
/* You may obtain a copy of the License at                                  */
/*                                                                          */
/*    http://www.apache.org/licenses/LICENSE-2.0                            */
/*                                                                          */
/* Unless required by applicable law or agreed to in writing, software      */
/* distributed under the License is distributed on an "AS IS" BASIS,        */
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
/* See the License for the specific language governing permissions and      */
/* limitations under the License.                                           */
/* ######################################################################## */

/*@font-face { font-family: 'Noto Serif'; src: url('/images/fonts/NotoSerif-Regular.ttf') format('truetype'); } /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;600&display=swap');*/

:root input:autofill {
	background-image: unset
}

html,body {
	user-select: none;
	margin: 0 auto;
	height: 100%;
	width: 100%;
}

body {
	font-family: 'Noto Serif', serif;
	font-size: 13px;
	/*font-weight: bold;*/
	color: #666666;
	background-repeat: repeat;
   background-attachment: fixed;
	background-size: 10px 10px;
	position: absolute;
	top: 0px;
}

body.innerbody {
	background-image: none;
	background-color: #fafafa;
}

p {
	margin: 0;
}

div.column {
  float: left;
  margin: auto 2em;
}

/* Clear floats after the columns */
div.table:after {
  content: "";
  display: table;
  clear: both;
}

/*div.row:nth-child(1) div.row:nth-child(3) {
	font-size: 75%;
	top: 1.5em;
	width: fit-content;
	height: fit-content;
}*/

div.table {
	position: relative;
	left: 1em;
	width: fit-content;
	margin: auto;
}

div#copyright {
	width: fit-content;
}

div#copyright:not(.column) {
	position:fixed;
	left:1em;
	top:1em;
}

#copyright img.logo {
	width: 12em;
	height: 12em;
}

#copyright img.ipv6 {
	width: 50px;
	height: 10px;
}

div#copyright p {
	font-size: 80%;
	margin: 1em 0;
}

/*div#copyright div.column div.logo:not(:first-child) {
	margin: 5em auto auto auto;
}*/

div#copyright div.column div.logo:only-child {
	margin-top: 1em;
}

div#copyright div.logo {
	font-size: 75%;
	margin: 5em auto auto auto;
	/*margin: auto;*/
	width: fit-content;
	height: fit-content;
}

div#copyright div.logo img {
	margin: auto;
	width: 12em;
}

div#copyright div.logo p {
	margin:0;
	font-size:2.5em;
	line-height: 90%;
}

div#copyright div.logo p.manager {
	color:#999999;
}

ul#langselect {
	/*position: relative;
	margin: 0;
	padding: 0;*/
	display: inline;
}

ul#langselect li {
	float:left;
}

ul#langselect li:not(:first-child) {
	margin-left: 1em;
}

#langselect img {
	width: 1.3em;
}

a, a:active, a:visited {
	color: #666666;
}

a:hover {
	color: black;
	text-decoration: none;
}

.correct {
	color: green;
}

.error {
	color: red;
}

img {
	display: block;
	user-select: none;
}

table {
	width: 100%;
	border-spacing: 0px;
	border-collapse: collapse;
}

table tr {}

table tr td {
	text-align: left;
	vertical-align: middle;
}

table thead tr th {
	text-align: left;
	border-bottom: 1px #c0c0c0 solid;
	font-weight: bold;
}

#installatie table { width: auto; }
#installatie table tr td { padding: 0px 100px 0px 0px; }

table tbody.striped tr:nth-child(odd) {
	background-color: transparent;
}
table tbody.striped tr:nth-child(even) {
	background-color: #F2F2F2;
}

input[type=text], input[type=password], input[type=file], input[type=email], input[type=number], input[type=date], select, textarea {
	-webkit-border-radius: 3px;
	border-radius: 3px;
	font-family: inherit;
	font-size: inherit;
	padding: 0px 10px;
	width: 390px; /*300px*/
	height: 24px;
	border: 0px;
	border: 1px solid #c0c0c0;
	color: #666666;
}

input[type=date] {
	width: auto;
}

textarea {
	width: /*auto*/ 390px;
	height: auto;
	padding: 10px;
}

select {
	text-align: left;
	outline: 0;
	width: 412px; /*320px*/
	height: 26px !important;
	padding: 5px !important;
	/*padding-left: 7px;*/
}

input[type=file] {
	padding: 3px;
	width: 404px;
	/*height: fit-content();*/
}

input[type=button],input[type=submit],button {
	-webkit-box-shadow:inset 1px 1px 0px 1px #ffffff;
	box-shadow:inset 1px 1px 0px 1px #ffffff;
	background-color:#ededed;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:2px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-size: 15px;
	font-weight:700;
	padding:4px 25px;
	min-width: 150px;
	text-decoration:none;
	text-shadow:2px 2px 0px #ffffff;
}

input[type=button]:hover,input[type=submit]:hover,button:hover {
	background-color:#dfdfdf;
}

input[type=button]:active,input[type=submit]:active,button:active {
	position:relative;
	top:1px;
}

input[class^='input'] {
	width: 50px;
}

input[id^='gauth'] {
	font-size:1.5em;
	font-weight:bold;
	height: 2em;
	text-align: center;
	background: transparent;
	width: 1em !important;
	/*margin:0.25em;*/
	outline: none;
	border-width: 0 0 2px;
	border-color: black;
}
input:focus[id^='gauth'] {
	transition: text-indent 0.2s 0.2s ease;
	text-indent: -80%;
	opacity: 1;
}

input:valid[id^='gauth'] {
	border-color: green;
}

.selectbox {
	height: 100px;
	width: 304px;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid #c0c0c0;
	color: #000;
	padding-right: 1.5em;
}
.selectbox label { width: 100%; display: block; }

/* dossier tabbladen / menu */
	body.innerbody ul#nav-menu { width: 90%; position: absolute; top: 10px; left: 80px; }

	ul#nav-menu li:first-child a { z-index: 10; }
	ul#nav-menu li:first-child + li a { z-index: 9; }
	ul#nav-menu li:first-child + li + li a { z-index: 8; }
	ul#nav-menu li:first-child + li + li + li a { z-index: 7; }
	ul#nav-menu li:first-child + li + li + li + li a { z-index: 6; }
	ul#nav-menu li:first-child + li + li + li + li + li a { z-index: 5; }
	ul#nav-menu li:first-child + li + li + li + li + li + li a { z-index: 4; }
	ul#nav-menu li:first-child + li + li + li + li + li + li + li a { z-index: 3; }
	ul#nav-menu li:first-child + li + li + li + li + li + li + li + li a { z-index: 2; }
	ul#nav-menu li:first-child + li + li + li + li + li + li + li + li + li a { z-index: 1; }

	ul#nav-menu {
		font-size: 14px;
		left: 310px;
		min-width: 900px;
		width: 75%;
		list-style: none;
		padding: 0;
		margin: 0;
	    text-align: center;
	    line-height: 18px;
	    height: 32px;
	    overflow: hidden;
	    position: relative;
	    top: 20px;
	}

	ul#nav-menu li a {
		margin: 0 -20px;
		padding-top: 18px;
		height: 27px;
		float: left;
		text-decoration: none;
		text-align: center;
		outline: none;
		font-weight: 700;
		display: inline-block;
		position: relative;
		outline: none;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		margin: 0 -5px;
		padding: 8px 0px 0px;
		width: 140px;
	}

	ul#nav-menu li:first-child a,ul#nav-menu li:first-child a:hover,ul#nav-menu li:first-child a:active { margin: 0px -5px 0px 0px; }

/* Login pagina */
	.loggedin { font-size: 11px; }
	#login,#logindiv { /*text-align: center;*/ position: relative; margin: 0 auto; }
	#login img,#logindiv img { margin: 0 auto; }
	#login table,#logindiv table { text-align: left; margin-top: 20px; margin-bottom: 50px; margin: 0px auto; }
	#login input.inlog,#logindiv input.inlog { min-width: 0px; width: 200px; }
	/*#login p, #login span:not(.header),#logindiv p, #logindiv span:not(.header) { font-size: 11px; }*/
	/*#logo img { position: relative; left: 20px; top: 10px; border: none; }*/
	div#login.rounded,div#logindiv.rounded { margin-top: 50px; width: fit-content; height: auto; box-shadow: 2px 2px #c0c0c0; max-width: 50em;}
	div#login:not(.errordiv).rounded span.header,div#logindiv:not(.errordiv).rounded span.header { text-align: left; border: 1px solid #c0c0c0; }
	div#login.errordiv span.header,div#logindiv.errordiv span.header { text-align: left; border: 1px dashed red; }
	div#login.rounded input[type=text],div#login.rounded input[type=email],div#login.rounded input[type=password],div#logindiv.rounded input[type=text],div#logindiv.rounded input[type=email],div#logindiv.rounded input[type=password] { width: 18em; }
	div#logindiv.rounded td.whitespace { width:9em; }

	button.logout { position: absolute; left: 30px; top: 300px; }
	/*p.greetings { position: absolute; left: 50px; top: 250px; }*/

/* weergave Iframe 1e level */
	#iframe	{
		position: absolute;
		top: 51px;
		left: 250px;
		min-width: 885px;
		height: 84%;
		min-height: 500px;
		width: calc(100% - 290px);
		width: -webkit-calc(100% - 290px);
		width: -moz-calc(100% - 290px);
		height: calc(100% - 100px);
		height: -webkit-calc(100% - 100px);
		height: -moz-calc(100% - 100px);
		border: 1px solid #d3d3d3;
		padding: 5px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
		-webkit-box-shadow: #666 -3px 3px 15px;
		box-shadow: #666 -3px 3px 15px;
		background-color: #fafafa;
	}
/* weergave Iframe 2e level */
	#subframe {
		overflow: auto;
		float: left;
		margin: 32px auto 0px 10px;
		position: relative;
		top: 9px;
		left: 10px;
		min-width: 885px;
		height: 85%; /*91%;*/
		min-height: 500px;
		width: calc(100% - 50px);
		width: -webkit-calc(100% - 50px);
		width: -moz-calc(100% - 50px);
		height: calc(100% - 65px);
		height: -webkit-calc(100% - 65px);
		height: -moz-calc(100% - 65px);
		border: 1px solid #d3d3d3;
		padding: 5px;
		-webkit-border-radius: 20px;
		border-radius: 20px;
		-webkit-box-shadow: #666 -3px 3px 15px;
		box-shadow: #666 -3px 3px 15px;
		background-color: #fafafa;
		margin-bottom: 20px;
	}

/* weergave upload drag & drop area's */
	div#upload .drop-container {
		position: relative;
		display: flex;
		gap: 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		padding: 20px;
		border-radius: 10px;
		border: 2px dashed #555;
		color: #444;
		cursor: pointer;
		transition: background .2s ease-in-out, border .2s ease-in-out;
		margin-top: 3em;
	}

	/*div#upload table#uploaded_files {
		margin-top: 2em;
	}*/

	/*https://codepen.io/PJCHENder/pen/VzBVoV/*/
	div#upload .drop-container:hover {
		background: #eee;
		border-color: #111;
		cursor: pointer;
	}

	div#upload .drop-container:hover .drop-title {
		color: #222;
	}

	div#upload .drop-title {
		color: #444;
		text-align: center;
		transition: color .2s ease-in-out;
	}

/* weergave van "rounded" div's */
	div#savebutton {
		position: fixed;
		top: 0px;
		left: 0px;
		padding: 5px;
		width: 100%;
		background-color: #fafafa;
		z-index: 250;
	}

	div.rounded {
		margin: 75px 15px 15px 15px;
		display: block;
		border: 1px solid #bfcccc; /* mischien ook donker groen maken idem als span tekst! */
		padding: 20px 15px 15px 15px !important;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background-color: #fafafa;
		z-index: 10;
	}

	div.rounded span.header {
		-moz-user-select: none;
		-webkit-user-select: none;
		position: absolute; /*relative;*/
		font-weight: 700;
		z-index: 50;
		padding: 0px 8px;
		left: 20px;
		/*top: -13px;*/
		left: 45px;
		font-size: 20px;
		background-color: inherit; /* #edf2f8; // inherit?? */
		/*background: linear-gradient(transparent 50%, #fafafa 50%);*/
		-webkit-border-radius: 5px;
		border-radius: 5px;
		margin-top: -35px;
	}

	div.rounded span.header.left {
		left: 45px;
	}

	div.rounded span.header.right {
		left: auto;
		right: 50px;
	}

	div.rounded.errordiv {
		border: 1px dashed red;
	}

	div.rounded.errordiv span.header {
		border-bottom: 1px dashed red !important;
	}

	div.rounded.succesdiv {
		border: 1px dashed green;
	}

	div.rounded.succesdiv span.header {
		border-bottom: 1px dashed green !important;
	}

/* Opmaak notitieblok */
	#notitie {
		color: #333;
		position: absolute;
		bottom: 40px;
		left: 20px;
		width: 200px;
		height: 312px;
		margin: 0px auto;
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
	}

	#notitie:before, #notitie:after {
		position: absolute;
		width: 40%;
		height: 10px;
		content: ' ';
		left: 2.5%;
		bottom: 2.5%;
		background: transparent;
		-webkit-transform: skew(-5deg) rotate(-5deg);
		transform: skew(-5deg) rotate(-5deg);
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		z-index: -1;
	}

	#notitie:after {
		left: auto;
		right: 2.5%;
		-webkit-transform: skew(5deg) rotate(5deg);
		transform: skew(5deg) rotate(5deg);
	}

	#notitie #balk { position: relative; top: 0px; left: 0px; width: 100%; height: 15px; border-left: 1px black solid; border-right: 1px black solid; border-top: 1px black solid; background-color: #C0C0C0; }
	#notitie #balk span { font-size: 12px; color: #000; font-weight: 700; padding-left: 20px; vertical-align: middle; }
	#notitie #pad { position: relative; height: 100%; width: 100%; border: 1px #737373 solid; background-color: #FFF788; }
	#notitie #pad table { width: 100%; border-collapse: separate; border-spacing: 2px 0px; }
	#notitie #pad table tr { height: 20px; vertical-align: middle; }
	#notitie #pad table tr td.first { width: 10px; border-right: 1px #EED055 solid; border-bottom: 1px #c0c0c0 solid; }
	#notitie #pad table tr td.third {  width: 100%; height: 100%; vertical-align: middle; padding-left: 3px; border-left: 1px #EED055 solid; border-bottom: 1px #c0c0c0 solid; }
	#notitie #pad table tr:last-child td.first { border-bottom: none; }
	#notitie #pad table tr:last-child td.third { border-bottom: none; }
	#notitie div.notitie_text { width: 185px; height: 100%; overflow: hidden; }

/* opmaak kalender */
	#kalender { clear: both; height: 90%; color: #555; margin-top: 60px; }
	#kalender table { border: 1px solid #c0c0c0; margin: 0 auto; height: 95%; width: 90%; }
	#kalender table tbody td { height: 100%; }
	#kalender table tbody td,#kalender table thead th { border: 1px solid #c0c0c0; }

	#kalender table#week { border: none; border-spacing: 2px; border-collapse: separate; }
	#kalender table#week thead th { width: 10%; text-align: center; border-top: none; }
	#kalender table#week tbody td { vertical-align: top; }
	#kalender table#week tbody td div { width: 100%; height: auto; border-bottom: 1px solid #c0c0c0; }
	#kalender table#week tbody td div span { font-weight: bold; font-size: .9em; }
	#kalender table#day { border: none; border-left: none; }
	#kalender table#day tbody td:first-child { width: 40px; }
	#kalender table#day tbody td:first-child:not(.half) { border-left: none; text-align:right; font-size: 2em; font-weight: bold; border-right: none; padding-right: 10px; }
	#kalender table#day tbody td { border-bottom: 1px solid #c0c0c0; }

	#kalender table#month { border: none; border-spacing: 2px; border-collapse: separate; }
	#kalender table#month thead th:first-child { width: 30px; border-left: none; border-top: none; }
	#kalender table#month thead th:not(:first-child) { width: 14%; text-align: center; border-top: none; }
	#kalender table#month tbody { /*height: 100%;*/ }
	#kalender table#month tbody tr { height: 150px; }
	#kalender table#month tbody td { border: 1px solid #c0c0c0; vertical-align: top; }
	#kalender table#month tbody td:first-child { width: 30px; font-size: 1.5em; border-left: none; border-top: none; }
	#kalender table#month tbody td:first-child div { height: 100%; width:100%; display:inline-block; }
	#kalender table#month tbody td div span { font-weight: bold; font-size: .9em; }

	#kalender td.past { background-color: #DDD; }
	#kalender td.past div.date { background-color: #BBB; }
	#kalender td.future { background-color: white; }
	#kalender td.future div.date { background-color: #DDD; }
	#kalender td.present	{ background-color: #FFF788; }
	#kalender td.present div.date { background-color: #EED055; }
	#kalender td.none		{ background-color: #BBB; }
	#kalender td.none div.date	{ background-color: #DDD; }
	#kalender .date-week:hover { background-color: #DDD; }
	#kalender div.date { }
	#kalender td div.date:hover { background-color: rgba(0,0,0,0.2); }

	#kalender td.events { font-size: 1em !important; font-weight: normal !important; border: none; }

	#kalender td ul { list-style: none; width: 100%; }
	#kalender td ul li {
		font-size: 80%;
		border: 1px solid #c0c0c0;
		margin-top: 5px;
		position: relative;
		left: -35px;
		padding: 3px;
		width: 90%;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: #666 -1px 1px 5px;
		box-shadow: #666 -1px 1px 5px;
	}
	#kalender td ul li:hover { background-color: rgba(0,0,0,0.1); }

	#navbar { width: 100%; position: fixed; background-color: inherit; z-index: 5;}
	#navbar a:first-child { float: left; }
	#navbar a:last-child { float:right; }

	#navbar #innerbar { font-size: 2em; font-weight: bold; padding-top: 10px; padding-bottom: 10px; text-align: center; width: 600px; margin: 0 auto; }

/* Filter inputs */
	#textinput, #datuminput { width: 400px; padding: 3px 0px 3px 10px; min-height: 21px; background-color: #fef4c5; border: 1px solid #c0c0c0; -webkit-border-radius: 3px; border-radius: 3px; }

	#textinput input[type="text"] ,#datuminput input[type="text"] { width: 300px; border: none; margin: 0; padding: 0; display: block; /*color: #777;*/ }
	#textinput input[type="password"] { width: 300px; border: none; margin: 0; padding: 0; display: block; color: #777; }
	#textinput input[type="file"] { width: 300px; border: none; margin: 0; padding: 0; display: block; color: #777; }

	/*#filter { width: 100%; }*/
	#textinput div.zklft select { float: right; width: 100px; outline: none; border: none; border-left: 1px solid #c0c0c0; position: relative; top: -2px;/*background-color: #fef4c5;*/ }
	#textinput div.zkrgt select { float: right; width: 100px; outline: none; border: none; border-left: 1px solid #c0c0c0; position: relative; top: -2px;/*background-color: #fef4c5;*/ }
	#textinput div.zklft input[type="text"] { float:left; border: none; background-color: inherit; }
	#textinput div.zklft #inputwrapper { border: none; }

	#datuminput { width: 400px; /* 300px*/ clear: both; }
	#datuminput div.zklft { width: 20px; }
	#datuminput div.zklft img { border: none; padding: 5px; display: block; width: 15px; height: 15px; float: left; }
	#datuminput div.zkrgt input[type="text"] { border: none; background-color: inherit; width: 100%; max-width: 370px; float: right; }

	div.ui-datepicker-title select { font-size: 0.8em !important; }