@import url('https://fonts.googleapis.com/css?family=Merriweather|Roboto:400,700&display=swap');

/* Bovenin deze css kun je een aantal instellingen m.b.t. weergave doorvoeren.
0: kleur van het linkerbolletje in het kleurenpalet rechtsboven (standaard groen)
1: zichtbaarheid van het kleurenpalet rechtsboven (standaard zichtbaar)
2: zichtbaarheid vorige/volgende pijltjes aan de zijkant van het scherm (standaard niet zichtbaar)
3: zichtbaarheid vorige/volgende pijlen onderaan de vragenlijst (standaard zichtbaar)
4: zichtbaarheid voortgangsbalk (standaard zichtbaar, mobiel standaard niet zichtbaar (zie standaard_mobiel.css))
5: zichtbaarheid kleine I&O en MOA logo's onderaan de vragenlijst (standaard zichtbaar)
6: zichtbaarheid wervingsregel I&O Research Panel (standaard niet zichtbaar, functionaliteit werkt niet meer i.c.m. Jambo)
7: zichtbaarheid vermeldingsregel '...in opdracht van...' op het inlogscherm (standaard zichtbaar, voor aanpassen tekst zie standaard_authenticate.htm)
8: zichtbaarheid link naar privacyverklaring op het inlogscherm (standaard zichtbaar)
9: zichtbaarheid van lettergrootte én contrastweergave (gezamenlijk) rechtsboven (standaard zichtbaar) en kleur van de balk
10: tonen logo linksboven of rechtsboven de vragenlijst (standaard links)
11: kleur van de titelkopjes bovenaan de vragenlijst en eventueel verbergen linker staande streepje bij kopje
12: QuestionName in Author-preview eventueel verbergen
13: info-blokje/-regeltje onderaan eventueel tonen
*/

/* 0) Hieronder moet nog éénmalig kleur 1 uit de standaard.css worden ingesteld, om te zorgen dat het linker kleurenbolletje wel in die kleur is */
DIV.standaardcss
{background-color:#26A79A !important; }


/* 1) Om het kleurenpalet te verbergen, vervang hieronder de {display:display;} door {display:none;} */
TABLE.csscolours, TABLE.fontgrootte FONT:last-child
{display:display;}


/* 2) Om de knoppen AAN DE ZIJKANT VAN de vragenlijst te verbergen, vervang hieronder de {display:display;} door {display:none;} */
DIV.previous INPUT, DIV.next INPUT
{display:none;}


/* 3) Om de knoppen ONDERAAN de vragenlijst te verbergen, vervang hieronder de {display:display;} door {display:none;} */
DIV.vorige, DIV.volgende, DIV.verzenden
{display:display;}


/* 4) Om de voortgangsbalk onderaan de vragenlijst zichtbaar te maken, vervang hieronder de {display:none; } door {display:display} */
DIV.progresscontainer
{display:display;}


/* 5) Om de logo's van I&O en MOA onderaan de vragenlijst te verbergen, vervang hieronder de {display:display;} door {display:none;} */
DIV.footer
{display:display;}


/* 6) Om de wervingsregel voor het I&O Research panel onderaan de vragenlijst te verbergen, vervang hieronder de {display:display;} door {display:none;} */
/* LET OP: MET DE OVERGANG NAAR JAMBO WERKT DE FUNCTIONALITEIT (VOORLOPIG) NIET MEER, DAAROM STANDAARD VERBORGEN NU */
TABLE.werving
{display:none;}


/* 7) Om op het inlogscherm de vermeldingsregel '...in opdracht van...' te verbergen, vervang hieronder de {display:display;} door {display:none;} */
SPAN.opdracht_OG
{display:display;}


/* 8) Om op het inlogscherm de link naar de privacyverklaring te verbergen, vervang hieronder de {display:display;} door {display:none;} */
A.privacyverklaring
{display:display;}


/* 9) Om de lettergrootte- en contrast-keuzeopties te verbergen, vervang hieronder de {display:display;} door {display:none;} of vervang hieronder #18192D in de gewenste kleurcode om de kleur van de balk te wijzigen  */
TABLE.fontgrootte
{display:display;}
DIV.mrTheader
{border-top-color:#18192D;}


/* 10) Om het logo links te verbergen en rechts weer te geven, vervang hieronder bij TD.logo_links de display:display; door display:none; en bij TD.logo_rechts net andersom */
TD.logo_links
{display:display;}
TD.logo_rechts
{display:none;}


/* 11) Om de kleur van het (rode) titelkopje te wijzigen, verander dan hieronder #D95B4D door de gewenste kleurcode. */
/*     Mocht je tevens de staande streep links willen verbergen (bijv. als je een enquete zonder kopjes hebt), vervang dan 2px door 0px. */
.titelbanner .mrBannerText
{border-left:2px solid #D95B4D; color:#D95B4D;}


/* 12) Om in de Author-preview het blokje met de QuestionName te verbergen, vervang hieronder de {display:inline-block;} door {display:none;} */
DIV.QuestionName
{display:inline-block; border:2px solid #A6A6A6; color:#A6A6A6; border-radius:5px; padding:5px; font-style:italic; margin-left:10px;}


/* 13) Om het info-blokje/-regeltje onderaan te verbergen, vervang hieronder de {display:none;} door {display:display;} */
.infobanner
{display:none;text-align:left; padding:5px;}





/* ============================================================= */
/* Hieronder staat de rest van de css, die kleuronafhankelijk is */
/* ============================================================= */
HTML {height:100%; width:100%; border:0px; overflow-y:auto; }

BODY, HTML, TABLE, DIV, TD, TR
{margin:0px; padding:0px; }

FONT,DIV,P,A,H1,H2,H3,H4,H5,H6,SPAN,UL,OL,SUP,SUB,LABEL,INPUT,TEXTAREA,SELECT,BLOCKQUOTE,QUOTE,CITE,CAPTION,LEGEND,TD,TH
{font-family:Verdana, Arial, Helvetica, "Trebuchet MS"; text-decoration:none; }

UL, OL {margin-top:0px; margin-bottom:0px; }

.mam {font-size:12px; font-style:italic; font-weight:normal; text-transform:uppercase; }
.normal {font-weight:normal; }

TABLE
{BORDER-COLLAPSE:collapse}

DIV.mrTcontainer
{width:100%; text-align:center; background-color:#FFFFFF; }

DIV.mrTmain
{width:100%; text-align:center; background-color:#FFFFFF; }

DIV.mrTheader
{margin:0px; padding:0px; width:100%; text-align:center; background-color:#FFFFFF; border-bottom:1px solid #969696; box-shadow:0px 2px 6px rgba(0,0,0,0.3); position:fixed; top:0px; z-index:20; height:127px; overflow:hidden; }

TABLE.header
{margin-left:auto; margin-right:auto; width:970px; height:127px; text-align:left; }

TD.logo
{text-align:left; padding-left:30px; width:270px; }
TD.logo img, TD.logo_links img, TD.logo_rechts img
{max-height:100px;}

TD.titelbanner
{vertical-align:middle; width:auto; }

TD.csscolours
{text-align:right; padding-right:32px; vertical-align:middle; }
TABLE.csscolours DIV
{margin-bottom:2px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/css-colour.png'); cursor:url('https://www.iodc.nl/interviewunit_files/mrInterview/aero_pen.cur'), pointer; }

DIV.mrTqcontainer
{margin:0px; padding:0px; width:100%; text-align:center; border-bottom:1px solid #969696; box-shadow:0px 2px 6px rgba(0,0,0,0.3); position:relative; }

DIV.icon
{opacity:0.5; filter:alpha(opacity=50); }

TABLE.containerPrevNext
{width:100%; text-align:center; }

TD.previous, TD.next
{width:21px; }
TD.previous, TD.lefttoe
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/left_foot.png'); background-repeat:no-repeat; background-position:bottom left; }
DIV.previous, DIV.next
{width:21px; height:16px; margin-top:127px; }

DIV.previous INPUT
{width:16px; height:16px; margin-top:0px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/previous.png'); background-repeat:no-repeat; background-position:center center; }
DIV.previous INPUT:hover
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/previous-hover.png'); }
DIV.next INPUT
{width:16px; height:16px; margin-top:0px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/next.png'); background-repeat:no-repeat; background-position:center center; }
DIV.next INPUT:hover
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/next-hover.png'); }

TABLE.containerMain
{margin-left:auto; margin-right:auto; width:928px; border:0px !important; }

TABLE.main
{width:896px; text-align:left; margin:0px; margin-left:30px; margin-top:30px; background-color:#FFFFFF; }

TD.leftleg
{text-align:left; vertical-align:top; width:100px; background-color:#FFFFFF; }
DIV.corner
{width:100px; height:100px; z-index:-20; }
DIV.icon
{width:50px; position:relative; top:-65px; left:25px; z-index:0; }
TD.leftfoot
{height:15px; background-color:#FFFFFF; }
TD.rightfoot
{height:15px; }

TD.content
{width:776px; padding-top:35px; vertical-align:top; }

DIV.mrTdisplay
{margin:0px; }

DIV.mrTtextfield
{padding:4px 8px 4px 14px; }

DIV.mrTerrorfield
{padding:4px auto 4px 14px; padding-left:14px; margin:2px 0px 2px 0px; font-weight:bold; }

DIV.mrTcontrols
{padding:4px 8px 12px 14px; font-size:14px; }

SPAN.mrQuestionTable > SPAN, TABLE.mrQuestionTable TD
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/white-50-opacity.png'); }

DIV.shadowbox
{width:100%; height:0px; }

DIV.mrTbuttons
{margin:0px; padding:0px; width:100%; text-align:center; background-color:#FFFFFF; }

TABLE.containerButtons
{margin-left:auto; margin-right:auto; width:970px; background-color:#FFFFFF; }

TABLE.buttons
{margin-left:auto; margin-right:auto; width:970px; height:67px; background-color:#FFFFFF; text-align:left; }
TD.tdbutton
{padding-left:72px; width:150px; vertical-align:middle; }

DIV.vorige INPUT
{display:inline; width:36px; height:35px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/vorige.png'); background-repeat:no-repeat; background-position:center center; }
DIV.vorige INPUT:hover
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/vorige-hover.png'); }
DIV.volgende INPUT
{display:inline; width:36px; height:35px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/volgende.png'); background-repeat:no-repeat; background-position:center center; }
DIV.volgende INPUT:hover
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/volgende-hover.png'); }
DIV.verzenden INPUT
{display:inline; width:35px; height:35px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/save.png'); background-repeat:no-repeat; background-position:center center; }
DIV.verzenden INPUT:hover
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/save-hover.png'); }

DIV.progresscontainer
{width:748px; height:35px; overflow-y:visible; text-align:left; background-color:#FFFFFF; border:0px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/progress_grijs.png'); background-repeat:no-repeat; }
DIV.progresstablecontainer
{width:660px; height:29px; margin:3px; }

DIV.progresstablecontainer td:first-child
{}
DIV.progresstablecontainer .mrProgressText:first-child
{background-color:#FFFFFF !important; }
.mrProgressText
{font-size:12px; padding-left:4px; font-weight:bold; }

TABLE.footer
{margin-left:auto; margin-right:auto; width:970px; height:100px; text-align:right; background-color:#FFFFFF; }
TABLE.footer TD
{padding-right:5px; }

DIV.containerWerving
{width:100%; text-align:center; height:45px; }

TABLE.werving
{height:45px; width:970px; margin-left:auto; margin-right:auto; font-size:10px; color:#FFFFFF; text-align:right; }

div.werving
{width:42px; height:25px; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/email.png'); background-repeat:no-repeat; }
div.werving:hover
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/email-hover.png'); }
a.werving
{border:0px; cursor:pointer; }

IFRAME.werving
{display:none; }

.mrTgridcont
{width:100%; text-align:center; padding:0px 0px 8px 0px; }
.mrTgrid
{font-size:12px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; margin-left:auto; margin-right:auto; width:780px; border:0px solid #000000; }

/* overflow-y:auto weggehaald, zodat invulvakken in Chrome niet hoger worden weergegeven */
.mrEdit
{font-size:12px; border:1px solid #18192D; background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/white-75-opacity.png'); }
.mrQuestionText, .mrShowText
{font-size:12px; color:#18192D; display:inline-block; }
.mrErrorText
{font-size:12px; color:red !important; display:inline-block; padding:4px; border:2px solid red; }
.mrGridQuestionText .mrQuestionText, .mrGridCategoryText .mrQuestionText
{color:#18192D !important; }
.mrBannerText
{font-size:12px; color:#18192D; }
.titelbanner .mrBannerText
{display:inline-block; padding:0px; padding-left:10px; font-size:20px; font-family: Roboto;}
.mrSingleText,.mrMultipleText
{font-size:12px; color:#18192D; }
.mrSingle,.mrMultiple
{font-size:12px; color:#18192D; }
.mrNext,.mrPrev,.mrGoto,.mrFirst,.mrLast,.mrStop
{font-size:13px; font-family:Verdana; }
.mrNextClick,.mrPrevClick,.mrGotoClick,.mrFirstClick,.mrLastClick,.mrStopClick
{font-size:13px; font-family:Verdana; border:2px inset #8E7A4A; padding:2px; padding-left:9px; padding-right:7px; padding-top:3px; padding-bottom:1px; }
.mrDropdown, OPTION
{font-size:12px; color:#18192D !important; }

<!-- These items are Quancept only. This .css can be used for both Quancept and Dimensions projects.-->
.mrDisplayText 
{font-size:13px; color:#18192D; }
.mrProtectText 
{font-family: Verdana, sans-serif; font-size:18px; color:E5E3BA; text-decoration:none; line-height:34px; }
.mrQText
{font-size:13px; color:#18192D; }
.mrPrevious
{font-size:12px; }

SPAN.def 
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/tooltip_grijs.png'); background-repeat:no-repeat; background-position:right top; padding-right:11px; cursor: pointer;}
DIV.def
{display:none; padding:5px; font-weight:normal; position:absolute; width:500px; width:auto; z-index:20; }
SPAN.close_def
{padding: 0px 2px 2px 2px; border: 1px solid black; color: #000000; float: right; cursor: pointer;}

A.privacyverklaring
{font-size:12px;font-style:italic;}

SPAN.semantisch
{display:inline-block;}

/*LABEL SPAN
{display:inline-block; width:85%; }
INPUT
{vertical-align:top; }*/


/* uitkleding opmaak voor bijv. invoeging in iframe */
/*DIV.mrTheader, TABLE.header, TABLE.footer, DIV.containerWerving
{display:none; }
TABLE.main
{margin:0px; }*/


/* ======================================= */
/* 2017 restyling radio button, checkboxes, etc. */
/* ======================================= */
.mrQuestionText, .mrSingleText, .mrMultipleText
{font-size:13px; }

.mrEdit
{border-radius:5px; border-width:2px; padding:2px; font-size:13px; margin-left:0px !important; }
.mrEdit:focus
{border-color:#000000; }
.mrEdit:disabled
{border-color:#A5A5A5;}
.mrErrorText
{border-radius:5px; }

/* ---- Lining Up Wrapped Response Texts Control ---- */
/* 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:95%; }
TABLE.mrQuestionTable TD > LABEL
{display:inline-block;}
label ~ input[type=text], label ~ textarea.mrEdit
{margin-left:25px !important; }

/* positionering radiobuttons en checkboxes gewone vragen */
/* niet meer verbergen (display:none) via css maar via js-functie (om te zorgen dat respondenten zonder js nog wel hokjes zien */
/*input[type=radio], input[type=checkbox]{
display:none; position:absolute; }*/
input[type=radio] ~ label, input[type=checkbox] ~ label{
position:relative; background-repeat:no-repeat; background-position:left 5px; padding-bottom:3px; padding-left:25px; line-height:175%; }
input[name=_Qdigitoegankelijk_Cja] ~ label, input[name=_QPageDigitoegankelijk_Qdigitoegankelijk_Cja] ~ label{
padding-left:30px; }

/* positionering NA, DK, REF hokjes */
div.mrTcontrols > span > input[type=checkbox] ~ label, div.mrTcontrols > table span > input[type=checkbox] ~ label
{display:block; background-position:left center; }

/* positionering bij meerdere kolommen */
td > input[type=radio] ~ label, td > input[type=checkbox] ~ label{
background-position:left top; padding-left:25px; padding-right:25px; }

/* positionering in grids (zelf toegevoegde labels via js-functie */
label.grid-button-checkbox{
padding-left:16px !important; padding-right:0px !important; background-position:left 0px !important; }


/* afbeeldingen radiobuttons */
input[type=radio] + label{
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/radio-b_white.png'); }
input[type=radio] + label:hover {
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/radio-b-g_white.png'); }
input[type=radio]:checked + label {
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/radio-b-b_white.png'); }
input[type=radio]:disabled + label {
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/radio-b_grey.png'); }
input[type=radio]:disabled + label span {
color:#A5A5A5;}

/* afbeeldingen checkboxes */
input[type=checkbox] + label {
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/checkbox-b_white.png'); }
input[type=checkbox] + label:hover {
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/checkbox-b-g_white.png'); }
input[type=checkbox]:checked + label {
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/checkbox-b-b_white.png'); }
input[type=checkbox]:disabled + label {
background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/checkbox-b_grey.png'); }
input[type=checkbox]:disabled + label span {
color:#A5A5A5;}

/* digitoegangkelijke vraag zonder afbeeldingen */
input[name=_Qdigitoegankelijk_Cja] + label, input[name=_Qdigitoegankelijk_Cja] + label:hover, input[name=_Qdigitoegankelijk_Cja]:checked + label {
background-image:url('');}
input[name=_QPageDigitoegankelijk_Qdigitoegankelijk_Cja] + label , input[name=_QPageDigitoegankelijk_Qdigitoegankelijk_Cja] + label:hover, input[name=_QPageDigitoegankelijk_Qdigitoegankelijk_Cja]:checked + label {
background-image:url('');}
input[name=_Qdigitoegankelijk_C] + label, input[name=_Qdigitoegankelijk_C] + label:hover, input[name=_Qdigitoegankelijk_C]:checked + label {
background-image:url(''); margin-left:5px;}
input[name=_QPageDigitoegankelijk_Qdigitoegankelijk_C] + label , input[name=_QPageDigitoegankelijk_Qdigitoegankelijk_C] + label:hover, input[name=_QPageDigitoegankelijk_Qdigitoegankelijk_C]:checked + label {
background-image:url(''); margin-left:5px;}


/* afbeeldingen in het label van een antwoordcategorie clickable maken */
INPUT ~ LABEL IMG
{pointer-events: none;}


/* ============================================================= */
/* wijzingen a.g.v. de lettergrootte-toevoeging */
TABLE.weergavebalk
{position:fixed;top:0px;width:100%;height:36px;z-index:30;}
TABLE.weergavebalk TABLE
{float:right;height:36px;}
TABLE.fontgrootte TD
{color:#FFFFFF;font-family:Roboto;}
TABLE.fontgrootte SPAN
{cursor:pointer;}
TABLE.weergavebalk TABLE.csscolours DIV
{background-image:url('https://www.iodc.nl/interviewunit_files/mrInterview/css-colour_contrast.png');margin:2px;float:left;}
DIV.mrTheader
{border-top-width:36px; border-top-style: solid;}
DIV.mrTqcontainer TABLE.header
{margin-top:36px;}
/* ============================================================= */
/* ============================================================= */


/* ============================================================= */
/* wijzingen a.g.v. de keuze voor logo links of rechts */
TD.logo_links
{text-align:left;}
TD.logo_rechts
{text-align:right;}
TD.logo_links, TD.logo_rechts
{width:270px;padding-left:32px;padding-right:32px;}
TD.titelbanner
{padding-left:64px;}
/* ============================================================= */
/* ============================================================= */


/* ---- Lining Up Wrapped Response Texts Control ---- */
/*span.mrQuestionTable span{ position:relative; }
span.mrQuestionTable span input.mrMultiple{ display:block; position:absolute; vertical-align:top; }
span.mrQuestionTable span input.mrSingle{display:block; position:absolute; vertical-align:top; }
span.mrQuestionTable span.mrSingleText{display:inline-table; vertical-align:top; max-width:90%; }
span.mrQuestionTable span.mrMultipleText{display:inline-block; vertical-align:top; max-width:90%; }
input[type=text] {margin-left:4em; }*/