/* 

kleur 1 (vaste kleur, hoeft in principe niet gewijzigd te worden): heel licht:achtergrond voortgangsbalk / geselecteerd antwoord / gridheader / hover gridrij

kleur 2: licht:achtergrondkleur header / antwoordhovering

kleur 3: donker:centrale achtergrondkleur / opvulling voortgangsbalk / subject smartphoneproofgrid

kleur 4: contrast-/steunkleur:onderwerptitel / vorige- en volgende knoppen / antwoordrondjes, -hokjes

 */
 
 
 /* ============================================================================================================================== */
 
 /* voortgangsbalk container */
.mrProgressContainer {
	background-color:var(--kleur-1);
}

/* bovenste gridrij */
TABLE.mrQuestionTable TD.mrGridQuestionText {
	background-color:var(--kleur-1);
}

/* hover antwoordcategorie/gridrij */
SPAN.mrQuestionTable > SPAN:hover, TABLE.mrQuestionTable TR:hover {
	background-color:var(--kleur-1);
}

/* ============================================================================================================================== */

/* header container */
.mrHeaderContainer {
	background-color:var(--kleur-2);
}

/* hover antwoordcategorie/gridcel */
SPAN.mrQuestionTable > SPAN:hover, TABLE.mrQuestionTable TD:not(.mrGridQuestionText, .mrGridCategoryText):hover {
	background-color:var(--kleur-2);
}

/* ============================================================================================================================== */

/* link kleur bij hover */
A:hover {
	color:var(--kleur-3);
}

/* body achtergrond */
BODY {
	background-color:var(--kleur-3);
}

/* opvulling voortgangsbalk */
.mrProgressBar TD:first-child {
	background-color:var(--kleur-3) !important;
}

/* voortgangspercentage */
.mrProgress {
	background-color:var(--kleur-3);
	color:#FFFFFF;
}

/* huisstijlhoekje */
.mrCorner {
	background-color:var(--kleur-3);
}

/* spacer voor minimale tussenruimte tussen main container en footer (hoogte footer + hoogte tussenruimte - opwaarde verschuiving main container */
.mrFooterSpacer {
	background-color:var(--kleur-3);
}

/* subject smartphoneproofgrid */
SPAN.gridonderwerp, SPAN.gridonderwerp *:not(.tooltip, .tooltip *) {
	color:var(--kleur-3);
}

/* tooltip */
DIV.tooltip {
	color:#FFFFFF;
	background-color:var(--kleur-3);
}

/* ============================================================================================================================== */

/* vorige en volgende input */
.mrPreviousContainer INPUT, .mrNextContainer INPUT {
	background-color:var(--kleur-4);
}

/* kleine knop (softcheckmelding) */
.btn-small {
	width:1.25em;
	background:var(--kleur-4);
	vertical-align:top;
}

/* teller smartphoneproofgrid */
SPAN.gridvraag I.teller {
	color:var(--kleur-4);
}

/* geselecteerd invoerveld en dropdown-lijst */
.mrEdit:focus, .mrEdit:hover, SELECT.mrDropdown:focus, SELECT.mrDropdown:hover {
	border:1px solid var(--kleur-4);
}

/* radiobuttons */
INPUT[type=radio].mrSingle:checked + LABEL:after {
	background-color:var(--kleur-4) !important;
	border:2px solid var(--kleur-4);
}

/* checkboxes */
INPUT[type=checkbox].mrMultiple:checked + LABEL:after {
	background-color:var(--kleur-4) !important;
	border:2px solid var(--kleur-4);
}

/* opmaak afbeeldingen in antwoordcategorie (bij gebruik afbeelding in lopende tekst, gebruik class="tekstregel") */
INPUT:checked + LABEL > SPAN > IMG:not(IMG.tekstregel) {
	border:1px solid var(--kleur-4);
}

/* ============================================================================================================================== */

/* link kleur */
A {
	color:var(--kleur-5);
}

/* titel/onderwerp vraagblok */
.mrTitelbanner .mrBannerText {
	color:var(--kleur-5);
}

/* Start vragenlijst-, afmeld-, doorlink-knop */
.mrDigiToegankelijk INPUT[type=submit], .mrAfmeldknop INPUT[type=submit], .mrDoorlink INPUT[type=button], .mrDeviceDetectie INPUT[type=submit] {
	background-color:var(--kleur-5);
}

/* ============================================================================================================================== */

/* weergavebalk bovenaan */	
.mrTopContainer {
	background-color:var(--kleur-6);
}

/* ============================================================================================================================== */

/* fontsize element */
.mrFontsize {
	background-color:var(--kleur-7);
}

/* ============================================================================================================================== */