* {
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none;
}

/* ####################################### */
/* HTNL/BODY, De hoofdsettings van de site */
/* ####################################### */
html {
	height: 100%;
	min-height:100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
	touch-action: manipulation;
}

body {
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll;
	min-width: 1000px;
	font-family: arial, verdana, sans-serif;
	color: var(--colorDarkGray);
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	position: relative;
	/*
	height: 100%;
	min-height: 100%;
	*/
	height: 				unset !important;
	min-height: 			100dvh;
	display: 				grid;
	grid-template-rows: 	max-content auto max-content;
	grid-template-areas: 	"global_header"
							"global_body"
							"global_footer";
}

button {
	border-style: none;
	background-color: transparent;
	font-size: inherit;
}

a {
	text-decoration: none;
	color: var(--colorBlack);
}

img {
	border: 0px;
}

label{
	cursor: pointer;
}

input[type=text], input[type=password], input[type=submit], input[type=button], input[type=email]{
	-webkit-appearance: none;
	border-radius: 0;
	padding: 2px;
	border: 1px solid var(--colorMediumGray);
	background-color: var(--colorWhite);
	color: var(--colorBlack);
}

select {
	border-radius: 	0;
	border: 		1px solid var(--colorMediumGray);
	box-sizing: 	border-box;
	background:		var(--colorWhite);
	color: 			var(--colorBlack);
}
option {
	color: 			var(--colorBlack);

}

.linkwhite{
	cursor: 		pointer;
}

#toTopLink{
	position: 		  	fixed;
	width: 			    100%;
	height: 		    50px;
	background: 	  	var(--colorGreen);
	color: 			    var(--colorWhite);
	top: 			    -50px;
	z-index: 		    599;
	transition: 	  	top 0.2s;
	text-align: 	  	center;
	font-size: 		  	20px;
  	line-height:    	50px;
	opacity: 		    0.9;
  	pointer-events: 	none;
  	font-weight:    	500;
}
  #toTopLink:hover{
    opacity: 		    1;
    cursor:         	pointer;
  }
#toTopLink p::after{
  	display:        	inline-block;
  	content:        	"\276F";
  	transform:      	rotate(270deg);
  	color: 			    var(--colorWhite);
  	line-height:    	50px;
  	width:          	50px;
  	height:         	50px;
}
@media screen and (max-width: 900px) {
	body.scrollUp #toTopLink{
		top: 			0px;
    pointer-events: 	auto;
	}
}

/* ####################################### */
/* 2017 ALGEMENE STYLES					   */
/* ####################################### */
.koptitel{
	display:block;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--colorGreen);
	margin-left: 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
	clear: both;
	line-height: 15px;
}
.koptitel:before {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.koptitel.margintop5{
	margin-top:5px;
}

.lineNoMargin{
	display: block;
	height: 1px;
	width:100%;
	background-color: var(--colorLightGray);
}
	.lineNoMargin.px5l{
		margin-left: 5px;
	}
	.lineNoMargin.px5l:last-child{
		margin-left: 0px;
	}
	.lineNoMargin.bottom10{
		margin-bottom: 10px;
	}
	.lineNoMargin.bottom20{
		margin-bottom: 20px;
	}

.text_green{
	color: var(--colorDarkerGreen);
}

.text_red{
	color: 	var(--colorRed);
}


.notify{
	display: none;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	padding: 15px;
	text-align:center;
	z-index: 400;
	margin: 10px;
}

	.notify .title{
		display: block;
		font-family: 'Roboto', sans-serif;
		font-size: 15px;
		font-weight: 700;
		color: var(--colorGreen);
		text-transform: uppercase;
	}

	.notify .container{
		display: inline-block;
		text-align: right;
		width: unset;
	}

	.notify .notifycontent{
		background-color: var(--colorWhite);
		box-shadow: 3px 3px 25px rgba(0,0,0,0.6);
		padding: 25px;
		border-radius: 10px;
		position: relative;
		text-align: center;
		overflow: hidden;
		min-width: 300px;
		min-height: 70px;
		line-height: 20px;
	}
		.notify .notifycontent img{
			max-height: 75vh;
			max-width: 75vw;
		}

	.notify .sluiten{
		position: relative;
		display: inline-block;
		font-family: 'Roboto', sans-serif;
		font-size: 17px;
		font-weight: 700;
		margin-right: 10px;
		cursor: pointer;
	    top: 35px;
		right: 5px;
	    color: var(--colorDarkGray);
	    z-index: 502;
		border-style: none;
		background-color: transparent;
	}
		.notify .sluiten:hover, .notify .sluiten:focus, .notify .sluiten:focus-visible{
			color: var(--colorBlue);
			text-decoration: underline;
		}
		.notify .sluiten .cross{
			display: inline-block;
			font-size: 20px;
			position: relative;
			top: -4px;
		}
		.notify .sluiten .text{
			display: inline-block;
			margin-left: 10px;
			position: relative;
			top: -5px;
		}


	/* ####################################### */
	/* 2017 ALGEMENE STYLES	- INVOERVELDEN	   */
	/* ####################################### */

	/* 28-08-2026
	.input_row{
		display: block;
		margin-left: 10px;
		margin-top: 5px;
	}
		.input_row .input_left{
			display: inline-block;
			width: 200px;
			vertical-align:top;
		}
		.input_row .input_right{
			display: inline-block;
			width: 500px;
			vertical-align:top;
		}
	*/

	/* 28-08-2026
	.input_opslaan{
		display: inline-block;
		background-color: var(--colorBlue);
		margin-left: 10px;
		padding: 10px;
		font-family: "Roboto", sans-serif;
		font-size: 13px;
		font-weight: 500;
		color: var(--colorWhite);
		cursor: pointer;
	}
	*/




	/* ####################################### */
	/* 2017 ALGEMENE STYLES	- USP	   */
	/* ####################################### */
	.uspWrap{
	    position: absolute;
	    top: 10px;
	    left: 0;
		z-index: 10;
	}

	.usp{
		margin-left: 5px;
		display: inline-block;
		height: 15px;
		font-family: 'Roboto', sans-serif;
		font-size: 10px;
		/*font-style: italic;*/
		font-weight: 500;
		line-height: 15px;
		text-transform: uppercase;
		background-color: var(--colorRed);
		color: var(--colorWhite);
		padding-left: 4px;
		float: left;
		clear: left;
		margin-bottom:4px;
		white-space: nowrap;
	}
	.usp:after{
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		background-color: transparent;
		border-right: 15px solid transparent;
		border-top: 15px solid var(--colorRed);
		position: absolute;
	}
	.usp.large{
		margin-left: 0px;
		height: 20px;
		font-size: 12px;
		line-height: 20px;
	}
	.usp.large:after{
		border-right: 20px solid transparent;
		border-top: 20px solid var(--colorRed);
	}

	.usp_tekst > a{
		text-decoration:underline;
	}


/* ############################################## */
/* 2017 / 2018 ALGEMENE STYLES - BLOCKSTRUCTURE	  */
/* ############################################## */
.blockstructure_cell a{
	text-decoration: underline;
}
.blockstructure_cell a:hover{
	color: var(--colorMediumGray);
	cursor: pointer;
}
.blockstructure_row div:nth-of-type(1){
	width: 200px;
	vertical-align: top;
}
.blockstructure_row #seo_text.readonly{
	background-color: var(--colorLightGray);
	color:var(--colorMediumGray);
}
.blockstructure_row #seo_text{
	display: block;
	width: 100%;
	height: 100px;
	border: 1px solid var(--colorGray);
}
.blockstructure_table .seo_h1, .seo_h2{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: var(--colorGreen);
	font-weight: 500;
	margin-top: 10px;
	text-transform: uppercase;
}
.seo_h2{
	margin-bottom:5px;
}
.blockstructure_table .seo_text{
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
	text-align: justify;
}
.blockstructure_table .seo_text a{
	color: var(--colorBlue);
}




/* ####################################### */
/* IMG popup 				   */
/* ####################################### */
.showimg{
	display: none;
	position: absolute;
	top: 150px;
	padding: 15px;
	width: 1000px;
	min-height: 100px;
	max-height: 600px;
	text-align:center;
	z-index: 501;
}
	.showimg .container{
		display: inline-block;
		text-align: right;
	}
	.showimg .container .imgpreload{
		display: none;
		width: 0px;
		height: 0px;
		overflow: hidden;
	}
		.showimg .container .imgpreload img{
			display: none;
			max-height: 600px;
		}
	.showimg .sluiten{
		position: relative;
		font-family: 'Roboto', sans-serif;
		font-size: 17px;
		font-weight: 700;
		margin-right: 10px;
		cursor: pointer;
	    top: 30px;
	    color: var(--colorDarkGray);
	    z-index: 600;
	}
		.showimg .sluiten .cross{
			display: inline-block;
			font-size: 20px;
			position: relative;
			top: -4px;
		}
		.showimg .sluiten .text{
			display: inline-block;
			margin-left: 10px;
			position: relative;
			top: -5px;
		}

	.showimg .showimgcontent{
		background-color: var(--colorWhite);
		box-shadow: 3px 3px 25px rgba(0,0,0,0.6);
		border-radius: 10px;
		position: relative;
		text-align: center;
		padding: 50px;
		overflow: hidden;
		-webkit-transition: width 0.2s, height 0.2s;
		-moz-transition: width 0.2s, height 0.2s;
		transition: width 0.2s, height 0.2s;
	}
	.showimg .showimgcontent_img{
		display:inline-block;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		max-width: 100%;
		max-height: 100%;
		text-align:center;
		vertical-align: middle;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
		.showimg .showimgcontent_img img{
			max-height: 600px;
			vertical-align: middle;
		}

		/*
		.showimg .showimgcontent .img{
			position: absolute;
			left: 50%;
			padding-left: 20px;
			padding-right: 20px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		*/

		.showimg .showimgcontent .nav{
			display: inline-block;
			position: absolute;
			top: 0px;
			width: 60px;
			height: 100%;
			vertical-align:middle;
			text-align:center;
			background-color: rgba(200,200,200,0.2);
			border-radius: 10px 0px 0px 10px;
			z-index: 502;
			-webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			transition: all 0.5s;
			cursor: pointer;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
			.showimg .showimgcontent .nav img{
				vertical-align: middle;
				position: absolute;
				top:0;
				bottom:0;
				left: 22px;
				margin: auto;
				opacity: 0.5;
				-webkit-transition: all 0.5s;
				-moz-transition: all 0.5s;
				transition: all 0.5s;
			}
			.showimg .showimgcontent .nav.left{
				left: 0px;
				border-radius: 10px 0px 0px 10px;
			}
			.showimg .showimgcontent .nav.right{
				right: 0px;
				border-radius:  0px 10px 10px 0px;
			}

		.showimg .showimgcontent .nav:hover{
			background-color: rgba(200,200,200,0.8);
		}
		.showimg .showimgcontent .nav:hover img{
			opacity: 1;
		}


/* ####################################### */
/* 2017 MAIN							   */
/* ####################################### */
.main_container{
	position: 				relative;
	grid-area: 				global_body;
	max-width:				100dvw;

}

main{
	display: block;
	margin-left: auto;
	margin-right: auto;
	min-height: calc(100% - 150px);

	background-color: var(--colorWhite);
	padding-bottom:10px;
	padding-left: 10px;
	padding-right: 10px;
}

	main .overlay{
		display: none;
		position: fixed;
		left: 0px;
		top: 0px;
		min-width: 100%;
		min-height: 120%;
		background-color: rgba(0,0,0,0.0);
		z-index: 400;
		cursor: pointer;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}


/* ####################################### */
/* FRONTPAGE						   */
/* ####################################### */
.frontpage{
	margin-top: 10px;
}



/* ####################################### */
/* TEKSTEN 2016						   */
/* ####################################### */
.teksten{
	display: block;
	margin-top: 15px;
}




/* ############################ */
/* Algemene tabellen            */
/* ############################ */
.table {
	display: table;
}

.table_row {
	display: table-row;
}

.table_row_groen {
	display: table-row;
	background-color: var(--colorGreen);
	height: 30px;
	vertical-align: middle;
}

.table_cell_wittitel {
	display: table-cell;
	height: 30px;
	font-family: arial, verdana, sans-serif;
	color: var(--colorWhite);
	font-size: 13px;
	vertical-align: middle;
	padding-left: 5px;
}

.table_cell {
	display: table-cell;
	font-family: arial, verdana, sans-serif;
	color: var(--colorDarkGray);
	font-size: 12px;
	vertical-align:middle;
}

.wishlist_row_titel {
	display: table-row;
	background-color: var(--colorGreen);
}

.wishlist_input {
	font-size: 14px;
	padding:3px;
	text-align: center;
	background-color: var(--colorWhite);
	border: 1px solid var(--colorGreen);
}

.wishlist_input_small {
	font-size: 13px;
	padding: 1px;
	background-color: var(--colorWhite);
	border: 1px solid var(--colorGreen);
}

.question{
    display: inline-block;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    border: 1px solid var(--colorDarkGray);
    text-align: center;
    box-sizing: border-box;
}

.main.question{
	background-color: var(--colorRed);
}

.main.question.add{	
    cursor: pointer;
}

.cf_row{
	display: block;
    width: 80%;
    min-height: 25px;
    padding: 2px 5px;
    box-sizing: border-box;
    background-color: var(--colorMediumGray);
    border: 1px solid var(--colorDarkGray);
    position: relative;
    font-size: 0;
}

/*.cf_row:not(.level0)::before{
	content: '\21B3';
    display: inline-block;
    position: absolute;
    left: -15px;
    top: -4px;
    font-size: 20px;
    font-weight: bold;
    color: var(--colorDarkGray);
}*/

.cf_row.level0{
	background-color:var(--colorLightGray);
}

.cf_row.answer{
	background-color:var(--colorMediumGray);
}
	
	.cf_row .cf_titel, .cf_row .cf_buttons{
		display: inline-block;
	    line-height: 25px;
	    vertical-align: top;
	}

	.cf_row .cf_titel{
		width:85%;
		font-size:14px;
	}

	.cf_row .cf_buttons{
		width:15%;
		text-align: right;
		cursor: pointer;
	}
		.cf_row .cf_buttons>span, .cf_row .cf_buttons>a{
			display: inline-block;
		    width: 18px;
		    height: 18px;
		    text-align: center;
		    background-position: center;
		    vertical-align: middle;
		    background-size: contain;
		    margin: 0 3px;
		}

	.dropzone{
		height: 7px;
		width:80%;
	    border-top: 2px solid var(--colorWhite);
	    border-bottom: 2px solid var(--colorWhite);
	    box-sizing: border-box;
	    background: var(--colorWhite);
	}

    .dropzone.show{
		background: var(--colorGreen);
	}	
	
	#editscreen{
		display: none;
	    position: fixed;
	    top: calc(50% - 75px);
	    left: calc(50% - 150px);
	    width: 350px;
	    min-height: 175px;
	    background-color: var(--colorLightGray);
	    z-index: 1;
	    border: 1px solid var(--colorDarkGray);
	    padding: 20px 5px 5px 5px;
	    box-sizing: border-box;
	}
	#editscreen.shown{
		display: inline-block;
	}

		#editscreen .closeedit{
		    position: absolute;
		    top: 0;
		    left: 0;
		    cursor: pointer;
		    width: 100%;
		    background-color: var(--colorDarkGray);
		    text-align: right;
		    padding-right: 5px;
		    box-sizing: border-box;
		    color: var(--colorLightGray);
		    height: 15px;
		}
			#editscreen .closeedit:hover{
				color:var(--colorWhite);
			}

		#editscreen #edittype{
		    border-radius: 3px;
		    box-sizing: border-box;
		    padding: 3px;
		    margin-left: 5px;
		}
	
		#editscreen .saveedit{
			position: absolute;
			top: calc(100% - 25px);
			right: 5px;
			cursor:pointer;
		}
	
	.editlabel{
	    width: 70px;
    	display: inline-block;
	}

	#cf_inputvalue, #cf_inputtitle{
	    padding: 5px;
	    width: 240px;
	    border-radius: 3px;
	    box-sizing: border-box;
	    margin-left: 5px;
	}

	#linktolist{
		display: none;
		list-style: none;
	    background: var(--colorWhite);
	    width: 100%;
	    margin: 5px 0 25px 1px;
	    max-height: 100px;
	    overflow-y: scroll;
	}
	#linktolist.shown{
		display: inline-block;
	}

		#linktolist .linktoitem{
		    padding: 5px;
		    cursor: pointer;
		}

		#linktolist .linktoitem:hover{
			filter: brightness(110%);
		}

.cf_header{
    color: var(--colorGreen);
    font-size: 26px;
    margin-bottom: 20px;
}
.cf_ul{
	list-style: none;
}
	.cf_li{
		border: 1px solid var(--colorDarkGray);
	    margin: -1px 0;
	    position: relative;
	    cursor: pointer;
	}
	.cf_li:hover{
		background-color: var(--colorGreen);
		color:var(--colorWhite);
	}
	.cf_li:hover a{
		color:var(--colorWhite);
	}

		.cf_link{
			display: block;
			padding:5px;	
		}
			.cf_next{
			    width: 50px;
			    text-align: center;
			    position: absolute;
			    right: 0;
			}


	#list_bottomheader_text{
		display: block;
		margin-top: 25px;
		margin-left: 10px;
	}
		#list_bottomheader_text .title{
			font-family: 'Roboto', sans-serif;
			font-size: 18px;
			font-weight: 500;
			color: var(--colorGreen);
		}

	#list_bottomheader .to-top{
		display: inline-block;
		float: right;
		position: relative;
		top: 20px;
	}
		#list_bottomheader .to-top .img{
			display: inline-block;
			width: 25px;
			vertical-align: middle;
		}
			#list_bottomheader .to-top .img img{
				vertical-align: middle;
			}
		#list_bottomheader .to-top .text{
			display: inline-block;
			vertical-align: middle;
		}


/* ############################ */
/* Email voorkeuren	        */
/* ############################ */

	.emailvoorkeuren_checkbox{
		display:inline-block;
		margin-left: 10px;
		margin-right: 5px;
		line-height: 30px;
	}
	.emailvoorkeuren_checkbox input[type="checkbox"]{
		width: 16px;
		height: 16px;
	}
	.emailvoorkeuren_label{
		display:inline-block;
		line-height: 30px;
		position: relative;
		top: -2px;
	}
	.emailvoorkeuren_title{
		display: block;
		font-weight: bolder;
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.emailvoorkeuren_text{
		margin-left: 10px;
	}
	.emailvoorkeuren_statusupdate{
		line-height: 200%;
		margin-bottom: 50px;
		margin-left: 10px;
	}

	#mailingakkoord_show{
		visibility: hidden;
		line-height: 30px;
	}
		#mailingakkoord_show.show{
			visibility: visible;
		}

	#optin_container{
		display: block;
		margin-top: 40px;
		visibility: hidden;
	}
		#optin_container.show{
			visibility: visible;
		}

.blocksheader{
	min-width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}

#whiteline{
	position: absolute;
	display: block;
    right: 20px;
    height: 128px;
    width: 3px;
    background: var(--colorWhite);
}

.pwLengthNote{
	max-width:400px;
}

.pwLengthNote::after{
    display: inline-block;
    content: "Let op! Je wachtwoord mag maximaal 20 tekens zijn.";
    box-sizing: border-box;
    padding: 5px;
    margin: 5px 0 0 0;
    background-color:var(--colorWhite);
    border: 2px solid var(--colorGreen);
    font-size:12px;
    color: var(--colorDarkGray);
}

#settings input:read-only{
	background-color:var(--colorLightGray);
}

#header_melding{
	display: block;
	height: 50px;
	padding-left: 25px;
	line-height: 50px;
	position: relative;
	margin-top: 10px;
}

	#header_melding .header_melding_tekst{
		display: inline-block;
	}
	#header_melding .header_melding_sluit{
		display: inline-block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0px;
		right: 0px;
		text-align: center;
	}
		#header_melding .header_melding_sluit:hover{
			cursor: pointer;
			background-color: rgba(0,0,0,0.1);
		}

.globalEditIcon{
	display: 				inline-block;
    position: 				relative;
    background-repeat: 		no-repeat;
    background-position: 	center center;
    -webkit-mask-image: 	url(/templates/basic/images/svg/edit_box.svg);
    mask-image: 			url(/templates/basic/images/svg/edit_box.svg);
    -webkit-mask-repeat: 	no-repeat;
    mask-repeat: 			no-repeat;
    -webkit-mask-position: 	center center;
    mask-position: 			center center;
    -webkit-mask-size: 		100% 100%;
    mask-size: 				100% 100%;
    background-color: 		var(--colorDarkGray);
}
	.globalEditIcon:hover{
		cursor: 			pointer;
		background-color: 	var(--colorBlue);
	}