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

@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=Fira+Sans:wght@300;400;500&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Fira+Mono:wght@400;500&family=Fira+Sans:wght@300;400;500&family=Ubuntu&display=swap');

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

html,body {
	margin: 0 auto;
	height: 100%;
	width: 100%;
}

body {
	font-family: 'Anonymous Pro', monospace, 'Ubuntu', sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #444;
	background-repeat: repeat;
	background-size: 10px 10px;
	position: absolute;
	top: 0px;
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

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

#copyright {
	position: absolute;
	top: 20px;
	left: 10px;
}

#copyright img.logo {
	width: 100px;
	display: block;
}
#copyright img.ipv6 {
	width: 50px;
	height: 10px;
	display: block;
}

#copyright p {
	font-size: 80%;
}

.correct {
	color: green;
}

.error {
	color: red;
}

img {
	display: block;
}

table {
	width: 100%;
	border-spacing: 5px;
	/*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: #F2F2F2;
}

input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], 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;
}

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: 0px;
	width: 320px;
}

input[type=button],input[type=submit],button,input[type=file]::file-selector-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,input[type=file]::file-selector-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: var(--color-magenta--);
}
input:focus[id^='gauth'] {
	border-color: var(--color-black--);
	transition: text-indent 0.4s 0.4s 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 { /*text-align: center;*/ position: relative; margin: 0 auto; }
	#login table { text-align: left; margin-top: 20px; margin-bottom: 50px; margin: 0px auto; }
	#login input.inlog { min-width: 0px; width: 200px; }
	#login p, #login span:not(.header) { font-size: 11px; }
	#logo img { position: relative; left: 20px; top: 10px; border: none; }
	div#login.rounded { margin: 0 auto; margin-top: 50px; width: 500px; height: auto; }
	div#login:not(.errordiv).rounded span.header { text-align: left; border: 1px solid #c0c0c0; }
	div#login.errordiv span.header { text-align: left; border: 1px dashed red; }
	div#login.rounded input[type=text],div#login.rounded input[type=password] { width: 300px; }

	button.logout { position: absolute; left: 30px; top: 300px; }

/* 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 #c0c0c0; /* 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: 0;
	}

	div.rounded span.header {
		position: absolute; /*relative;*/
		font-weight: 700;
		z-index: 50;
		padding: 0px 8px;
		left: 20px;
		/*top: -13px;*/
		left: 30px;
		font-size: 20px;
		background-color: inherit; /* #edf2f8; // inherit?? */
		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;
		transform: skew(-5deg) rotate(-5deg);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		z-index: -1;
	}

	#notitie:after {
		left: auto;
		right: 2.5%;
		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; }