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

/* Hieronder moet nog éénmalig kleur 1 uit de standaard.css worden ingesteld, om te zorgen dat het bovenste 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
{display:none; }


/* 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:none; }


/* 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; }





/* ============================================================= */
/* 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:10px; 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.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; }

.mrEdit
{font-size:12px; overflow-y:auto; 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; border-left:2px solid #D95B4D; padding:0px; padding-left:10px; font-size:20px; color:#D95B4D; 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 
{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;}
DIV.def
{display:none; padding:5px; font-weight:normal; position:absolute; width:300px; z-index:20; }


/*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; }
.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%; }
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%; }

/* 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'); }

/* 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'); }





/* ---- 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; }*/