body{
	overflow-x: hidden;
	background: url(/images/bg.jpg) no-repeat fixed center center transparent;
	background-size: cover;
	color: #333;
	font-family: "Trebuchet MS";
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}

header, .header {
    width: -webkit-fill-available;
    background: rgba(51, 51, 51,0.95);
    height: auto;
}
	.top {
		top: 0px;
		display: none;
		padding: 0px 10px 50px 10px;
	}


	.left {
		top: 0px;
		margin: 0;
		border-radius: 0;
		width: 20%;
		height: -webkit-fill-available;
		position: fixed;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 99;
	}
		.left:hover {width: 30%;}
		.left a:hover, .left p a:hover {color: #333;}
	
nav {
    font-size: 18px;
    text-align: center;
    margin: auto;
    display: flex;
}
	nav .top {display: block;}
	nav .menuIcon {display: none;}
	nav a, .nav a {color: #fff; text-decoration: none;}
	nav p {width: -webkit-fill-available; line-height: 50px;}
	nav:hover {min-width: fit-content;}
		
	.popup {
		width: 50%;
		left: 25%;
		top: 25%;
		padding: 0px;
		text-align: center;
		position: fixed;
		z-index: 999;
		border: 1px solid #333;
		background: rgba(250,250,250,0.9);
		box-shadow: 3px 3px 5px rgb(0 0 0 / 40%);
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: zoomIn;
		animation-name: zoomIn;
		box-shadow: 0px 0px 100px rgb(0 0 0);
		border-radius: 25px;
	}
		.popupcontent {
			overflow: hidden;
			overflow-y: auto;
			max-height: 350px;
			padding: 2%;
		}
			.popup h2 {
				padding: 20px;
				margin: -1px;
				background: #333;
				border: 1px solid #333;
				border-radius: 25px 25px 0px 0px;
				color: #fff;
				font-size: 25px;
			}
		
		#popupscreen {
			position: fixed;
			width: 100%;
			height: -webkit-fill-available;
			background: rgba(0,0,0,0.7);
			z-index: 950;
			top: 0;
			left: 0;
		}
		
		.kop{
			color: #fff;
			background: #333;
		}
		
		table {
			border: 1px solid #333;
			border-radius: 5px;
			width: -webkit-fill-available;
		}
			.tabelHeader {
				background: rgba(51,51,51,95) !important;
				color: #fff;
				font-size: 16px;
				text-transform: uppercase;
			}
			tr {display: table-row;}
			tr:nth-child(even) {background-color: #f2f2f2;}
			tr:nth-child(odd) {background-color: #dadada;}
			.trwhite {background-color: #fff !important;}
			tr:hover {background-color: #d2b650;}

main, .main {
    max-width: 1000px;
    width: 90%;
    margin: auto;
}
	section {padding: 25px;}
	
	.splitBox {
		display: flex;
		flex-wrap: wrap;
		width: -webkit-fill-available;
		overflow: hidden;
		justify-content: space-between;
		margin: 25px 0;
	}
		.splitBox .center {text-align: center;}
		
		.splitScreen-1 {width: -webkit-fill-available;}
		.splitScreen-2 {width: 38%;}
		.splitScreen-3 {width: 20%;}
		.splitScreen-4 {width: 13%;}
		
		.splitScreen-1,.splitScreen-2,.splitScreen-3, .splitScreen-4 {
			background: rgb(250, 250, 250);
			margin: 2%;
			padding: 4%;
			overflow: hidden;
			border-radius: 10px;
			animation: 1s lineUp ease-in-out;
			scroll-snap-align: start;
		}
			h2 small {color: #ccc; font-size: 1em;}
			
		.splitScreen-low {
			padding: 0 2%;
			margin: 0 2% !important;
		}
		
		.splitScreen-clean {background: transparent !important;}
			.splitScreen-clean:hover, .blue .splitScreen-2:hover, .blue .splitScreen-3:hover {box-shadow: none !important;}

	.grid {display: flex; flex-flow: wrap;}
	.deviceList {
		background: rgba(520,250,250,0.8);
		margin: 2% auto;
		padding: 5px;
		width: 33%;
		overflow: hidden;
		border: 1px solid #ccc;
		text-align: center;
		border-radius: 10px;
		box-shadow: 0px 5px 10px rgb(0 0 0 / 40%);
		animation: 1s lineUp ease-in-out;
	}
		.deviceList table {border: none;}
		.deviceList:hover{
			 background: #ccc;
				border: 1px solid #333;
				transform: scale(1.1);
				transition: transform .2s;
		}
			.deviceList a:hover {color: unset;}
			.deviceList .showOnHover {display: none;}
			.deviceList:hover .showOnHover {display: block;}
				
footer {
    font-size: 10px;
    width: -webkit-fill-available;
    padding: 10px 0px;
    text-transform: uppercase;
    z-index: 100;
}
		
	.footerMenu {
		width: 90%;
		position: absolute;
		margin-left: 5%;
	}
	footer a {color: #333; text-decoration:none;}

.footerLeft {
	max-width: 1000px;
    margin: auto;
    text-transform: none;
}
.footerCenter {text-align: center}	

.noMob {display: block;}
.noScreen {display: none;}

	
h1 {text-transform: uppercase;}
	h1 a {color: #fff;}

.button{
	text-decoration: none;
	line-height: 40px;
    background: #333;
    color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	padding: 10px 20px;
	border: 0px;
	border-radius:4px;
	cursor: pointer;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
}
	.button a {text-decoration: none; color: #fff;}
	.button .material-icons {
		line-height: 40px;
	}
	
	nav .button, .nav .button {
		-webkit-animation-duration: 1s; 
		animation-duration: 1s; 
		-webkit-animation-fill-mode: both; 
		animation-fill-mode: both;
		-webkit-animation-name: bounceIn; 
		animation-name: bounceIn;
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
		border-radius: 0px;
		width: 100%;
	}
		nav .button:hover, .nav .button:hover {
			-webkit-animation-duration: 1s; 
			animation-duration: 1s; 
			-webkit-animation-fill-mode: both; 
			animation-fill-mode: both;
			-webkit-animation-name: bounce; 
			animation-name: bounce;
		}
	
.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;}
	.white {color: #fff;}
		.whiteHover:hover {color: #fff; cursor: pointer;}
	.blue {color: #0400c5;}
		.blueHover:hover {color: #0400c5; 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;}
	.icon-white {padding-left: 10px;}
	.material-icons {vertical-align: middle;}
	.smallIcon {font-size: 15px !important;}

	.small {
		color: #333;
		font-size: 10px !important;
	}

.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;
}
	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;}
	
	.edit{
		background: rgba(22,123,0,0.5);
		padding: 10px;
		width: 35px !important;
		font-weight: bold;
	}
	
	input[readonly=readonly]{background-color: transparent; border: 0px !important;}
	input[type=color]{padding:0px;}
	input[type=checkbox], input[type=radio]{width: 25px;}

	input[type=submit], input[type=button]{
		background-color: rgba(51,51,51,95);
		color: #fff;
		line-height:40px;
		padding: 1%;
		width: 100%;
		font-weight: bold;
		cursor: pointer;
		-webkit-appearance: none;
	}
		button {cursor: pointer; !important}
		
	.input-hidden {
	  display: none;
	}

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;
	}

fieldset{
	background: #fafafa;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
	-webkit-animation-duration: 1s; 
	animation-duration: 1s; 
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both;
	-webkit-animation-name: bounceIn; 
	animation-name: bounceIn;
	word-break: break-word;
	border-radius: 5px !important;
}
	fieldset:hover{background: #ffffff;}

.blink {
	-webkit-animation: 2s linear infinite condemned_blink_effect;
	animation: 2s linear infinite condemned_blink_effect;
}

@keyframes progressBar {
	0% {width: 0;}
	100% {width: 100%;}
}

@-webkit-keyframes condemned_blink_effect { 
  0% {opacity: 0; -webkit-transform: scale(0.75);}
  33% {opacity: 1; -webkit-transform: scale(1);}
  66% {opacity: 1; -webkit-transform: scale(1);}
  100% {opacity: 0; -webkit-transform: scale(0.75);}
}

@keyframes condemned_blink_effect {
  0% {opacity: 0; transform: scale(0.75);}
  33% {opacity: 1; transform: scale(1);}
  66% {opacity: 1; transform: scale(1);}
  100% {opacity: 0; transform: scale(0.75);}
}

@-webkit-keyframes { 
    0% {opacity: 0; -webkit-transform: scale(0.1);} 
    80% {-webkit-transform: scale(1.1);} 
    100% {opacity: 1; -webkit-transform: scale(1);}
} 

@keyframes zoomIn { 
    0% {opacity: 0; transform: scale(0.1);} 
    80% {transform: scale(1.1);} 
    100% {opacity: 1; transform: scale(1);}
} 

@-webkit-keyframes bounceIn { 
    0% {opacity: 0; -webkit-transform: translateY(-2000px);} 
    60% {-webkit-transform: translateY(30px);} 
    80% {-webkit-transform: translateY(-10px);} 
    100% {opacity: 1; -webkit-transform: translateY(0); }
} 

@keyframes bounceIn { 
    0% {opacity: 0; transform: translateY(-2000px);} 
    60% {transform: translateY(30px);} 
    80% {transform: translateY(-10px);} 
    100% {opacity: 1; transform: translateY(0);}
} 

@-webkit-keyframes bounce { 
    0% {opacity: 0; -webkit-transform: translateY(0);} 
    60% {-webkit-transform: translateY(20px);} 
    80% {-webkit-transform: translateY(-20px);} 
    100% {opacity: 1; -webkit-transform: translateY(0); }
} 

@keyframes bounce { 
    0% {opacity: 0; transform: translateY(0);} 
    60% {transform: translateY(20px);} 
    80% {transform: translateY(-20px);} 
    100% {opacity: 1; transform: translateY(0);}
}

@-webkit-keyframes feder { 
    0% {opacity: 0; -webkit-transform: translateY(-50px);}  
    50% {-webkit-transform: translateY(20px);} 
    100% {opacity: 1; -webkit-transform: translateY(0); }
} 

@keyframes feder { 
    0% {opacity: 0; transform: translateY(-50);} 
    50% {transform: translateY(20px);} 
    100% {opacity: 1; transform: translateY(0);}
} 

@-webkit-keyframes error { 
    0% {-webkit-transform: translateX(-10px);}
	20% {-webkit-transform: translateX(10px);} 
    40% {-webkit-transform: translateX(-10px);} 
	60% {-webkit-transform: translateX(10px);} 
    80% {-webkit-transform: translateX(-10px);}
    100% {-webkit-transform: translateX(0); }
} 

@keyframes error { 
    0% {transform: translateX(-10px);}
	20% {transform: translateX(10px);} 
    40% {transform: translateX(-10px);} 
	60% {transform: translateX(10px);} 
    80% {transform: translateX(-10px);}
    100% {transform: translateX(0);}
}

@keyframes lineUp {
  0% {
    opacity: 0;
    transform: scale(0) translateY(80%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0%);
  }
}

@media only screen and (max-width: 1080px) {
	.container {display: block;}
}

@media only screen and (max-width: 600px) {
	nav {height:100px;}
		nav .top {padding: 0px}
		nav:hover, .nav:hover, .no-touch {
			    width: 100%;
    border-radius: 0px;
    height: -webkit-fill-available;
    float: none;
    display: flex;
    padding: 0px;
    top: 0px;
    left: 0px;
    line-height: 50px !important;
		}
			nav a {display: grid;}
			nav .button {padding: 10px 0px;}
			nav img {padding: 10px; height: 40px;}
			nav p {width: -webkit-fill-available;}
			nav:hover p{
				display:inline;
			}

.grid {display: unset;}

.btnBack {
position: fixed;
    text-align: right;
    z-index: 999;
    background: #333;
    top: 27px;
    right: 20px;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
}

tr {display: grid;}
.noMob {display: none;}
.noScreen {display: block;}

.deviceList {
    width: unset !important;
    margin: 5% 0% !important;
}
	.deviceList:hover {transform: scale(1.1);}
	.deviceList:hover .showOnHover {display: inline-table;}

		.popup {
			width: 80%;
			left: 0;
			margin: 5%;
			top: 10%;
			position: fixed;
			padding: 5%;
		}
			.popup h2 {margin: -7% -7% 0% -7%;}

	.footerMenu {
		width: 50%;
		position: relative;
		margin-left: 5%;
	}
	
	.button{
		width: -webkit-fill-available !important
		overflow: hidden;
	}	
}