 /*Voorraad App*/

:root {
	--achter-kleur1: #00ace6; /*donker naar lichter*/
	--achter-kleur2: #1ac6ff;
	--achter-kleur3: #4dd2ff;
	--achter-kleur4: #80dfff;
	--achter-kleur5: #b3ecff;
	--achter-kleur6: #ccf2ff;
	--achter-kleur7: white;
	--rand-kleur1: #006600;
	--rand-kleur2: #ffffff;
	--rand-dikte1: 0.054vw;
	--rand-dikte2: 0.18vw;
	--font-soort1: Verdana, Geneva, sans-serif;
	--font-grootte1: 1vw;
	--font-grootte-1: 0.95vw;
	--font-grootte-2: 0.9vw;
	--font-grootte-3: 0.84vw;
	--font-grootte-4: 0.7vw;
	--font-grootte-5: 0.6vw;
	--font-kleur1: #0086b3; /*donker*/
	--font-kleur2: #4dd2ff; /*licht new*/
	--font-kleur3: #e6f9ff;
	--font-kleur4: navy;
	--font-kleur5: white;
	--achter-grad_body: -webkit-linear-gradient(left, var(--achter-kleur1), var(--achter-kleur6));
	--achter-grad_header: -webkit-linear-gradient(left top, var(--achter-kleur3), var(--achter-kleur5));
	--achter-grad_knop: -webkit-linear-gradient(left top, var(--achter-kleur1), var(--achter-kleur5));
	--achter-grad_menu: -webkit-linear-gradient(left, #4d4d4d, #737373);
	/*Mobiel*/
	--mob-font-grootte1: calc(var(--font-grootte1) *4);
	--mob-font-grootte-1: calc(var(--font-grootte-1) *4);
	--mob-font-grootte-2: calc(var(--font-grootte-2) *4);
	--mob-font-grootte-3: calc(var(--font-grootte-3) *4);
	--mob-font-grootte-4: calc(var(--font-grootte-4) *4);
	--mob-font-grootte-5: calc(var(--font-grootte-5) *4);
	--mob-rand-dikte1: calc(var(--rand-dikte1) *4);
	--mob-rand-dikte2: calc(var(--rand-dikte2) *4);
}

/* ALGEMEEN */
body {
	background-color: #1ac6ff;
	background: var(--achter-grad_body);
	background-attachment: fixed;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: var(--font-kleur1);
	margin: 0px;
	padding: 0px;
	text-align: center;
}
p {
	font-weight: bold;
}



.nobr {
	white-space: nowrap;
}
.schaduw {
	-moz-box-shadow: 1px 1px 3px #000000;
	-webkit-box-shadow: 1px 1px 3px #000000;
	box-shadow: 6px 6px 8px #000000;
}
.glow {
	-webkit-box-shadow: 0px 0px 105px 81px rgba(45,255,196,1);
	-moz-box-shadow: 0px 0px 105px 81px rgba(45,255,196,1);
	box-shadow: 0px 0px 105px 81px rgba(45,255,196,1);
}
.glowRood {
	-webkit-box-shadow: 0px 0px 62px 22px rgba(255,46,46,1);
	-moz-box-shadow: 0px 0px 62px 22px rgba(255,46,46,1);
	box-shadow: 0px 0px 62px 22px rgba(255,46,46,1);
}

.loginMessage {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: white;
	font-style: italic;
}

.cursor1 {
	cursor: pointer;
}

.rond {
	border-radius: 0.4vw;
}
.rond2 {
	border-radius: 0.2vw;
}

.rondOnder {
	border-radius: 0vw 0vw 0.2vw 0.2vw;
}
.rondBoven {
	border-radius: 0.6vw 0.6vw 0vw 0vw;
}

.mes1 {
	text-align: center;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: var(--font-kleur1);
	padding: 0vw;
	margin: 0vw;
	white-space: normal;
	word-wrap: anywhere;
}
.mes2 {
	text-align: right;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-1);
	color: var(--font-kleur5);
	padding: 1vw;
	margin: 0px;
}
.P_Titel {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	height: 1vh;
	font-weight: normal;
	color: var(--font-kleur1);
	max-width:100%;
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	padding: 0.3vw;
	margin: 0vw;
	opacity: 1;
	box-shadow: var(--rand-dikte1) var(--rand-dikte1) var(--rand-dikte2) #000000;
}

/* EINDE ALGEMEEN */

/* JQUERY SORTEER TABEL OPMAAK*/
.placeholderBackground {
	background-color: #47C7FF;
}

.jq_HtmlTabel_sort_rij {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	padding: 0.3vw;
	height: 2vw;
	margin: 0vw;
	opacity: 1;
	
}


/* PANELs en divs*/
.Panel1 {
	position: center;
	width: 80%;
	background-color: #ffaa80;
	opacity: 0.9;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: #4d1a00;
	margin: 0px;
	padding: 0px;
	text-align: center;
	
}

.divLogin {
		position: absolute;
		border: var(--rand-dikte1) solid white;
		background: var(--achter-kleur1);
		vertical-align: middle;
		text-align: center;
		font-family: Verdana, Geneva, sans-serif;
		font-size: var(--font-grootte1);
		color: white;
		padding: 1vw;
		margin: 0vw;
		top: 15%;
		height: auto;
		width: 25vw;
		margin-left: 34vw;
		opacity: 1;
		z-index: 1;
	}

.tableLogin {
	background: var(--achter-kleur1);
	vertical-align: middle;
	text-align: right;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--font-grootte1);
	color: white;
	padding: 1vw;
	margin: 0vw;
	height: 100%;
	width: 100%;
}
.voorraadDiv {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	padding: 0.3vw;
	margin: 0.3vw;
	opacity: 1;
	box-shadow: var(--rand-dikte1) var(--rand-dikte1) var(--rand-dikte2) #000000;
}

.class_div_Config {
	position: fixed;
	left: 0vw;
	top: 0vw;
	width:auto;
}

.class_div_Scrollbox {
	overflow: auto;
	display:none;
	height: 20vw;
	width: 90%;
}

.Apparaat_div {
	position: absolute;
	left: 1vw;
	top: 10vh;
	background: none;
	overflow: auto;
	text-align: center;
	padding: 0vw;
	width: 360px;
	height: auto;
	z-index: 2;
}

.Config_SelWinkels_div {
	position: absolute;
	display: block;
	opacity: 1;
	left: 10vw;
	top: 5vw;
	width: 30vw;
	min-width: 30vw;
	max-width: 35vw;
	height: 60%;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 2vw;
	z-index: 2;
}

.Config_SelCategorie_div {
	position: absolute;
	display: block;
	opacity: 1;
	left: 50vw;
	top: 5vw;
	width: 40vw;
	min-width: 30vw;
	max-width: 45vw;
	height: 60%;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 2vw;
	z-index: 2;
}

.Index_Voorraad_div {
	position: absolute;
	display: block;
	opacity: 1;
	left: 2vw;
	top: 10vh;
	width: 30vw;
	min-width: 25vw;
	max-width: 30vw;
	height: 50vh;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 2vw;
	z-index: 2;
}

.Index_Boodsch_div {
	position: absolute;
	display: block;
	opacity: 1;
	left: 38vw;
	top: 10vh;
	width: auto;
	min-width: 40vw;
	max-width: 55vw;
	height: 62vh;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	margin-right: 2vw;
	text-align: left;
	padding: 2vw;
	z-index: 2;
}

.Index_Winkels_div {
	position: absolute;
	display: block;
	opacity: 1;
	left: 200px;
	top: 200px;
	width: auto;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	padding: 0px;
	z-index: 6;
}
.Index_Zoek_Panel {
	display: block;
	opacity: 1;
	width: auto;
	height: auto;
	background: none;
	overflow: auto;
	text-align: left;
	padding: 1vw;
	z-index: 7;
}
.Index_resultZoek_div {
	position: absolute;
	display: block;
	opacity: 1;
	max-width: 25vw;
	width: auto;
	max-height: 15vw;
	margin-top: 0.05vw;
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background: white;
	overflow-y: auto;
	text-align: left;
	padding: 0.2vw;
	z-index: 7;
}

.prodW_div {
	position: absolute;
	display: block;
	opacity: 1;
	left: 5vw;
	top: 10vh;
	width: 80vw;
	min-width: 50vw;
	max-width: 80vw;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow-y: auto;
	text-align: left;
	padding: 0vh;
	margin: 0vw;
	z-index: 2;
}



.Blijst_Boodsch_div {
	position: relative;
	display: block;
	opacity: 1;
	left: 0vw;
	top: 10vh;
	width: 99vw;
	min-width: 80vw;
	max-width: 99vw;
	height: auto;
	min-height: 24vh;
	max-height: 64vh;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow-y: auto;
	text-align: left;
	padding: 0vh;
	z-index: 2;
}

.Blijst_Gekocht_div {
	position: relative;
	margin-top: 0.5vh;
	display: block;
	opacity: 1;
	top: 10vh;
	left: 0vw;
	width: 99vw;
	min-width: 80vw;
	max-width: 99vw;
	max-height:28vh;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow-x: auto;
	text-align: left;
	padding: 0vh;
	padding-top: 0vh;
	z-index: 2;
}


.Voorraad_div {
	position: absolute;
	display: block;
	opacity: 1;
	right: 1vw;
	top: 3vw;
	width: 60%;
	min-width: 60%;
	max-width: 65%;
	height: 80%;
	max-height: 80%;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 2vw;
	z-index: 2;
}

.class_Div_kalender {
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: center;
	padding: 1vw;
	z-index: 6;
}

.class_Div_slider {
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: center;
	padding: 1vw;
	z-index: 6;
}

.class_Div_productinfo {
	position: absolute;
	display: none;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-1);
	max-width: 30vw;
	min-width: 20vw;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 0.5vw;
	white-space: normal nowrap break-spaces;
	z-index: 6;
}
.class_Div_productinfoTekst {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	white-space: normal nowrap break-spaces;
	padding: 0vw;
}

.class_Div_FileUpload {
	position: fixed;
	left: 8vw;
	bottom: 0vw;
	display: block;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-1);
	max-width: 25vw;
	min-width: 10vw;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 0.5vw;
	white-space: normal nowrap break-spaces;
	z-index: 6;
}

.center_Div {
	position: fixed;
	display: none;
	top: 10vw;
	left: 40vw;
	width: 20vw;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: center;
	padding: 2vw;
	z-index: 4;
}

.class_div_nestedAantal {
	position: absolute;
	opacity: 0.8;
	left: 0px;
	top: 0px;
	font-size: var(--font-grootte-4);
	width: 1.4vw;
	height: 0.6vw;
	background: white;
	border: solid black var(--rand-dikte1);
	text-align: center;
	color: black;
	padding: 0.5vw;
	overflow: clip;
	cursor: default;
	z-index: 5;
}

.class_div_nestedVerplaats {
	position: absolute;
	display: none;
	opacity: 0.8;
	right: 0px;
	top: 0px;
	cursor: pointer;
	z-index: 5;
}

.class_div_nestedVerwijder {
	font-size: var(--font-grootte-4);
	width: 3vw;
	height: 3vw;
	background: white;
	border: solid black var(--rand-dikte1);
	text-align: center;
	color: black;
	padding: 0.5vw;
	overflow: clip;
	cursor: pointer;
	z-index: 5;
}

.class_div_nestedWijzigMin {
	position: absolute;
	display: none;
	opacity: 0.9;
	left: 0px;
	top: 1.7vw;
	cursor: pointer;
	z-index: 5;
}
.class_knop_nestedWijzigMin {
	font-size: var(--font-grootte-4);
	width:auto;
	height:auto;
	background: Black;
	border: solid white var(--rand-dikte1);
	text-align: center;
	color: White;
	padding: 0.4vw;
	cursor: pointer;
}
.class_div_nestedWijzigPlus {
	position: absolute;
	display: none;
	opacity: 0.9;
	left: 2.45vw;
	top: 0vw;
	cursor: pointer;
	z-index: 5;
}

.class_knop_nestedWijzigPlus {
	font-size: var(--font-grootte-4);
	width: auto;
	height: auto;
	background: Green;
	border: solid black var(--rand-dikte1);
	text-align: center;
	color: White;
	padding: 0.4vw;
	cursor: pointer;
}

.class_div_nestedProcent {
	position: absolute;
	opacity: 0.8;
	right: 0px;
	bottom: 0px;
	width: auto;
	cursor: default;
	font-size: var(--font-grootte-4);
	border: solid black var(--rand-dikte1);
	color: white;
	background: green;
	padding: 0.4vw;
	text-align: right;
	z-index: 5;
}
.class_div_nestedWinkel {
	position: absolute;
	opacity: 0.8;
	right: 0px;
	bottom: 0px;
	width: auto;
	cursor: default;
	font-size: var(--font-grootte-4);
	background: none;
	padding: 0.4vw;
	text-align: right;
	z-index: 5;
}

.class_div_nestedHoeveel {
	display: inline-block;
	white-space: nowrap;
	position: absolute;
	opacity: 1;
	left: 0px;
	bottom: 0px;
	font-size: var(--font-grootte-4);
	color: black;
	background: white;
	border: solid var(--rand-dikte1) black;
	padding: 0.1vw;
	cursor: default;
	z-index: 5;
}

.class_Index_div_nestedHoeveel {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-4);
	position: absolute;
	opacity: 1;
	left: 0px;
	bottom: 0px;
	color: black;
	background: transparent;
	padding: 0px;
	cursor: default;
	z-index: 5;
}

.class_Index_div_nestedInfo {
	
	opacity: 1;
	font-size: var(--font-grootte-5);
	color: black;
	background: white;
	padding: 0px;
	cursor: default;
}

.class_blijst_div_nestedHoeveel {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-4);
	position: absolute;
	opacity: 1;
	left: 0px;
	bottom: 0px;
	color: black;
	background: white;
	border: 1px solid black;
	margin: 0.1vw;
	padding: 0px;
	cursor: default;
	z-index: 5;
}

.class_div_nestedKleurbalk {
	position: absolute;
	opacity: 1;
	left: 0px;
	top: 4vw;
	height: 1vw;
	overflow: clip;
	cursor: default;
	overflow: hidden ;
	background: linear-gradient(to right, rgba(57,206,41,1) 0%,rgba(57,206,41,1) 54%,rgba(57,206,41,1) 54%,rgba(232,135,18,1) 67%,rgba(232,135,18,1) 67%,rgba(232,135,18,1) 77%,rgba(255,0,0,1) 100%);
	z-index: 5;
}

.class_div_nestedKleurbalkImage {
	position: absolute;
	opacity: 1;
	border: solid var(--rand-dikte1) black;
	left: 0px;
	top: 2vw;
	cursor: pointer;
	overflow: hidden;
	background-color: white;
	z-index: 7;
}
.class_div_nestedKleurbalkImageProcent {
	position: absolute;
	opacity: 1;
	color: black;
	font-size: var(--font-grootte-4);
	border: solid var(--rand-dikte1) black;
	left: 2.5vw;
	top: 0.6vw;
	max-width: 4vw;
	cursor: pointer;
	overflow: hidden;
	padding: 0.2vw;
	background-color: white;
	z-index: 8;
}

/*Index.aspx*/
.Index_class_div_nestedKleurbalk {
	position: absolute;
	opacity: 1;
	left: 0px;
	top: 4vw;
	height: 1vw;
	overflow: clip;
	cursor: default;
	overflow: hidden;
	background: linear-gradient(to right, rgba(57,206,41,1) 0%,rgba(57,206,41,1) 54%,rgba(57,206,41,1) 54%,rgba(232,135,18,1) 67%,rgba(232,135,18,1) 67%,rgba(232,135,18,1) 77%,rgba(255,0,0,1) 100%);
	z-index: 5;
}

.Index_class_div_nestedKleurbalkImage {
	position: absolute;
	opacity: 1;
	border: solid var(--rand-dikte1) black;
	left: 0px;
	top: 2vw;
	cursor: pointer;
	overflow: hidden;
	background-color: white;
	z-index: 7;
}

.Index_class_div_nestedKleurbalkImageProcent {
	position: absolute;
	opacity: 1;
	color: black;
	font-size: var(--font-grootte-4);
	border: solid var(--rand-dikte1) black;
	left: 2.5vw;
	top: 0.6vw;
	max-width: 4vw;
	cursor: pointer;
	overflow: hidden;
	padding: 0.2vw;
	background-color: white;
	z-index: 8;
}

.class_verplaats {
	position: fixed;
	top: 10vw;
	left: 30%;
	width: 40%;
	height: auto;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 2vw;
	z-index: 3;
}

.voegtoe {
	position: absolute;
	top: 3vw;
	left: 15vw;
	width: 70vw;
	height: 80%;
	background: white;
	border: solid black var(--rand-dikte1);
	overflow: auto;
	text-align: left;
	padding: 2vw;
	z-index: 3;
}

.drag {
	position: fixed;
	/*cursor: grab;*/
	z-index: 10;
}
/* EINDE PANELs en divs*/

/* DDL class*/
.DDL_class1 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	text-align: left;
	width: auto;
	min-width: 6vw;
	height: 4vh;
	display: inline;
	margin: 0.2vw;
	padding: 0.2vw;
}

	.DDL_class1:hover {
		cursor: pointer;
	}

.DDL_class2 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	text-align: left;
	width: auto;
	max-width: 6vw;
	display: inline;
	margin: 0.1vw;
	padding: 0.1vw;
}

	.DDL_class2:hover {
		cursor: pointer;
	}

.DDL_class3 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	font-weight: normal;
	color: var(--font-kleur1);
	background-color: var(--achter-kleur6);
	text-align: left;
	width: auto;
	display: inline;
	margin: 0vw;
	padding: 0vw;
}

.DDL_class4 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	background-color: var(--achter-kleur6);
	border: white 0px solid;
	text-align: left;
	width: auto;
	display: inline;
	margin: 0vw;
	padding: 0vw;
}

/* EINDE DDL class*/

/* Knoppen class*/
.knop1 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	padding: 0.2vw;
	height: 4vh;
	margin: 0.2vw;
	margin-right: 0.4vw;
	opacity: 1;
}

	.knop1:hover {
		cursor: pointer;
		box-shadow: var(--rand-dikte1) var(--rand-dikte1) var(--rand-dikte1) #000000;
		opacity: 0.9;
	}

.knop1b {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	height: 4vh;
	padding: 0.2vw;
	margin: 0.1vw;
	opacity: 1;
}
.knop1c {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-3);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	padding: 0.2vw;
	margin: 0vw;
	opacity: 1;
}

/* EINDE Knoppen class*/




/* TABELLEN class*/

.class_HtmlTabelsortWinkels {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	padding: 0.1vw;
	margin-right: 0.5vw;
	width: 12vw;
	opacity: 1;
}
.class_HtmlTabelsortCategorie {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	padding: 0.1vw;
	margin-right: 0.5vw;
	width: 18vw;
	opacity: 1;
}


.opberg_tabel0 {
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	background-color: transparent;
	vertical-align: middle;
	text-align: center;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	color: var(--font-kleur1);
	padding: 0vw;
	margin: 0vw;
	width: 100%;
	/*margin-left: 22%;
    margin-right: 22%;*/
}
	.opberg_tabel0 tr {
		border-bottom: solid 0.03vw var(--achter-kleur5);
	}



.tabel0 {
	padding: 0px;
	border-spacing: 0px;
	background-color: transparent;
	vertical-align: middle;
	text-align: center;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	color: var(--font-kleur1);
	padding: 0vw;
	margin: 0vw;
	width: 100%;
	/*margin-left: 22%;
    margin-right: 22%;*/
}

.tabelProduct0 {
	table-layout: fixed;
	background-color: var(--achter-kleur2);
	vertical-align: top;
	text-align: center;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	color: var(--font-kleur1);
	padding: 0vw;
	margin: 0vw;
	width: 100%;
	margin-left: 3vw;
	/*margin-left: 22%;
    margin-right: 22%;*/
}
.header_tabel0 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	color: white;
	background-color: var(--achter-kleur2);
	text-align: center;
	vertical-align: middle;
	height: 2vw;
	padding: 0px;
	margin: 0px;
	word-wrap: break-word;
}

.tabel1 {
	table-layout: fixed;
	background: var(--achter-kleur2);
	vertical-align: middle;
	text-align: center;
	border: 0px;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	color: var(--font-kleur1);
	padding: 0px;
	margin: 0px;
	width: 95%;
	margin-left: 0%;
	/*margin-left: 22%;
    margin-right: 22%;*/
}
.td_links {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-1);
	color: white;
	background-color: var(--achter-kleur2);
	width: 20%;
	text-align: right;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
	word-wrap: break-word;
}
.td_rechts {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	
	color: var(--font-kleur1);
	background-color: white;
	width: 80%;
	text-align: left;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
	
	word-wrap: break-word;
}

.tabel_import_header {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: var(--font-kleur1);
	background: var(--achter-kleur6);
	text-align: center;
	vertical-align: middle;
	border-spacing:0px;
	width: auto;
	margin: 0vw;
}

.tabel_locatie_header {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	background: var(--achter-kleur4);
	text-align: center;
	vertical-align: middle;
	padding: 0.5vw;
	margin: 0px;
	white-space: nowrap;
}


.tabel_import_cell2 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	color: var(--font-kleur1);
	background-color: white;
	width: auto;
	text-align: center;
	vertical-align: middle;
	padding: 0px;
	margin: 0px;
	white-space: normal;
	word-wrap: break-word;
}

.tabel_import_cell3 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte2);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	color: var(--font-kleur1);
	background-color: white;
	width: 10%;
	max-width: 15%;
	text-align: center;
	vertical-align: middle;
	padding: 0px;
	margin: 0px;
	white-space: normal;
	word-wrap: break-word;
}


.tdDot {
	border: var(--rand-dikte1) dotted grey;
	margin: 2vw;
	padding: 2vw;
}

	.tabel0Rijheader {
	text-align: center;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	font-weight:bold;
}


/* EINDE TABELLEN class*/


/* images class*/

.div_anim_kar {
	display: block;
	position: absolute;
	opacity: 1;
	bottom: 5vw;
	left: -36vw;
	width: auto;
	height: auto;
	background-color: transparent;
	transition: left 6s, opacity 1s, bottom 1s;
	transition-timing-function: ease-in;
	z-index: 2;
}

.div_anim_koelkast {
	display: block;
	position: absolute;
	opacity: 1;
	bottom: 100vh;
	right: 5%;
	width: auto;
	height: auto;
	background-color: transparent;
	transition: bottom 2s, opacity 2s;
	transition-timing-function: ease-out;
	z-index: 1;
}


.coverStijl {
	width: 100%;
	height: 100%;
	max-width: 10vw;
	max-height: 10vw;
	min-width: 10vw;
	min-height: 10vw;
	object-fit: cover;
}
	.coverStijl:hover {
		filter: brightness(120%);
	}
	.coverStijl:active {
		
	}


.IndexcoverStijl {
	width: 7vw;
	max-width: 8vw;
	max-height: 8vw;
	min-width: 6vw;
	min-height: 6vw;
	object-fit: cover;
	overflow:hidden;
	padding: 0.2vw;
}

	.IndexcoverStijl:hover {
		filter: brightness(120%);
		cursor:default;
	}

.BlijstcoverStijl {
	width: 10vw;
	max-width: 10vw;
	max-height: 10vw;
	min-width: 8vw;
	min-height: 8vw;
	object-fit: cover;
	overflow: hidden;
	padding: 0.2vw;
}

	.BlijstcoverStijl:hover {
		filter: brightness(120%);
		cursor: default;
	}

.BlijstButtoncoverStijl {
	width: auto;
	max-width: 14vw;
	max-height: 14vw;
	min-width: 8vw;
	min-height: 8vw;
	font-family: var(--font-soort1);
	font-size: x-large;
	font-weight: bolder;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	object-fit: cover;
	overflow: hidden;
	padding: 0.2vw;
	white-space: normal;
	word-wrap: anywhere;
}

	.BlijstButtoncoverStijl:hover {
		filter: brightness(120%);
		cursor: default;
	}


.BlijstButtoncoverStijlKlein {
	display: block;
	width:auto;
	height:auto;
	max-width: 8vw;
	max-height: 8vw;
	font-family: var(--font-soort1);
	font-size: small;
	font-weight: bold;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	object-fit: cover;
	overflow: hidden;
	padding: 1vw;
	text-align:center;
	white-space: normal;
	word-wrap: anywhere;
}

	.BlijstButtoncoverStijlKlein:hover {
		filter: brightness(120%);
		cursor: default;
	}


.GekochtcoverStijl {
	width: 10vw;
	max-width: 10vw;
	max-height: 10vw;
	min-width: 6vw;
	min-height: 6vw;
	object-fit: cover;
	overflow: hidden;
	padding: 1vw;
}

	.GekochtcoverStijl:hover {
		filter: brightness(120%);
		cursor: default;
	}

.IndexcoverZoekStijl {
	width: 10vw;
	max-width: 10vw;
	max-height: 10vw;
	min-width: 8vw;
	min-height: 8vw;
	object-fit: cover;
}

	.IndexcoverZoekStijl:hover {
		filter: brightness(120%);
		cursor: default;
	}

.imageBStyle{
}
	.imageBStyle:hover {
		filter: brightness(120%);
	}

/* EINDE  images class*/

/*TEXTBOX CLASS*/

.class_TextBox1 {
	font-weight: normal;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	text-align: left;
	width: auto;
	margin: 0.2vw;
	padding: 0.2vw;
}
.class_TextBoxZoek {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	text-align: left;
	width: 8vw;
	height: 4vh;
	min-width: 6vw;
	display: inline;
	margin-top: 0.2vw;
	padding: 0.2vw;
}
.class_DivZoek {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-3);
	font-weight: normal;
	color: var(--font-kleur1);
	border: var(--rand-dikte1) solid var(--achter-kleur2);
	background-color: var(--achter-kleur6);
	text-align: center;
	width: auto;
	margin: 0.2vw;
	padding: 0.2vw;
	white-space: normal;
	word-wrap: anywhere;
}


/*EINDE TEXTBOX CLASS */





.knopKlein {
	padding: 0.3vw;
}
	.knopKlein:hover {
		cursor: pointer;
		filter: brightness(120%);
	}
	

.knop2b {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-1);
	font-weight: normal;
	color: var(--achter-kleur1);
	border: 1px solid var(--rand-kleur2);
	background-color: black;
	background: var(--achter-grad_knop);
	padding: 4px;
	margin: 4px;
	opacity: 0.9;
}

	.knop2b:hover {
		cursor: pointer;
		box-shadow: 1px 1px 2px #000000;
		opacity: 0.85;
	}



.wachtdiv {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	background-color: #1c273a;
	text-align: center;
	opacity: 0.9;
	z-index: 100;
}

.wachtdiv2Table {
	border: 0;
	width: 100%;
	height: 100%;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	vertical-align: middle;
	text-align: center;
}


	
.glow {
	-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 240, 1);
	-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 240, 1);
	box-shadow: 0px 0px 3px 1px rgba(255, 255, 240, 1);
}
.glowTekst {
	-webkit-box-shadow: 0px 0px 54px 0px rgba(255, 255, 240, 0.9);
	-moz-box-shadow: 0px 0px 54px 0px rgba(255, 255, 240, 0.9);
	box-shadow: 0px 0px 54px 0px rgba(255, 255, 240, 0.9);
}



/*--------------------------*/
.posi {
	color: green;
	font-weight:bold;
}
.nega {
	color: red;
	font-weight: bold;
}
.neutr {
	color: darkorange;
	font-weight: bold;
}


.rondK1 {
	border-radius: 0.2vw;
}

.logout {
	float: right;
	border-radius: 0.6vw;
	background-color: red;
	width: 1vw;
	height: 1vw;
	text-align: center;
	vertical-align: middle;
	border: 2px solid var(--rand-kleur2);
	opacity: 0.9;
}
	.logout:hover {
		opacity: 1;
	}
.al_CTop {
	text-align: center;
	vertical-align: top;
}
.al_CMiddle {
	text-align: center;
	vertical-align: middle;
}

/* class maakt element draggable*/
.drag {
	position:fixed;
	cursor: grab;
	z-index: 100;
}

.schaduw {
	-moz-box-shadow: 1px 1px 3px #000000;
	-webkit-box-shadow: 1px 1px 3px #000000;
	box-shadow: 2px 2px 3px #000000;
}


.floatL {
	float: left;
	vertical-align: top;
}

.floatR {
	float: right;
	vertical-align: top;
}

.vet {
	font-weight: bold;
}
.ital {
	font-style: italic;
}













.tabel2 {
	border: 0px;
	background: white;
	vertical-align: middle;
	border: 1px solid var(--rand-kleur1);
	text-align: center;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	padding: 0vw;
	margin: 0px;
	width: 50%;
	height: 20%;
	left: 25%;
	background-image: url('../images/geld3.jpg');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 30%;
	/*margin-right: 22%;*/
}


.tabel1 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	background: white;
	color: var(--font-kleur1);
	border: 1px solid black;
	border-spacing: 0px;
	vertical-align: middle;
	text-align: center;
	padding: 0px;
	margin: 0px;
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}
.tabel1_header_gradient {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	font-weight: normal;
	color: var(--font-kleur2);
	width: 100%;
	padding: 4px;
	margin: 0px;
	background: var(--achter-kleur2);
	background: var(--achter-grad_header);
}
.tabel1_tekstcel {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	vertical-align: top;
	text-align: left;
	padding: 0.5vw;
	margin: 8px 2px 2px 0px;
}




.tabel_import_header_button {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur2);
	background: var(--achter-kleur2);
	background: var(--achter-grad_header);
	text-align: center;
	width: 100px;
	padding: 2px;
	margin: 1px;
	border-width: 0px;
	border-radius: 0.5vw;
	border-spacing: 0px 1px 5px 1px;
}
.tabel_import_label_g {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: lightgreen;
	padding: 0px;
	margin: 0px;
}
.tabel_import_cell_w {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	background-color: var(--achter-kleur3);
	text-align: center;
	vertical-align: middle;
	padding: 2px;
	margin: 2px;
	border: 1px solid black;
}
.tabel_import_cell {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: var(--font-kleur1);
	background-color: white;
	text-align: center;
	vertical-align: middle;
	padding: 2px;
	margin: 2px;
	border: 1px solid black;
	/*white-space         : nowrap;*/
}


.tabel_import_cell4 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: var(--font-kleur1);
	background-color: white;
	text-align: left;
	vertical-align: top;
	padding: 15px;
	margin: 10px;
	border: 1px solid black;
}




.knop2c {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-1);
	font-weight: normal;
	color: var(--font-kleur2);
	border: 2px solid var(--font-kleur2);
	background: var(--achter-kleur2);
	background: var(--achter-grad_header);
	padding: 2px;
	margin: 5px;
}

.knop2c:hover {
	cursor: pointer;
	box-shadow: 1px 1px 2px #000000;
	opacity: 0.9;
}



.txtbox3 {
	font-family: var(--font-soort1);
	font-size: var(--font-grootte-2);
	color: var(--font-kleur1);
	background-color: var(--achter-kleur4);
	text-align: left;
	padding: 0px;
	margin: 0px;
	border: 1px solid black;
}
	.txtbox3:focus {
		border: 1px dotted var(--achter-kleur2);
	}

.img2 {
	border: 0;
	float: left;
	vertical-align: top;
	margin: 2vw;
	width: 90%;
	min-width: 2vw;
	max-width: 4vw;
}

.imgKlein {
	border: 0;
	float: left;
	vertical-align: top;
	margin: 1vw;
	width: 90%;
	min-width: 1vw;
	max-width: 2vw;
}


.DivTabelScroll_import1 {
    overflow: auto;
    width: 90vw;
    height: 50vh;
    max-width: 90vw;
    text-align: left;
    min-height: 40vh;
    max-height: 60vh;
    margin-left: 5vw;
    display: none;
}

.DivTabelScroll_import2 {
	overflow: auto;
	/*width: 850px;*/
	height: 300px;
	max-width: 80vw;
	max-height: 40vh;
	text-align: left;
	display: inline-block;
}


.InfoDiv_stijl1 {
	position: absolute;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur1);
	display: none;
	border: 1px solid var(--achter-kleur2);
	background-color: var(--achter-kleur3);
	text-align: left;
	max-width: 20%;
	margin: 3px;
	padding: 10px;
	opacity: 0.9;
	z-index: 110;
}


.InfoLabel_stijl1 {
	position: fixed;
	visibility: hidden;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur2);
	width: auto;
	max-width: 15%;
	border: 1px solid;
	top: 50%;
	left: 85%;
	text-align: left;
	opacity: 0.9;
	z-index: 10;
	padding: 1px;
	border-radius: 0vw 1vw 1vw 0vw;
}

.css_Panel_subcat {
	position: fixed;
	display: none;
	visibility: visible;
	font-family: var(--font-soort1);
	font-size: var(--font-grootte1);
	color: var(--font-kleur2);
	background: var(--achter-kleur2);
	background: var(--achter-grad_header);
	width: auto;
	max-width: 45%;
	border: 1px solid;
	border-color: #48E5C2 #48E5C2 #48E5C2 transparent;
	top: 25%;
	left: 35%;
	text-align: left;
	opacity: 0.9;
	z-index: 10;
	padding: 2vw;
	border-radius: 1vw;
}

.icon1 {
	width: 20px;
	border: 0;
	margin: 0px;
	padding: 0px;
	float: left;
	vertical-align: top;
}


.InfoHref {
	cursor: help;
	display: inline;
}


@media screen and (max-device-width: 500px), (orientation:portrait), (orientation:landscape) and (max-device-width: 800px) {



	/* , geeft OR aan .... Mobiel  (max-width: 500px) and   ||      (orientation: portrait), (max-width: 500px) */
	/* , (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1000px), (-webkit-min-device-pixel-ratio: 3) and (max-device-width: 1500px) */
	.divLogin {
		position: absolute;
		border: var(--rand-dikte1) solid white;
		background: var(--achter-kleur1);
		vertical-align: middle;
		text-align: center;
		top: 5%;
		height: auto;
		width: 80%;
		margin-left: 10%;
		opacity: 1;
		z-index: 1;
	}

	.tableLogin {
		background: var(--achter-kleur1);
		vertical-align: middle;
		text-align: right;
		font-family: var(--font-soort1);
		font-size: var(--mob-font-grootte1);
		color: white;
		padding: 2vw;
		margin: 0vw;
		height: auto;
		width: auto;
	}

	.class_TextBox1 {
		font-weight: normal;
		font-family: var(--font-soort1);
		font-size: var(--mob-font-grootte1);
		color: var(--font-kleur1);
		border: var(--mob-rand-dikte1) solid var(--achter-kleur2);
		background-color: var(--achter-kleur6);
		text-align: left;
		width: 80%;
		margin: 0.8vw;
		padding: 0.8vw;
	}

	.loginMessage {
		font-family: var(--font-soort1);
		font-size: var(--mob-font-grootte-2);
		color: white;
		font-style: italic;
	}

	.rond {
		border-radius: 1.6vw;
	}

	.glowTekst {
		-webkit-box-shadow: 0px 0px 10vw 0px rgba(255, 255, 240, 0.9);
		-moz-box-shadow: 0px 0px 10vw 0px rgba(255, 255, 240, 0.9);
		box-shadow: 0px 0px 10vw 0px rgba(255, 255, 240, 0.9);
	}

	.knop1 {
		font-family: var(--font-soort1);
		font-size: var(--mob-font-grootte-2);
		font-weight: normal;
		color: var(--font-kleur1);
		border: var(--mob-rand-dikte1) solid var(--achter-kleur2);
		background-color: var(--achter-kleur6);
		height:5vh;
		padding: 1.2vw;
		margin: 1.2vw;
		opacity: 1;
	}

		.knop1:hover {
			cursor: pointer;
			box-shadow: var(--mob-rand-dikte1) var(--mob-rand-dikte1) var(--mob-rand-dikte1) #000000;
			opacity: 0.9;
		}


	.div_anim_kar {
		display: block;
		position: absolute;
		opacity: 1;
		bottom: 5vw;
		left: -36vw;
		width: auto;
		height: auto;
		background-color: transparent;
		transition: left 6s, opacity 2s, bottom 1s;
		transition-timing-function: ease-in;
		z-index: 2;
	}

	.div_anim_koelkast {
		display: block;
		position: absolute;
		opacity: 1;
		bottom: 100vh;
		right: 5%;
		width: auto;
		height: auto;
		background-color: transparent;
		transition: bottom 2s, opacity 2s;
		transition-timing-function: ease-out;
		z-index: 1;
	}
}

