:root {
	--gray: #aab5c8;
	--darkGray: #333333;
	--lightGray: #cccccc;
	--grayBlue: #394c6c;
	--blue: #2420cf;
	--darkBlue: #0400c5;
	--green: #456f47;
	--lightGreen: #b9ffb5;
	--drakGreen: #849b49;
	--drakgBlue: #bfc0ff;
	--orange: #ff9600;
	--darkOrange: #ffedbd;
	--white: #ffffff;
	--darkWhite: #f2f2f2;
	--offWhite: #fafafa;
	--red: #f40000;
	--darkRed: #b92914;
	--black: #000000;
}

body{
	background: rgba(225, 225, 225, 0.75);
	color: var(--gary);
	font-family: "Trebuchet MS",Calibri, sans-serif;
	font-size: 15px;
	margin: 0px;
	padding: 0px;
	z-index: 9999999999;
}

progress {
	display: none;
}

.loadscreen {
	width: -webkit-fill-available;
  height: -webkit-fill-available;
  position: fixed;
  padding: 20% 0px 50%;
  text-align: center;
  background: rgba(255,255,255, 0.95);
}
	.loader {
		border-radius: 50%;
		border-top: 16px solid var(--darkBlue);
		box-shadow: 0px 5px 10px rgba(57, 76, 108, 0.4);
		width: 100px;
		height: 100px;
		margin: 25px auto;
		background: var(--orange);
		-webkit-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}
		@-webkit-keyframes spin {
		 0% { -webkit-transform: rotate(0deg); }
		 100% { -webkit-transform: rotate(360deg); }
		}

		@keyframes spin {
		 0% { transform: rotate(0deg); }
		 100% { transform: rotate(360deg); }
		}	

.shape-wrapper {
	display: none;
}
	
nav, .nav {
	position: fixed;
	font-size: 16px;
	font-weight: bold;
	width: 85px;
	margin: 0px;
	z-index: 950;
	overflow-x: hidden;
	overflow-y: auto;
	height: -webkit-fill-available;
	box-shadow: 0px 5px 10px rgba(57, 76, 108, 0.4);
	color: rgba(57, 76, 108, 1);
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.75);
}
	nav li {padding: 10px 15px}
		nav li a,nav li a:hover {color: rgba(57, 76, 108, 1) !important;}
	nav img {padding-left: -100px; opacity: 0;}
	nav:hover {
		width: fit-content;
		height: -webkit-fill-available;
		background: rgba(255, 255, 255, 0.99) !important;
		background: var(--white);
		backdrop-filter: none !important;
	}	
		nav:hover img {padding-left: 10px; opacity: 100; transition-duration: 1s;}
		nav:hover .submenu {opacity: 100; margin-top: 0px; transition-duration: 0.5s;}
		nav:hover .menutext {display: unset;}
		nav:hover .footerMenu {display: unset;}				

	nav ul {
		list-style: none;
		padding: 0px;
	}

	nav .button, .nav .button {
		-webkit-animation-duration: 1s; 
		animation-duration: 1s; 
		-webkit-animation-fill-mode: both; 
		animation-fill-mode: both;
		-webkit-animation-name: bounce; 
		animation-name: bounce;
		border-radius: 0px;
		box-shadow: unset;
	}

	.from_top, .from_top {
		-webkit-animation-duration: 1s; 
		animation-duration: 1s; 
		-webkit-animation-fill-mode: both; 
		animation-fill-mode: both;
		-webkit-animation-name: from_top; 
		animation-name: from_top;
	}

	nav .material-icons {font-size: 35px; line-height: unset; padding-right: 10px;}
	nav .menutext {padding: 10px; display: none;}
	nav .menuIcon {display: none;}
	nav:hover .footerMenu {display: none;}
	nav a {border-bottom: 1px solid transparent !important; padding-bottom: 15px; font-weight: normal;}
	nav a:hover {border-bottom: 1px solid rgba(57, 76, 108,1) !important;}
	
	.rightmenu {
		position: fixed;
		right: 0px;
		top: 0px;
		width: fit-content;
		z-index: 999999;
		padding: 10px;
		background: var(--blue) !important;
	}
		.rightmenu:hover {padding: 10px}
		.rightmenu .button {width: -webkit-fill-available; box-shadow: none !important;}
		.rightmenu .menutext {display: none;}
		.rightmenu:hover .menutext {display: block;}
		
	.navSettings {
		background: var(--gray);
		border-radius: 25px;
		text-align: center;
		padding: 10px;
		color: rgba(57, 76, 108, 1) !important;
		line-height: 70px;
	}
		.navSettings a, .navSettings button {
			border: 0px;
			background: transparent;
			padding: 20px;
			border-radius: 20px;
			color: rgba(57, 76, 108, 1) !important;
		}
		.navSettings .buttonActief, .navSettings a:hover,  .navSettings button:hover{
			background: var(--offWhite);
			font-weight: bold;
		}

main, .main {
  min-height: 500px;
  padding: 50px 50px 50px 135px;
  margin: 0px
}
	.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: 95%;}
		.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;
		}
			h2 small {color: var(--lightGray); font-size: 16px;}
			
		.splitScreen-low {
			padding: 0 2%;
			margin: 0 2% !important;
		}
		.splitScreen-clean {
			background: transparent !important;
			padding: 0px;
			border-radius: 0px;
		}
		
		.rankBoxActife, .splitScreen-border-hover:hover {
			border: 1px solid var(--blue);
			transform: scale(1.05);
		}
			
		.bleu .splitScreen-1, .bleu .splitScreen-2, .bleu .splitScreen-3, .bleu .splitScreen-4 {
			background: rgba(250, 250, 250, 0.8);
			box-shadow: unset !important;
		}
			.blue {
				background: url(/images/new/BodyBG@1x.svg) center center no-repeat;
				color: var(--white);
				background-size: cover;
			}
			.whitebox {background: rgb(250, 250, 250);}
				.whitebox .splitScreen-1, .whitebox .splitScreen-2, .whitebox .splitScreen-3, .whitebox .splitScreen-4, .whitebox .splitScreen-1:hover, .whitebox .splitScreen-2:hover, .whitebox .splitScreen-3:hover, .whitebox .splitScreen-4:hover {background: transparent !important; box-shadow: unset !important;}
.editor {
	border: 1px solid var(--lightGray);
	border-radius: 0px 0px 10px 10px;
	padding: 10px;
	background: var(--white);
}
	.editor:hover {
		border: 1px solid var(--gary);
		background: var(--darkWhite)
	}
	
	.editRow {
		background: var(--lightGray);
		border-radius: 10px 10px 0px 0px;
	}
		.editRow button {line-height: 5px;}
	

#popupscreen {
	position: fixed;
	width: 100%;
	height: -webkit-fill-available;
	background: rgba(0,0,0,0.7);
	z-index: 950;
	top: 0;
	left: 0;
}
	.popup, .popupbig, .popupwidth {
		width: 50%;
		min-height: 25%;
		left: 25%;
		top: 20%;
		padding: 0px;
		text-align: center;
		position: fixed;
		border: 1px solid var(--grayBlue);
		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;
		z-index: 99999;
	}
		.popupbig, .popupwidth{width: 80%; left: 10%;}

		.popupcontent {
			overflow: hidden;
			overflow-y: auto;
			max-height: 350px;
			padding: 2%;
			margin: 8px;
			min-height: 75%;
			top: 10%;
		}
		
		.popup h2, .popupbig h2 {
			padding: 20px;
			margin: -1px;
			background: var(--grayBlue);
			border: 1px solid var(--grayBlue);
			border-radius: 25px 25px 0px 0px;
			color: var(--white) !important;
			font-size: 25px;
		}

embed {
	margin-top: 5px;
	width: 100%;
	min-height: 750px;
	border-radius: 10px;
}

.kop{
	color: var(--white);
	background: var(--grayBlue);
}

.tableBorder {
	border: 1px solid var(--gary);
	border-radius: 5px;
}
	.tabelHeader {
		background: var(--gray) !important;
		color: rgba(57, 76, 108, 1) !important;
		font-size: 16px;
		line-height: 40px;
		font-weight: bold;
		padding-left: 25px;
	}
	
	tr:nth-child(odd) {background: var(--darkWhite)}
	tr:hover {background: var(--lightGray) !important;}
	
	.tableMain {
		border-radius: 10px !important;
		overflow: hidden;
		color: var(--darkGray);
	}

.qr-code {
	width: 90%;
	height: 90%;
	max-width: 150px;
	max-height: 150px;
	border:1px solid var(--gary);
	box-shadow: 0px 5px 10px rgb(0 0 0 / 40%);
}

.display-flex {display: flex;}
	
@supports (-webkit-touch-callout: none) {
	.readShow {display: block;}
	.readHidden {display: none;}
}

.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: var(--gary);}

.right {float: right;}
		
footer {
	background: var(--white) !important;
	font-size: 10px;
	width: -webkit-fill-available;
	padding: 25px;
	text-transform: uppercase;
	max-height: 130px;
	overflow-y: auto;
	z-index: 100;
	bottom: 0px;
}
		
	.footerMenu {
		width: 90%;
		position: absolute;
		margin-left: 5%;
	}

.footerLeft, .footerRight {
	max-width: 1000px;
	margin: auto;
	text-transform: none;
}
.footerRight {
	text-align: right;
	float: right;
	margin-right: 10px;
}
	.footerCenter {text-align: center}	
	
h1 {text-transform: uppercase;}
	h1 a {color: var(--white);}
	
	main h1 {
		padding: 25px 10px;
		text-align: center;
	}

.imgzoom {
  cursor: zoom-in;
  transition: transform .2s;
}
	.imgzoom:hover {transform: scale(1.5); }

.button{
	text-decoration: none;
	line-height: 40px;
	background: var(--blue);
	color: var(--white);
	text-transform: uppercase;
	font-weight: bold;
	padding: 10px 20px;
	border: 0px;
	border-radius:4px;
	cursor: pointer;
	display: inline-block;
}
	.button .material-icons {vertical-align: text-bottom;}
	.button:hover .material-icons, .btnfactuurList:hover .material-icons {transform: scale(-1, 1); transition-duration: 0.5s; color: var(--orange) !important;}
	.button:hover, .buttonActief {font-style: italic;}
	.search {width: 200px;height: 30px; background: var(--lightGray);}
	.search:hover {width: 350px;}
	
	.material-icons-box {
		height: 250px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
		.material-icons-box .material-icons-list {
			display: inline-block;
			margin: 5px;
		}
	
	.btnfactuurList, .material-icons-list {
		padding: 10px;
		border-radius: 10px;
		color: var(--gary) !important;
		background: var(--lightGray);
		display: inline-block;
	}
		.btnfactuurListBox {
			float: right;
			line-height: 45px;
		}

.notificatie {
    color: var(--white) !important;
    width: -webkit-fill-available;
    top: 0px;
    left: 0px;
    text-align: center;
    padding: 2% !important;
    margin: 10px 0px;
	border-radius: 25px;
    background: rgb(249 157 39 / 95%);
}
	.notificatie_green, .notificatie_red {
		border-radius: 0px !important;
		margin: 0px !important;
		position: fixed !important;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-name: fadeout;
		animation-name: fadeout;
	}
	.notificatie_green {background: var(--drakGreen);}
	.notificatie_red {background: var(--darkRed);}	

.goed {
	color: var(--drakGreen);
	padding-left: 10px;
	padding-top: 5px;
	font-weight: bold;
}

.error {
	color: var(--darkRed);
	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: var(--darkRed);}
		.redHover:hover {color: var(--darkRed); cursor: pointer;}
	.green {color: var(--green);}
		.greenHover:hover {color: var(--green); cursor: pointer;}
	.yellow {color: var(--orange);}
		.yellowHover:hover {color: var(--orange); cursor: pointer;}
	.white {color: var(--white);}
		.whiteHover:hover {color: var(--white); cursor: pointer;}
	/* .blue {color: var(--darkBlue);} */
		.blueHover:hover {color: var(--darkBlue); cursor: pointer;}
	.gray {color: var(--gray)}
		.grayHover:hover {color: var(--gray); cursor: pointer;}
	.black {color: var(--black);}
		.blackHover:hover {color: var(--black); cursor: pointer;}
	.error .material-icons, .goed .material-icons{
		line-height: 40px;
		padding: 0px 5px 0px 0px;
	}
	
	.boxGreen {padding: 10px; color: var(--green); background: var(--lightGreen);}
	.boxBlue {padding: 10px; color: var(--darkBlue); background: var(--drakgBlue);}
	.boxYellow {padding: 10px; color: var(--orange); background: var(--darkOrange);}
	.boxRed {padding: 10px; color: var(-red); background: var(-red);}
	
	.boxGreen, .boxBlue, .boxYellow, .boxRed {
	  padding: 10px;
		border-radius: 5px;
		width: fit-content;
		line-height: 30px;
	}
	
	
	table:has(.hoverActiva:hover) .rowActiva, table:has(.hoverPassiva:hover) .rowPassiva {
		background: var(--darkOrange);
	}

	a {text-decoration: none; color: var(--gary);}
	a:hover {text-decoration: dotted; color: var(--lightGray);}
	.link {text-decoration: underline !important;}
	.icon-white {padding-left: 10px;}
	.material-icons {vertical-align: middle;}
	.smallIcon {font-size: 15px !important;}
	.noScreen {display: none !important;}
	.textRight {float: right;}

	.small {
		color: var(--gary);
		font-size: 10px !important;
	}
	
	.placeholder {
		color: var(--gray);
		float: left !important;
		padding: 5px;
		font-variant: all-small-caps;
	}

input:invalid, select:invalid, .invalid{
	background: var(-red);
}
	
input, select {
	color: var(--gary);
	border-radius: 10px !important;
	border: 1px solid var(--gray) !important;
	background-color: var(--darkWhite);
	margin: 0px;
	padding: 10px;
	width: -webkit-fill-available;
}
	.selAddOrEditSmall {width: 30% !important;}
	.button select {height: 38px;}

	.intAddOrEditBig {width: -webkit-fill-available !important;}
	.intAddOrEditSmall {width: 30% !important;}
	input .maxSize {max-width: 350px;}
	input:hover, select:hover {border: 1px solid var(--gary) !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;
		border: 0px !important;
		width: 20%;
		height: 40px;
		background: transparent;
	}
	input[type=checkbox], input[type=radio]{width: 25px;}

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

textarea{
	background-color: var(--darkWhite);
	border-radius: 5px !important;
	border: 1px solid var(--gray) !important;
	margin: 0px;
	padding: 5px;
	width: 98%;
	height: 150px;
	border-radius: 5px;
}
	textarea:hover {border: 1px solid var(--gary) !important;}
	
.textarea-small {
    height: 50px;
    border-radius: 25px !important;
    padding: 10px;
    width: -webkit-fill-available;
    overflow: hidden;
}
	.textarea-small:hover {
		height: 150px !important;
		border-radius: 15px !important;
		padding: 5px !important;
		width: -webkit-fill-available !important;
		overflow: auto !important;
	}

fieldset{
	background: var(--white);
  -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: 10px !important;
  border: 0px;
}

.placeholder {
  color: var(--grayBlue);
  padding: 1px 10px;
  border: 0px;
  border-radius: 5px;
  font-size: 13px;
}
	.placeholder-normal {
		color: var(--grayBlue);
		font-size: 12px;
	}

.boxselect-label {
 display: inline-block;
 padding: 1em 2em;
 cursor: pointer;
 transition: 0.3s;
 &:active {
  transform: translateY(2px);
  border: 1px solid var(--gary);
 }
 @media (max-width: $small) {
  padding: 0em 1em 3px;
  margin: 0.25em;
 }
}
	.shipment input[type=radio], .shipment input[type=checkbox] {display: none;}

.boxselect-input:checked + .boxselect-label {
 	background: var(--gray);
 	color: rgba(57, 76, 108, 1) !important;
 	border: 1px solid rgba(57, 76, 108, 1) !important;
	border-radius: 10px;
}

.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% {visibility: hidden;}
 50% {visibility: hidden;}
 100% {visibility: visible;}
}

@keyframes condemned_blink_effect {
 0% {visibility: hidden;}
 50% {visibility: hidden;}
 100% {visibility: visible;}
}

@-webkit-keyframes from_top { 
 0% {opacity: 1; -webkit-transform: translateY(0px);}
 100% {opacity: 0; -webkit-transform: translateY(-200px);}
}

@keyframes from_top {
 0% {opacity: 1; transform: translateY(0px);}
 100% {opacity: 0; transform: translateY(-200px);}
}

@-webkit-keyframes zoomIn { 
  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%);
 }
}

@-webkit-keyframes fadeout { 
  0% {-webkit-opacity: 1; top: 0px}
  40% {-webkit-transform: scale(1);}
  100% {-webkit-opacity: 0; -webkit-transform: scale(0); top: -250px;}
} 

@keyframes fadeout { 
  0% {opacity: 1; top: 0px}
  40% {transform: scale(1);}
  100% {opacity: 0; transform: scale(0); top: -250px;}
}

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

@media only screen and (max-width: 600px) {
	header, .header {height: 0px;}
	nav, .nav {
		position: fixed;
		width: -webkit-fill-available !important;
		padding: 10px;
		height: 50px !important;
		top: 0px;
		overflow: hidden;
	}
		nav ul {line-height: 50px;}
		nav ul:hover {display: unset !important;}
		nav .button {padding: 10px 0px;}
		nav img {opacity: 1; height: 60px; width: 150px;}
		nav ul a, .nav ul a {display: none; width: 10px;}
		nav p {width: auto;}
		nav .menuIcon {
				text-align: center;
				display: block;
				padding: 3px;
				font-size: 30px;
			}
			
		nav:hover, .nav:hover {height: -webkit-fill-available !important; overflow: auto;}
		nav:hover .menuIcon {display: none !important;}
		nav:hover .menutext {display: inline !important;}
		nav:hover a, .nav:hover a {
			display:block;
			float: left;
			width:100%;
			z-index: 999;
		}
		
		.search_form {
			position: fixed;
			bottom: 0px;
			z-index: 999;
			background: rgba(57, 76, 108,0.99);
			margin: 0px;
			padding: 5px;
			left: 0px;
			right: 0px;
		}
			.search, .search:hover {width: 80%;}
			.search_form button {width: 17% !important;}

	.noMob {display: none !important;}
	.noScreen {display: block !important;}
	
	.top{
		display: block;
		float: left;
		padding: 0px;
	}
		
	.left{
		width: 50px;
		overflow-y: hidden;
		z-index: 9;
		height: 40px;
		top: 40%;
		border-radius: 100px;
		left: -40px;
		padding: 15px;
		text-align: right;
	}
		.left section{display: none;}
		.left:hover{
			width: 80%;
			left: 0px;
			height: -webkit-fill-available;
			border-radius: 0px;
			top: 65px;
			overflow-y: auto;
			text-align: left;
			margin: 0% !important;
		}
			.left:hover section{display: block;}
		
		nav .noScreen .material-icons {display: none !important;}
		nav:hover .noScreen .material-icons{display: block !important;}
		
	main, .main {
		margin: 50px 25px;
    border-radius: 0px;
    min-height: 300px;
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 0px;
    max-width: -webkit-fill-available !important;
	}
		section {padding: 10px;}

	.notificatie {
		bottom: 0px !important;
  		top: unset !important;
  		left: 0px !important;
	}

.splitBox {
  display: unset;
  position: unset;
  float: left;
}
	.splitScreen-1,.splitScreen-2,.splitScreen-3,.splitScreen-4 {
		width: -webkit-fill-available !important;
		margin: 5% 0% !important;
		border-radius: 0px !important;
	}
	
	.splitScreen-1:hover,.splitScreen-2:hover, .splitScreen-3:hover, .splitScreen-4:hover {
		transform: scale(1.05);
	}
	
	.demoBox {padding: 5% !important;}
	
	.projectlist h1, .totalA4 h1 {margin: 0px;}
	.popup {
		width: -webkit-fill-available;
    left: 0;
    top: 0;
    margin: 5%;
    position: fixed;
    padding: 5%;
	}
		.popup h2 {margin: -7% -7% 0% -7%;}

	.display-flex {display: block;}

.imgTumb {
	margin-left: 0px;
	margin-top: 10px;
	height: 250px;
}
		
	footer {
		position: relative;
		padding: 10px;
	}
	
	.footerMenu {
		width: 50%;
		position: relative;
		margin-left: 5%;
	}
	
	.button{
		display: block;
		margin: 10px 0px;
		width: -webkit-fill-available;
	}

	.factuur {
		width: auto !important;
		padding: 10px !important;
		height: unset !important;
	}
}