:root {
	--blauw: #7793c6;
	--donkerblauw: #2c408b;
	--lichtgrijs: #f2f2f2;
	--midgrijs: #E4EBEA;
}

* { box-sizing: border-box; }
.clear { clear: both; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;  }


body { padding: 0; margin: 0; font-family: 'century-gothic', -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; font-size: 16px; font-weight: 400; background-color: #fff; }


input, textarea, select { -webkit-user-select: auto; -ms-user-select: auto; user-select: auto; -moz-user-select: text; -webkit-touch-callout: none; }

a, button, input, textarea, select { touch-action: manipulation; }

input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus { outline: none; }

h1 { font-size: 2rem; color: var(--donkerblauw);  }

h2 { font-size: 1.15rem; color: var(--donkerblauw);  }

h3 { font-size: 1.4rem; line-height: 1.4; color: var(--donkerblauw); }

h4, h5, h6 { font-size: 18px; }

.ml12 { margin-left: 12px; }

.mt2 { margin-top: 2px; }

.mt40 { margin-top: 40px; }

.mt60 { margin-top: 60px; }

.mb12 { margin-bottom: 12px; }
.mb40 { margin-bottom: 40px; }

.flexrow { display: flex; align-items: flex-start; }


/* **************
BASIC LAYOUT
************** */

#veld { padding-bottom: 6rem; }

.container { position: relative; width: 90%; max-width: 1200px; margin: 0px auto; padding-left: 10%;}
.top-menu-container { height: 44px; display: flex; align-items: center; justify-content: flex-end; }

article { padding-left: 15%; }
article.container_xl { width: 90%; max-width: 1200px; margin: 0px auto; padding-left: 10%; }
article.container_ms { width: 90%; max-width: 800px; margin: 0px auto; padding-left: 0; }

.centered { text-align: center; }

tr.disp_screen { display: table-row; }
tr.disp_mobile, p.disp_mobile { display: none; }
@media only screen and ( max-width: 1023px ) {
	tr.disp_screen { display: none; }
	tr.disp_mobile { display: table-row; }
	p.disp_mobile { display: block; }
	p.disp_screen { display: none; }
}

/* ************** 
TYPOGRAPHY
************** */ 

a { text-decoration: none; color: var(--donkerblauw); border-bottom: 1px solid var(--donkerblauw); }

p { color: var(--donkerblauw); font-size: .9rem; line-height: 1.6; }


/* **************
LOGIN + PIN
************** */



/* ************** 
HEADER | MENU + TOPBAR
************** */ 


#topbar { top: 0px; height: 44px; width: 100%; background: var(--lichtgrijs);  }
#topbar ul { margin: 0; padding: 0; list-style: none; }
#topbar ul li { display: inline-block; font-weight: 700; font-size: .9rem; line-height: 17px; margin-left: 2rem; }
#topbar ul li a { border-bottom: none;  }
#topbar ul li a:hover { color: var(--blauw);  }


header { position: relative; background: var(--midgrijs);  }
#titlebar { position: relative; margin: 0; padding: 0; background-color: #fff; height: 90px; display: flex; align-items: center;  }
#titlebar h2 { margin-left: 240px; }

#sectionbar { position: relative; margin: 0; padding: 0; width: 100%; height: 164px; display: flex; align-items: center; justify-content: flex-end; }
#sectionbar .container { text-align: right; }
#sectionbar h1 { margin: 0 1rem 1rem 0;  }
#sectionbar ul { margin: 0; padding-left: 300px; list-style: none; }
#sectionbar ul li { display: inline-block; font-weight: 700; font-size: .9rem; margin-right: 1rem; }
#sectionbar ul li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; border-bottom: none; }
#sectionbar ul li a:hover {  color: var(--blauw);   }
#sectionbar ul li a.active {  background-color: var(--blauw); color: #fff;  }



#logo { padding: 20px; background-color: #fff; border-radius: 0 0 45px 45px; height: 165px; width: auto; max-width: 300px; position: absolute; top: 0px; left: 80px; display: flex; align-items: center; justify-content: center; }
#logo img { max-height: 125px; width: auto; }




/* **************
FIELDSET
************** */

fieldset { margin: 2rem 0; border: 1px solid var(--donkerblauw); display: grid; grid-template-columns: auto 8rem; gap:20px; padding: 2rem; }
fieldset legend { font-family: 'century-gothic', -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; font-size: .9rem; color: #fff; padding: 8px 16px; background-color: var(--blauw); border-radius: 8px;  }

.afronding { font-family: 'century-gothic', -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; font-size: .9rem; color: var(--donkerblauw);  display: grid; grid-template-columns: 11rem auto; gap: 15px; min-width: 100% !important; margin-bottom: .5rem;  }
.afronding_label_xl { grid-template-columns: 16rem auto; }
.afronding_label_xxs { grid-template-columns: 1rem auto; }

/* **************
FORM
************** */

form { margin-top: 1.5rem; }
.form_row { font-family: 'century-gothic', -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; margin-bottom: 1.5rem;  }
.form_row_title { font-size: .95rem; color: var(--donkerblauw); font-weight: 700; margin-bottom: 8px; }
.form_row_radio { font-size: .9rem; color: var(--donkerblauw); margin-bottom: 8px; display: table-row;  }
.form_row_radio input[type="radio"], .form_row_radio input[type="checkbox"], .form_row_radio span { display: table-cell; padding: 0 0 8px 16px; }
.form_row_radio input[type="radio"], .form_row_radio input[type="checkbox"] { margin-left: 24px; }


.form_row_radio input[type="radio"] { width: 16px; height: 16px;  } 
.form_row_radio input[type="checkbox"] { width: 14px; height: 14px; } 

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.form_row_geenkanker { display: none; }

input[type="text"], input[type="number"], textarea { display: block; border: 0; border-radius: 8px;  font-family: 'century-gothic', -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; font-size: 1rem; padding: 8px 12px; background-color: var(--lichtgrijs);  }
textarea { margin-top: 8px; width: 30rem; max-width: 70%; height: 7rem; }

#qanders1_cont, #qanders2_cont {  display: inline; margin-left: 3rem; background-color: #fff; width: 380px;  }

.input-xs { width: 60px; }
.input-s { width: 90px; }
.input-m { width: 120px; }
.input-xl { width: 240px; }

.input-met-label { display: inline-block;  }
.input-met-label label { display: block; font-size: .8rem; margin-bottom: 8px; color: #fff; } 
.input-met-label + span { display: inline; font-size: .9rem; color: var(--donkerblauw); padding-left: .5rem; } 

.text-input--wit { height: auto; background-color: #fff; padding: 7px 10px; font-size: 1.1rem; }
.text-input--wit:focus { background-color: #555; color: #fff; border: 1px solid var(--oranje); }



input[type="submit"], .button { position: relative; display: inline-block;  margin: 0; border: none;
line-height: normal;  white-space: nowrap; height: auto; text-decoration: none; padding: 12px 20px; font-size: .9rem; font-weight: 700; background-color: var(--blauw); color: #fff; border: 0; border-radius: 6px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25); cursor: pointer; }
.button:hover, .button:active { background-color: #fff; color: var(--donkerblauw); border: 1px solid var(--donkerblauw); }
.button:focus { outline: 0; }



/* ************** 
FOOTER
************** */ 

footer { background-color: #fff;  border-top: 2rem solid var(--midgrijs); padding-top: 2rem;  }

.footercontainer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-bottom: 4rem; }

.footercontainer > div { display: flex; align-items: center; }
#fcont2 { justify-content: center; }
#fcont3 { justify-content: flex-end; text-align: center;}
.footercontainer ul { list-style: none; }
.footercontainer a { text-decoration: none; color: var(--blauw); font-size: .85rem; line-height: 2; border-bottom: none; }




/*------------------------------------------------*/
/*---------------[RESPONSIVE LAYOUTS]-------------*/
/*------------------------------------------------*/

@media only screen and ( max-width: 1200px ) {
	article.container_xl { width: 80%; padding-left: 0; }
}

@media only screen and ( max-width: 1023px ) {
	#logo { height: 80px; left: 20px; }
	#logo img { max-height: 60px;  }
	.schaaltabel { margin: 0px auto; }
	#qanders1_cont, #qanders2_cont {  display: block; margin-left: 0; margin-top: 1rem; width: 260px;  }
	#qanders1_range, #qanders2_range {  background: var(--lichtgrijs);  }

	fieldset { display: block;  }
	fieldset a.button { margin-top: 1rem;  }
	.afronding_label_xl { grid-template-columns: 11rem auto; }

}


@media only screen and ( max-width: 900px ) {
	article { padding-left: 8%; }
	.footercontainer { grid-template-columns: 25% 1fr 1fr; }
	.footercontainer > div img { width: 90%; }
}


@media only screen and ( max-width: 748px ) {
	article { padding-left: 0; }

	#titlebar h2 { margin-left: 120px; }
	
	#sectionbar { display: block; padding-top: 1rem; }
	#sectionbar .container { text-align: left; }
	#sectionbar ul { padding-left: 0; }
	#sectionbar ul li { margin-right: .75rem; }

}

@media only screen and ( max-width: 510px ) {
	#logo { left: 0px; }
	#titlebar h2 { font-size: .9rem; margin-left: 90px; }

}


@media only screen and ( max-width: 485px ) {


	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.1rem; }
	h3 { font-size: 1.05rem; }

	.footercontainer, .footercontainer > div { display: block; text-align: center; }
	.footercontainer img { max-width: 140px; }
	.footercontainer ul { padding: 0; }
	
	.form_row_radio span { max-width: 70vw; }
	.form_row_radio input[type="radio"], .form_row_radio input[type="checkbox"] { margin-left: 0px; }
	textarea { max-width: 90%;  }
	.form_row_radio .input-xl { margin-top: 1rem; }
	
	p.container { width: 100%; }
	p.container.mt60 { margin: 60px auto 0px auto; }
	
	fieldset { width: 94vw; margin-left: -8%;  }
	.afronding, .afronding_label_xl { grid-template-columns: 9rem auto; }


}