/* A) Om de privacyverklaring (tekst 'hard' gedefinieerd in de templates) volledig te verbergen, vervang hieronder de {display:inline-block;} door {display:none;} */
.mrPrivacyContainer {
	display:inline-block;
}


/* B) Om in de Author-preview het blokje met de QuestionName te verbergen, vervang hieronder de {display:inline-block;} door {display:none;} */
.QuestionName {
	display:inline-block;
	border:2px solid #A6A6A6;
	color:#A6A6A6;
	border-radius:15px;
	padding:10px; 
	font-style:italic;
	position:absolute;
	left:40px;
	bottom:5px;
	font-size:14px;
}


/* ===================================================== */
/* animaties */
/* ===================================================== */
@keyframes fadeIn {
	from { opacity:0; }
	to { opacity:1; }
}

/* radiobuttons, checkboxes */
INPUT[type=radio].mrSingle + LABEL:after, INPUT[type=checkbox].mrMultiple + LABEL:after {
	-webkit-transition:background-color 0.25s, border 0.25s;
	-moz-transition:background-color 0.25s, border 0.25s;
	transition:background-color 0.25s, border 0.25s;
}

/* hover antwoordcategorie/gridrij */
SPAN.mrQuestionTable > SPAN:hover, TABLE.mrQuestionTable TR:hover {
	-webkit-transition:background-color 0.25s;
	-moz-transition:background-color 0.25s;
	transition:background-color 0.25s;
}

/* hover antwoordcategorie/gridcel */
SPAN.mrQuestionTable > SPAN:hover, TABLE.mrQuestionTable TD:not(.mrGridQuestionText, .mrGridCategoryText):hover {
	-webkit-transition:background-color 0.25s;
	-moz-transition:background-color 0.25s;
	transition:background-color 0.25s;
}

/* main content */
DIV.mrTitelbanner, DIV.mrTdisplay, DIV.mrTtextfield, DIV.mrTcontrols, DIV.mrTerrorfield, DIV.mrProgress, DIV.tooltip {
	-webkit-animation:fadeIn 0.5s;
	-moz-animation:fadeIn 0.5s;
	animation:fadeIn 0.5s;
}

/* link kleur bij hover */
A, A:hover {
	-webkit-transition:color 0.25s;
	-moz-transition:color 0.25s;
	transition:color 0.25s;
}


/* ===================================================== */
/* basis padding, marges, lettertype, -grootte en -kleur */
/* ===================================================== */
* {
	padding:0px;
	margin:0px;
	border:0px;
	box-sizing:border-box;
	font-family:'Inter','Verdana',sans-serif;
}

BODY {
	color:#111113;
}

.normal, .mam, .mrSingleText, .mrMultipleText, .mrGridCategoryText {
	color:#4A4A4A;
}

/* link weergave */
A {
	text-decoration:none;
}

/* link weergave bij hover */
A:hover {
	text-decoration:none;
}

.mam {
	font-style:italic;
	font-weight:normal;
	/*text-transform:uppercase;*/
}
.normal, .opdracht_OG {
	font-weight:normal;
}

TABLE, TR, TD {
	border-collapse:collapse;
}

INPUT, TEXTAREA {	
	border-radius:0px;
}

UL {
	list-style-position:inside;
}

/* =================================================== */
/* ============= positionering containers ============ */
/* =================================================== */

HTML {
	height:100%;
	min-height:100%;
}

BODY {
	min-height:100%;
	position:relative;
}

/* weergavebalk bovenaan */	
.mrTopContainer {
	width:100%;
	position:fixed;
	z-index:100;
}

/* spacer element om hoogte van de gefixte weergavebalk op te vullen */ 
.mrTopSpacer, .mrTopContainer {
	height:50px;
}

/* gecentreerde middencontainers */
.mrCenterContainer {
	width:900px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

/* centrale container weergavebalk op schermbreedte houden, bij verkleining venster */
@media screen and (max-width:900px) {
	.mrFontsizeContrastContainer {
		width:100%;
	}
}

/* containers voor fontsize en contrastweergave */	
.mrFontsizeContainer, .mrContrastContainer {
	width:49%;
	min-width:175px;
	height:50px;
	display:inline-block;
	padding:0px 15px 0px 15px;
}

/* container voor fontsize */
.mrFontsizeContainer {
	text-align:left;
	position:absolute;
	left:0px;
}

/* fontsize element */
.mrFontsize {
	display:inline-block;
	margin-top:10px;
	padding:0px 0px 0px 0px;
	height:30px;
	min-width:120px;
	border-radius:20px;
}

/* fontsize letters */
.mrFontsize SPAN {
	line-height:30px;
	position:relative;
	display:inline-block;
	color:#FFFFFF;
	font-weight:normal;
	padding:0px 3px 0px 3px;
	/*cursor:default;*/
	cursor:pointer;
	font-family:'Verdana',sans-serif;
}
.mrFontsize SPAN:first-child, .mrFontsize SPAN:last-child {
	padding:0px 5px 0px 5px;
	margin:0px 10px 0px 10px;
	font-size:20px;
	font-weight:normal;
	cursor:pointer;
}

.mrFontsize .font_klein {
	font-size:13px !important;
}

.mrFontsize .font_normaal {
	font-size:17px !important;
}

.mrFontsize .font_groot {
	font-size:21px !important;
}

/* contrastweergave container */
.mrContrastContainer {
	text-align:right;
	position:absolute;
	right:0px;
}

/* contract element */
.mrContrast {
	margin-top:13px;
}

/* contrast afbeelding */ 
.mrContrast IMG {
	width:25px;
	cursor:pointer;
	-webkit-filter:var(--contrast-filter);
	filter:var(--contrast-filter);
}

/* header container */
.mrHeaderContainer {
	width:100%;
	min-width:900px;
	height:160px;
}

/* header image */
.mrHeaderContainer IMG {
	display:none;
}

/* voortgangsbalk container */
.mrProgressContainer {
	display:block;
	height:10px;
	position:relative;
	top:-110px;
}

.mrProgressBar {
	cursor:help;
}

.mrProgressBar TD:first-child {
	position:relative;
	height:10px;
}

.mrProgress {
	display:none;
	position:absolute;
	height:30px;
	min-width:110px;
	padding-left:12px;
	border-radius:20px;
	font-size:12px;
	line-height:30px;
	/*top:15px;*/
	bottom:15px;
	left:0px;
	z-index:10;
}

.mrProgressBar:hover .mrProgress {
	display:inline-block;
}

.mrProgressText {
	opacity:0;
}

/* main container */
.mrMain {
	background-color:#FFFFFF;
	padding:40px 40px 80px 40px;
	position:relative;
	top:-110px;
	margin-bottom:0px;
}

/* badge/logo container */
.mrLogobadgeContainer {
	display:none;
}

/* icon container */
.mrIconContainer {
	display:none;
}

/* taaloptie dropdown */
DIV.taaloptie {
	position:absolute;
	margin-top:0px;
	top:20px;
	right:40px;	
}

DIV.taaloptie IMG {
	margin-right:5px;
}

DIV.taaloptie SELECT {
	float:right;
}

/* knoppen container */
.mrButtonsContainer {
	margin-top:40px;
}

/* vorige en volgende container */
.mrPreviousContainer, .mrNextContainer {
	height:40px;
	width:40px;
	background-color:#E0E0E0;
	position:relative;
	display:block;
}

/* vorige container */
.mrPreviousContainer {
	margin-right:1px;
}

/* volgende container */
.mrNextContainer {
	margin-left:1px;
}

/* vorige en volgende afbeelding */
.mrPreviousContainer IMG, .mrNextContainer IMG {
	position:absolute;
	left:0px;
	width:40px;
	height:40px;
	z-index:0;
}

/* vorige en volgende input */
.mrPreviousContainer INPUT, .mrNextContainer INPUT {
	height:40px;
	width:40px;
	position:absolute;
	z-index:10;
}
.mrPreviousContainer INPUT:hover, .mrNextContainer INPUT:hover {
	opacity:75%;
}

DIV#dummy_next {
	width:0px;
	height:0px;
	overflow:hidden;
}

/* startvragenlijst-button digitoegankelijk, afmeldknop, doorlinkknop */
.mrDigiToegankelijk, .mrAfmeldknop, .mrDoorlink, .mrDeviceDetectie {
	background-color:#FFFFFF;
}
.mrDigiToegankelijk INPUT[type=submit], .mrAfmeldknop INPUT[type=submit], .mrDoorlink INPUT[type=button], .mrDeviceDetectie INPUT[type=submit] {
	color:#FFFFFF;
	width:auto;
	padding-left:12px;
	padding-right:12px;
	cursor:pointer;
	-webkit-appearance:none;
    -webkit-clip-path:var(--submitButton-polygon);
    clip-path:var(--submitButton-polygon);
}

/* foto colofon */
.colofon {
	display:none;
}

/* huisstijlhoekje */
.mrCorner {
	height:40px;
	width:40px;
	position:absolute;
	bottom:0px;
	right:0px;
    -webkit-clip-path:var(--mrCorner-polygon);
    clip-path:var(--mrCorner-polygon);
}

/* spacer voor minimale tussenruimte tussen main container en footer (hoogte footer + hoogte tussenruimte - opwaarde verschuiving main container */
.mrFooterSpacer {
	/*height:(125+40-110)px=75px*/
	height:75px;
}

/* footer container */
.mrFooterContainer {
	width:100%;
	min-width:900px;
	height:125px;
	background-color:#FFFFFF;
	position:absolute;
	bottom:0px;
}

/* centrum container footer */
.mrFooterlogoPrivacyInfobannerContainer {
}

.mrFooterlogoPrivacyInfobannerTable {
	width:100%;
	height:125px;
	text-align:left;
	vertical-align:middle;
}
.mrFooterlogoPrivacyInfobannerTable TD:last-child {
	text-align:right;
}

/* footerlogo, privacyverklaring en info containers */
.mrFooterlogoContainer, .mrPrivacyContainer, .mrInfobannerContainer {
	padding:0px 15px 0px 15px;
}

/* infobanner container */
.mrInfobannerContainer {
	display:inline-block;
}

/* footerlogo container */
.mrFooterlogoContainer {
	display:inline-block;
}

/* footerlogo */
.mrFooterlogoContainer IMG {
	max-height:85px;
	max-width:300px;
}

/* =================================================== */
/* ============= opmaak renderelementen ============== */
/* =================================================== */
/* vraagtekst/-label */
.mrTtextfield .mrQuestionText, .kop, SPAN.gridvraag {
	display:block;
	/*font-family:'Roboto',sans-serif;*/
	font-weight:bold;
	/*padding:8px 0px 8px 0px;*/
	padding:0px 0px 0px 0px;
}

/* label smartphoneproofgrid */
SPAN.gridvraag {
	/*font-size:24px;*/
}

/* subject smartphoneproofgrid */
SPAN.gridonderwerp, SPAN.gridonderwerp * {
	/*font-size:32px;*/
}

/* teller smartphoneproofgrid */
SPAN.gridvraag I.teller {
	font-style:italic;
}

/* titel/onderwerp vraagblok */
.mrTitelbanner .mrBannerText {
	display:inline-block;
	/*font-family:'Roboto',sans-serif;*/
	font-weight:bold;
	padding:0px 0px 0px 0px;
}

/* (grid)vraag */
.mrQuestionTable {
	margin-left:0px !important;
}

/* LET OP:dit heeft wel als gevolg dat een anders, namelijk-vak altijd op een volgende regel zal staan. */
SPAN.mrQuestionTable > SPAN, SPAN.mrQuestionTable LABEL {
	display:block;
	max-width:100%;
}

TABLE.mrQuestionTable TD > LABEL {
	/*display:inline-block;*/
}

/* Other-veld */
/*SPAN.mrQuestionTable .mrEdit {
	margin-left:30px;
}*/

/* open/numerieke vraag */
TEXTAREA.mrEdit, INPUT.mrEdit {
	margin-left:2px !important;
}

/* invoerveld */
.mrEdit {
	display:inline-block;
	max-width:100%;
	padding:5px;
	outline:none !important;
	border:1px solid #111113;
	-webkit-appearance:none;
}

/* invoerveld Other */
.mrOtherEdit {
	max-width:85%;
}

.mrEdit:disabled, .mrEdit:hover:disabled {
	border:1px solid #A5A5A5;
}

/* beperken breedte escape-opties bij invoerveld */
INPUT[type=text] ~ INPUT[value=REF] + LABEL, INPUT[type=text] ~ INPUT[value=DK] + LABEL, INPUT[type=text] ~ INPUT[value=NA] + LABEL {
	max-width:0;
	white-space:nowrap;
	padding-right:0px;
}

#gridsom .teller .mrEdit, #multiplesom .teller .mrEdit {
	cursor:default;
	border:1px solid #A5A5A5;
}

#gridsom .teller .error, #multiplesom .teller .error {
	  color:#FF6D6F;
	  font-weight:bold;
	  border:1px solid #FF6D6F;
}

/* geselecteerd invoerveld */
.mrEdit:focus, .mrEdit:hover {
}

/* dropdown-lijst */
SELECT.mrDropdown {
	margin-left:2px !important;
	padding:5px;
	outline:none !important;
	border:1px solid #111113;
}

/* radiobuttons en checkboxes */
INPUT[type=radio].mrSingle, INPUT[type=checkbox].mrMultiple, INPUT[type=radio].hidden, INPUT[type=checkbox].hidden {
	position:absolute;
	/*opacity:0;*/
}

INPUT[type=radio].mrSingle + LABEL, INPUT[type=checkbox].mrMultiple + LABEL {
	position:relative;
	/*padding-top:0px;
	padding-top:5px;
	padding-bottom:5px;*/
}
INPUT[type=radio].mrSingle + LABEL:after, INPUT[type=checkbox].mrMultiple + LABEL:after {
	display:block;
	position:absolute;
	content:"";
	background-color:#FFFFFF;
	border:2px solid #4A4A4A;
}

/* radiobuttons */
INPUT[type=radio].mrSingle + LABEL:after {
	border-radius:50%;
}
INPUT[type=radio].mrSingle:enabled + LABEL:hover:after {
	background-color:#4A4A4A;
}
INPUT[type=radio].mrSingle:checked + LABEL:after {
}
INPUT[type=radio].mrSingle:disabled + LABEL SPAN {
	color:#A5A5A5;
}
INPUT[type=radio].mrSingle:disabled + LABEL:after {
	border:2px solid #A5A5A5;
}

/* checkboxes */
INPUT[type=checkbox].mrMultiple + LABEL:after {
	border-radius:0%;
}
INPUT[type=checkbox].mrMultiple:enabled + LABEL:hover:after {
	background-color:#4A4A4A;
}
INPUT[type=checkbox].mrMultiple:checked + LABEL:after {
}
INPUT[type=checkbox].mrMultiple:disabled + LABEL SPAN {
	color:#A5A5A5;
}
INPUT[type=checkbox].mrMultiple:disabled + LABEL:after {
	border:2px solid #A5A5A5;
}

/* radiobuttons grid */
LABEL.grid-button-checkbox {
	padding:0px;
	/*width:23px;*/
	/*background-position:center !important;*/
}

/* checkmark voor radiobuttons en checkboxes */
INPUT[type=radio].mrSingle + LABEL:hover > SPAN:before, INPUT[type=radio].mrSingle:checked + LABEL > SPAN:before, INPUT[type=checkbox].mrMultiple + LABEL:hover > SPAN:before, INPUT[type=checkbox].mrMultiple:checked + LABEL > SPAN:before {
	content:"";
	z-index:10;
	display:block;
	position:absolute;
	border:solid white;
	border-width:0 2px 2px 0;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

/* checkbox digitoegankelijkheidsvraag in digitoegankelijke opmaak */
INPUT[type=checkbox].mrDigiCheckbox {
	display:inline;
	-webkit-transform:scale(1.5); /* Chrome, Safari, Opera */
	-ms-transform:scale(1.5); /* IE 9 */
	-moz-transform:scale(1.5); /* Firefox */
	transform:scale(1.5);
}

INPUT[type=checkbox].mrDigiCheckbox + LABEL {
	display:inline;
	padding:8px;
	max-width:90%
}

/* opmaak afbeeldingen in antwoordcategorie (bij gebruik afbeelding in lopende tekst, gebruik class="tekstregel") */
LABEL > SPAN > IMG:not(IMG.tekstregel) {
	border:1px solid #DDDDDD;
	padding:12px;
	display:block;
	max-width:100%;
}

/* bovenste gridrij */
TABLE.mrQuestionTable TR:first-of-type TD.mrGridQuestionText {
	padding-left:2px !important;
	padding-right:2px !important;
	border-bottom:1px solid #DDDDDD;
}

/* hover antwoordcategorie/gridrij */
SPAN.mrQuestionTable > SPAN:hover, TABLE.mrQuestionTable TR:hover {
}

/* borders gridsubjects verbergen (m.u.v. lijn linksboven) => is inmiddels als het goed is opgelost via de TABLE.mrQuestionTable TD.mrGridQuestionText style */
/*TABLE.mrQuestionTable TR:not(TR:nth-child(2)) TD:first-child {
	border-width:0px !important;
}*/

/* padding subjects in grid */
TABLE.mrQuestionTable TR TD:first-child {
	/*padding-left:0px !important;*/
}
TABLE.mrQuestionTable TD.mrGridCategoryText {
	padding:8px 0px 8px 2px !important;
}

/* "prefix" invoerveld */
SPAN.mrBannerVoor {
	display:block;
	padding-top:8px;
	padding-right:4px;
	line-height:100%;
}

/* "suffix" invoerveld */
SPAN.mrBannerAchter {
	display:block;
	padding-top:8px;
	padding-left:4px;
	line-height:100%;
}

/* foutmeldingtekst */
.mrErrorText {
	display:inline-block;
	text-align:left;
	color:#FF6D6F !important;
	font-weight:normal !important;
	padding:0px;
	border:0px solid #FF6D6F !important;
	margin-top:8px;
	background-image:url(https://www.iodc.nl/interviewunit_files/mrInterview/error.svg);
	background-repeat:no-repeat;
	background-position:0px center;
}

/* reguliere gridvraag foutmelding */
TABLE.mrQuestionTable TD.mrGridCategoryText, TABLE.mrQuestionTable TD.mrGridCategoryText ~ TD {
	position:relative;
}
TABLE.mrQuestionTable TD.mrGridCategoryText .mrErrorText {
	position:absolute;
	top:0px;
	color:transparent !important;
	background-position:0px 0px;
	overflow:hidden;
}

/* tekst- of numerieke gridvraag foutmelding => NIETS MEE DOEN, melding verbergen kan niet a.g.v. verschil in en custom meldingen*/
/*TABLE.mrQuestionTable TD.mrGridCategoryText ~ TD .mrErrorText {
	position:absolute;
	top:0px;
	left:8px;
	color:transparent !important;
	background-position:0px 0px;
	border:1px solid blue !important;
}*/

/* gekantelde reguliere gridvraag foutmelding */
TABLE.mrQuestionTable {
	position:relative;
}
TABLE.mrQuestionTable TD.mrGridQuestionText ~ TD .mrErrorText {
	position:absolute;
	color:transparent !important;
	background-position:0px 0px;
	overflow:hidden;
	/*z-index:0;
	border:1px solid green !important;*/
}

/* tooltip */
SPAN.tooltip {
	position:relative;
	background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/tooltip_info.png');
	background-repeat:no-repeat;
	background-position:right top;
	cursor:pointer;
}
/*SPAN.tooltip:after {
	position:absolute;
	top:-10px;
	right:-10px;
	display:block;
	padding:2px;
	color:#FFFFFF;
	background-color:#26A79A;
	border-radius:50%;
	width:20px;
	height:20px;
	padding-bottom:5;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	content:"i";
}*/
DIV.tooltip {
	display:none;
	padding:10px 35px 10px 10px;
	font-weight:normal;
	position:absolute;
	width:50%;
	max-width:400px;
	z-index:20;
	border:1px solid #FFFFFF;
}
SPAN.close_tooltip {
	display:block;
    position:absolute;
	top:5px;
	right:5px;
	padding:0px 5px 0px 5px;
	border:0px solid white;
	color:#FFFFFF;
	font-weight:bold;
	float:right;
	cursor:pointer;
}
SPAN.tooltip_corner {
	display:block;
    position:absolute;
    right:0px;
    bottom:0px;
    background-color:#FFFFFF;
    -webkit-clip-path:var(--tooltipCorner-polygon);
    clip-path:var(--tooltipCorner-polygon);
}