/*
    z-index
    10: header
    20: header .popupmenu
    20: header .menu .submenu 

    30: .popupstyle

    100: .overlay
    110: .overlay .dialog

    120: .cookieConsentBanner

	1000000: crisp chat
	1000001: contextMenuOverlay
	1000002: dialogOverlay
*/

@font-face { font-family: "Nunito"; src: url("font/Nunito-Light.woff") format('woff'); font-weight: 300; }
@font-face { font-family: "Nunito"; src: url("font/Nunito-Regular.woff") format('woff'); font-weight: 400; }
@font-face { font-family: "Nunito"; src: url("font/Nunito-SemiBold.woff") format('woff'); font-weight: 600; }
@font-face { font-family: "Nunito"; src: url("font/Nunito-Bold.woff") format('woff'); font-weight: 800; }

html { height: 100%; -webkit-overflow-scrolling: touch; }
body { font-family: "Nunito",Helvetica,Arial; font-size: 11pt; line-height: 18px; font-weight: 300; color: #4b4b4b; }

h1, h2 { font-size: 21px; margin-top: 36px; margin-bottom: 8px; }
h3 { font-size: 18px; font-weight: bold; margin: 8px 0; display: inline-block; }

hr { border-style: none; border-top: solid 1px #808080; }
ul.bullets li { list-style: disc outside; margin-left: 1.5em; }
b { font-weight: bold; }

details summary { cursor: pointer; }

.script { cursor: pointer; }
.submit-success { display: none; }
.loading * { display: none; }
.loading { height: 32px; width: 32px; background: transparent url('./img/animated.gif') no-repeat center center; background-size: 32px auto; }


p, ul.bullets, .table-sample-report { margin-bottom: 1.5em; }
a { color: inherit; text-decoration: none; }
main a { color: #ff9700; }

p.warning { padding-left: 40px; position: relative; }
p.warning::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -15px; height: 30px; width: 30px; background: transparent url("./img/alert.svg") no-repeat left center; background-size: 30px auto; }


/* page header */
body > header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #4b4b4b; color: #fff; z-index: 10; }

body > header .menu { position: absolute; right: 0; height: 60px; line-height: 60px; font-weight: 300; z-index: 1; }
body > header .menu > ul > li { display: inline-block; vertical-align: top; }
body > header .menu .main > .menu-text { display: none; }
body > header .menu .submenu li { display: inline-block; cursor: pointer; position: relative; }
body > header .menu  .Emphasize { background: #2A9EB0; }

body > header .menu .submenu li > a, 
body > header .menu .submenu li > span { display: inline-block; height: 100%; box-sizing: border-box; padding: 0 40px; text-decoration: none; color: #fff; }

body > header .menu li > a, 
body > header .menu li > span,
body > footer .menu li > a { transition-property: color; transition-duration: 0.5s; }

body > header .menu li.account > .menu-text { background: transparent url('./img/account-circle-white.svg') no-repeat center right 24px; background-size: 32px auto; padding-right: 72px; }
body > header .menu li.account .popupmenu { right: -1px; }
body > header .menu li.account:hover > .menu-text, body > header .menu li.account.selected > .menu-text { background-image: url('./img/account-circle-orange.svg'); }


body > header .menu li.alert { display: none; cursor: pointer; background: transparent url("./img/content-save-white.svg") no-repeat center right; background-size: 32px auto; padding-right: 48px; }
body > header .menu li.alert:hover { background-image: url("./img/content-save-orange.svg"); }
body.temp-user > header .menu li.alert { display: inline-block; }


body > header .menu .submenu li:last-child > a { border-right: 0; }
body > header .menu li:hover > a, 
body > header .menu li:hover > span, 
body > header .menu li.current > a, 
body > header .menu li.selected > span,
footer .menu li:hover > a, 
footer .menu li.current > a, 
footer .menu li.selected > span { color: #ff9700; }

body > header .popupmenu 
{ 
	background-color: #4b4b4b;
	display: block;
	box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.5);    
    position: absolute; z-index: 20;
    overflow: hidden;
    width: 250px;
    visibility: hidden; 
    opacity: 0;
    transition-property: visibility max-height;
    transition-duration: 1s; 
}

body > header .menu .selected > .popupmenu { visibility: visible; opacity: 1; }
body > header .menu .popupmenu a { display: block; width: 350px; }
body > header .menu .popupmenu .menu-text { line-height: 2.5em; height: 2.5em; }

body > header .title 
{ 
	position: absolute; top: 0; left: 15px; height: 60px; width: 200px;
	background: transparent url(./img/FS_logo_g.svg) no-repeat left center; 
	background-size: auto 50px; 
	font-size: 38px;
}
body > header .title span { display: none; }


footer { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 480px; background: #4b4b4b; color: #fff; box-sizing: border-box; padding: 24px 16px; line-height: 1.5em; }
.page footer h2 { margin-top: 0; font-weight: normal; text-shadow: none; }
footer a { color: inherit; text-decoration: none; }
footer .fact { color: #ff9700; }
footer .menu .main > .menu-text { display: none; }
footer .menu { width: 200px; }
footer .menu .submenu li a { color: #fff; text-decoration: none; }
footer .container_footer { position: relative; }
footer .container_menu, footer .container_post, footer .container_visit { margin-bottom: 32px; }
footer .container_contact { position: absolute; right: 0; top: 0; font-size: 14px; }
footer .container_contact td { vertical-align: top; padding-right: 32px;}

/* body */
body { position: relative; min-height: 100%; padding-bottom: 480px; }
body.home { padding-bottom: 400px; }
main { display: block; position: relative; min-height: 100%; padding-top: 60px; box-sizing: border-box; }
section.small, section.medium, section.large { margin: 0 auto; max-width: 100%; box-sizing: border-box; padding: 16px; }
section.small { width: 600px; }
section.medium { width: 1056px; }
section.large { width: 1380px; }

.form-question-type .question-text { margin-top: 32px; margin-bottom: 4px; }
.form-question-type .show-sample { float: right; height: 40px; text-decoration: underline; margin-left: 8px; cursor: pointer; }

/* section classes */
.node-path-text { font-size: 16px; line-height: 1.3em; }
.node-path-text section { box-sizing: border-box; padding-top: 40px; padding-bottom: 40px; }
.node-path-text h2 { font-size: 40px; line-height: 40px; margin-bottom: 50px; }

.orange-girl { font-size: 22px; display: block; color: #fff; text-shadow: 0px 0px 2px #9E5E00; background: #ff9700 url(./img/FS_homepage_lijnen.png) no-repeat center center; background-size: cover; overflow: hidden; }
.orange-girl section { position: relative; height: 100%; min-height: 400px; padding-right: 340px; padding-top: 25px; padding-bottom: 50px; }
.orange-girl section::before { content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; margin-right: -270px; background: transparent url(https://www.factsnapp.com/file/83657fdb-1e52-492f-af12-bc3455026e0f.webp?height=525) no-repeat right bottom; background-size: auto 525px;  }
.orange-girl h2 { color: #fff; }
.orange-girl a { color: #4b4b4b; text-shadow: none; }

.orange-girl-small { margin-bottom: 32px; font-size: 22px; display: block; color: #fff; text-shadow: 0px 0px 2px #9E5E00; background: #ff9700 url(./img/FS_homepage_lijnen.png) no-repeat center center; background-size: cover; }
.orange-girl-small section { position: relative; height: 100%; min-height: 160px; padding-top: 24px; padding-bottom: 32px; padding-right: 256px; box-sizing: border-box; }
.orange-girl-small section::before { content: ''; display: block; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; margin-right: 0px; background: transparent url(https://www.factsnapp.com/file/83657fdb-1e52-492f-af12-bc3455026e0f.webp?height=192) no-repeat right bottom; background-size: auto 192px;  }
.orange-girl-small h1, .orange-girl-small h2 { font-size: 40px; line-height: 40px; color: #fff; }

.orangeTitle { margin-bottom: 24px; font-size: 22px; display: block; color: #fff; text-shadow: 0px 0px 2px #9E5E00; background: #ff9700 url(./img/FS_homepage_lijnen.png) no-repeat center center; background-size: cover; box-sizing: border-box; }
.orangeTitle section { position: relative; height: 100%; }
.orangeTitle h1 { font-size: 40px; line-height: 40px; color: #fff; }


.orange-garden1 { min-height: 800px; font-size: 25px; line-height: 35px; color: #fff; text-shadow: 0px 0px 2px #000000; font-weight: bold; background: transparent url('https://www.factsnapp.com/file/4be41169-0f0d-4729-aed1-42ecaecaf34a.jpg?width=1920') no-repeat center center; background-size: cover; }
.orange-garden1 section { padding-left: 350px; text-align: right; padding-top: 140px; padding-bottom: 80px; }

/*.orange-garden2 { min-height: 800px; font-size: 25px; line-height: 35px; color: #fff; text-shadow: 0px 0px 2px #000000; font-weight: bold; background: transparent url('https://www.factsnapp.com/file/f4580b37-1201-46c7-9c1c-3066fb87160b.jpg?width=1920') no-repeat center center; background-size: cover; }
.orange-garden2 section { padding-left: 350px; text-align: right; padding-top: 140px; padding-bottom: 80px; }*/

.orange-garden3 { min-height: 800px; font-size: 25px; line-height: 35px; font-weight: bold; background: transparent url('https://www.factsnapp.com/file/f7e2b12a-9436-4358-877a-b6f054bc92cd.jpg') no-repeat center center; background-size: cover; }
.orange-garden3 section { padding-left: 350px; text-align: right; padding-top: 140px; padding-bottom: 80px; }

.light-orange { background: #ffe0b3; font-style: italic; font-size: 27px; line-height: 40px; text-align: center; }

.orange-tree { min-height: 500px; }
.orange-tree section { position: relative; height: 100%; padding-left: 350px; text-align: right; }
.orange-tree section::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; margin-left: -270px; background: transparent url('https://www.factsnapp.com/file/7d87b13a-3644-4fa6-899f-96de6a60d6a2.jpg') no-repeat left center; background-size: auto 600px;  }

/* mobile */
@media (max-width: 700px) 
{ 
    footer .container_contact { position: static; }
    footer { height: 800px; }
    body, body.home { padding-bottom: 800px; }


    .node-path-text { font-size: 16px; }
    .node-path-text section { box-sizing: border-box; padding-top: 20px; padding-bottom: 20px; }
    .node-path-text h2 { font-size: 24px; line-height: 26px; margin-bottom: 30px; }

    .orange-girl { min-height: 0; line-height: 18px  }
    .orange-girl section { padding-right: 16px; padding-bottom: 250px; min-height: unset; }
    .orange-girl section::before { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-position: center bottom; background-size: 280px auto;  }

    .orange-girl-small .menu-breadcrumb { position: absolute; top: 8px; }
    .orange-girl-small section { min-height: 64px; padding-top: 32px; padding-bottom: 8px; padding-right: 92px; }
    .orange-girl-small section::before { background-size: auto 64px;  }
    .orange-girl-small h1, .orange-girl-small h2 { font-size: 18px; line-height: 20px; }

	.orangeTitle h1 { font-size: 24px; line-height: 20px; margin-top: 24px; margin-bottom: 0px; }


    .orange-garden1 { min-height: 0; line-height: 20px; }
    .orange-garden1 section { padding-left: 16px; text-align: right; padding-top: 50px; padding-bottom: 50px; }

    .orange-garden2 { min-height: 0; line-height: 20px; }
    .orange-garden2 section { padding-left: 16px; text-align: right; padding-top: 50px; padding-bottom: 50px; }

    .orange-garden3 { min-height: 0; line-height: 20px; }
    .orange-garden3 section { padding-left: 16px; text-align: right; padding-top: 50px; padding-bottom: 50px; }

    .light-orange { font-style: italic; font-size: 18px; line-height: 24px; text-align: center; }

    .orange-tree { min-height: 0px; }
    .orange-tree section { position: relative; height: 100%; padding-left: 16px; text-align: left; padding-bottom: 270px; }
    .orange-tree section::before { left: 0; bottom: 0; width: 100%; height: 100%; margin-left: 0; background-position: center bottom; background-size: auto 280px;  }
}


/* basic form elements */
button, .button
{ 
    width: 100%;
    display: inline-block; 
    min-width: 150px; min-height: 40px; 
    box-sizing: border-box; padding: 8px 16px;  line-height: 22px;
    background-color: #4b4b4b; background-image: none; color: #fff; border-style: none; border-radius: 5px; 
    font-weight: normal;
    text-align: center; text-decoration: none; cursor: pointer;
    text-overflow: ellipsis; white-space: nowrap;
    transition-property: color; transition-duration: 0.3s;
    margin-bottom: 2px;
}

button:hover, .button:hover { color: #ff9700; }
.home .button { display: inline-block; background-color: #fff; border-style: none; border-radius: 20px; height: 40px; padding: 8px 24px; text-decoration: none; font-size: 15pt; color: #4b4b4b; box-shadow: 0 0 0.3em rgba(255, 0, 0, 0.4); }
.buttons { margin-top: 48px; margin-bottom: 16px;  }
table.buttons { table-layout: fixed; border-collapse: collapse; width: 100%; }
table.buttons td { border-right: 4px solid transparent; border-left: 4px solid transparent; }
table.buttons td:first-child { border-left-style: none; }
table.buttons td:last-child { border-right-style: none; }
table.buttons button, table.buttons .button { width: 100%; min-width: unset; }


.button-info 
{ 
    display: inline-block; 
    width: 24px; height: 24px; 
    background: transparent var(--helpCircleIconDark) no-repeat center center; 
    cursor: pointer; 
    vertical-align: middle;
    margin-left: 4px;
}


.extraInformationButton
{ 
    display: inline-block; 
    width: 24px; height: 24px; 
    background: transparent var(--helpCircleIconDark) no-repeat center center; 
    cursor: pointer; 
    vertical-align: middle;
    margin-left: 4px;
}



.checkfield .fieldlabel .button-info, .CheckListInput .button-info { background-image: var(--helpCircleIconDark); }


input[type=text], input[type=email], textarea, input[type=password], 
.dropdown .value
{ 
    text-align: left; display: inline-block; background-color: #fff; color: #4b4b4b; border-style: none; outline: none; border-radius: 5px; 
    height: 40px; box-sizing: border-box; padding: 8px 16px; line-height: 24px;
    font-size: 11pt;
    transition-property: background-color, box-shadow; transition-duration: 0.25s; vertical-align: top;
}

textarea { height: auto; }

input[readonly], textarea[readonly], .dropdown.readonly .value { background-color: #d4d4d4; box-shadow: none; }


.field, .list-question-routing { position: relative; margin-bottom: 8px; }
.field .fieldinput { width: 100%; box-sizing: border-box; }
.field .fieldlabel { line-height: 20px; box-sizing: border-box; line-height: 16px; }
.fieldlabel a { text-decoration: underline; }

.field .name { width: 100%; }
.field .count, .field .date { width: 150px; text-align: right; }

.output .status, .InvalidValue .ValidationMessage, .ValidationMessageOutput.InvalidValue, .InvalidValue .FormFieldValidation, .SubmitButton .FormValidation { font-size: 14px; font-weight: bold; line-height: 22px; color: #a00; }
.field.InvalidValue .fieldlabel { padding-left: 30px; background: transparent url('./img/alert.svg') no-repeat left center; background-size: 20px auto; }
.checkfield.InvalidValue .status { position: absolute; left: 0 }

.field .popupstyle { min-width: 300px; }
.field .dropdown, .field .textbox, .field .password, .field .passwordold, .field .passwordbox, .field .date-input, .field .integer-input, .field .iban-input { width: 100%; }


@keyframes blink-animation { from { opacity: 1.0 } 50% { opacity: 0.0 } 100% { opacity: 1.0 } }
@-webkit-keyframes blink-animation { from { opacity: 1.0 } 50% { opacity: 0.0 } 100% { opacity: 1.0 } }


.form-survey .group { margin-top: 20px; margin-bottom: 40px; }
.form-survey .group > .button, .form-survey .group > button { margin-top: 16px; }
.form-survey button[type=submit] { display: none; }
.form-survey.changed .surveyPreparationButton,
.form-survey.incomplete .surveyPreparationButton { display: none; }

.schedule-open .day { display: inline-block; width: 11em; }

.couple > * { vertical-align: top; }

.form-price .field .fieldlabel { width: 230px; position: absolute; top: 9px; }
.form-price .fieldinput { display: inline-block; padding-left: 230px; width: 500px; }

.form-survey-check .overview { margin-bottom: 1.5em; width: 100%; }
.form-survey-check .overview th, .form-survey-check .overview td { border: solid 1px #aaa; padding: 2px 4px; }
.form-survey-check .overview th { width: 200px; vertical-align: top; }
.form-survey-check .overview ul li { list-style: disc outside; margin-left: 16px; }
.form-survey-check .highlight { font-weight: bold; color: #ff9700; }
.form-survey-check figure img { max-width: 640px; max-height: 1280px; }

.form-survey-deny .field-notes { margin-top: 16px; }
.form-survey-deny .field-notes textarea { width: 100%; }

.form-user .group { margin-bottom: 24px; }
.form-user .field .fieldlabel { width: 304px; }
.form-user .field .fieldinput { padding-left: 320px; }
.form-user .field.small .fieldinput { width: 470px; }
.form-user .field.medium .fieldinput { width: 700px; }
.form-user .field .fieldlabel { position: absolute; top: 9px; }

.list-client-survey .group { margin-bottom: 24px; }

.form-recruitment-mail input, .form-recruitment-mail textarea { width: 100%; }
.form-recruitment-mail textarea { height: 200px; }

.link-recruitment input { width: 100%; }

.table-recruitment, .piggybank-table { width: 100%; margin-bottom: 16px; }
.table-recruitment td, .table-recruitment th, .piggybank-table td, .piggybank-table th { padding-left: 4px; padding-right: 16px; line-height: 150%; }
.table-recruitment th, .piggybank-table th { font-weight: bold; }
.table-recruitment td, .piggybank-table td { border-top: solid 1px #888; }

.table-recruitment .amount, .piggybank-table .amount { text-align: right; }
.table-recruitment .total, .piggybank-table .total { font-size: 21px; font-weight: bold; }


@media (max-width: 600px)
{ 
    .field .fieldinput { padding-left: 0; max-width: 100%; }
    .field.InvalidValue .fieldlabel { background-position: left top; }

    .form-user .field .fieldlabel { position: static; }
    .form-user .field .fieldinput { padding-left: 0; }

    .form-price .field .fieldlabel { position: static; }
}

@media (max-width: 400px)  
{ 
    .field .fieldinput { width: 100%; }
    .field .popupstyle { min-width: 100% !important; }
}



/* complex form elements */
.checklist, .checkfield { font-size: 11pt; line-height: 22px; position: relative; }
.checklist li, .checkfield { position: relative; box-sizing: border-box; padding-left: 42px; }
.checklist li > label, .checkfield label { display: block; background: #fff; color: #4b4b4b; min-height: 40px; border-radius: 5px; margin-bottom: 2px; box-sizing: border-box; padding: 8px 12px; padding-right: 10px; cursor: pointer; transition-property: background-color; transition-duration: 0.1s; }

.checklist li > label::before, .checkfield label::before { content: ''; display: block; border-radius: 5px; position: absolute; box-sizing: border-box; width: 40px; height: 100%; left: 0; top: 0; background: #fff none no-repeat center center; background-size: 14px; }
.checklist li.checked > label::before, .checkfield.checked > label::before { content: ' '; background-image: url('./img/check.svg'); }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .checklist li.checked > label::before, .checkfield.checked > label::before { background-image: url('./img/check.png') !important; } }


.checklist li > input, .checkfield input { visibility: hidden; position: absolute; }
.checklist li > label, .checkfield label { cursor: pointer; }
.checklist li.disabled label, .checklist li.disabled > label::before { background-color: transparent; cursor: default; color: #fff; }


.dropdown { display: inline-block; cursor: pointer; border-radius: 5px; }
.dropdown.readonly { cursor: auto; }
.dropdown .value { position: relative; width: 100%; padding-right: 2em !important; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown .value::after { content: ''; position: absolute; display: block; width: 2em; height: 100%; right: 0; top: 0; background: transparent url('./img/dropdown.svg') no-repeat center center; background-size: 0.7em auto; }
.dropdown .empty, .dropdown .popupstyle .empty:hover { background: #4b4b4b; color: #fff; font-size: 90%; line-height: 1.3em; }

.dropdown .popupstyle { display: none; position: absolute; z-index: 30; overflow: auto; background-color: #fff; border-radius: 5px; margin-top: 1px; box-shadow: 0 0 4px #4b4b4b; box-sizing: border-box; }
.dropdown .popupstyle li { transition-property: background-color, color; transition-duration: 0.1s; }
.dropdown .popupstyle li span { padding: 0.5em; display: block; } 
.dropdown .popupstyle li.selected, .dropdown .popupstyle li:hover { background: #ff9700; color: #fff; }
.dropdown .popupstyle.expanded { display: block; }


select 
{
    line-height: 40px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 12px;
    
    background-image: url(./img/dropdown.svg);
    background-repeat: no-repeat;
    background-size: 0.7em auto;
    background-position: top 18px right 6px;
}


select::-ms-expand { display: none; } /* For IE <= 11 */


.date-input2, .date-input2 select { height: 40px; width: 100%; }
.date-input2 td { padding-right: 8px; }
.date-input2 td:last-child { padding-right: 0; }





/* form-dialog dialog */

.overlay { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); overflow: auto; cursor: default; box-sizing: border-box; }
.overlay .dialog
{ 
    position: relative;
    margin: 32px auto; margin-bottom: 128px;
    width: 90%; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); border-radius: 5px; 
    background: #fff; 
    background-size: cover; background-attachment: fixed; 
}
@media (min-width: 950px) { .overlay .dialog { width: 900px; } }

.overlay .header, .overlay .footer { width: 100%; line-height: 1em; box-sizing: border-box; padding: 16px; }
.overlay .header { padding-bottom: 24px; }

.overlay h2 { top: 0; font-size: 17px; font-weight: 600; margin: 0; }
.overlay .content h2 { line-height: 24px; margin-top: 8px; }
.overlay .footer {  }
.overlay .dialog .footer .buttons { margin: 0; }

.overlay .dialog .content { box-sizing: border-box; padding: 0px 16px; padding-bottom: 64px; }
.overlay .dialog .body { box-sizing: border-box; padding: 8px 16px; height: 100%; overflow: auto; }




/* different styles */

.light-background input[type=text], .light-background input[type=email], .light-background textarea, .light-background input[type=password], .light-background .dropdown .value, 
.light-background select { background-color: #eee; border: solid 1px #bbb; }
.light-background .checkfield .fieldlabel, .light-background .checkfield .fieldlabel::before { background-color: #eee; border: solid 1px #bbb; }
.light-background .checkfield .fieldlabel a { color: inherit; }

.light-background input[type=text][readonly] { background: #d4d4d4; }





@media (max-width: 1380px)
{
	body > header { height: 48px; }

    .padding-background { padding-top: 48px; }	
	body > header .title { left: 7px; width: 150px; height: 48px; background-size: auto 36px; }
	
	body > header .menu { cursor: pointer; position: absolute; top: 0; border-radius: none; }
    body > header .menu li.main, header .menu li.alert { width: 48px; height: 48px; line-height: 48px; }
    body > header .menu li.main 
    { 
    	background: transparent url("./img/menu.svg") no-repeat center center; 
        background-size: 24px auto; 
    }

    body > header .menu .main > .submenu { position: fixed; top: 48px; right: -270px; background-color: #4b4b4b; box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.5); transition-property: visibility max-height; transition-duration: 1s; }
    body > header .menu .main .submenu > li, header .menu .main .submenu > li { display: block; width: 250px; }
    body > header .menu .main .submenu > li > a, header .menu .main .submenu > li > span { padding: 0 16px; box-sizing: border-box; width: 100%; }
    body > header .menu .main .submenu > li > .submenu { max-height: 0; border-style: none; box-shadow: none; position: static; display: block; background-color: #6b6b6b; }
    
    body > header .menu .submenu li > a, header .menu .submenu li > span { padding: 0 10px; font-size: 14px; }

    /* menu visibility */
    body > header .menu .main.selected > .submenu { right: 0; }
    body > header .menu .main li.selected > .submenu { visibility: visible; opacity: 1; max-height: 2000px; }

    main { padding-top: 48px; }
}



/* menu tabs*/
.head-survey .tabs { border-collapse: collapse; width: calc(100% - 32px); font-weight: bold; font-size: 17.5px; line-height: 40px; }
.head-survey .tabs span { display: inline-block; height: 100%; white-space: nowrap; }
.head-survey .tabs td { width: 16%; text-align: center; padding-right: 2px; }
.head-survey .tabs a { text-decoration: none; display: block; width: 100%; height: 100%; padding-top: 2px; background: #fff; color: #555; border-top-left-radius: 12px; border-top-right-radius: 12px; text-shadow: none; }
.head-survey .tabs td.current a { background: #2a9eb0; color: #fff; z-index: 1; position: relative; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); }
.head-survey .tabs td.price a { position: relative; background: transparent; color: #fff; box-shadow: none;  }
.head-survey .tabs td.price a .subtext { position: absolute; right: 0; bottom: -13px; font-size: 12px; font-weight: normal; }

.head-survey .tabs td.price span { text-shadow: 0px 0px 2px #9E5E00; }
.head-survey .tabs td.price { width: 40%; text-align: right; }

@media (max-width: 750px) 
{
    .head-survey .tabs { font-size: 17px; line-height: 36px; }
    .head-survey .tabs td { width: 22.5%; }
    .head-survey .tabs td span, 
	.head-survey .tabs td div { padding-left: 25px !important; background-size: 22px auto !important; }
    .head-survey .tabs td.price a .subtext { bottom: -1px; line-height: 14px; font-size: 10px; }
}

@media (max-width: 550px) 
{
    .head-survey .tabs { font-size: 14px; }
    .head-survey .tabs td { width: 25%; }
    .head-survey .tabs td span, 
	.head-survey .tabs td div { padding-left: 0 !important; background: transparent !important; }
}


/* */


.head-survey { background: #ff9700 url(./img/FS_homepage_lijnen.png) no-repeat center center; position: relative; overflow: hidden; }
.head-survey::before { content: ''; position: absolute; display: block; top: -20px; left: -20px; right: -20px; bottom: 0px; box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.4); }
.head-survey section { padding-top: 10px; padding-bottom: 0; height: 160px; position: relative;}
.head-survey .title h2 
{ 
    display: inline-block; max-width: 100%; margin: 0; margin-top: 8px; 
    white-space: nowrap; text-overflow: ellipsis; line-height: 24px; overflow: hidden; 
    box-sizing: border-box; padding-right: 32px; 
    background: transparent url('./img/lead-pencil-white.svg') no-repeat right center; cursor: pointer; 
}
.head-survey.readonly .title h2 { background: none; padding-right: 0; cursor: auto; }

.head-survey .title h2, 
.head-survey .title .date { color: #fff; }
.head-survey .title { position: relative; }
.head-survey .date { font-weight: normal; font-size: 13px; line-height: normal; }
.head-survey .tabs { position: absolute; left: 0; bottom: 0; margin: 0 16px; }





/* menu breadcrumb */
.menu-breadcrumb { line-height: 30px; }
.menu-breadcrumb ul { }
.menu-breadcrumb a, .menu-breadcrumb span { font-weight: normal; font-size: 14px; position: relative; text-decoration: underline; color: #4b4b4b; text-shadow: none; }

.menu-breadcrumb li { display: inline; padding-right: 12px; }
.menu-breadcrumb li:not(:first-child) .menu-text { margin-left: 12px; }
.menu-breadcrumb .menu-text { transition-property: color, text-shadow; transition-duration: 0.2s; }

/* specific forms */

.form-login { font-size: inherit; text-align: center; }
.form-login .separator { margin: 16px; }
.form-login a { text-decoration: underline; line-height: 20px; }

.form-login .fieldinput { width: 100%; margin: 0; }
.form-login .field { margin: 0; }
.form-login .login-usercode-form .field { text-align: left; }
.form-login .login-form-doublecolumn .fieldlabel { display: none; }
.form-login input { width: 100%; margin-bottom: 2px; }
.form-login .buttons { margin-top: 10px; margin-bottom: 30px; }
.form-login button { width: 100%; }

.forgot-password-form .fieldlabel { display: none; }
.forgot-password-form input, .forgot-password-form button { width: 100%; }

/*  questionnaire */

.questionnaire .questionnaire-body { padding: 16px; }
.questionnaire header .menu { display: none; }
.questionnaire { padding-bottom: 0; }
.questionnaire footer { display: none; }


.list-check-survey .item-list { background: rgba(255, 255, 255, 0.6); }
.list-check-survey .item-list > .content .text { padding-left: 16px; }


/* questionnaire */

.questionnaire button, 
.questionnaire .button { min-height: unset; color: #fff; }

.questionnaire .btn-up 
{
    background: #EDEDED;
    background: linear-gradient(#F9F9F9, #EDEDED) repeat scroll 0 0 #EDEDED;
    border: 1px solid #D3D3D3;
}

.questionnaire button, 
.questionnaire .button, 
.questionnaire button.btn-up, 
.questionnaire .btn-accent, 
.questionnaire .btn-collapsible.selected-true, 
.questionnaire .progressbar .part,
.questionnaire .btn-collapsible.selected-true .btn-inner, 
.questionnaire .slider.selected .handle
{ 
    background: #ff9700; 
    background: linear-gradient(#ff9700, #CE800E) repeat scroll 0 0 #CE800E; 
    text-shadow: 0 0 0.1em #47361E;
}

.questionnaire button, 
.questionnaire .button, 
.questionnaire button.btn-up, 
.questionnaire .btn-accent { border-style: none; }
.questionnaire .progressbar .part { text-shadow: none; }
.questionnaire .slider.selected .handle { color: #fff; font-weight: bold; }

.questionnaire .btn-checkbox.selected-true, 
.questionnaire .btn-radio.selected-true, 
.questionnaire .btn-box.selected-true
{ 
    background: #FFE1B7; 
    background: linear-gradient(#FEF6EA, #FFE1B7) repeat scroll 0 0 #FFE1B7;
}

.questionnaire .btn-radio.selected-true .btn-inner:before { border-color: #ff9700; }
.questionnaire .btn-checkbox.selected-true .btn-inner:before { background-color: #ff9700; border-color: #ff9700; }
.questionnaire .btn-collapsible.selected-true .btn-inner:before { background-color: #8D5F1C; }
.questionnaire .response-output .text { background-color: #FFE1B7; color: #8D5F1C; box-shadow: 0 0 2px #8D5F1C; }

/* contrast slider */
.questionnaire .contrast-slider .slider .bar 
{ 
    height: 10px; display: block; top: 0;
    position: absolute; background-color: transparent; 
    background-image: linear-gradient(to right, #ff9700 0%, #FFE1B7 50%, #ff9700 100%);
    background-image: -webkit-linear-gradient(left, #ff9700 0%, #FFE1B7 50%, #ff9700 100%); 
	background-image: -webkit-gradient(linear, left center, right center, from(#ff9700), color-stop(50%, #FFE1B7), to(#ff9700));
}


.questionnaire .gradeQuestionType .label-left { display: none; }
.questionnaire .gradeQuestionType .btn-collapsible { display: none; }
.questionnaire .gradeQuestionType .collapsible-content { display: none; margin: 0; }




.questionnaire .info-tag { background-color: #ff9700; }
.questionnaire .info-tag .close { background-color: #4b4b4b; }

.questionnaire .field .dropdown::before { background-color: #ff9700; }
.questionnaire .image { display: block; }

.questionnaire .media .image .image-tag-inner img { width: 640px; max-width: 100%; max-height: 1280px; object-fit: contain; }	/*	question text image */
.questionnaire .text_answer_image .image .image-tag-inner img { width: 400px; max-height: 400px; object-fit: contain; }			/*	answer text image */

.questionnaire .image .caption { display: block; caption-side: bottom; }
.questionnaire .image .caption, 
.questionnaire .video-tag .caption, 
.questionnaire .audio-tag .caption { font-style: italic; font-weight: normal; }


/* report */

.report { padding-bottom: 16px; }
/*.report header .menu { display: none; }*/
.report footer { display: none; }

.head-report { margin: 16px; }
.head-report h2 { margin-bottom: 8px; }
.head-report .date { font-weight: normal; font-size: 13px; }
.head-report .title { margin-bottom: 16px; }
.head-report .extra { border-radius: 5px; background: rgba(255, 255, 255, 0.6); position: relative; height: 40px; }
.head-report .actions { position: absolute; top: 0; right: 0; height: 40px; z-index: 1; }
.head-report .actions > li { display: inline-block; vertical-align: top; }
.head-report .actions a { display: inline-block; width: 40px; height: 40px; cursor: pointer; vertical-align: baseline; }
.head-report .extra .crossing-filter { display: inline-block; box-sizing: border-box; min-height: 40px; padding-top: 12px; padding-bottom: 8px; padding-left: 48px; padding-right: 136px; background: transparent url('./img/filter.svg') no-repeat 16px 8px; cursor: pointer; }

.icon-print { background: transparent url('./img/printer.svg') no-repeat center center; }
.icon-word { background: transparent url('./img/file-word.svg') no-repeat center center; }
.icon-excel { background: transparent url('./img/file-excel.svg') no-repeat center center; }

.icon-print:hover { background: transparent url('./img/printer-focus.svg') no-repeat center center; }
.icon-word:hover { background: transparent url('./img/file-word-focus.svg') no-repeat center center; }
.icon-excel:hover { background: transparent url('./img/file-excel-focus.svg') no-repeat center center; }


.box-report p { color: #4b4b4b; text-shadow: none; }
.box-report .legend, .piechart .meta, .table-report { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #4b4b4b; }
.box-report .legend a, .table-report a { color: #ce0c2d; }

.box-report.question, .box-report.answer, .box-report.answer-listing { background: #fff; border-radius: 5px; position: relative; overflow: hidden; }
.box-report.question, .box-report.answer, .box-report.answer-listing { position: relative; width: auto; margin: 16px; }
.box-report.question > .header, .box-report.answer > .header { text-shadow: none; color: #fff; background-color: #4b4b4b; line-height: 30px; position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 0 16px; }
.box-report.question > .client, .box-report.answer > .client { margin-top: 30px; }


.box-report .legend li { display: block; position: relative; padding-left: 20px; margin-right: 20px; margin-bottom: 5px; }
.box-report .legend .color { width: 15px; height: 15px; position: absolute; left: 0; top: 0; }
.box-report .textnote { font-size: 11px; font-style: italic; }

.piechart .graph2d-png { display: inline-block; margin-right: 16px; }
.piechart .meta { display: inline-block; vertical-align: top; }
.piechart .meta .legend { margin-bottom: 10px; }
.piechart .meta .total { font-weight: bold; font-size: 11px; }


/* QuestionFrame */

.questionframe { transition-property: height margin; transition-duration: 250ms; }

/* menu-question */

.menu-question, .menu-answer { position: absolute; z-index: 2; top: 0; right: 0; text-decoration: underline; font-size: 14px; }
.menu-question li, .menu-answer li { display: inline; margin: 0 16px; color: #fff; line-height: 30px; vertical-align: middle; }
.menu-question li a, .menu-answer li a { text-decoration: none; color: #fff; }

.menu-question li.report-type .menu-text { display: none; }
.menu-question li.report-type { display: inline-block; width: 30px; height: 30px; background-color: transparent; background-repeat: no-repeat; background-position: center center; margin: 0; }

.menu-question li.show-custom { background-image: url('./img/star-four-points-white.svg'); }
.menu-question li.show-standard { background-image: url('./img/barchart-white.svg'); background-size: 20px; }
.menu-question li.show-piechart { background-image: url('./img/chart-pie-white.svg'); }

.report-type-custom .menu-question li.show-custom { background-image: url('./img/star-four-points-focus.svg'); }
.report-type-standard .menu-question li.show-standard { background-image: url('./img/barchart-focus.svg'); background-size: 20px; }
.report-type-piechart .menu-question li.show-piechart { background-image: url('./img/chart-pie-focus.svg'); }



/* table-report */

.table-report { margin-bottom: 16px; }
.table-report td.empty { color: #999; }
.table-report th { font-weight: bold; vertical-align: top; }
.table-report td, .table-report th { padding: 3px 5px; text-align: right; border-right: solid 1px #ff9700; }
.table-list td, .table-list th { text-align: left; }

.table-report td:first-child, .table-report th:first-child { border-right: none; }
.table-list td:first-child, .table-list th:first-child { border-right: solid 1px #ff9700; }

.table-report td:last-child, .table-report th:last-child { border-right: none; }
.table-report tr:nth-child(even) { background: #eee; }
.table-report tr.total { background: transparent; }
.table-report tr.total td { font-weight: bold; }

.table-report .significant::before { content: '* '; display: inline; }



.stackedchart .legend li { display: inline-block; }

.answer-crossing-listing .answer-crossing { margin-bottom: 10px; }

.toggle_piechart .name::after { display: inline; content: 'taartgrafiek'; }
.toggle_piechart.checked .name::after { display: inline; content: 'balkgrafiek'; }

.head-expandable > h2 { line-height: inherit; padding-left: 28px; position: relative; cursor: pointer; height: auto; }
.head-expandable > h2::after { position: absolute; left: 0; top: 50%; margin-top: -12px; content: ''; display: block; width: 24px; height: 24px; background-size: cover; background: transparent url('./img/menu-down.svg') no-repeat center center; transform: rotate(-90deg); transition-duration: 0.3s; }
.head-expandable > div { visibility: hidden; opacity: 0; max-height: 0; transition-duration: 0.3s; }

.head-expandable.expanded > h2::after { transform: rotate(0deg);  }
.head-expandable.expanded > div { visibility: visible; opacity: 1; max-height: 9999px; }




/*table-order*/

.box-order, .box-report  { background-color: rgba(255, 255, 255, 0.6); border-radius: 5px; margin-bottom: 16px; line-height: 20px; box-sizing: border-box; padding: 16px; }
.box-order { font-size: 14px; font-family: Helvetica, Arial; }
.table-sample-report { width: 100%; font-weight: 300; color: #4b4b4b; text-shadow: none; }
.table-sample-report th, .table-sample-report td { padding: 2px 4px; vertical-align: top; }
.table-sample-report th, .table-sample-report .subtotal, .table-sample-report .total { font-weight: bold; }

.table-sample-report .name_element { width: 60%; }
.table-sample-report .count_netto, .table-sample-report .count_expected { text-align: right; }

.table-sample-report th { border-bottom: solid 1px #5d5d5d; }
.table-sample-report .subtotal, .table-sample-report .total { border-top: solid 1px #5d5d5d; }
.table-sample-report .amount { text-align: right; }


/* chart-question-clustering*/

.chart-question-clustering .target { min-height: 200px; margin-top: 16px; }
.chart-question-clustering .buttons { margin-top: 8px; }
.chart-question-clustering .dropdown .value { background-color: #d4d4d4; }
.chart-question-clustering .field .fieldlabel { color: inherit; text-shadow: none; font-weight: normal; }
.chart-question-clustering .option-filter .status { display: inline-block; box-sizing: border-box; min-height: 40px; padding-top: 12px; padding-bottom: 8px; padding-left: 48px; padding-right: 136px; background: #d4d4d4 url('./img/filter.svg') no-repeat 16px 8px; cursor: pointer; border-radius: 5px; width: 100%; }

/* list-recruitment  */

@media (min-width: 700px) { .list-recruitment { margin-top: -80px; position: relative; z-index: 1; } }
.list-recruitment { margin-bottom: 32px; }
.list-recruitment li { display: inline-block; margin-right: 16px; margin-bottom: 16px; }
.list-recruitment a { color: inherit; display: inline-block; width: 144px; background: transparent none no-repeat center 0; background-size: 128px; padding-top: 144px; text-align: center; font-weight: bold; }
.list-recruitment .facebook { background-image: url(./img/facebook.svg); }
.list-recruitment .twitter { background-image: url(./img/twitter.svg); }
.list-recruitment .linkedin { background-image: url(./img/linkedin.svg); }
.list-recruitment .email { background-image: url(./img/mail.svg); }
.list-recruitment .link { background-image: url(./img/link.svg); }

/* menu-panel */

@media (min-width: 700px) { .menu-panel { margin-top: -80px; position: relative; z-index: 1; } }
.menu-panel { margin-bottom: 32px; }
.menu-panel li { display: inline-block; margin-right: 16px; margin-bottom: 16px; }
.menu-panel a { color: inherit; display: inline-block; width: 144px; background: transparent none no-repeat center 0; background-size: 128px; padding-top: 144px; text-align: center; font-weight: bold; }

.menu-panel .questionnaire a { background-image: url(./img/questionnaire.svg); }
.menu-panel .profile a { background-image: url(./img/profile.svg); }
.menu-panel .piggybank a { background-image: url(./img/piggybank.svg); }
.menu-panel .recruitment a { background-image: url(./img/recruitment.svg); }

/* blog/news */
.blog > li.tagnode {
    display: inline-block;
    float: right;
    position: relative;
    height: 400px;
    max-width: 480px;
    margin-bottom: 64px;
    overflow: hidden;
}

@media (max-width: 512px) {
    .blog > li.tagnode {
        padding-top: 40%;
    }
}

.blog > li.tagnode::after
{
    content: '';
    position: absolute;
    background: linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1) 100%);
    width: calc(100% - 1px);
    height: 240px;
    bottom: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    border: solid 1px #b0b0b0;
    border-top:none;
}

.blog > li.tagnode:hover::after {
    border: solid 1px #ff9700;
    border-top: none;
}


.blog > li.tagnode::before
{
    content: '';
    position: absolute;
    width: calc(100% - 1px);
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 0;
    box-sizing: border-box;
    border: solid 1px #b0b0b0;
    border-top:none;
}

.blog > li.tagnode:hover::before {
    border: solid 1px #ff9700;
    border-top: none;
}


.blog > li:nth-child(2n+1).tagnode {
    float:none;
}

@media (max-width: 1088px) {
    .blog > li.tagnode {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

.blog .image-tag {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    max-width: 480px;
    max-height: 160px;
}

.blog .image-tag img {
    display: block;
    width: 100%;
    height: auto;
}

.blog .tagnode a:not(more) { color: #4b4b4b; }
.blog .tagnode a h3 { font-size: 23px; margin-top: 20px; margin-bottom: 16px; font-weight: bold; max-width: calc(480px - 2 * 8px); line-height: initial; }

.news-article h2 { font-size: 35px; font-weight: bold; line-height: initial; margin-bottom: 30px; }

.blog .tagnode a, .blog .tagnode .content {
    position: relative;
    max-width: calc(480px - 2 * 8px);
    margin: 8px;
    /*top: 160px;*/
}

.blog .tagnode .content {
    max-height: 240px;
    overflow: hidden;
}

.blog .tagnode a.more {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    height: 100%;
    font-size: 0px;
    z-index: 10;
}

.blog .tagnode a.more::after {
    font-size: 11pt;
    font-weight: bold;
    content: 'Lees meer >>';
    position: absolute;
    bottom: 8px;
    z-index: 10;
}

.blog .tagnode a.more:hover::after {
    color: #ff9700;
}



.news-article img 
{
	max-width: 100%;
}

.news-article .blog-image {
    max-width: 1024px;
    max-height: 342px;
    overflow: hidden;
}

.news-article .blog-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 342px;
}

.blog .share .tagnode { display: none; }
.share { margin-top: 12px; margin-bottom: 50px; }
.share .tagnode { background-repeat: no-repeat; background-size: cover; display: inline-block; width: 32px; height: 32px; vertical-align: top; margin: 8px; }
.share .facebook { background-image: url(icon/fb_icon_01.svg); }
.share .facebook:hover { background-image: url(icon/fb_icon_01_oranje.svg); }
.share .twitter { background-image: url(icon/twitter_icon_02.svg); }
.share .twitter:hover { background-image: url(icon/twitter_icon_02_oranje.svg); }
.share .linkedin { background-image: url(icon/in_icon_01.svg); }
.share .linkedin:hover { background-image: url(icon/in_icon_01_oranje.svg); }

.share li a { top: 0px; display: block; width: 100%; height: 100%; font-size: 0px; }

.survey_details_item { font-weight: bold; }
.survey_details_audience { text-decoration: underline; }


.info_order_cell { border: solid 0 transparent; vertical-align: top; text-align: left; font-weight: normal; font-family: Helvetica, arial; color: #4b4b4b; text-shadow: none; }
.info_order_border { border-bottom: solid 1px #5d5d5d; }
.info_order_bold { font-weight: bold; }
.info_order_amount { text-align: right; }
.info_order_details { font-style: italic; }
.info_order_left { padding-right: 16px; }



.ReportPage footer { display: none; }



.FormInput { margin-bottom: 16px; font-size: unset; }
.Hidable { max-height: 64px; visibility: visible; opacity: 1; transition: visibility 0.4s ease, opacity 0.4s ease, max-height 0.4s ease; }
.Hidable.Hidden { max-height: 0px !important; visibility: hidden; opacity: 0; }

.FormField { margin-bottom: 8px; }
.FormField.Hidable { max-height: 128px; }

/*.SubmitButton { margin-top: 48px; }*/
.SaveCancelButtons { position: relative; }
.SaveCancelButtons > * { display: inline-block; width: 50%; box-sizing: border-box; }
.SaveCancelButtons > *:first-child { padding-right: 2px; }
.SaveCancelButtons > *:last-child { padding-left: 2px; position: absolute; top: 0; right: 0; }

.TextInput::placeholder { color: #aaa; }

textarea.TextInput, input.TextInput, input.NewPasswordInput, .DropdownInput .Display, .CheckListInput label { resize: none; background-color: #ffffff; padding: 8px 16px; line-height: 24px; }
.InvalidValue .TextInput, .InvalidValue .NewPasswordInput, .InvalidValue .IntegerInput, .InvalidValue .NativeDropdownInput, .InvalidValue .DropdownInput .Display, 
.InvalidValue .DateInput select, .InvalidValue .CheckListInput label, .InvalidValue .CheckListInput label:before { background-color: #fff; }

.TextInput:read-only { background-color: rgba(255, 255, 255, 0.6); }


/*	FileInput */
.FileInput input { display: none; }
.FileInput { position: relative; }
.FileInput .DragAndDropInstructions, .FileInput .Uploading { display: none; } 
.FileInput label 
{ 
	display: block; 
	box-sizing: border-box; 
	min-height: 128px;
	padding: 16px; border-radius: 5px;

	cursor: pointer; color: #aaaaaa;
	background: #fff url('img/upload.svg') no-repeat center top 30%;
	background-size: auto 50%;
	
	transition-duration: 0.1s;
}

.FileInput .Content
{ 
	display: block; position: absolute; top: 65%; left: 0; width: 100%; 
	text-align: center;
}

.FileInput .ErrorContent { color: #a00; font-weight: bold; }
.FileInput .UploadingContent, .FileInput .SuccessContent, .FileInput .ErrorContent { display: none; }
.FileInput.Uploading .InstructionContent, .FileInput.Error .InstructionContent, .FileInput.Success .InstructionContent { display: none; }
.FileInput.Uploading .UploadingContent, .FileInput.Error .ErrorContent, .FileInput.Success .SuccessContent { display: unset; }

.FileInput.Dragging label { background-size: auto 60% }

.FileInput.DragAndDrop .DragAndDropInstructions { display: unset; }
.FileInput.DragAndDrop label { outline: 2px dashed #aaaaaa; outline-offset: -12px; }
.FileInput.Dragging label { outline-color: #4b4b4b; color: #4b4b4b; }

/*	/FileInput */

.AudioInput.Success label { outline-color: #4b4b4b; color: #4b4b4b; background: #fff; }
.AudioInput.Success .SuccessContent { top: 20%; }

.ImageInput.Success label { outline-color: transparent; color: #4b4b4b; }
.ImageInput.Success .SuccessContent { position: unset; display: block; }
.ImageInput.Success img { max-width: 100%; max-height: 640px; text-align: center; vertical-align: top; }

.VideoInput { margin-bottom: 24px; }
.VideoInput input { width: 100%; }  
.VideoInput .preview > * { margin-top: 8px; }
.VideoInput .preview .vimeo-error p { color: #a00; text-shadow: none; }

.CreditCodeInput .TextInput { }
.CreditCodeInput button { margin-top: 8px; display: block; }
.CreditCodeInput button.Hidable { max-height: 40px; }
.CreditCodeInput .InvalidCode { background-color: #fcc; }
.CreditCodeInput table { width: 100%; } 

.CreditCodeInput ul li 
{
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    margin-bottom: 4px;
}

.CreditCodeInput td { padding: 8px 16px; }
.CreditCodeInput .CreditCode { min-width: 100px; }
.CreditCodeInput .Amount { text-align: right; }
.CreditCodeInput .Delete { padding: 0; width: 40px; background: transparent url('./img/close.svg') no-repeat center center; background-size: 16px auto; cursor: pointer; }

.CreditCodeInput.Locked .TextInput { background: #fff url('./img/animated.gif') no-repeat right 16px center; background-size: 32px auto; }


.CreditCodeCheckForm .SubmitButton { margin-top: 8px; display: block; }
.CreditCodeCheckForm.Locked .TextInput { background: #fff url('./img/animated.gif') no-repeat right 16px center; background-size: 32px auto; }
.CreditCodeCheckForm .box-order { margin-top: 8px; }
.CreditCodeCheckForm .credit-info th { padding-right: 32px; }
.CreditCodeCheckForm .FormValidation { display: none !important; }

.UserCreditInfo th { padding-right: 32px; }




.light-background textarea.TextInput, .light-background input.TextInput, .light-background input.NewPasswordInput, .light-background .DropdownInput .Display { background-color: #eee; border: solid 1px #bbb; }


.DropdownInput label:hover, .DropdownInput .Checked label { background-color: #ff9700; color: #fff; }
.DropdownInput label { line-height: 24px; }
.DropdownInput.Expanded .Display { background-color: #ffffff; }
.DropdownInput ul { background-color: #fff; }
.DropdownInput.Expanded .Display { background-image: url('../panelwizard/img/pull-dark.svg'); }

.CompanySubscribeEmailForm { max-width: 700px; }
.CompanySubscribeEmailForm .Notes, .CompanySubscribeEmailForm .Notes textarea { height: 200px; }
@media (max-width: 650px) { .CompanySubscribeEmailForm .Notes { height: 240px; } }

.CheckListInput label, .CheckListInput label:before { background-color: #fff; }
.CheckListInput .Checked label, .CheckListInput .Checked label:before { background-color: #fff; }




/*  Form adjustments */
.CheckListInput li { margin-bottom: 2px; padding-left: 42px; }
.CheckListInput .Checked label:before, .questionnaire .CheckListInput .Checked label:before { background-image: url('./img/check.svg'); background-size: 14px auto; }
.CheckListInput .Readonly.Checked label:before, .questionnaire .CheckListInput .Readonly.Checked label:before { background-image: url(./img/readonly-check.svg); }
.CheckListInput .Readonly label { color: #aaa; }
.CheckListInput.readonly label, .CheckListInput.readonly label::before { cursor: unset; background-color: #d4d4d4; }


/*  OrderPaymentForm */

.OrderPaymentForm .Terms a { text-decoration: underline; color: #ff9700; }

.PaymentMethodDropdownInput .method { position: relative; }
.PaymentMethodDropdownInput .method:not(.method_id-null) label { padding-left: 40px; }
.PaymentMethodDropdownInput .method::before { content: ''; position: absolute; left: 8px; top: 50%; margin-top: -12px; background: transparent url('./img/payment_methods.png') no-repeat center center; width: 20px; height: 20px; }
.PaymentMethodDropdownInput .method_id-postpay::before { background-position: 0 0; background-image: url('./img/envelope-letter.png'); }
.PaymentMethodDropdownInput .method_id-3::before { background-position: 0 0; background-image: url('./img/logo_small.png'); background-size: cover; }
.PaymentMethodDropdownInput .method_id-10::before { background-position: 0 0; }
.PaymentMethodDropdownInput .method_id-706::before { background-position: 0 -70px; }
.PaymentMethodDropdownInput .method_id-136::before { background-position: 0 -140px; }
.PaymentMethodDropdownInput .method_id-138::before { background-position: 0 -280px; }


/*  OrderReferenceForm */
.OrderReferenceForm { margin-bottom: 32px; }
.OrderReferenceForm .FormFieldName { color: #4b4b4b !important; font-weight: normal !important; }
.OrderReferenceForm .SubmitButton { margin-top: 0; }

.OrderReferenceForm .ExpandButtonContainer { max-height: 64px; visibility: visible; opacity: 1; }
.OrderReferenceForm.Expanded .Group { max-height: 256px; visibility: visible; opacity: 1; }

.OrderReferenceForm.Expanded .ExpandButtonContainer, 
.OrderReferenceForm .Group { max-height: 0px; visibility: hidden; opacity: 0; }



/*  cookieConsentBanner */

.cookieConsentBanner { position: fixed; left: 0; bottom: 0; width: 100%; max-width: unset; max-height: 100%; overflow: auto; z-index: 120; background-color: #fff; box-shadow: 0 0 1em rgba(0, 0, 0, 0.3); margin: 0; }
.cookieConsentBanner .contentGroup { padding: 16px; box-sizing: border-box; }
.cookieConsentBanner .textGroup {  }
.cookieConsentBanner .buttonGroup { display: flex; gap: 4px; }
.cookieConsentBanner .buttonGroup button { min-width: unset;}
.cookieConsentBanner .linkGroup { margin-bottom: 1.5em; }

.cookieConsentBanner p, .cookieConsentBanner h2 { color: #4b4b4b; text-shadow: none; font-weight: normal; }
.cookieConsentBanner a { color: #ff9700; cursor: pointer; }

@media (min-width: 1056px) 
{
    .cookieConsentBanner .contentGroup { width: 1056px; margin: 0 auto; }  
}

/* NewPassword */

.FormField.Strength0.InvalidValue .FormFieldValidation,
.FormField.Strength1.InvalidValue .FormFieldValidation,
.FormField.Strength2.InvalidValue .FormFieldValidation,
.FormField.Strength3.InvalidValue .FormFieldValidation,
.FormField.Strength4.InvalidValue .FormFieldValidation { color: #a00; }




/* Home 2 */

.BlueSwirl p, .Blue p { margin-bottom: 40px; font-size: 20px; line-height: 28px; }
.Home h2 { font-size: 36px; font-weight: bold; line-height: 44px; margin-bottom: 32px; }
		
.HomeHero { overflow: hidden; box-sizing: border-box; min-height: 700px; position: relative; padding-top: 128px; padding-bottom: 68px; background: transparent url('./img/FS_homepage_lijnen.png') no-repeat center center; background-size: cover; color: #fff; }
.HomeHero .Button { box-shadow: 0 0 0.3em rgb(255 0 0 / 40%); }
.HomeHero h1 { margin: 0; font-size: 96px; line-height: normal; margin-bottom: 32px; }
.HomeHero p { font-size: 25px; }
.HomeHero h1 .Dark { color: #4b4b4b; }
.HomeHero img { position: absolute; bottom: -24px; left: calc(50% - 150px); }

.HomeHeroFooter { width: 100%; height: 68px; background: #2A9EB0; color: #fff; }
.HomeHeroFooter ul { line-height: 68px; font-weight: bold; font-size: 18px; }
.HomeHeroFooter ul li { display: inline-block; width: 33%; }
.HomeHeroFooter ul li span { display: inline-black; padding-left: 40px; position: relative; }
.HomeHeroFooter ul li span::before { content: ''; display: block; position: absolute; left: 0; top: 50%; margin-top: -15px; width: 32px; height: 32px; }
.HomeHeroFooter ul li:nth-child(1) { text-align: left; }
.HomeHeroFooter ul li:nth-child(2) { text-align: center; }
.HomeHeroFooter ul li:nth-child(3) { text-align: right; }
			
.HomeHeroFooter ul li:nth-child(1) span::before { background: transparent url('./img/iconmonstr-time-3.svg') no-repeat center center; background-size: 80% auto; }
.HomeHeroFooter ul li:nth-child(2) span::before { background: transparent url('./img/iconmonstr-user-29.svg') no-repeat center center; background-size: auto 100%; }
.HomeHeroFooter ul li:nth-child(3) span::before { background: transparent url('./img/iconmonstr-currency-6.svg') no-repeat center center; background-size: 70% auto; }
			
.BlueSwirl { background: transparent url('./img/blue-swirl.png') no-repeat bottom center; background-size: 100% auto; padding-bottom: 96px; padding-top: 64px; }		
.BlueSwirl .form-price { margin-bottom: 40px; }
@media (min-width: 1000px) { .BlueSwirl .form-price { float: right; margin-left: 96px; margin-bottom: 40px; } }

.Blue { position: relative; background: #2A9EB0; color: #fff; padding: 64px 0; }
			
.Blue ol { clear: both; }
.Blue ol li { display: inline-block; width: 14%; margin: 0 1%; text-align: center; vertical-align: top; counter-increment: step; } 
.Blue ol li::before { content: counter(step); display: block; text-align: center; width: 96px; height: 96px; margin: 0 auto; margin-bottom: 16px; background-color: #fff; border-radius: 48px; color: #2A9EB0; line-height: 96px; font-size: 44px; font-weight: bold; }
.Blue ol li h3 { margin-top: 24px; margin-bottom: 24px; font-size: 24px; line-height: 24px; }
.Blue img { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);  }
			
.SixStepInfo { position: relative; padding-right: 700px; height: 480px;  }
.SixStepInfo img { position: absolute; top: 0; right: 16px; margin-bottom: 96px; max-width: 100%; }
			
.Clients { padding: 64px 0; }
.Clients ul { text-align: center; }
.Clients ul li { display: inline-block; max-width: 100%; margin-top: 64px; margin-bottom: 96px; width: 33% }
.Clients img { width: 300px; }
			
.Clients .CallToAction { display: none; }
.Clients .CallToAction .Button.Light { color: #fff; background-color: #ff9700; }
			
.Button { margin-right: 8px; box-sizing: border-box; display: inline-block; background: #4b4b4b; border-style: none; border-radius: 28px; height: 56px; min-width: 290px; text-decoration: none; color: #fff; text-align: center; line-height: 56px; font-size: 25px; }
.Button.Light { background: #fff; color: #ff9700; }
		
.Center { max-width: 100%; width: 1320px; padding: 0 32px; box-sizing: border-box; margin: 0 auto; }

	
		
@media (max-width: 1280px) 
{
	.HomeHero { padding-top: 16px; }
	.HomeHero h1, .HomeHero p, .HomeHero img { text-align: center; }
	.HomeHero h1 { font-size: 80px; margin-bottom: 16px; }  
	.HomeHero p { margin-bottom: 26px; }  
	.HomeHero img { width: 600px; left: 50%; margin-left: -300px; }
				
	.Button { height: 48px; min-width: 220px; font-size: 20px; line-height: 48px; }
}
						
@media (max-width: 1100px)
{
	.Home h2 { font-size: 32px; }
			
	.HomeHeroFooter { height: 150px; text-align: center; padding: 8px 0; }
	.HomeHeroFooter ul { display: inline-block; max-width: 360px; }
	.HomeHeroFooter ul li { width: unset; display: block; text-align: left !important; height: 50px; line-height: 50px; vertical-align: middle; }
				
	.SixStepInfo { padding-right: 0; height: unset; }
	.SixStepInfo img { position: static; }
				
	.Blue ol li::before { width: 80px; height: 80px; border-radius: 40px; line-height: 80px; font-size: 36px; }
	.Blue ol li { width: 30%; }
	.Blue ol li h3 { font-size: 20px; line-height: 20px; }
    .Blue ol li p { font-size: 18px; }
				
	.Clients { text-align: center; }
	.Clients .CallToAction { display: block; }
	.Clients ul { margin-bottom: 64px; }
	.Clients ul li { margin-top: 32px; margin-bottom: 48px; width: 49%; }
}
			
			
@media (max-width: 600px)
{
	.Home h2 { font-size: 24px; line-height: 28px; }
			
	.HomeHero { min-height: 600px; } 
	.HomeHero h1 { font-size: 64px; margin-bottom: 20px; }  
	.HomeHero p { margin-bottom: 48px; font-size: 22px; }  
	.HomeHero img { width: 360px; margin-left: -180px; }
						
	.Blue ol li { width: 45%; margin: 0 2%; }
												
	.Button { display: block; margin: 0 auto; margin-bottom: 16px; width: 275px; }
				
	.Clients ul li { width: 100%; }
	
	.Center { padding: 0 20px; }
}


.MediaThumbnails .AudioImage { background: transparent url('./img/audio-icon.png') no-repeat center center; background-size: cover; }




/* animated list */
.ListInput { position: relative; transition-property: height; transition-duration: 0.4s; }
.ListInput > li { position: absolute; left: 0; width: 100%; transition-property: top; transition-duration: 0.4s; }

.listItem
{ 
	display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: 4px;
    text-align: left; background-color: #fff; color: #4b4b4b; border-style: none; outline: none; border-radius: 5px; 
    min-height: 40px; box-sizing: border-box; line-height: 24px; font-size: 11pt;
    transition-property: background-color, box-shadow; transition-duration: 0.25s; vertical-align: top;
	margin-bottom: 2px;

	/*padding: 8px 16px; */
}

.listItem .iconImage { order: 0; width: 64px; height: 64px; object-fit: cover; margin: 8px 12px; margin-right: -8px; }
.listItem .indexText { order: 1; display: inline-block; margin-top: 9px; margin-left: 12px; }
.listItem .labelEditor { order: 2; flex-grow: 1; background: transparent; text-overflow: ellipsis; padding: 0; }
.listItem.clickable .labelEditor { cursor: pointer; }
.listItem .stateContainer { order: 3; display: flex; }

.listItem .stateContainer { cursor: pointer; }
.listItem .extraState { order: 0; margin: 8px; font-size: 90%; }
.listItem .stateIcon { order: 1; width: 32px; height: 40px; background: transparent none no-repeat center center; background-size: 24px; }
.listItem .stateIcon.textInputEnabled { background-image: var(--textInputIconDark); }

.listItem .menuButton { order: 2; width: 40px; height: 40px; background: transparent var(--contextMenuIconDark) no-repeat center center; background-size: 24px auto; }
.listItem.indexLocked .indexText { padding-left: 18px; background: transparent var(--lockIconDark) no-repeat 0px 2px; background-size: 16px auto; }

/* highlighted */
.listItem.highlighted { background-color: var(--listItemHighlightBackgroundColor) !important; color: #fff; }
.listItem.highlighted .labelEditor { color: #fff; }
.listItem.highlighted .stateIcon.textInputEnabled { background-image: var(--textInputIconLight); }
.listItem.highlighted .menuButton { background-image: var(--contextMenuIconLight); }
.listItem.highlighted.indexLocked .indexText { background-image: var(--lockIconLight); }

.listItem.clickable:not(.readonly) { cursor: pointer; }

.readonly .listItem { background-color: #d4d4d4; box-shadow: none; }


/* contextMenu */
.contextMenuOverlay { position: fixed; z-index: 1000001; left: 0; top: 0; width: 100%; height: 100%; user-select: none; }
.contextMenu { position: absolute; max-width: 100%; border-radius: 5px; background-color: var(--contextMenuBackgroundColor); box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.2); color: var(--contextMenuForegroundColor); overflow: hidden; user-select: false; }
.contextMenu li { position: relative; z-index: 1; display: block; white-space: nowrap; max-width: 100%; box-sizing: border-box; padding: 0 60px; line-height: 40px; }
.contextMenu li:not(.disabled):not(.separator) { cursor: pointer; }
.contextMenu li:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 48px; height: 100%; background: var(--contextMenuSeparatorColor) none no-repeat left 12px center; background-size: auto 24px; }
.contextMenu li:hover:not(.disabled):not(.separator) { background-color: var(--contextMenuHoverBackgroundColor); color: #fff; }

.contextMenu li.separator { height: 1px; background: var(--contextMenuSeparatorColor); }
.contextMenu li.disabled { color: var(--contextMenuDisabledForegroundColor); }
.contextMenu li.moveToTop:before { background-image: var(--moveToTopIconLight); }
.contextMenu li.moveOneUp:before { background-image: var(--moveOneUpIconLight); }
.contextMenu li.moveOneDown:before { background-image: var(--moveOneDownIconLight); }
.contextMenu li.moveToBottom:before { background-image: var(--moveToBottomIconLight); }
.contextMenu li.editRouting:before { background-image: var(--editRoutingIconLight); }
.contextMenu li.showTextInput:before { background-image: var(--textInputIconLight); }
.contextMenu li.hideTextInput:before { background-image: var(--hideTextInputIconLight); }
.contextMenu li.lockIndex:before { background-image: var(--lockIndexIconLight); }
.contextMenu li.unlockIndex:before { background-image: var(--unlockIndexIconLight); }
.contextMenu li.delete:before { background-image: var(--deleteIconLight); }
.contextMenu li.addImage:before { background-image: var(--addImageIconLight); }
.contextMenu li.addVideo:before { background-image: var(--addVideoIconLight); }
.contextMenu li.addAudio:before { background-image: var(--addAudioIconLight); }
.contextMenu li.edit:before { background-image: var(--editIconLight); }
.contextMenu li.preview:before { background-image: var(--previewIconLight); }
.contextMenu li.copy:before { background-image: var(--copyIconLight); }
.contextMenu li.report:before { background-image: var(--reportIconLight); }

/* dialogWindow */

.dialogOverlay { display: none; position: fixed; z-index: 1000002; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }

.dialogWindow { position: absolute; left: 100px; top: 100px; display: flex; flex-direction: column; width: 768px; max-height: 100%; box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; overflow: hidden; box-sizing: border-box; }
.dialogWindow > .titleBar { order: 0; position: relative; user-select: none; width: 100%; box-sizing: border-box; padding: 4px 16px; height: 40px; line-height: 32px; background-color: var(--titleBackgroundColor); color: var(--titleForegroundColor); cursor: pointer; }
.dialogWindow > .titleBar > .closeButton { min-width: unset; min-height: unset; width: 28px; height: 28px; position: absolute; right: 6px; top: 6px; padding: 0; background: transparent var(--closeIconLight) no-repeat center center; background-size: 24px auto; }
.dialogWindow > .titleBar > .title { width: unset; }
.dialogWindow > .client { order: 1; flex-grow: 1; padding: 8px 16px; overflow: auto; }
.dialogWindow > .client h2 { margin-top: 8px; margin-bottom: 16px; font-size: 18px; }
.dialogWindow > .buttonBar { order: 2; position: static; width: 100%; height: 60px; background: var(--quaternary-background-color); padding: 8px; box-sizing: border-box; text-align: right; }

.dialogWindow > .inputForm { padding: 4px 12px; box-sizing: border-box; width: 100%; height: 100%; position : relative; overflow: auto; }
.dialogWindow > .titleBar > h3.title { margin: 0; font-size: 16px; }

@keyframes blink { 50% { background-color: white; color: var(--secondary-foreground-color); } }
.dialogWindow.blink .titleBar { animation: blink 200ms; animation-iteration-count: 3; } 

@media only screen and (max-width: 768px) 
{
	.dialogWindow { position: fixed; left: 0; top: 0; width: 100% !important; height: 100% !important; max-height: unset; min-width: unset; border-radius: 0; }
}



.formButtons { display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: 4px; width: 100%; }
.formButtons > a { display: block; width: 100%; }
.formButtons > div { width: 100%; }
.formButtons button { margin: 0; }
.formButtons button.submit { order: 1; }
.formButtons button.cancel { order: 2; }



.questionForm h3 { margin-top: 24px; }
.questionForm.readonly .questionTextGroup { background-color: #d4d4d4; box-shadow: none; }
.questionForm.readonly .mediaInput { border-top: solid 1px #b4b4b4; }
.questionForm.readonly .addAnswerButton { display: none; }
.questionForm.readonly .addOptionButton { display: none; }
.questionForm.readonly .addAspectButton { display: none; }
.questionForm.readonly .cancelButtonGroup { display: none; }
.questionForm .cancelButtonGroup { margin-top: 48px; margin-bottom: 16px; }

.saveButtonPopup
{ 
    transition-property: bottom; transition-duration: 0.5s;
    position: fixed; z-index: 10; left: 0; bottom: -100px; width: 100%; box-shadow: 0 4px 16px rgba(0, 0, 0, 1.0);
    background: #ff9700 url(./img/FS_homepage_lijnen.png) no-repeat center center; background-size: cover;
}

.changed .saveButtonPopup { bottom: 0px; }
.changed .saveButtonPopup button 
{
    animation: blink-animation 0.4s ease-out 0s 3;
    -webkit-animation: blink-animation 0.4s ease-out 0s 3;
}

.randomAnswerNote { display: none; }
.maximumAnswerCountNote, .maximumOptionCountNote, .maximumQuestionCountNote { display: none; }

.maximumAnswerCountReached .addAnswerButton,
.maximumOptionCountReached .addOptionButton,
.maximumQuestionCountReached .addQuestionButton { display: none; }

.maximumAnswerCountReached .maximumAnswerCountNote,
.maximumOptionCountReached .maximumOptionCountNote,
.maximumQuestionCountReached .maximumQuestionCountNote { display: block; }

.answersRandomized .randomAnswerNote { display: block; }

.answerListField, 
.optionListField,
.questionListField { margin-bottom: 0; }


.titleGroup { display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: 8px; justify-content: space-between; }
.titleGroup h3 { order: 1 }
.titleGroup .previewButton { order: 2; align-self: flex-end; }

.buttonText { display: inline-block; height: 100%; background: transparent url('./img/magnify-white.svg') no-repeat left center; padding-left: 32px; padding-right: 8px; }

.previewButton { width: auto; min-width: unset;  }
.previewButton:hover .buttonText { color: #ff9700; background-image: url('./img/magnify-focus.svg'); }

.questionTextGroup { clear: both; border-radius: 5px; background: #fff; }
.questionTextGroup .FormField { margin-bottom: 0; }
.questionTextGroup textarea { border-radius: unset; background: transparent; height: unset; resize: vertical; text-overflow: ellipsis; }
.questionTextGroup textarea:read-only { background: transparent; }

.mediaInput { margin: 0 8px; padding: 2px 0; border-top: solid 1px #aaa; }
.mediaInput .addMedia { font-size: 90%; cursor: pointer; background: transparent var(--addMediaIconDark) no-repeat left center; background-size: 20px; padding-left: 26px;  }
.mediaInput .addMedia:hover { text-decoration: underline; }
.mediaInput .mediaList .listItem { display: none; margin-left: -8px; margin-right: -8px; }

.detailsPath summary { text-decoration: underline; margin-bottom: 1.0em; cursor: pointer; }




.surveyQuestionsForm.readonly .addQuestionButton { display: none; }
.surveyQuestionsForm.updateonly .addQuestionButton { display: none; }

.questionInputGroup { margin-bottom: 32px; }

.audienceForm .variableGroup { margin-bottom: 16px; }
.audienceForm .variableGroups { margin-bottom: 32px; }




.questionCheckInfo { padding: 8px; margin-bottom: 32px; border: solid 1px #aaa; }
.questionCheckInfo h2 { margin-top: 0; margin-bottom: 8px; }

.questionCheckInfo figure { margin: 0; width: 640px; max-width: 100%; }
.questionCheckInfo figure img { width: 100%; }
.questionCheckInfo .description { font-weight: bold; font-size: 13px; }
.questionCheckInfo .optionList { display: inline; }

.questionCheckInfo p,
.questionCheckInfo .optionGroup, 
.questionCheckInfo .answerGroup,
.questionCheckInfo .youtubeGroup,
.questionCheckInfo .vimeoGroup,
.questionCheckInfo .audioGroup,
.questionCheckInfo .answerList,
.questionCheckInfo .answerImageList,
.questionCheckInfo .imageMedia { margin-bottom: 8px; }

.questionCheckInfo .answerImage { display: inline-block; margin-right: 8px; }
.questionCheckInfo .answerImage figure { width: 320px; }


/*	Grey background */
.dialogWindow,
body.whiteOnGrey,
.whiteOnGrey .overlay .dialog,
.ReportLayout .NavigationBar, 
body.ReportPage,
.ReportPage .TextInput, 
.ReportPage .CheckListInput label { background: #eee; }
.ReportPage .CheckListInput label::before { background-color: #eee; }


/*	Grey background exceptions */
.whiteOnGrey .dialog-question-example .dialog { background: #fff; }



/*	Add grey border */
.whiteOnGrey .questionTextGroup,
.whiteOnGrey .listItem,
.whiteOnGrey .dropdown,
.whiteOnGrey .dropdown .popupstyle,
.whiteOnGrey input[type=text],
.whiteOnGrey input[type=password],
.whiteOnGrey .TextInput,
.whiteOnGrey .NewPasswordInput,
.whiteOnGrey .checklist li > label, 
.whiteOnGrey .checkfield label,
.whiteOnGrey .CheckListInput label,
.whiteOnGrey .CheckListInput label:before,
.whiteOnGrey .checklist li > label::before, 
.whiteOnGrey .checkfield label::before,
.whiteOnGrey .box-order,
.whiteOnGrey .box-report,
.whiteOnGrey .DropdownInput .Display,
.whiteOnGrey .DropdownInput ul { border: solid 1px #bbb; }

.whiteOnGrey .box-order,
.whiteOnGrey .box-report { background: #fff; }


/*	Grey border exceptions */
.whiteOnGrey .listItem input,
.whiteOnGrey .mediaList .listItem,
.whiteOnGrey .questionTextGroup .TextInput { border-style: none; }

/*	Links */
.whiteOnGrey a { color: #ff9700; text-decoration: underline; }

/*	Links exceptions */

.whiteOnGrey a.button { text-decoration: none; color: #fff; }



/* progressBar */

@keyframes progressBarKeyFrames { from { background-position: 0 0; } to { background-position: 0 48px; } }

.progressBar { height: 16px; background-color: #fff; border-radius: 5px; border: solid 1px #9E5E00; }
.progressBar .completionBar { width: 0%; background: transparent url('./img/progress.svg') repeat center center; height: 100%; border-right: solid 1px #9e5e00; animation: progressBarKeyFrames 2s linear infinite; transition: width 1.5s ease-in-out; }
.progressBar .completionBar::after { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0)); }


/* questionTypeForm */

.questionTypeForm .exampleLink { float: right; height: 40px; text-decoration: underline; margin-left: 8px; cursor: pointer; }
.questionTypeForm .inputGroup { margin-bottom: 32px; }