html { -webkit-text-size-adjust: none; }

.questionnaire .script { cursor: pointer; }

.questionnaire h2 { font-size: 110%; font-weight: bold; line-height: 2em; }

.questionnaire p, 
.questionnaire h2, 
.questionnaire .buttonlist, 
.questionnaire .buttontable, 
.questionnaire table.buttons, 
.questionnaire .progressbar,
.questionnaire .media,
.questionnaire .WordPickQuestionInput { margin-bottom: 1.2em; }
.questionnaire ul.bulletlist li { list-style: disc outside; margin-left: 1em; }

.questionnaire sup { vertical-align: super; }
.questionnaire sub { vertical-align: sub; }




.questionnaire hr 
{ 
    margin: 3em -1em; border-style: none; height: 2px;
    background: url('img/hr-dash.png') repeat center center;
}

.questionnaire .floatbox { white-space: nowrap; }
.questionnaire .textbox, 
.questionnaire .numericbox, 
.questionnaire input[type=text], 
.questionnaire textarea, 
.questionnaire .date-input2 select,
.questionnaire .field .dropdown .value { line-height: 1.4em; padding: 0.2em 0.4em; border: solid 1px #bbb; box-shadow: none; vertical-align: baseline; border-radius: unset; height: unset; }

.questionnaire .date-input2 select { margin-right: 0.3em; }
.questionnaire .placeholder { color: #bbb; }

.questionnaire .question-input .textbox.selected, 
.questionnaire .question-input .numericbox.selected, 
.questionnaire .question-input .floatbox.selected input, 
.questionnaire .question-input .integerbox.selected input,
.questionnaire .question-input .datebox.selected input { color: #000; }

.questionnaire .question-input .textbox, 
.questionnaire .question-input .numericbox, 
.questionnaire .question-input .floatbox input, 
.questionnaire .question-input .integerbox input, 
.questionnaire .floatbox.selected input[readonly], 
.questionnaire .question-input .datebox input { color: #bbb; } 
.questionnaire textarea.textbox { vertical-align: middle; }


/* hide number spinners */
.questionnaire input[type=number] { -moz-appearance:textfield; }
.questionnaire input[type=number]::-webkit-outer-spin-button,
.questionnaire input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.questionnaire .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* disable selection */
.questionnaire .no-select-text 
{ 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

/* buttons */
.questionnaire table.buttons { width: 100%; }
.questionnaire table.buttons.double-set td:first-child { width: 200px; }
.questionnaire table.buttons.double-set td:last-child { width: calc(100% - 130px); }
.questionnaire table.buttons.double-set td:first-child { padding-right: 0.2em; }
.questionnaire table.buttons.double-set td:first-child .button,
.questionnaire table.buttons.double-set td:first-child button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.questionnaire table.buttons.double-set td:last-child { padding-left: 0.2em; }
.questionnaire table.buttons.double-set td:last-child .button,
.questionnaire table.buttons.double-set td:last-child button { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.questionnaire button, .questionnaire .btn-up
{
	position: relative;
    background: #fafafa;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) repeat scroll 0 0 #f1f1f1;
    border: 2px solid #cccccc;
    font-weight: normal; 
    box-sizing: border-box;
}


.questionnaire .CheckListInput li:has(input:focus),
.questionnaire li.btn-up:has(input[type="checkbox"]:focus),
.questionnaire li.btn-up:has(input[type="radio"]:focus),
.questionnaire li.btn-up:has(input[type="range"]:focus),
.questionnaire li.btn-ranking:has(button:focus)
{ border: solid 2px #000 !important; z-index: 999; }

.questionnaire td.btn-up { position: relative; }
@-moz-document url-prefix() { .questionnaire td.btn-up { height: 100%; } }

.questionnaire td.btn-up:has(input[type="checkbox"]:focus)::before,
.questionnaire td.btn-up:has(input[type="range"]:focus)::before,
.questionnaire td.btn-dropdown:has(button:focus)::before
{ 
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	width: 100%;
	height: 100%;
	border: solid 2px #000 !important; 
	z-index: 999;
	pointer-events: none;
}



.questionnaire .btn-up.separator { border-style: none; background: transparent; }



.questionnaire button { border-style: none; }

.questionnaire button, .questionnaire .button
{ 
	color: #fff; 
	background: #a9c215; 
	background: linear-gradient(#a9c215, #a2ba11) repeat scroll 0 0 #a9c215; 
	text-shadow: 0 0 0.1em #6f8209; 
	
    box-sizing: border-box;
    margin: 5px 0px; padding: 0.4em 10px; border-radius: 1.5em; display: block; 
    width: 100%; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-decoration: none; text-align: center;
    font-weight: bold;
}


/* lock page to hide DOM creation */
.questionnaire .locked::after, 
.questionnaire .redirecting::after { content: ""; top: 0; left: 0; width: 100%; height: 100%; position: fixed; display: block; z-index: 100; background-color: #fff; background-repeat: no-repeat; background-position: center center; }


/* green buttons, titles, etc... */
.questionnaire .btn-accent .btn-inner { display: block; }
.questionnaire .btn-accent, 
.questionnaire .btn-collapsible:has(input:checked)
{
    padding: 0;     
    background: #a9c215; 
    background: linear-gradient(#a9c215, #a2ba11) repeat scroll 0 0 #a9c215; 
    text-shadow: 0 0 0.1em #6f8209; color: #fff;  
}
.questionnaire .btn-collapsible.validation-invalid:has(input:checked)
{
	background: #800 !important;
}
 

.questionnaire button.btn-up { padding: 0; }
.questionnaire button .btn-inner, 
.questionnaire .button .btn-inner { padding: 0.4em 10px; font-weight: bold; }

.questionnaire .btn-inner { display: block; padding: 0.6em 0.8em; line-height: 1.5em; }


.questionnaire .buttontable > thead > tr > th .btn-inner, 
.questionnaire .buttontable > tbody > tr > td .btn-inner { display: flex; gap: 8px; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; }
.questionnaire .buttontable > tbody > tr > th .btn-inner,
.questionnaire .buttontable > tbody > tr > td.btn-dropdown .btn-inner { justify-content: start; }


.questionnaire .buttontable > tbody > tr > td.btn-radio > .btn-inner,
.questionnaire .buttontable > tbody > tr > td.btn-dropdown > .btn-inner,
.questionnaire .buttontable > tbody > tr > td.btn-checkbox > .btn-inner { cursor: pointer; } 


.questionnaire .label { cursor: pointer; }
.questionnaire .corner-all { border-radius: 0.6em; }

/* buttontable */
.questionnaire .buttontable { border-collapse: collapse; font-size: 85%; height: 1px; }
.questionnaire .buttontable > thead > tr > th { text-align: center; vertical-align: bottom; }
.questionnaire .buttontable thead { position: sticky; top: 0; z-index: 1; }
.questionnaire .label-left { text-align: right; }
.questionnaire .label-right { text-align: left; }
html[dir=rtl] .questionnaire .label-left { text-align: left; }
html[dir=rtl] .questionnaire .label-right { text-align: right; }

.questionnaire .buttontable .btn-checkbox, 
.questionnaire .buttontable .btn-radio { text-align: center; }


/* buttonlist */
.questionnaire .buttonlist { font-size: 85%; }
.questionnaire .buttontable .buttonlist, 
.questionnaire .buttonlist .buttonlist { font-size: 100%; }
.questionnaire .buttonlist .btn-none { padding: 0; padding-bottom: 0.6em; font-weight: 700; vertical-align: middle; }
.questionnaire .buttonlist .btn-up { max-width: 800px; margin-top: -2px; cursor: pointer; }
.questionnaire .buttonlist .head.title { font-size: 115%; font-weight: bold; background: Transparent; border-style: none; }
.questionnaire .buttonlist .head.title .btn-inner { padding: 0.2em 0em; }

.questionnaire .btn-up .textbox { max-width: 100%; }


.questionnaire .btn-checkbox:has(input:checked),
.questionnaire .btn-radio:has(input:checked), 
.questionnaire .btn-box:has(input:checked), 
.questionnaire .btn-dropdown:has(input:checked),
.questionnaire .btn-ranking.selected-true
{
    background-color: #dbec7c;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));    
}

.questionnaire .btn-dropdown .selectedText { display: none; }
.questionnaire .btn-dropdown:has(input:checked) .placeholder { display: none; }
.questionnaire .btn-dropdown:has(input:checked) .selectedText { display: unset; }



/* radio, checkbox */

.questionnaire .btn-checkbox input[type=checkbox], 
.questionnaire .btn-radio input[type=checkbox], 
.questionnaire .btn-radio input[type=radio] { position: absolute; width: 1.3em; height: 1.3em; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
.questionnaire .buttonlist .btn-radio .btn-inner, 
.questionnaire .buttonlist .btn-checkbox .btn-inner, 
.questionnaire .buttonlist .btn-dropdown .btn-inner { position: relative; cursor: pointer; }

.questionnaire .buttonlist .btn-dropdown { text-align: left; }
html[dir=rtl] .questionnaire .buttonlist .btn-dropdown { text-align: left; }

.questionnaire .buttonlist .btn-checkbox .btn-inner, 
.questionnaire .buttonlist .btn-radio .btn-inner { display: block; padding-left: 2.6em; }
html[dir=rtl] .questionnaire .buttonlist .btn-checkbox .btn-inner, 
html[dir=rtl] .questionnaire .buttonlist .btn-radio .btn-inner { padding-left: 0.6em; padding-right: 2.6em; }

/*.questionnaire .buttonlist .btn-checkbox label::before, 
.questionnaire .buttonlist .btn-radio label::before { position: absolute; margin-top: -0.6em; }*/
.questionnaire .buttonlist .btn-checkbox .btn-inner::before, 
.questionnaire .buttonlist .btn-radio .btn-inner::before { margin-left: -1.9em;  }
html[dir=rtl] .questionnaire .buttonlist .btn-checkbox .btn-inner::before, 
html[dir=rtl] .questionnaire .buttonlist .btn-radio .btn-inner::before { margin-right: -1.9em; margin-left: 0em; }

.questionnaire .btn-checkbox .btn-inner::before, 
.questionnaire .btn-radio .btn-inner::before
{ 
	opacity: 0.3;
    content: "";
    display: block; width: 1.2em; height: 1.2em; line-height: 1.2em;
	position: absolute; 
	margin-top: -0.6em; 
	top: 50%;
    border-radius: 0.2em; 
    vertical-align: middle;
    background-color: #ccc; 
    background-color: rgba(0, 0, 0, 0.3); 
    background-repeat: no-repeat; 
    background-position: center center; 
}

.questionnaire .buttontable .btn-checkbox .btn-inner::before, 
.questionnaire .buttontable .btn-radio .btn-inner::before { left: 50%; margin-left: -0.6em; }

.questionnaire .btn-radio .btn-inner::before { border-radius: 0.6em; }

.questionnaire .btn-checkbox:has(input:checked) .btn-inner::before,
.questionnaire .btn-radio:has(input:checked) .btn-inner::before { opacity: 1.0; }

.questionnaire .btn-checkbox:has(input:checked) .btn-inner::before { background-color: #90a70e; border-color: #90a70e; background-size: 0.9em auto; background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20style%3D%22enable-background%3Anew%200%200%2014%2012%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%205.003%2C5.997%203%2C4%200%2C7%204.966%2C12%204.983%2C11.983%205%2C12%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); }
.questionnaire .btn-radio:has(input:checked) .btn-inner::before { height: 0.6em; width: 0.6em; border: solid 0.3em #90a70e; background-color: #fff; }

/* ranking */
.questionnaire .ranking-click > .buttonlist { position: relative; transition-property: height; transition-duration: 1.0s; }
.questionnaire .ranking-click > .buttonlist > li { position: absolute; left: 0; width: 100%; transition-property: top; transition-duration: 1.0s; }

.questionnaire .ranking-click > .reset { margin-bottom: 16px; }

.questionnaire .btn-ranking > .btn-inner { padding-left: 64px; }
.questionnaire .btn-ranking > .btn-inner::before { content: ''; position: absolute; display: inline-block; height: 100%; width: 56px; left: 0; top: 0; background: transparent url(./img/ranking-number-background.svg) no-repeat center center; }

.questionnaire .btn-ranking .ranking-number { position: absolute; left: 0; top: 50%; width: 56px; height: 32px; line-height: 32px; margin-top: -16px; }
.questionnaire .btn-ranking .ranking-number > button { position: absolute; opacity: 0; }
.questionnaire .btn-ranking .ranking-number .text { text-align: center; color: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; font-weight: bold; font-size: 120%; }
.questionnaire .btn-ranking.selected-true .ranking-number .text { color: #55493c; }


.questionnaire .ranking-click .popup-ranking-options .popupstyle .close,
.questionnaire dialog h2 { line-height: normal; }
.questionnaire dialog .close 
{ 
	border-style: none; 
	border-radius: 0;
	box-shadow: none;
	width: 32px; height: 32px; 
	float: right; 
	margin-left: 4px; 
	margin-top: -4px;
	margin-right: -4px;
	background: transparent url('./img/ic_action_remove.png') no-repeat center center; 
	background-size: 28px auto; 
	cursor: pointer; 
}





/* btn-box */

.questionnaire .buttonlist .btn-box 
{ 
    display: inline-block; margin-right: 0.5em; margin-bottom: 0.5em; vertical-align: top; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.questionnaire .buttonlist .btn-box.selected-true { border: solid 1px #000; box-shadow: 0 0 2em rgba(0, 0, 0, 1); }
.questionnaire .buttonlist .btn-box .btn-inner { padding: 0.7em; }
.questionnaire .buttonlist .btn-box .btn-inner::before { content: none; display: none; }
.questionnaire .buttonlist .btn-box .image-tag { margin: 0; }
.questionnaire .buttonlist .motivation-head { margin-right: 0.5em; }

/* slider */

.questionnaire .slider { outline: none; touch-action: none; display: block; position: relative; }
.questionnaire .slider .handle { position: absolute; }
.questionnaire .slider input[type="range"] { position: absolute; opacity: 0.0; z-index: -1;}
.questionnaire .slider .bar, .slider .left, .slider .right { display: none; }

/* grade slider */

.questionnaire .grade-slider .slider { margin: 0.5em 0.75em; margin-top: 1em; }
.questionnaire .grade-slider .slider .handle { color: #fff; background-color: #a9c215; width: 2.3em; height: 1.5em; margin-left: -1.15em; margin-top: -0.75em; border-radius: 0.8em; border: solid 1px #888; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.questionnaire .grade-slider .slider .left, .questionnaire .grade-slider .slider .right { visibility: hidden; }
.questionnaire .grade-escape { width: 6em; }
.questionnaire .buttonlist .grade-head { display: none; }


/* contrast slider */
.questionnaire .contrast-slider .label-left { display: none; }
.questionnaire .contrast-slider .slider { height: 30px; margin: 0 0.75em; margin-top: 0.3em;  }
.questionnaire .contrast-slider .slider .bar 
{ 
    height: 10px; display: block; 
    position: absolute; top: 9px;
	background-color: transparent; 
    background-image: linear-gradient(to right, #a9c215 0%, #f1f5d9 50%, #a9c215 100%);
    background-image: -webkit-linear-gradient(left, #a9c215 0%, #f1f5d9 50%, #a9c215 100%); 
	background-image: -webkit-gradient(linear, left center, right center, from(#a9c215), color-stop(50%, #f1f5d9), to(#a9c215));
}
.questionnaire .contrast-slider canvas { position: absolute; z-index: 1; }

.questionnaire .contrast-slider .handle, 
.questionnaire .contrast-slider .stop { display: none; position: absolute; }

.questionnaire .contrast-slider .handle span { display: none; }

.questionnaire .contrast-slider .stop,
.questionnaire .contrast-slider .handle 
{ 
	z-index: 1; 
	background-color: #fff;
	border-radius: 6px; 
	
	border: solid 2px #6f8209;
	margin-left: -13px; width: 24px; 
    margin-top: -12px; height: 20px;
}

.questionnaire .contrast-slider .handle 
{ 
	z-index: 2;
	border-color: #55493c;
	background-color: #55493c;
}

.questionnaire .contrast-slider .slider:has(input:focus) .handle, 
.questionnaire .contrast-slider .slider:has(input:focus) .stop,
.questionnaire .contrast-slider .slider.dragging .stop
{ 
    display: block; 
}

.questionnaire .range-text {
    width: 100%;
}
.questionnaire .range-text .split-answer-text { font-weight: bold; }
.questionnaire .range-text td { vertical-align: bottom; }
.questionnaire .range-text .left { padding-right: 0.5em; background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAiIHdpZHRoPSIxNSI+PHBvbHlnb24gcG9pbnRzPSIxNSwwIDE1LDEwIDAsNSIgc3R5bGU9ImZpbGw6IzU2NDkzYzsiIC8+PC9zdmc+") no-repeat bottom 0.4em left; background-size: 1em 0.7em; padding-left: 1.5em; text-align: left; }
.questionnaire .range-text .right { padding-left: 0.5em; background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAiIHdpZHRoPSIxNSI+PHBvbHlnb24gcG9pbnRzPSIwLDAgMTUsNSAwLDEwIiBzdHlsZT0iZmlsbDojNTY0OTNjOyIgLz48L3N2Zz4=") no-repeat bottom 0.4em right; background-size: 1em 0.7em; padding-right: 1.5em; text-align: right;  }

/* afbeelding: .range-text .right
<svg xmlns="http://www.w3.org/2000/svg" height="10" width="15"><polygon points="0,0 15,5 0,10" style="fill:#56493c;" /></svg> 
*/

/* afbeelding: .range-text .left
<svg xmlns="http://www.w3.org/2000/svg" height="10" width="15"><polygon points="15,0 15,10 0,5" style="fill:#56493c;" /></svg> 
*/

    
.questionnaire .contrast-slider .focus .stop { display: block; }
.questionnaire .buttontable .sliderbox { width: 30em; }
.questionnaire .buttonlist .sliderbox { width: 100%; }

/* collapsible */

.questionnaire .btn-collapsible { position: relative; }
.questionnaire .btn-collapsible input[type="checkbox"] { position: absolute; opacity: 0; }
.questionnaire .btn-collapsible .btn-inner { line-height: 1.5em; border-radius: inherit; }

.questionnaire .btn-collapsible .btn-inner { padding-left: 2.75em; }
html[dir=rtl] .questionnaire .btn-collapsible .btn-inner { padding-right: 2.75em; padding-left: 0.6em; }

.questionnaire .btn-collapsible .btn-inner::before { position: absolute; top: 50%; margin-top: -0.65em; content: ""; display: inline-block; width: 1.3em; height: 1.3em; line-height: 1.3em; vertical-align: middle; background-color: #ccc; background-color: rgba(0, 0, 0, 0.3); background-repeat: no-repeat; background-position: center center; border-radius: 0.8em; }
.questionnaire .btn-collapsible .btn-inner::before { margin-left: -2em; margin-right: 0.7em; }
html[dir=rtl] .questionnaire .btn-collapsible .btn-inner::before { margin-left: 0.7em; margin-right: -2em; }

.questionnaire .btn-collapsible .btn-inner::before { background-size: 0.9em auto; background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C5%209%2C5%209%2C0%205%2C0%205%2C5%200%2C5%200%2C9%205%2C9%205%2C14%209%2C14%209%2C9%2014%2C9%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

.questionnaire .btn-collapsible:has(input:checked) .btn-inner::before { background-size: 0.9em auto; background-color: #6f8209; background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%224px%22%20viewBox%3D%220%200%2014%204%22%20style%3D%22enable-background%3Anew%200%200%2014%204%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Crect%20fill%3D%22%23FFF%22%20width%3D%2214%22%20height%3D%224%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.questionnaire .btn-collapsible.validation-invalid:has(input:checked) .btn-inner::before { background-size: 0.9em auto; background-color: #000; background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%224px%22%20viewBox%3D%220%200%2014%204%22%20style%3D%22enable-background%3Anew%200%200%2014%204%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Crect%20fill%3D%22%23FFF%22%20width%3D%2214%22%20height%3D%224%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

.questionnaire .btn-collapsible { display: block; text-decoration: none; }
.questionnaire .buttonlist > .child-content { margin: 0 1.5em; margin-bottom: 1em; max-width: 760px; }
.questionnaire .buttonlist > .collapsible-content { display: none; }

/* dropdown */

.questionnaire .buttonlist .dropdown { padding-right: 1.5em; }
.questionnaire .dropdown .expandButton { position: absolute; opacity: 0; }
.questionnaire .dropdown { min-width: 10em; outline: none; box-sizing: border-box; padding-right: 2em; }
.questionnaire .dropdown .buttonlist { margin-bottom: 0; margin-top: 3em; }
.questionnaire .dropdown .buttonlist .btn-up { text-align: left; }
.questionnaire .dropdown .buttonlist .btn-inner { align-items: flex-start; }
.questionnaire .dropdown .buttonlist .btn-inner::before { left: unset; margin-left: -1.9em; }
.questionnaire .dropdown .placeholder { display: block; color: #bbb; position: relative; padding-right: 2em; }
.questionnaire .dropdown dialog { width: 20em; }


.questionnaire .dropdown::after
{
    content: '';
    display: block; width: 1.3em; height: 1.3em; line-height: 1.3em;
    margin-top: -0.65em; position: absolute; top: 50%; right: 0.5em;
    border-radius: 0.2em; 
    vertical-align: middle;
    background-color: #ccc; 
    background-color: rgba(0, 0, 0, 0.3); 
    background-repeat: no-repeat; 
    background-position: center center; 
	background-size: 0.9em auto; 
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E"); 
    border-radius: 0.8em; 
}


/* response-output */
.questionnaire .response-output .text
{ 
    display: none;
    font-size: 75%; line-height: 1.3;  
    padding: 0.1em 0.5em; margin: 0.1em 0; border-radius: 0.8em; 
    color: #4c5903; background-color: #dbec7c;
    box-shadow: 0 0 2px #a9c215;
    vertical-align: middle;
}

.questionnaire .response-output { display: none; }
html[dir=rtl] .questionnaire .response-output { text-align: left; }
.questionnaire .btn-collapsible:not(:has(input:checked)) .response-output { display: block; }

/* question */
.questionnaire .intro-text, 
.questionnaire .survey-intro-text, 
.questionnaire .asker-text, 
.questionnaire .question-text { line-height: 1.35em; }

.questionnaire .asker-text 
{ 
    display: inline-block; 
    padding-left: 3.5em; padding-top: 0.8em;
    box-sizing: border-box; min-height: 4em;
    font-style: italic; 
    background: white url(./img/callcenter.png) no-repeat top left;
    background-size: 4em auto;
}

.questionnaire .question-text { font-weight: bold; }
.questionnaire .status 
{
    color: #c00;
    display: none;
    padding: 0.6em 20px;
    border: solid 1px #d9aeae;
    font-weight: bold;
    margin: 0.5em 0px;
    
    background: #f1d9d9;
    background-image: linear-gradient(#f6e6e6,#f1d9d9);
}

.questionnaire .output.invalid > .status { display: block; }

.questionnaire .btn-up.validation-invalid
{ 
    background-color: #f1d9d9 !important;
    background-image: linear-gradient(#f6e6e6,#f1d9d9) !important;
}


/* tags */
.questionnaire .image-tag, 
.questionnaire .video-tag { display: inline-block; margin-right: 10px; margin-bottom: 10px; width: 100%; max-width: 100%; }

.questionnaire .image-tag { position: relative; }
.questionnaire .image-tag img { pointer-events: none; }
.questionnaire .image-tag img, 
.questionnaire .video-tag iframe { display: block; max-width: 100%; }

.questionnaire .image-tag .caption, 
.questionnaire .video-tag .caption { display: block; font-weight: bold; }

.questionnaire .image-tag-inner { display: inline-block; position: relative; }
.questionnaire .image-tag-inner > img { vertical-align: middle; }

.questionnaire .zoomDialog,
.questionnaire .zoomDialog { width: 100%; height: 100%; max-width: unset; max-height: unset; }

.questionnaire .image-tag button.zoom,
.questionnaire .zoomDialog button.close
{ 
	position: absolute; width: 56px; height: 56px; bottom: 0; right: 0; min-width: unset; min-height: unset; margin: 0; padding: 0; border-radius: 0; 
	background: transparent url('img/zoom.png') no-repeat center center; background-size: 100% auto; box-shadow: none;
}

.questionnaire .zoomDialog button.close 
{  
	position: fixed;
	bottom: unset; right: 8px; top: 8px;
	background-image: url('img/ic_action_remove.png');
	background-size: 100% auto;
}


.questionnaire .image-tag .pendingOverlay, 
.questionnaire .image-tag .hiddenOverlay 
{ 
	z-index: 999; 
	display: none; align-items: center; 
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; 
	background: #ddd; font-weight: bold; text-align: center; 
	border-radius: unset; box-sizing: border-box; padding: 1em; 
	box-shadow: none; text-shadow: none; color: inherit;
	margin: 0;
}

.questionnaire .image-tag.image-tag-hidden .hiddenOverlay,
.questionnaire .image-tag.image-tag-pending .pendingOverlay { display: flex; }



.questionnaire .vimeo-video { position: relative; max-width: 100%; max-height: 100%; }
.questionnaire .vimeo-video iframe, .questionnaire .vimeo-video .glass { width: 100%; height: 100%; }
.questionnaire .vimeo-video .glass { display: none; position: absolute; left: 0; top: 0; z-index: 10; }
.questionnaire .vimeo-video.nocontrols .glass { display: block; outline: none; }
.questionnaire .vimeo-video .play 
{
    position: absolute; left: 50%; top: 50%; width: 80px; height: 56px; margin-left: -40px; margin-top: -28px; border-radius: 8px; cursor: pointer; 
    background: #a9c215 url("./img/right-white.png") no-repeat center center; background-size: 24px;
}

.questionnaire .vimeo-video.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10; box-sizing: border-box; padding: 16px; }
.questionnaire .vimeo-video.modal iframe { position: absolute; left: 50%; top: 50%; }


.questionnaire .slideshow-tag { max-width: 100%; margin: 0 35px; }
.questionnaire .slideshow-tag .client { position: relative; cursor: pointer; }
.questionnaire .slideshow-tag img 
{ 
	position: absolute; 
	max-width: 100%; 
	top: 0; left: 0; 
	opacity: 0; visibility: hidden; 
	transition-property: visibility opacity left; 
	transition-duration: 0.5s; 
}
.questionnaire .slideshow-tag .nextbutton
{ 
	position: absolute; 
	top: 50%; right: 0; margin-right: -35px; margin-top: -15px; 
	width: 30px; height: 30px; 
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2250.282223mm%22%20width%3D%2250.282223mm%22%3E%20%3Cg%20transform%3D%22translate(-495.56301,-467.21651)%22%3E%20%3Ccircle%20r%3D%2288.58268%22%20cy%3D%22556.29919%22%20cx%3D%22584.64569%22%20style%3D%22opacity%3A1%3Bfill%3A%23000000%3Bfill-opacity%3A1%3Bstroke%3Anone%3Bstroke-width%3A1%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20%2F%3E%20%3Cpath%20d%3D%22m%20531.49606,574.01575%200,-35.43307%2053.14961,0%200,-35.43307%2053.14961,53.1496%20-53.14961,53.14961%200,-35.43307%20z%22%20style%3D%22fill%3A%23ffffff%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%20%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E%20'); 
	background-size: auto 100%; 
}
.questionnaire .slideshow-tag .prevbutton 
{ 
	position: absolute; 
	top: 50%; left: 0; margin-left: -35px; margin-top: -15px; 
	width: 30px; height: 30px; 
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2250.282223mm%22%20width%3D%2250.282223mm%22%3E%20%3Cg%20transform%3D%22translate(-495.56301,-467.21651)%22%3E%20%3Ccircle%20transform%3D%22scale(-1,1)%22%20r%3D%2288.58268%22%20cy%3D%22556.29919%22%20cx%3D%22-584.64569%22%20style%3D%22opacity%3A1%3Bfill%3A%23000000%3Bfill-opacity%3A1%3Bstroke%3Anone%3Bstroke-width%3A1%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20%2F%3E%20%3Cpath%20d%3D%22m%20637.79532,574.01575%200,-35.43307%20-53.14961,0%200,-35.43307%20-53.14961,53.1496%2053.14961,53.14961%200,-35.43307%20z%22%20style%3D%22fill%3A%23ffffff%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%20%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E%20'); 
	background-size: auto 100%;
}
.questionnaire .slideshow-tag img.previous { left: -100%; }
.questionnaire .slideshow-tag img.current { opacity: 1; visibility: visible; }
.questionnaire .slideshow-tag img.upcoming { left: 100%; }


/* form */
.questionnaire .form .field.invalid .status, 
.questionnaire .form .output.invalid .status { display: block; }
.questionnaire .form .field, 
.questionnaire .form .checkfield { margin-bottom: 1em; }
.questionnaire .form .field > *, 
.questionnaire .form .checkfield > * { vertical-align: middle; }
.questionnaire .form .field > label { display: inline-block; font-size: 100%; width: 12em; }
.questionnaire .form .checkfield input { margin-right: 5px; }

@media (max-width: 550px) { .questionnaire .form .field > label { display: block; } }

.questionnaire .form .field.required > label { font-weight: bold; color: inherit; }

.questionnaire .field .dropdown { display: inline-block; }
.questionnaire .field .dropdown .value { position: relative; width: 100%; padding-right: 2em !important; box-sizing: border-box; background: #fff; }
.questionnaire .field .dropdown .value::after { content: ''; position: absolute; display: block; width: 1.5em; height: 28px; right: 0; top: 0; background: transparent url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2210mm%22%20width%3D%2220mm%22%3E%3Cg%20transform%3D%22translate(-106.29921,-450)%22%3E%3Cpath%20id%3D%22path4138%22%20d%3D%22m%20106.29921,450%2070.86614,0%20-35.43307,35.43307%20L%20106.29921,450%22%20style%3D%22fill%3A%23444444%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center; background-size: 0.7em auto; }

.questionnaire .field .dropdown .popupstyle { display: none; position: absolute; left: 0; top: 0; margin-top: 28px; border: solid 1px #ccc; background-color: #fff; color: #000; }
.questionnaire .field .dropdown .popupstyle li span { padding: 0.5em; display: block; } 
.questionnaire .field .dropdown .popupstyle li.selected { background-color: #ccc; }
.questionnaire .field .dropdown .popupstyle.expanded { display: block; }


/* login-usercode-form */

.questionnaire .login-form .login-usercode-form .field > label { display: block; width: unset; margin-bottom: 1.2em; }


/* progressbar */


.questionnaire .progressbar { font-size: 85%; height: 0.5em; padding-left: 1em; padding-right: 1.8em; border-radius: 0.3em; border: solid 1px #ddd; }
.questionnaire .progressbar progress { position: absolute; opacity: 0.0; width: 1px; height: 1px; }
.questionnaire .progressbar .part { position: relative; background-color: #a9c215; height: 100%; margin-left: -1em; border-top-left-radius: 0.3em; border-bottom-left-radius: 0.3em; }
.questionnaire .progressbar .handle 
{ 
    position: absolute; right: 0;
    height: 1.5em; width: 3em; 
    margin-top: -0.6em; margin-right: -3em; 
    background-color: #fff; border: solid 1px #ccc; border-radius: 0.8em; 
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    line-height: 1.5em; text-align: center;
}

.questionnaire .progressbar.ratio { padding-right: 6.8em; }
.questionnaire .progressbar.ratio .handle { width: 8em; margin-right: -8em;  }



/* image-page */

.image-page img.file { max-width: 100%; }
.image-page img.close { position: fixed; width: 8%; top: 8px; right: 8px; cursor: pointer; }

/* language-selection */

.questionnaire .language-selection button .btn-inner { background: url(./img/ic_action_done.png) no-repeat center center; background-size: 2.4em 2.4em; }
.questionnaire .language-list > .icon > .btn-inner > .text { padding-left: 2.5em; background-size: 2em auto; background-position: center left; background-repeat: no-repeat; }

.questionnaire .language-list .country-nl-NL > .btn-inner > .text { background-image: url('./img/flag/Netherlands.png'); }
.questionnaire .language-list .country-en-US > .btn-inner > .text { background-image: url('./img/flag/United_Kingdom.png'); }
.questionnaire .language-list .country-fr-FR > .btn-inner > .text { background-image: url('./img/flag/France.png'); }
.questionnaire .language-list .country-de-DE > .btn-inner > .text { background-image: url('./img/flag/Germany.png'); }
.questionnaire .language-list .country-es-ES > .btn-inner > .text { background-image: url('./img/flag/Spain.png'); }
.questionnaire .language-list .country-it-IT > .btn-inner > .text { background-image: url('./img/flag/Italy.png'); }
.questionnaire .language-list .country-fi-FI > .btn-inner > .text { background-image: url('./img/flag/Finland.png'); }
.questionnaire .language-list .country-nn-NO > .btn-inner > .text { background-image: url('./img/flag/Norway.png'); }
.questionnaire .language-list .country-sv-SE > .btn-inner > .text { background-image: url('./img/flag/Sweden.png'); }
.questionnaire .language-list .country-pt-PT > .btn-inner > .text { background-image: url('./img/flag/Portugal.png'); }
.questionnaire .language-list .country-zh-CN > .btn-inner > .text { background-image: url('./img/flag/China.png'); }
.questionnaire .language-list .country-ru-RU > .btn-inner > .text { background-image: url('./img/flag/Russian_Federation.png'); }
.questionnaire .language-list .country-tr-TR > .btn-inner > .text { background-image: url('./img/flag/Turkey.png'); }
.questionnaire .language-list .country-pl-PL > .btn-inner > .text { background-image: url('./img/flag/Poland.png'); }


/* nonresponse */

.questionnaire .field .name, 
.questionnaire .field .email { width: 17em; }

.questionnaire .nonresponse-form button { display: inline-block; margin-right: 0.5em; }
.questionnaire .nonresponse-form .field.notes > label { width: auto; }
.questionnaire .nonresponse-form .notes { display: block; width: 800px; }
.questionnaire .nonresponse-form .clienttime .fieldlabel { width: 7em; display: inline-block; }
.questionnaire .nonresponse-email .fieldlabel { width: 15em; display: inline-block; }
.questionnaire .nonresponse-notes textarea { display: block; width: 725px; }
.questionnaire .nonresponse-form .output.invalid .form .status { display: none; }

.questionnaire .radiolist.singleline, 
.questionnaire .radiolist.singleline li { display: inline-block; }
.questionnaire .radiolist.singleline input { margin-right: 0.2em; }
.questionnaire .radiolist.singleline * { vertical-align: middle; }
.questionnaire .radiolist.singleline li { margin-right: 1em; }

.questionnaire .date-input { max-width: 7em; }
.questionnaire .time-input { max-width: 4em; }
.questionnaire .clienttime-input { max-width: 5em; }

.questionnaire .respondent-info { padding: 0.5em; margin-bottom: 1.5em; padding-bottom: 0; display: inline-block; font-size: 90%; }
.questionnaire .respondent-info textarea { width: 500px; height: 4.6em; max-width: 100%; }
.questionnaire .respondent-info .field { margin-bottom: 0.5em; }
.questionnaire .respondent-info-question .name, 
.questionnaire .respondent-info-question .company_name,
.questionnaire .respondent-info-question .notes { display: none; }

.questionnaire .respondent-info.gender_id-1, 
.questionnaire .respondent-info.gender_id-2 { padding-left: 6.5em; position: relative; }
.questionnaire .respondent-info.gender_id-1::before { content: ''; display: block; position: absolute; left: 0.5em; width: 5em; height: 5em; background: transparent url(./img/respondent-male.png) no-repeat center center; background-size: 100% auto; }
.questionnaire .respondent-info.gender_id-2::before { content: ''; display: block; position: absolute; left: 0.5em; width: 5em; height: 5em; background: transparent url(./img/respondent-female.png) no-repeat center center; background-size: 100% auto; }

/* edit openinput */
.questionnaire .edit-openinput-form .answer, 
.questionnaire .edit-openinput-form .aspect, 
.questionnaire .edit-openinput-form .question { margin-bottom: 1.2em; }
.questionnaire .edit-openinput-form textarea { width: 600px; height: 4.2em; }
.questionnaire .edit-openinput-form .field { margin-bottom: 0.2em; font-size: 90%; line-height: 1.4em; }
.questionnaire .edit-openinput-form .field > label { width: 6em; }


/* info tag */

.questionnaire .info-tag 
{
	position: relative;
    font-size: 11.5pt;
    font-weight: normal;
    display: inline-block;
    padding-top: 0.05em;
    width: 1.2em; height: 1.15em; border-radius: 0.8em; 
    background: #a9c215 url(./img/question-mark-white.png) no-repeat center center;
    background-size: auto 0.9em;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: solid 0.2em #fff;
    vertical-align: -20%;
}

.questionnaire .info-tag .infoButton { position: absolute; opacity: 0; cursor: pointer; }
.questionnaire .info-tag:has(button:focus)::before 
{ 
	content: '';
	z-index: 999;
	display: inline-block;
	position: absolute; left: calc(-0.2em - 2px); top: calc(-0.2em - 2px); width: calc(100% + 0.4em); height: calc(100% + 0.4em);
	border: solid 2px #000; 
}

.questionnaire .info-tag dialog { max-width: min(768px, 100%); }



 
/* numericbox */

.questionnaire .numericbox { text-align: right; }

/* float_input */

.questionnaire .float-input input.integer { width: 2.5em; text-align: right; }
.questionnaire .float-input input.fractional { width: 2em; }

/* star_input */

.questionnaire .star-input { height: 2em; background: transparent url('./img/star-grey.png') repeat-x top left; background-size: auto 100%; }
.questionnaire .star-input > .value { width: 0; height: 100%; background: transparent url('./img/star.png') repeat-x top left; background-size: auto 100%; }

/* form */

.questionnaire .form .submit-success { display: none; }
.questionnaire .form.status-ok > * { display: none; }
.questionnaire .form.status-ok > .submit-success { display: block; }

/* licenseplate_dutch */

.questionnaire .licenseplate-dutch
{ 
    display: inline-block; line-height: 1.9em; border-style: none; 
	background: transparent url('./img/licenseplate_dutch.png') no-repeat left center;
    background-size: 100% 100%; font-size: 220%; padding-left: 0.8em; 
	color: #000; text-shadow: -0.05em -0.05em 0 #fdd95a;  font-weight: bold; 
}
.questionnaire .licenseplate-dutch input 
{ 
    outline-style: none; border-style: none; width: 2.5em; 
    text-align: center; text-transform: uppercase; 
    background: transparent; text-shadow: -0.05em -0.05em 0 #fdd95a;
    padding: 0;
}

/* upload */

.questionnaire .imageinput { display: inline-block; vertical-align: middle; width: 18em; box-sizing: border-box; padding: 0.5em; min-height: 12em; position: relative; background: #000 url(./img/camera.png) no-repeat center 2em; background-size: 40% auto; }
.questionnaire .imageinput { opacity: 0.5; }
.questionnaire .imageinput.selected { opacity: 1; }

.questionnaire .imageinput .upload input { cursor: pointer; width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; }
.questionnaire .imageinput button { position: absolute; width: 15em; margin-left: -7.5em; bottom: 0.5em; left: 50%; }
.questionnaire .imageinput .upload_status { color: #fff; position: absolute; width: 15em; margin-left: -7.5em; bottom: 0.5em; left: 50%; text-align: center; }

.questionnaire .imageinput.uploading { background: #000 url('./img/loader.gif') no-repeat center 3em; background-size: auto; }
.questionnaire .imageinput.uploading button, .imageinput.error button { display: none; }

.questionnaire .imageinput.ok { background-color: #000; background-position: center center; background-size: contain; }
.questionnaire .imageinput.ok .upload_status { display: none; }

.questionnaire .youtube-video { width: 640px; max-width: 100%; }

.questionnaire .block-mobile 
{
    background: transparent url(./img/block_mobile.svg) no-repeat center 24px;
    background-size: 192px auto; 
    font-weight: bold;
    text-align: center;
    padding-top: 240px;
}


/* LabeledCheckbox */

.questionnaire .WordPickQuestionInput { max-width: 100%; width: 800px; }
.questionnaire .WordPickQuestionInput .buttonlist { margin-top: 1.2em; }
.questionnaire .LabeledCheckbox input { visibility: hidden; width: 0px; height: 0px; }
.questionnaire .LabeledCheckbox { line-height: 2em; border: solid 1px #ccc; display: inline-block; height: 2em; padding: 0 0.2em; margin: 0.2em 0; cursor: pointer; }
.questionnaire .LabeledCheckbox.Selected { background-color: #dbec7c; } 
.questionnaire .SeparatorToken { line-height: 2em; }




/* IsoQuestion */


.questionnaire .IsoQuestion .CheckListInput 
{ 
	max-width: 800px; 
	margin-bottom: 1.2em;
}

.questionnaire .IsoQuestion .CheckListInput li 
{
	padding-left: 0; 
	font-size: 85%;
	background: linear-gradient(#F9F9F9, #EDEDED) repeat scroll 0 0 #EDEDED;
    border: 2px solid #D3D3D3;
	line-height: 1.5em;
	margin-bottom: -2px;	
}


.questionnaire .IsoQuestion .CheckListInput label 
{ 
	padding-left: 2.6em; 
	min-height: unset;
	border-radius: unset;
	background: none;
}

.questionnaire .IsoQuestion .CheckListInput label::before 
{  
	content: "";
	opacity: 0.3;
    display: block;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    margin-top: -0.6em;
    position: absolute;
	left: 0.7em;
    top: 50%;
    border-radius: 0.6em;
    vertical-align: middle;
    background-color: #ccc;
    background-color: rgba(0, 0, 0, 0.3);
    background-repeat: no-repeat;
    background-position: center center;    
}

.questionnaire .IsoQuestion .CheckListInput li.Checked { background: linear-gradient(#E3F291, #dbec7c) repeat scroll 0 0 #dbec7c; }
.questionnaire .IsoQuestion .CheckListInput li.Checked label { background: none; }


.questionnaire .IsoQuestion .CheckListInput li.Checked label::before
{
	opacity: 1.0;
    border: solid 0.3em #90a70e;
    background: #fff;
}

.questionnaire .IsoQuestion .SubmitButton button { line-height: 1.5em; }
.questionnaire .IsoQuestion .SubmitButton.Invalid .FormValidation { display: none; }
.questionnaire .IsoQuestion.FormInput { max-width: unset; font-size: unset; line-height: unset; }

.questionnaire .IsoQuestion .ValidationMessageOutput
{
    color: #c00;
    display: none;
    padding: 0.6em 20px;
    border: solid 1px #d9aeae;
    font-weight: bold;
    margin: 1.2em 0px;
    background: #f1d9d9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f6e6e6), to(#f1d9d9));
    background-image: -webkit-linear-gradient(#f6e6e6, #f1d9d9);
    background-image: -moz-linear-gradient(#f6e6e6, #f1d9d9);
    background-image: -ms-linear-gradient(#f6e6e6, #f1d9d9);
    background-image: -o-linear-gradient(#f6e6e6, #f1d9d9);
    background-image: linear-gradient(#f6e6e6, #f1d9d9);
}

.questionnaire .IsoQuestion .ValidationMessageOutput.InvalidValue
{
	display: block;
}




/* Embedded form */
.EmbeddedForm .SubmitButton button { display: none; }