body{
	color: #333;
    font-family: "Trebuchet MS";
    font-size: 14px;
    margin: 0px;
    padding: 0px;
}

header, .header {
	background: #555;
	height: 114px;
}
	header img {
		padding-top: 10px;
    		padding-left: 10px;
	}

nav, .nav {
	background: #e30613;
    font-size: 18px;
    font-weight: bold;
    width: 50px;
    height: 75px;
    overflow: hidden;
    color: #fff;
    z-index: 999;
    position: absolute;
    top: 30%;
}
	nav a {color: #fff;}
	nav p, .nav p {color: #fff; text-decoration: none; padding: 10px;}
	nav p {width: max-content;}
	nav:hover, .navHover {
		top: unset;
		min-width: fit-content;
		height: auto;
		background: #ccc;
	}
		nav:hover a {color: #333;}
		nav a:hover {color: #fff;}
	
main, .main {
	min-height: 750px;
	margin-left: 50px;
}
	section, .section {
		margin: 10px;
	}
	
	table {width: 100%;}
	tr:nth-child(even) {background-color: #f2f2f2;}
	tr:nth-child(odd) {background-color: #dadada;}
	tr:hover {background-color: #b2b2b2;}
	.tableHaeder {
		background: #333 !important;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
	}

	.popup, #popupspoed {
    z-index: 999;
    position: fixed;
    top: 20%;
    width: 90%;
    max-width: 300px;
    left: 42%;
    border-radius: 25px;
    background: #fff;
    padding: 20px;
    border: 1px solid #333;
    text-align: center;
	}
	#popupspoed {display: none;}

	.popup h2 {
background: #333;
    color: #fff;
    margin: -20px -20px 0px -20px;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 20px 20px 0px 0px;
	}

.popupscreen, #popupscreen{
display: none;
position: fixed;
    top: 0;
    left: 0;
    background: rgba(50,50,50,0.8);
    width: 100%;
    height: -webkit-fill-available;
	}

footer, .footer {
    font-size: 10px;
    width: -webkit-fill-available;
    color: rgba(51,51,51,95);
    padding: 10px 0px;
    text-transform: uppercase;
    bottom: 0px;
}

.mobonly {display: none;}	

hr {
    border-top: 1px dashed #ccc;
    border-bottom: none;
}

.button{
	text-decoration: none;
	line-height: 40px;
    background: #333;
    color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	padding: 5px 10px;
	border: 0px;
	cursor: pointer;
	width: fit-content;
}
	.button a {text-decoration: none; color: #fff;}
	.button .material-icons {
		vertical-align: middle;
	}
	
.right{
	float: right;
}
	
.goed {
	color: #167b00;
	padding-left: 10px;
	padding-top: 5px;
	font-weight: bold;
}

.error {
	color: #b92914;
	padding-left: 10px;
	padding-top: 5px;
	font-weight: bold;
	
	-webkit-animation-duration: 1s; 
	animation-duration: 1s; 
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both;
	-webkit-animation-name: error; 
	animation-name: error;  
}
	.red {color: #b92914;}
		.redHover:hover {color: #b92914; cursor: pointer;}
	.green {color: #167b00;}
		.greenHover:hover {color: #167b00; cursor: pointer;}
	.yellow {color: #f99d27;}
		.yellowHover:hover {color: #f99d27; cursor: pointer;}
	.blue {color: #4285f4;}
		.blueHover:hover {color: #4285f4; cursor: pointer;}
	.white {color: #fff;}
		.whiteHover:hover {color: #fff; cursor: pointer;}
	.gray {color: #bbb;}
		.grayHover:hover {color: #bbb; cursor: pointer;}
	.error .material-icons, .goed .material-icons{
		line-height: 40px;
		padding: 0px 5px 0px 0px;
	}
	
	a {text-decoration: none; color: #333;}
	a:hover {text-decoration: dotted; color: #ccc;}
	.logbookIcon {font-size: 50px; vertical-align: middle;}
	.material-icons {vertical-align: middle;}

.forgotten, input:invalid {
	background: none repeat scroll 0% 0% #ffc5bf;
	border: 1px solid #990000 !important;
}

select {
	background-color: #f2f2f2;
	border-radius: 5px!important;
	margin: 0px;
	border: 1px solid #bbb !important;
	padding: 1%;
	color: #333;
	margin-bottom: inherit;
}
	select:hover {border: 1px solid #333 !important;}
	.button select {height: 38px;}

input{
	color: #333;
	border-radius: 5px !important;
	border: 1px solid #bbbbbb !important;
	background-color: #f2f2f2;
	margin: 0px;
	padding: 1%;
	width: 98%;
}
	input .maxSize {max-width: 350px;}
	input:hover{background-color: #fff; border: 1px solid #333 !important;}
	
	input[type=submit]{
		background-color: rgba(51,51,51,95);
		color: #fff;
		line-height:40px;
		padding: 1%;
		width: 100%;
		font-weight: bold;
		cursor: pointer;
		-webkit-appearance: none;
	}

	input[type=radio],input[type=checkbox] {width: 25px;}
	button {cursor: pointer; !important}
		
	.input-hidden {display: none;}
	input[type=radio] + label {
	  border: none !important;
	  margin: 20px !important;
	  padding: 10px !important;
	}
	
	input[type=radio]:checked + label {
	  border: 2px solid #090;
	}

textarea {
	background-color: #f2f2f2;
	border-radius: 5px !important;
	border: 1px solid #bbbbbb !important;
	margin: 0px;
	padding: 1%;
	width: 98%;
	height: 150px;
	border-radius: 5px;
}
	textarea:hover {
		border: 1px solid #333 !important;
		max-height: unset !important;
	}

fieldset{
	background: #fafafa;
    	border: 1px solid #ccc;
    	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
	border-radius: 5px !important;
}
	fieldset:hover{background: #ffffff;}
	
@media only screen and (max-width: 600px) {
	header, .header {height: auto;}	
		header img, .header img {
			width: 70% !important;
		}
		
	nav, .nav {
		float: right !important;
		position: unset !important;
		margin: 2% !important;
	}
		nav:hover, .nav:hover, .navHover {
			width: 100% !important;
			left:  100% !important;
			margin: 0% !important;
		}
	
	main, .main {
		min-height: 500px !important;
		margin: unset !important;
	}

	.popup, #popupspoed {
		left: 2%;
		right: 2%;
   		width: auto;
		max-width: unset;
	}

	.webonly {display: none;}
	.mobonly {display: block;}
}