@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url('../files/fonts/noto-sans-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url('../files/fonts/noto-sans-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../files/fonts/noto-sans-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('../files/fonts/noto-sans-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('../files/fonts/nunito-sans-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('../files/fonts/nunito-sans-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../files/fonts/nunito-sans-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../files/fonts/nunito-sans-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.vitae body, body {
touch-action: pan-y;
font-size: 11pt;
color: #000;
line-height: normal;
padding-bottom: 0;
padding-top: 15px;
flex-direction: column;
display: flex;
min-height: 60vh;
}
body > article, .vitae body > article {
flex: 1;
}
.footer-vitae {
text-align: center;
}
.vitae .top-container.space-col {
margin-top: 0;
}
.vitae .navbar-default {
border-color: #FAFAFA;
}
.font-avenir {
font-family: 'Nunito Sans', system-ui, sans-serif;
}
.vitae #ls-button-previous, .vitae #ls-button-submit {
border-width: 1px;
border-style: solid;
border-color: #000000;
font-size: 11pt;
}
.vitae .group-description.row.well.space-col {
border: none;
background-color: #FFF;
box-shadow: none;
}
.vitae h1, h1 {
font-size:13pt;
font-weight: 800;
}
.vitae h2, h2 {
font-size:11pt;
font-weight: 600;
}
.vitae h3, h3 {
font-size:11pt;
font-weight: 400;
}
.vitae h4, h4 {
font-size:11pt;
font-weight: 200;
}
.vitae p,
li {
line-height: normal;
font-size:11pt;
}
@media only screen and (max-width: 768px) {
.vitae h1 {
font-size:13pt;
}
.vitae h2 {
font-size:11pt;
}
.vitae h3 {
font-size:11pt;
}
.vitae h4 {
font-size:11pt;
}
.vitae p, body, li, .vitae #ls-button-previous, .vitae #ls-button-submit{
line-height: normal;
font-size:11pt;
}
}
.ls-answers label, .ls-answers th {
font-weight: 400;
font-size:11pt;
}
.btn {
text-align: center;
white-space: nowrap;
cursor: pointer;
font-size: 11pt;
line-height: 1.42857143;
}
.custom-youtube-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
.custom-responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.logo {
width: 20%;
}
.triadeQuestion .left-text {
float: left;
margin-left: -5%;
text-align: right;
width: 45%;
font-size: 11pt;
}
.triadeQuestion .right-text {
float: right;
margin-right: -5%;
text-align: left;
width: 45%;
font-size: 11pt;
}
.triadeQuestion .top-text {
width: 40%;
text-align: center;
line-height: 100%;
font-size: 11pt;
}
.triade-cancel .radio__label {
line-height: normal;
font-size: 11pt;
font-weight: normal;
color: black;
}
.checkbox {
font-size: 20px;
color: black;
}
.checkbox__control {
display: inline-grid;
width: 1.2em;
height: 1.2em;
border-radius: 0.25em;
border: 0.1em solid black;
}
.btn.active, .btn:active {
background: lightgray;
}
.triadeQuestion .triade-draggable-droppable {
background-color: #01689b;
}
.btn-primary {
background-color: #01689b;
}
.elicit-button {
min-height: 80px !important;
}
.text-info {
color: #01689b;
}
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) {
.visible-xs-block {
display: none !important;
}
.visible-xs-inline-block {
display: none !important;
}
}
@media only screen and (max-width: 768px) {
.answers-list ul.list-unstyled.col-sm-6.col-xs-12 {
margin-bottom: 0px!important;
}
#outerframeContainer {
width: 100%;
}
}
.ls-questionhelp:before{content:"\f05a"}
.elicit-button label {
padding: 1pt !important;
}
p,
li {
color: black;
}
.vitae .question-container {
margin-bottom: 1em;
border: none;
background-color: #FFFFFF;
}
.vitae .navbar-default {
background-color: #FFFFFF;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
padding: 4px;
padding-right: 4px;
padding-left: 4px;
line-height: 1.42857143;
vertical-align: middle;
border-top: 1px solid #ddd;
}
.radio-item label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
top: 0;
margin-left: -20px;
border: 2px solid #01689b;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-right: 0px;
margin-left:  0px;
}
ol, ul {
margin-top: 0px;
margin-bottom: 0px;
}
li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
margin-bottom: 2px;
}
.list-group-item {
position: relative;
display: block;
padding: 5px 5px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.container-fluid {
padding-right: 5px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
}
.ls-questionhelp::before {
content: none !important;
display: none !important;
}
.dir-ltr .ls-questionhelp {
margin-left: 0 !important;
}
.dir-rtl .ls-questionhelp {
margin-right: 0 !important;
}
p,
li,
label,
input,
textarea,
select,
.btn {
font-family: 'Noto Sans', system-ui, sans-serif;
}
h1,h2,h3,h4 {
font-family: 'Nunito Sans', system-ui, sans-serif;
font-style: normal; text-transform: uppercase; line-height: 1.05;
}
p,
li {
line-height: 1.65 !important;
}
body { background-color: #ffffff !important; padding-top: 0 !important; }
.navbar { display: none !important; }
.top-container { width: 100% !important; padding: 0 !important; margin-top: 0 !important; }
.space-col { margin-top: 0 !important; }
h1,h2,h3,h4,h5,h6,
.panel-title,.group-title { color: #1a1a1a !important; }
a { color: #1a1a1a !important; text-decoration: none !important; }
#outerframeContainer,
#outerframeContainer > .container,
#outerframeContainer > .container-fluid {
width: 100% !important; max-width: none !important;
padding: 0 !important; margin: 0 !important;
}
.navbar-default {
background-color: #fff !important;
border: none !important; box-shadow: none !important;
}
.group-container {
background: transparent !important;
border: none !important; box-shadow: none !important;
padding: 0 !important; max-width: none !important; width: 100% !important;
}
.group-title-container { padding: 0 clamp(60px, 22vw, 320px) !important; }
.question-container {
border: none !important; box-shadow: none !important;
background-color: transparent !important;
padding: 36px clamp(20px, 3vw, 48px) !important;
width: 100% !important; max-width: none !important;
box-sizing: border-box !important;
}
.question-container:not(.vk-hero) .question-text,
.question-container:not(.vk-hero) .ls-label-question {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
font-style: normal !important;
margin-bottom: 20px !important;
hyphens: none !important;
}
.question-container:not(.vk-hero) .question-text *,
.question-container:not(.vk-hero) .ls-label-question * {
font-family: inherit !important;
font-style: normal !important;
}
.question-container:not(.vk-hero) .ls-questionhelp h1 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-size: clamp(26px, 3.2vw, 48px) !important;
font-weight: 800 !important; font-style: normal !important;
text-transform: uppercase !important; letter-spacing: -0.02em !important;
line-height: 1.02 !important; color: #1a1a1a !important;
margin: 0 0 24px !important;
}
.question-container:not(.vk-hero) .ls-questionhelp h2 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 700 !important; font-style: normal !important;
letter-spacing: -0.01em !important;
margin: 24px 0 16px !important;
}
.question-container:not(.vk-hero) .ls-questionhelp h2:first-child {
margin-top: 0 !important;
}
.question-container:not(.vk-hero) .ls-questionhelp h3 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 500 !important; font-style: normal !important;
letter-spacing: 0.02em !important;
margin: 20px 0 10px !important;
}
.question-container:not(.vk-hero) .ls-questionhelp h3:first-child {
margin-top: 0 !important;
}
.question-container:not(.vk-hero) .ls-questionhelp h4 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-style: normal !important;
margin: 16px 0 8px !important;
}
.question-container:not(.vk-hero) .ls-questionhelp h4:first-child {
margin-top: 0 !important;
}
.question-container:not(.vk-hero) .ls-questionhelp p {
margin: 0 0 18px !important;
}
.question-container:not(.vk-hero) .ls-questionhelp p:last-child {
margin-bottom: 0 !important;
}
.question-container:not(.vk-hero) .ls-questionhelp strong,
.question-container:not(.vk-hero) .ls-questionhelp b {
font-weight: 700 !important; font-style: normal !important;
}
.question-container:not(.vk-hero) .ls-answers .answer-item label:not(.vk-label-hidden),
.question-container:not(.vk-hero) .ls-answers li label:not(.vk-label-hidden) {
font-family: var(--vk-optie-letter) !important;
font-weight: var(--vk-optie-gewicht) !important;
font-size: var(--vk-optie-maat) !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
color: #1a1a1a !important;
text-align: center !important;
display: block !important;
margin-top: 6px !important;
}
.navigator.space-col {
width: 100% !important; max-width: none !important;
box-sizing: border-box !important; background-color: transparent !important;
}
#ls-button-submit {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 700 !important; font-size: 19px !important;
letter-spacing: 0.07em !important; text-transform: uppercase !important;
padding: 15px 48px !important;
background: #b73131 !important; color: #ffffff !important;
border: none !important; border-radius: 0 !important;
transition: opacity 0.15s;
}
#ls-button-submit:hover { opacity: 0.82; }
.group-container.vk-hero-group { padding: 0 !important; }
.question-container.vk-hero {
position: relative !important;
max-width: none !important; width: 100% !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
box-sizing: border-box !important;
hyphens: none !important;
background:
linear-gradient(
to top,
rgba(0,0,0,0.80) 0%,
rgba(0,0,0,0.55) 38%,
rgba(0,0,0,0.30) 72%,
rgba(0,0,0,0.18) 100%
),
url('../files/backgrounds/welcome-hero.jpg') center top / cover no-repeat !important;
background-color: #1a1a1a !important;
}
.question-container.vk-hero::before {
display: none !important; background: none !important;
}
.question-container.vk-hero > * {
position: relative !important; z-index: 1 !important;
padding-left: clamp(40px,8vw,120px) !important;
padding-right: clamp(24px,4vw,60px) !important;
max-width: clamp(380px,80vw,1100px) !important;
box-sizing: border-box !important; width: 100% !important;
}
.question-container.vk-hero .question-text,
.question-container.vk-hero .ls-label-question {
padding-top: clamp(32px, 5vw, 72px) !important;
font-style: normal !important;
hyphens: none !important;
}
.question-container.vk-hero .question-text *,
.question-container.vk-hero .ls-label-question * {
color: #ffffff !important; font-family: inherit !important; font-style: normal !important;
}
.question-container.vk-hero .question-text h3,
.question-container.vk-hero .ls-label-question h3 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 400 !important; font-style: normal !important;
font-size: clamp(13px, 1.2vw, 18px) !important;
text-transform: uppercase !important; letter-spacing: 0.12em !important;
color: #ffffff !important; margin: 0 0 6px !important; line-height: 1.3 !important;
}
.question-container.vk-hero .question-text h1,
.question-container.vk-hero .ls-label-question h1 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 800 !important; font-style: normal !important;
font-size: clamp(32px, 5vw, 68px) !important;
text-transform: uppercase !important; letter-spacing: -0.03em !important;
line-height: 0.92 !important; color: #ffffff !important; margin: 0 0 8px !important;
overflow-wrap: break-word !important; word-break: break-word !important;
}
.question-container.vk-hero .question-text h2,
.question-container.vk-hero .ls-label-question h2 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 400 !important; font-style: normal !important;
font-size: clamp(18px, 2.4vw, 36px) !important;
text-transform: uppercase !important; letter-spacing: -0.01em !important;
line-height: 1.1 !important; color: #ffffff !important; margin: 0 0 4px !important;
}
.question-container.vk-hero .question-text h4,
.question-container.vk-hero .ls-label-question h4 {
color: #f59e0b !important; display: inline !important;
font-size: inherit !important; font-weight: inherit !important;
font-style: normal !important; margin: 0 !important;
}
.question-container.vk-hero .questionhelp,
.question-container.vk-hero .ls-questionnumber,
.question-container.vk-hero .ls-questioncode,
.question-container.vk-hero .questionasterix,
.question-container.vk-hero .ls-mandatory,
.question-container.vk-hero .mandatory,
.question-container.vk-hero [class*="mandatory"],
.question-container.vk-hero .ls-label-mandatory { display: none !important; }
.vk-mozaiek {
flex-wrap: wrap !important;
}
.vk-mozaiek ul.vk-tegel-wrap { display: contents !important; }
ul.vk-tegel-wrap .answer-item {
flex: 0 0 auto !important;
flex-direction: column !important; align-items: center !important;
}
ul.vk-tegel-wrap:not(.vk-mozaiek ul.vk-tegel-wrap) {
display: flex !important; flex-wrap: wrap !important;
justify-content: center !important; align-items: flex-start !important;
gap: 24px 20px !important; list-style: none !important;
padding: 8px 0 24px !important; margin: 0 !important;
}
.vk-antwoord-tegel {
background-position: center !important;
flex-shrink: 0 !important;
}
.vk-antwoord-tegel::before {
background: rgba(255, 255, 255, 0.82) !important;
}
.vk-tegel-tekst {
font-style: normal !important;
}
.vk-anders-invoer {
min-height: 1.3em !important;
}
ul.vk-tegel-wrap li.radio-text-item .radio,
ul.vk-tegel-wrap li.radio-text-item .checkbox,
ul.vk-tegel-wrap li.checkbox-text-item .radio,
ul.vk-tegel-wrap li.checkbox-text-item .checkbox { display: none !important; }
.vk-anders-tegel::before {
background: rgba(255, 255, 255, 0.18) !important;
}
.vk-anders-tegel input[type="text"] {
position: absolute !important; z-index: 3 !important;
width: 80% !important; left: 10% !important; top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important; border: none !important;
border-bottom: 1.5px solid rgba(26,26,26,0.30) !important;
text-align: center !important;
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 700 !important; font-size: 13px !important;
color: #1a1a1a !important; outline: none !important;
padding: 2px 0 !important; line-height: 1.2 !important;
}
.vk-anders-tegel input[type="text"]::placeholder {
color: rgba(26,26,26,0.38) !important;
font-style: italic !important; font-size: 10px !important;
}
.question-container.upload-files .ls-answers.upload-item {
display: flex !important; flex-direction: row !important;
align-items: stretch !important; gap: 0 !important;
padding: 0 !important; min-height: 180px !important;
background: transparent !important; border: none !important;
}
.question-container.upload-files .upload-button {
flex: 0 0 160px !important; background: #b73131 !important;
display: flex !important; align-items: stretch !important;
justify-content: stretch !important; padding: 0 !important;
}
.question-container.upload-files .upload-button a.btn {
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: center !important;
width: 100% !important; height: 100% !important; min-height: 180px !important;
background: transparent !important; border: none !important; border-radius: 0 !important;
box-shadow: none !important; color: #ffffff !important;
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 700 !important; font-size: 11px !important;
text-transform: uppercase !important; letter-spacing: 0.12em !important;
gap: 12px !important; padding: 24px 12px !important;
transition: background 0.15s; text-decoration: none !important;
}
.question-container.upload-files .upload-button a.btn:hover {
background: rgba(0,0,0,0.14) !important;
}
.question-container.upload-files .upload-button .fa-upload {
font-size: 50px !important; display: block !important; line-height: 1 !important;
}
.question-container.upload-files .upload-button .fa-upload::before {
content: '\f0ee' !important;
}
.question-container.upload-files [id$="_uploadedfiles"] {
flex: 1 !important; padding: 16px 20px !important; min-height: 180px !important;
background: #f5f5f5 !important; display: flex !important; align-items: flex-start !important;
}
.question-container.upload-files [id$="_uploadedfiles"]:empty::after {
content: 'Nog geen bestanden geüpload' !important;
font-family: 'Noto Sans', system-ui, sans-serif !important;
font-size: 14px !important; color: #aaa !important;
align-self: center !important; display: block !important;
}
html:not(:lang(nl)) .question-container.upload-files [id$="_uploadedfiles"]:empty::after { content: 'No files uploaded yet' !important; }
html:lang(de) .question-container.upload-files [id$="_uploadedfiles"]:empty::after { content: 'Noch keine Dateien hochgeladen' !important; }
html:lang(fr) .question-container.upload-files [id$="_uploadedfiles"]:empty::after { content: 'Aucun fichier téléversé' !important; }
.question-container.upload-files table.uploadedfiles {
display: block !important; width: 100% !important;
border: none !important; background: transparent !important;
}
.question-container.upload-files table.uploadedfiles thead { display: none !important; }
.question-container.upload-files table.uploadedfiles tbody {
display: flex !important; flex-wrap: wrap !important;
gap: 12px !important; padding: 0 !important; margin: 0 !important;
}
.question-container.upload-files table.uploadedfiles tr {
display: flex !important; flex-direction: column !important;
width: 140px !important; background: #ffffff !important;
border: none !important; box-shadow: none !important; overflow: hidden !important;
}
.question-container.upload-files table.uploadedfiles td.upload.image {
display: block !important; width: 140px !important; height: 140px !important;
padding: 0 !important; overflow: hidden !important;
flex-shrink: 0 !important; background: #e8e8e8 !important;
}
.question-container.upload-files table.uploadedfiles td.upload.image img.uploaded {
width: 140px !important; height: 140px !important;
object-fit: cover !important; display: block !important;
}
.question-container.upload-files table.uploadedfiles td.upload.title {
display: block !important;
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 700 !important; font-size: 12px !important;
text-transform: uppercase !important; letter-spacing: 0.04em !important;
color: #1a1a1a !important; padding: 7px 8px 2px !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.question-container.upload-files table.uploadedfiles td.upload.comment {
display: block !important;
font-family: 'Noto Sans', system-ui, sans-serif !important;
font-size: 11px !important; color: #999 !important;
padding: 0 8px 2px !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.question-container.upload-files table.uploadedfiles td.upload.edit { display: none !important; }
.question-container.upload-files table.uploadedfiles td:last-child {
display: block !important; padding: 5px 8px 8px !important; margin-top: auto !important;
}
.question-container.upload-files table.uploadedfiles td:last-child a.btn {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-size: 11px !important; font-weight: 600 !important;
text-transform: uppercase !important; letter-spacing: 0.06em !important;
padding: 4px 8px !important; border-radius: 0 !important;
background: #1a1a1a !important; color: #ffffff !important;
border: none !important; box-shadow: none !important;
display: inline-flex !important; align-items: center !important;
gap: 4px !important; transition: background 0.15s;
}
.question-container.upload-files table.uploadedfiles td:last-child a.btn:hover {
background: #b73131 !important;
}
.vk-cancel-btn {
display: inline-flex !important; align-items: center; justify-content: center;
width: 28px !important; height: 28px !important; border-radius: 50% !important;
border: 1.5px solid rgba(26,26,26,0.28) !important;
background: transparent !important; color: rgba(26,26,26,0.52) !important;
font-size: 12px !important; line-height: 1 !important;
padding: 0 !important; text-decoration: none !important;
transition: border-color 0.15s, color 0.15s;
}
.vk-cancel-btn:hover {
border-color: rgba(26,26,26,0.65) !important; color: #1a1a1a !important;
}
div[id^="gmap_canvas_"] {
min-height: 400px !important; height: 400px !important;
width: 100% !important; display: block !important;
}
.leaflet-container {
min-height: 400px !important; height: 400px !important;
width: 100% !important; display: block !important; z-index: 0 !important;
}
.question-container div[id$="_MAP"],
.question-container div[id*="_map"],
.question-container .map_container {
min-height: 400px !important; height: 400px !important;
width: 100% !important; display: block !important;
}
@media (max-width: 768px) {
.question-container {
padding-left: clamp(20px, 5vw, 60px) !important;
padding-right: clamp(20px, 5vw, 60px) !important;
}
.navigator.space-col {
padding-left: clamp(20px, 5vw, 60px) !important;
padding-right: clamp(20px, 5vw, 60px) !important;
}
.group-title-container {
padding-left: clamp(20px, 5vw, 60px) !important;
padding-right: clamp(20px, 5vw, 60px) !important;
}
.question-container.vk-hero > * {
padding-left: 5vw !important; padding-right: 5vw !important; max-width: 100%;
}
.vk-antwoord-tegel { width: 88px !important; height: 88px !important; }
ul.vk-tegel-wrap .answer-item { min-width: 96px !important; }
ul.vk-tegel-wrap { gap: 8px 4px !important; }
.question-container.upload-files .upload-button { flex: 0 0 80px !important; }
.question-container.upload-files .upload-button .fa-upload { font-size: 28px !important; }
.question-container.upload-files .upload-button a.btn {
font-size: 9px !important; gap: 8px !important; min-height: 120px !important;
}
.question-container.upload-files table.uploadedfiles tr { width: 90px !important; }
.question-container.upload-files table.uploadedfiles td.upload.image,
.question-container.upload-files table.uploadedfiles td.upload.image img.uploaded {
width: 90px !important; height: 90px !important;
}
}
:root {
--vk-groen:     #4aff89;
--vk-rood:      #b73131;
--vk-leisteen:  #2e3a3f;
--vk-inkt:      #1a1f2e;
--vk-diepblauw: #00073d;
--vk-balk:      #f6f4f2;
--vk-tegel-grond: var(--vk-tegel-overlay, var(--vk-hero-overlay, #00073d));
}
body,
.question-container p {
font-family: 'Noto Sans', system-ui, sans-serif !important;
color: var(--vk-inkt) !important;
font-size: clamp(16px, 1.1vw, 18px) !important;
line-height: 1.70 !important;
}
.question-container h1, .question-container h2,
.question-container h3, .question-container h4,
.ls-questionhelp h1, .ls-questionhelp h2,
.ls-questionhelp h3, .ls-questionhelp h4,
.question-text, .ls-label-question {
font-family: 'Nunito Sans', system-ui, sans-serif;
font-weight: 600;
}
.question-container:not(.vk-hero) .question-text,
.question-container:not(.vk-hero) .ls-label-question,
.question-container:not(.vk-hero) .question-text h1,
.question-container:not(.vk-hero) h1 {
font-size: clamp(26px, 2.4vw, 34px) !important; line-height: 1.18 !important;
color: var(--vk-leisteen) !important; text-transform: none !important;
}
.question-container h2,
.question-container:not(.vk-hero) .ls-questionhelp h2 {
font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.35 !important;
color: var(--vk-rood) !important; text-transform: none !important;
}
.question-container h3,
.question-container:not(.vk-hero) .ls-questionhelp h3 {
font-size: clamp(18px, 1.5vw, 22px) !important; line-height: 1.35 !important;
color: var(--vk-leisteen) !important; text-transform: none !important;
}
.question-container h4,
.question-container:not(.vk-hero) .ls-questionhelp h4 {
font-size: 18px !important; font-weight: 700 !important; line-height: 1.40 !important;
text-transform: uppercase !important; letter-spacing: .03em !important;
color: var(--vk-leisteen) !important;
}
.question-container.vk-hero {
background-image:
linear-gradient(90deg, rgba(0, 7, 61, .92) 0%, rgba(0, 7, 61, .62) 100%),
url('../files/backgrounds/hero-straat.jpg') !important;
background-size: cover !important;
background-position: center 42% !important;
}
.question-container.vk-hero::before { content: none !important; }
.question-container.vk-hero .question-text,
.question-container.vk-hero .question-text h1,
.question-container.vk-hero .ls-label-question,
.question-container.vk-hero h1 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 600 !important;
color: var(--vk-groen) !important;
font-size: clamp(30px, 4vw, 52px) !important;
line-height: 1.18 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.question-container.vk-hero h2,
.question-container.vk-hero h3,
.question-container.vk-hero p,
.question-container.vk-hero .ls-questionhelp h2,
.question-container.vk-hero .ls-questionhelp p {
font-family: 'Noto Sans', system-ui, sans-serif !important;
color: #fff !important;
font-size: clamp(17px, 1.4vw, 22px) !important;
line-height: 1.50 !important;
font-weight: 400 !important;
text-transform: none !important;
}
.question-container.vk-hero h4 { color: var(--vk-groen) !important; }
.ls-move-submit-btn, .ls-move-next-btn, #vk-btn, .btn-primary {
background: var(--vk-rood) !important;
border-color: var(--vk-rood) !important;
color: #fff !important;
border-radius: 0 !important;
font-family: 'Noto Sans', system-ui, sans-serif !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
}
#ls-button-submit:not([value="movesubmit"]),
#ls-button-submit.ls-move-next-btn,
.navigator #ls-button-submit:not([value="movesubmit"]) {
background-color: var(--vk-knop-bg, var(--vk-rood)) !important;
background-image: none !important;
border-color: var(--vk-knop-rand, var(--vk-rood)) !important;
color: var(--vk-knop-tekst, #fff) !important;
}
#ls-button-submit:not([value="movesubmit"]):hover,
#ls-button-submit:not([value="movesubmit"]):focus {
background-color: color-mix(in srgb, var(--vk-knop-bg, var(--vk-rood)) 82%, white) !important;
border-color:     color-mix(in srgb, var(--vk-knop-rand, var(--vk-rood)) 82%, white) !important;
}
.ls-move-submit-btn:hover, .ls-move-next-btn:hover, #vk-btn:hover, .btn-primary:hover {
background: #9c2929 !important; border-color: #9c2929 !important;
background: color-mix(in srgb, var(--vk-knop-bg, var(--vk-rood)) 82%, white) !important;
border-color: color-mix(in srgb, var(--vk-knop-rand, var(--vk-rood)) 82%, white) !important;
}
.vk-selected .vk-antwoord-tegel { box-shadow: 0 0 0 4px var(--vk-rood) !important; }
.vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .80) !important;
}
.question-container.vk-hero .ls-questionhelp {
display: block !important;
max-width: 700px;
margin-top: 10px !important;
}
.vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .80) !important;
}
.vk-tegel-tekst,
.vk-anders-tekst,
.vk-anders-invoer {
font-family: var(--vk-optie-letter) !important;
font-weight: var(--vk-optie-gewicht) !important;
text-shadow: var(--vk-tegel-schaduw, 0 1px 3px rgba(0, 7, 61, .65)) !important;
}
ul.vk-tegel-wrap .answer-item.vk-selected .vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .68) !important;
}
.vk-antwoord-tegel {
background-image: url('../files/backgrounds/hero-straat.jpg') !important;
}
.vk-img-01 { background-position: 6% 10% !important; }
.vk-img-02 { background-position: 24% 10% !important; }
.vk-img-03 { background-position: 41% 10% !important; }
.vk-img-04 { background-position: 59% 10% !important; }
.vk-img-05 { background-position: 76% 10% !important; }
.vk-img-06 { background-position: 94% 10% !important; }
.vk-img-07 { background-position: 6% 21% !important; }
.vk-img-08 { background-position: 24% 21% !important; }
.vk-img-09 { background-position: 41% 21% !important; }
.vk-img-10 { background-position: 59% 21% !important; }
.vk-img-11 { background-position: 76% 21% !important; }
.vk-img-12 { background-position: 94% 21% !important; }
.vk-img-13 { background-position: 6% 33% !important; }
.vk-img-14 { background-position: 24% 33% !important; }
.vk-img-15 { background-position: 41% 33% !important; }
.vk-img-16 { background-position: 59% 33% !important; }
.vk-img-17 { background-position: 76% 33% !important; }
.vk-img-18 { background-position: 94% 33% !important; }
.vk-img-19 { background-position: 6% 44% !important; }
.vk-img-20 { background-position: 24% 44% !important; }
.vk-img-21 { background-position: 41% 44% !important; }
.vk-img-22 { background-position: 59% 44% !important; }
.vk-img-23 { background-position: 76% 44% !important; }
.vk-img-24 { background-position: 94% 44% !important; }
.vk-img-25 { background-position: 6% 56% !important; }
.vk-img-26 { background-position: 24% 56% !important; }
.vk-img-27 { background-position: 41% 56% !important; }
.vk-img-28 { background-position: 59% 56% !important; }
.vk-img-29 { background-position: 76% 56% !important; }
.vk-img-30 { background-position: 94% 56% !important; }
.vk-img-31 { background-position: 6% 67% !important; }
.vk-img-32 { background-position: 24% 67% !important; }
.vk-img-33 { background-position: 41% 67% !important; }
.vk-img-34 { background-position: 59% 67% !important; }
.vk-img-35 { background-position: 76% 67% !important; }
.vk-img-36 { background-position: 94% 67% !important; }
.vk-img-37 { background-position: 6% 79% !important; }
.vk-img-38 { background-position: 24% 79% !important; }
.vk-img-39 { background-position: 41% 79% !important; }
.vk-img-40 { background-position: 59% 79% !important; }
.vk-img-41 { background-position: 76% 79% !important; }
.vk-img-42 { background-position: 94% 79% !important; }
.vk-img-43 { background-position: 6% 90% !important; }
.vk-img-44 { background-position: 24% 90% !important; }
.vk-img-45 { background-position: 41% 90% !important; }
.vk-img-46 { background-position: 59% 90% !important; }
ul.vk-tegel-wrap .answer-item input[type="radio"],
ul.vk-tegel-wrap .answer-item input[type="checkbox"] {
display: block !important;
position: absolute !important;
width: 1px !important; height: 1px !important;
margin: 0 !important; padding: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -1 !important;
}
ul.vk-tegel-wrap .answer-item:focus-within .vk-antwoord-tegel {
outline-offset: 4px !important;
}
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible {
outline: 3px solid var(--vk-rood) !important;
outline-offset: 2px !important;
}
.vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .68) !important;
}
ul.vk-tegel-wrap .answer-item.vk-selected .vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .68) !important;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
ul.vk-tegel-wrap .answer-item:hover .vk-antwoord-tegel,
ul.vk-tegel-wrap .answer-item.vk-selected .vk-antwoord-tegel { transform: none !important; }
}
.question-container.vk-textonly {
background-image:
linear-gradient(90deg, rgba(0, 7, 61, .90) 0%, rgba(0, 7, 61, .70) 100%),
url('../files/backgrounds/hero-straat.jpg') !important;
background-image:
linear-gradient(90deg,
color-mix(in srgb, var(--vk-hero-overlay, #00073d) 90%, transparent) 0%,
color-mix(in srgb, var(--vk-hero-overlay, #00073d) 70%, transparent) 100%),
url('../files/backgrounds/hero-straat.jpg') !important;
background-size: cover !important;
background-position: center 46% !important;
padding: clamp(26px, 3.2vw, 40px) clamp(20px, 3vw, 48px) !important;
margin: clamp(30px, 4.5vw, 60px) 0 !important;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
mask-image: linear-gradient(to bottom,
transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
}
.question-container.vk-textonly .question-text,
.question-container.vk-textonly .ls-questionhelp {
max-width: 720px !important;
}
.question-container.vk-textonly .question-text,
.question-container.vk-textonly .question-text h1,
.question-container.vk-textonly .ls-label-question,
.question-container.vk-textonly h1 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 600 !important;
color: var(--vk-band-titel, var(--vk-groen)) !important;
font-size: clamp(19px, 2.1vw, 27px) !important;
line-height: 1.25 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-bottom: 6px !important;
}
.question-container.vk-textonly h2,
.question-container.vk-textonly h3,
.question-container.vk-textonly h4,
.question-container.vk-textonly p,
.question-container.vk-textonly .ls-questionhelp h2,
.question-container.vk-textonly .ls-questionhelp h3,
.question-container.vk-textonly .ls-questionhelp h4,
.question-container.vk-textonly .ls-questionhelp p {
font-family: 'Noto Sans', system-ui, sans-serif !important;
color: var(--vk-band-tekst, #fff) !important;
font-size: clamp(15px, 1.15vw, 17px) !important;
line-height: 1.50 !important;
font-weight: 400 !important;
text-transform: none !important;
margin: 0 0 4px !important;
}
.question-container.vk-textonly .ls-questionhelp p:last-child { margin-bottom: 0 !important; }
@media (max-width: 768px) {
.question-container.vk-textonly {
padding-left: clamp(20px, 5vw, 60px) !important;
padding-right: clamp(20px, 5vw, 60px) !important;
margin: 28px 0 !important;
}
}
.question-container.vk-hero {
aspect-ratio: auto !important;
height: auto !important;
min-height: max(280px, 31.25vw) !important;
justify-content: center !important;
padding-top: clamp(28px, 3.5vw, 56px) !important;
padding-bottom: clamp(28px, 3.5vw, 56px) !important;
}
.question-container.vk-hero > * {
flex: 0 0 auto !important;
min-height: 0 !important;
}
.question-container.vk-hero img {
max-width: 100% !important;
height: auto !important;
}
.question-container:not(.vk-hero) .question-text h2,
.question-container:not(.vk-hero) .ls-label-question h2 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-size: clamp(24px, 2.4vw, 34px) !important;
font-weight: 800 !important;
line-height: 1.18 !important;
color: var(--vk-leisteen) !important;
text-transform: none !important;
margin: 0 0 10px !important;
}
.question-container:not(.vk-hero) .question-text i,
.question-container:not(.vk-hero) .question-text em,
.question-container:not(.vk-hero) .ls-label-question i,
.question-container:not(.vk-hero) .ls-label-question em {
display: block !important;
max-width: 720px !important;
margin: 0 0 4px !important;
}
.elicit-button.btn,
.button-item.btn.btn-default {
background: #fff !important;
border: 2px solid #dcd8d2 !important;
border-radius: 0 !important;
text-align: left !important;
padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 32px) !important;
margin-bottom: 14px !important;
box-shadow: none !important;
transition: border-color .16s ease, transform .16s ease !important;
white-space: normal !important;
}
.elicit-button.btn:hover,
.button-item.btn.btn-default:hover {
border-color: var(--vk-rood) !important;
transform: translateY(-2px) !important;
}
.elicit-button.btn.active,
.button-item.btn.btn-default.active,
.elicit-button.btn:has(input:checked),
.button-item.btn.btn-default:has(input:checked) {
border-color: var(--vk-rood) !important;
background: rgba(183, 49, 49, .07) !important;
transform: translateY(-2px) !important;
}
.elicit-button label,
.button-item.btn label {
text-align: left !important;
width: 100% !important;
margin: 0 !important;
cursor: pointer !important;
white-space: normal !important;
}
.elicit-button label h3,
.button-item.btn label h3 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-size: clamp(19px, 1.7vw, 25px) !important;
font-weight: 800 !important;
line-height: 1.25 !important;
color: var(--vk-leisteen) !important;
text-transform: none !important;
margin: 0 0 6px !important;
}
.elicit-button label strong,
.button-item.btn label strong {
font-family: 'Noto Sans', system-ui, sans-serif !important;
font-size: clamp(15px, 1.05vw, 17px) !important;
font-weight: 400 !important;
color: var(--vk-inkt) !important;
}
.elicit-button label p:empty,
.button-item.btn label p:empty,
.elicit-button label br,
.button-item.btn label br { display: none !important; }
.btn-smiley label {
margin-left: auto !important;
margin-right: auto !important;
}
.btn-smiley label br { display: none !important; }
.btn-smiley.active img { filter: drop-shadow(0 0 0 2px var(--vk-rood)) !important; }
.btn-smiley label {
margin-top: 8px !important;
}
.question-container .slider-item.slider-item .slider-left-span,
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item .slider-right-span,
.question-container .slider-item.slider-item .slider-right {
word-break: normal !important;
overflow-wrap: break-word !important;
}
.question-container .slider-item.slider-item .slider-handle {
margin-top: -2px !important;
}
#vk-eind-hero.vk-hero,
#welcome-container.vk-hero {
display: flex !important;
width: 100% !important;
max-width: none !important;
min-height: max(280px, 31.25vw) !important;
padding: clamp(28px, 3.5vw, 56px) clamp(40px, 8vw, 120px) !important;
margin: 0 0 clamp(28px, 4vw, 56px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#welcome-container.vk-hero .survey-description { flex: 0 0 auto !important; }
#welcome-container.vk-hero .survey-description.vk-descr-uit { display: none !important; }
#welcome-container.vk-hero .number-of-questions { display: none !important; }
#vk-eind-hero.vk-hero,
#welcome-container.vk-hero {
background-image:
linear-gradient(90deg, rgba(0, 7, 61, .92) 0%, rgba(0, 7, 61, .62) 100%),
url('../files/backgrounds/hero-straat.jpg') !important;
background-image:
linear-gradient(90deg,
color-mix(in srgb, var(--vk-hero-overlay, #00073d) 92%, transparent) 0%,
color-mix(in srgb, var(--vk-hero-overlay, #00073d) 62%, transparent) 100%),
url('../files/backgrounds/hero-straat.jpg') !important;
background-size: cover !important;
background-position: center 42% !important;
background-color: var(--vk-hero-overlay, var(--vk-diepblauw)) !important;
}
#vk-eind-hero.vk-hero h1,
#welcome-container.vk-hero h1 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 600 !important;
color: var(--vk-band-titel, var(--vk-groen)) !important;
font-size: clamp(30px, 4vw, 52px) !important;
line-height: 1.18 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 0 14px !important;
}
#vk-eind-hero.vk-hero p,
#welcome-container.vk-hero p,
#vk-eind-hero.vk-hero h2,
#welcome-container.vk-hero h2,
#vk-eind-hero.vk-hero h3,
#welcome-container.vk-hero h3,
#vk-eind-hero.vk-hero li,
#welcome-container.vk-hero li,
#vk-eind-hero.vk-hero .survey-welcome,
#welcome-container.vk-hero .survey-welcome {
font-family: 'Noto Sans', system-ui, sans-serif !important;
color: var(--vk-band-tekst, var(--vk-hero-tekstkleur, #fff)) !important;
font-size: clamp(17px, 1.4vw, 22px) !important;
line-height: 1.50 !important;
font-weight: 400 !important;
text-transform: none !important;
}
#vk-eind-hero.vk-hero i,
#welcome-container.vk-hero i,
#welcome-container.vk-hero em { color: var(--vk-band-tekst, var(--vk-hero-tekstkleur, #fff)) !important; font-style: italic !important; }
#welcome-container.vk-hero a { color: var(--vk-band-titel, var(--vk-groen)) !important; }
#vk-eind-hero.vk-hero .vk-portret,
#welcome-container.vk-hero .vk-portret {
display: block !important;
border-radius: 0 !important;
pointer-events: none !important;
}
@media (max-width: 820px) {
#vk-eind-hero.vk-hero,
#welcome-container.vk-hero { flex-direction: column !important; align-items: stretch !important; }
#vk-eind-hero.vk-hero .vk-portret,
#welcome-container.vk-hero .vk-portret {
max-height: 260px !important;
margin-bottom: calc(-1 * clamp(28px, 3.5vw, 56px)) !important;
}
}
.elicit-button label h4,
.button-item.btn label h4 {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 600 !important;
font-style: italic !important;
line-height: 1.30 !important;
text-transform: none !important;
margin: 8px 0 0 !important;
}
#vk-eind-hero.vk-hero,
#welcome-container.vk-hero,
#vk-eind-hero.vk-hero *,
#welcome-container.vk-hero * {
hyphens: none !important;
-webkit-hyphens: none !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
#vk-eind-hero.vk-hero,
#welcome-container.vk-hero {
gap: clamp(24px, 4vw, 72px) !important;
align-items: center !important;
}
#vk-eind-hero.vk-hero .vk-hero-tekst,
#welcome-container.vk-hero .vk-hero-tekst {
flex: 1 1 640px !important;
min-width: 0 !important;
max-width: 720px !important;
}
#welcome-container.vk-hero .survey-welcome { max-width: none !important; }
#vk-eind-hero.vk-hero .vk-portret,
#welcome-container.vk-hero .vk-portret {
flex: 0 1 auto !important;
align-self: center !important;
max-height: none !important;
height: auto !important;
margin: 0 !important;
filter: none !important;
}
#vk-eind-hero.vk-hero .vk-portret--uitgesneden,
#welcome-container.vk-hero .vk-portret--uitgesneden {
border: none !important;
box-shadow: none !important;
align-self: flex-end !important;
width: auto !important;
max-height: min(58vh, 420px) !important;
margin-bottom: calc(-1 * clamp(28px, 3.5vw, 56px)) !important;
filter: drop-shadow(0 18px 34px rgba(0, 7, 61, .55))
drop-shadow(0 3px 8px rgba(0, 7, 61, .35)) !important;
}
#vk-eind-hero.vk-hero .vk-survey-titel,
#welcome-container.vk-hero .vk-survey-titel {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 600 !important;
color: var(--vk-band-titel, var(--vk-groen)) !important;
font-size: clamp(30px, 4vw, 52px) !important;
line-height: 1.14 !important;
text-transform: none !important;
margin: 0 0 14px !important;
max-width: 720px !important;
}
#vk-eind-hero.vk-hero .vk-survey-titel ~ .survey-welcome h1,
#welcome-container.vk-hero .vk-survey-titel ~ .survey-welcome h1 {
font-size: clamp(19px, 1.6vw, 24px) !important;
font-weight: 600 !important;
color: var(--vk-band-tekst, #fff) !important;
margin: 0 0 10px !important;
}
@media (max-width: 820px) {
#vk-eind-hero.vk-hero .vk-hero-tekst,
#welcome-container.vk-hero .vk-hero-tekst {
flex: 0 0 auto !important;
max-width: none !important;
}
#vk-eind-hero.vk-hero .vk-portret,
#welcome-container.vk-hero .vk-portret {
align-self: center !important;
}
}
.navigator.space-col {
padding: 8px clamp(20px, 3vw, 48px) 56px !important;
}
.ls-move-previous-btn,
.ls-move-btn.ls-move-previous-btn,
#ls-button-previous {
transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.ls-move-previous-btn:hover,
.ls-move-previous-btn:focus,
#ls-button-previous:hover,
#ls-button-previous:focus {
background: var(--vk-leisteen) !important;
border-color: var(--vk-leisteen) !important;
}
.ls-move-previous-btn .fa,
#ls-button-previous .fa { font-size: .8em !important; margin-right: .4em !important; }
.elicit-button label h4,
.button-item.btn label h4 {
font-size: clamp(16px, 1.4vw, 21px) !important;
}
#welcome-container.vk-hero .vk-hero-knop,
#vk-eind-hero.vk-hero .vk-hero-knop {
margin: 26px 0 0 !important;
padding: 0 !important;
display: block !important;
width: auto !important;
float: none !important;
}
#welcome-container.vk-hero .vk-hero-knop .btn,
#welcome-container.vk-hero .vk-hero-knop button,
#vk-eind-hero.vk-hero .vk-hero-knop .btn,
#vk-eind-hero.vk-hero .vk-hero-knop button {
display: inline-block !important;
width: auto !important;
float: none !important;
background-color: var(--vk-knop-bg, var(--vk-rood)) !important;
background-image: none !important;
border-width: 2px !important;
border-style: solid !important;
border-color: var(--vk-knop-rand, var(--vk-rood)) !important;
border-radius: 0 !important;
color: var(--vk-knop-tekst, #fff) !important;
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 19px !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
padding: 13px 30px !important;
text-decoration: none !important;
box-shadow: 0 6px 18px rgba(0, 7, 61, .45) !important;
transition: background-color .16s ease, border-color .16s ease !important;
}
#welcome-container.vk-hero .vk-hero-knop .btn:hover,
#welcome-container.vk-hero .vk-hero-knop button:hover,
#vk-eind-hero.vk-hero .vk-hero-knop .btn:hover,
#vk-eind-hero.vk-hero .vk-hero-knop button:hover {
background-color: #9c2929 !important;
border-color: #9c2929 !important;
background-color: color-mix(in srgb, var(--vk-knop-bg, var(--vk-rood)) 82%, white) !important;
border-color:     color-mix(in srgb, var(--vk-knop-rand, var(--vk-rood)) 82%, white) !important;
}
.navigator.space-col.vk-navigator-leeg { display: none !important; }
#vk-eind-hero .start-button.vk-hero-knop { text-align: left !important; }
#vk-eind-hero.vk-hero .vk-hero-tekst > div { text-align: left !important; margin: 0 !important; }
#vk-eind-hero.vk-hero .vk-hero-tekst h2:first-of-type {
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 600 !important;
color: var(--vk-groen) !important;
font-size: clamp(30px, 4vw, 52px) !important;
line-height: 1.14 !important;
text-transform: none !important;
margin: 0 0 14px !important;
}
#vk-eind-hero.vk-hero .vk-hero-tekst a:not(.btn),
#welcome-container.vk-hero .vk-hero-tekst a:not(.btn) {
color: var(--vk-groen) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
#vk-eind-hero.vk-hero .vk-hero-tekst a:not(.btn):hover,
#welcome-container.vk-hero .vk-hero-tekst a:not(.btn):hover {
color: #fff !important;
}
.vk-mozaiek::before,
.vk-mozaiek::after {
content: none !important;
display: none !important;
}
.vk-mozaiek {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
grid-auto-rows: 88px !important;
grid-auto-flow: row !important;
gap: 10px !important;
align-items: stretch !important;
justify-content: stretch !important;
max-width: none !important;
margin: 0 !important;
padding: 4px 0 28px !important;
list-style: none !important;
}
ul.vk-tegel-wrap { display: contents !important; }
ul.vk-tegel-wrap .answer-item {
display: block !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
grid-column: span 1;
grid-row: span 1;
}
@media (max-width: 560px) {
.vk-mozaiek { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 92px !important; }
}
.vk-antwoord-tegel {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
overflow: hidden !important;
cursor: pointer !important;
background-size: 300% auto !important;
background-color: var(--vk-tegel-grond) !important;
outline: 2px solid transparent !important;
outline-offset: -2px !important;
transition: outline-color .16s ease, transform .18s ease, box-shadow .18s ease !important;
transform: none !important;
}
.vk-antwoord-tegel::before {
content: '' !important;
position: absolute !important; inset: 0 !important;
border-radius: 0 !important;
background: rgba(0, 7, 61, .80) !important;
background: color-mix(in srgb, var(--vk-tegel-grond) 80%, transparent) !important;
z-index: 1 !important;
transition: background .18s ease !important;
}
.vk-tegel-tekst {
position: relative !important;
z-index: 2 !important;
text-align: center !important;
padding: 0 14px !important;
font-size: var(--vk-optie-maat) !important;
color: var(--vk-tegel-tekst, var(--vk-groen)) !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.22 !important;
text-shadow: var(--vk-tegel-schaduw, 0 1px 4px rgba(0, 7, 61, .8)) !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
}
ul.vk-tegel-wrap .answer-item:hover .vk-antwoord-tegel {
outline-color: var(--vk-rood) !important;
background-size: 330% auto !important;
box-shadow: 0 10px 26px rgba(0, 7, 61, .45) !important;
transform: none !important;
}
ul.vk-tegel-wrap .answer-item:hover .vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .72) !important;
background: color-mix(in srgb, var(--vk-tegel-grond) 72%, transparent) !important;
}
ul.vk-tegel-wrap .answer-item.vk-selected .vk-antwoord-tegel {
outline: 3px solid var(--vk-rood) !important;
outline-offset: -3px !important;
box-shadow: 0 10px 26px rgba(0, 7, 61, .5) !important;
transform: none !important;
}
ul.vk-tegel-wrap .answer-item.vk-selected .vk-antwoord-tegel::after {
content: '✓' !important;
position: absolute !important;
top: 8px !important; right: 8px !important;
z-index: 3 !important;
width: 26px !important; height: 26px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
background: var(--vk-rood) !important;
color: var(--vk-tegel-tekst-gekozen, #fff) !important;
font-size: 15px !important; font-weight: 700 !important;
line-height: 1 !important;
}
ul.vk-tegel-wrap .answer-item.vk-selected .vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .68) !important;
background: color-mix(in srgb, var(--vk-tegel-grond) 68%, transparent) !important;
}
ul.vk-tegel-wrap .answer-item:focus-within .vk-antwoord-tegel {
outline: 3px solid var(--vk-rood) !important;
box-shadow: inset 0 0 0 2px #fff, 0 10px 26px rgba(0, 7, 61, .45) !important;
}
@keyframes vkTegelOp {
from { opacity: 0; transform: translateY(14px); }
to   { opacity: 1; transform: none; }
}
ul.vk-tegel-wrap .answer-item {
animation: vkTegelOp .42s cubic-bezier(.22, .8, .3, 1) both !important;
}
ul.vk-tegel-wrap .answer-item:nth-child(1)  { animation-delay: .00s !important; }
ul.vk-tegel-wrap .answer-item:nth-child(2)  { animation-delay: .04s !important; }
ul.vk-tegel-wrap .answer-item:nth-child(3)  { animation-delay: .08s !important; }
ul.vk-tegel-wrap .answer-item:nth-child(4)  { animation-delay: .12s !important; }
ul.vk-tegel-wrap .answer-item:nth-child(5)  { animation-delay: .16s !important; }
ul.vk-tegel-wrap .answer-item:nth-child(6)  { animation-delay: .20s !important; }
ul.vk-tegel-wrap .answer-item:nth-child(7)  { animation-delay: .24s !important; }
ul.vk-tegel-wrap .answer-item:nth-child(n+8) { animation-delay: .28s !important; }
@media (prefers-reduced-motion: reduce) {
ul.vk-tegel-wrap .answer-item { animation: none !important; }
.vk-antwoord-tegel,
.vk-antwoord-tegel::before { transition: none !important; }
ul.vk-tegel-wrap .answer-item:hover .vk-antwoord-tegel { background-size: 300% auto !important; }
}
ul.vk-tegel-wrap li.radio-text-item,
ul.vk-tegel-wrap li.checkbox-text-item {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.vk-anders-tegel {
font-size: var(--vk-optie-maat) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 14px 20px !important;
transition: border-color .16s ease, background-color .16s ease !important;
}
.vk-mozaiek li.radio-text-item,
.vk-mozaiek li.checkbox-text-item {
min-width: 0 !important;
}
.vk-mozaiek .vk-anders-tegel {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
padding: 10px 12px !important;
}
.vk-mozaiek .vk-anders-invoer {
min-width: 0 !important;
max-width: 100% !important;
}
.vk-mozaiek.vk-vorm-cirkels .vk-anders-tegel {
width: var(--vk-cirkel-maat, 116px) !important;
height: var(--vk-cirkel-maat, 116px) !important;
border-radius: 50% !important;
padding: 8px 10px !important;
}
ul.vk-tegel-wrap .answer-item.vk-selected .vk-anders-tegel::after { content: none !important; }
.vk-anders-tekst {
position: relative !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
font-family: var(--vk-optie-letter) !important;
font-weight: var(--vk-optie-gewicht) !important;
font-size: inherit !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.25 !important;
color: var(--vk-tegel-tekst, var(--vk-groen)) !important;
pointer-events: none !important;
user-select: none !important;
}
.vk-anders-tekst::before { content: none !important; }
.vk-anders-tekst::after {
content: '\270E' !important;
font-size: 1.15em !important;
line-height: 1 !important;
color: var(--vk-rood) !important;
opacity: 1 !important;
}
.vk-anders-tegel.vk-anders-gevuld .vk-anders-tekst { display: none !important; }
.vk-anders-invoer {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
max-width: 30ch !important;
text-align: center !important;
font-family: var(--vk-optie-letter) !important;
font-weight: var(--vk-optie-gewicht) !important;
font-size: inherit !important;
color: var(--vk-tegel-tekst, var(--vk-groen)) !important;
line-height: 1.3 !important;
padding: 3px 0 6px !important;
border-bottom: 2px solid color-mix(in srgb, var(--vk-tegel-tekst, var(--vk-groen)) 55%, transparent) !important;
caret-color: var(--vk-tegel-tekst, var(--vk-groen)) !important;
white-space: pre-wrap !important;
word-break: normal !important;
overflow-wrap: break-word !important;
outline: none !important;
cursor: text !important;
}
.vk-anders-invoer:focus { border-bottom-color: var(--vk-tegel-tekst, var(--vk-groen)) !important; }
.vk-anders-tegel input[type="text"] { display: none !important; }
:root {
--vk-optie-letter:  'Noto Sans', system-ui, sans-serif;
--vk-optie-maat:    clamp(16px, 1.30vw, 20px);
--vk-optie-gewicht: 400;
--vk-bijschrift-maat:   var(--vk-optie-maat);
--vk-bijschrift-regel:  1.40;
--vk-bijschrift-kleur:  var(--vk-leisteen);
--vk-bijschrift-gewicht: var(--vk-optie-gewicht);
}
@media (max-width: 560px) {
:root { --vk-optie-maat: 14px; }
}
.btn-smiley label,
.question-container .slider-item.slider-item .slider-left-span,
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item .slider-right-span,
.question-container .slider-item.slider-item .slider-right,
.question-container:not(.vk-hero) .ls-questionhelp,
.question-container:not(.vk-hero) .ls-questionhelp p,
.question-container:not(.vk-hero) .question-text i,
.question-container:not(.vk-hero) .question-text em,
.question-container:not(.vk-hero) .ls-label-question i,
.question-container:not(.vk-hero) .ls-label-question em,
.vk-triade-pool {
font-family: var(--vk-optie-letter) !important;
font-size: var(--vk-bijschrift-maat) !important;
font-weight: var(--vk-bijschrift-gewicht) !important;
font-style: normal !important;
line-height: var(--vk-bijschrift-regel) !important;
color: var(--vk-bijschrift-kleur) !important;
text-transform: none !important;
letter-spacing: 0 !important;
hyphens: none !important;
}
.btn-smiley {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
background: transparent !important;
border: 2px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
transition: border-color .16s ease, background-color .16s ease !important;
}
.btn-smiley img {
display: block !important;
margin: 0 auto !important;
width: clamp(46px, 4vw, 62px) !important;
height: auto !important;
transition: transform .16s ease !important;
}
.btn-smiley label {
display: block !important;
text-align: center !important;
max-width: 16ch !important;
margin: 0 auto !important;
cursor: pointer !important;
}
.btn-smiley:hover  { border-color: rgba(183, 49, 49, .45) !important; background: rgba(0, 7, 61, .04) !important; }
.btn-smiley:hover img { transform: scale(1.09) !important; }
.btn-smiley.active {
border-color: var(--vk-rood) !important;
background: rgba(183, 49, 49, .07) !important;
}
.btn-smiley.active img { transform: scale(1.12) !important; }
.question-container .slider-item.slider-item .slider-track,
.question-container .slider-item.slider-item .slider .slider-track,
.question-container .slider-item.slider-item input[type="range"] {
background: linear-gradient(to right,
rgba(0, 7, 61, .16) 0%, rgba(0, 7, 61, .07) 50%, rgba(0, 7, 61, .16) 100%) !important;
box-shadow: none !important;
border: none !important;
}
.question-container .slider-item.slider-item .slider-selection,
.question-container .slider-item.slider-item .slider-track-low,
.question-container .slider-item.slider-item .slider-track-high { background: transparent !important; }
.question-container .slider-item.slider-item { position: relative !important; }
.question-container .slider-item.slider-item::after {
position: absolute !important;
left: 50% !important;
width: 2px !important;
background: rgba(0, 7, 61, .22) !important;
transform: translateX(-50%) !important;
pointer-events: none !important;
}
.question-container .slider-item.slider-item .slider-handle,
.question-container .slider-item.slider-item input[type="range"]::-webkit-slider-thumb {
background: var(--vk-rood) !important;
border-radius: 50% !important;
cursor: grab !important;
}
.question-container .slider-item.slider-item .slider-handle:active { cursor: grabbing !important; }
.question-container .slider-item.slider-item input[type="range"] { accent-color: var(--vk-rood) !important; -webkit-appearance: none !important; appearance: none !important; }
.question-container .slider-item.slider-item input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; }
.question-container:not(.vk-hero) .ls-questionhelp {
background: transparent !important;
}
.question-container:not(.vk-hero) .ls-questionhelp i,
.question-container:not(.vk-hero) .ls-questionhelp em { font-style: normal !important; }
.vk-mozaiek.vk-vorm-strook {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
grid-auto-rows: auto !important;
gap: 12px !important;
}
.vk-mozaiek.vk-vorm-strook .vk-antwoord-tegel,
.vk-mozaiek.vk-vorm-strook .vk-anders-tegel {
aspect-ratio: 4 / 1 !important;
height: auto !important;
min-height: 72px !important;
}
.vk-mozaiek.vk-vorm-strook ul.vk-tegel-wrap .answer-item:nth-child(7n + 1),
.vk-mozaiek.vk-vorm-strook ul.vk-tegel-wrap .answer-item:nth-child(7n + 4),
.vk-mozaiek.vk-vorm-strook ul.vk-tegel-wrap .answer-item:nth-child(7n + 6) {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.vk-mozaiek.vk-vorm-strook .vk-antwoord-tegel { align-items: center !important; justify-content: center !important; }
.vk-mozaiek.vk-vorm-strook .vk-tegel-tekst {
text-align: center !important;
padding: 0 16px !important;
line-height: 1.25 !important;
}
.vk-mozaiek.vk-vorm-strook .vk-antwoord-tegel::before {
background: rgba(0, 7, 61, .80) !important;
background: color-mix(in srgb, var(--vk-tegel-grond) 80%, transparent) !important;
}
@media (max-width: 600px) {
.vk-mozaiek.vk-vorm-strook { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
}
.vk-mozaiek.vk-vorm-ruim {
grid-auto-rows: 116px !important;
gap: 12px !important;
}
.vk-mozaiek.vk-vorm-ruim .vk-tegel-tekst { padding: 0 14px !important; }
.ls-move-previous-btn,
.ls-move-btn.ls-move-previous-btn,
#ls-button-previous {
background: var(--vk-knop-terug-bg, var(--vk-rood)) !important;
background-color: var(--vk-knop-terug-bg, var(--vk-rood)) !important;
color: var(--vk-knop-terug-tekst, #fff) !important;
border: 2px solid var(--vk-knop-terug-rand, var(--vk-rood)) !important;
border-radius: 0 !important;
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 19px !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
padding: 13px 30px !important;
box-shadow: none !important;
}
.ls-move-previous-btn:hover, .ls-move-previous-btn:focus,
#ls-button-previous:hover, #ls-button-previous:focus {
background-color: #9c2929 !important;
border-color: #9c2929 !important;
background-color: color-mix(in srgb, var(--vk-knop-terug-bg, var(--vk-rood)) 82%, white) !important;
border-color:     color-mix(in srgb, var(--vk-knop-terug-rand, var(--vk-rood)) 82%, white) !important;
color: var(--vk-knop-terug-tekst, #fff) !important;
}
.question-container:not(.vk-hero) .question-text i,
.question-container:not(.vk-hero) .question-text em,
.question-container:not(.vk-hero) .ls-label-question i,
.question-container:not(.vk-hero) .ls-label-question em,
.question-container:not(.vk-hero) .ls-questionhelp,
.question-container:not(.vk-hero) .ls-questionhelp p {
font-style: italic !important;
}
@media (min-width: 1000px) {
body.vk-help-naast .question-container:not(.vk-hero):not(.vk-textonly) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) !important;
column-gap: clamp(28px, 3vw, 60px) !important;
align-items: start !important;
}
body.vk-help-naast .question-container:not(.vk-hero):not(.vk-textonly) > .question-title-container { grid-column: 1 !important; width: auto !important; float: none !important; }
body.vk-help-naast .question-container:not(.vk-hero):not(.vk-textonly) > .ls-questionhelp { grid-column: 2 !important; width: auto !important; margin: 10px 0 0 !important; }
body.vk-help-naast .question-container:not(.vk-hero):not(.vk-textonly) > *:not(.question-title-container):not(.ls-questionhelp) { grid-column: 1 / -1 !important; width: auto !important; float: none !important; }
}
.question-container:not(.vk-hero) .ls-questionhelp,
.question-container:not(.vk-hero) .question-text > i,
.question-container:not(.vk-hero) .ls-label-question > i,
.question-container:not(.vk-hero) .ls-label-question > em {
display: block !important;
max-width: 760px !important;
margin: 12px 0 24px !important;
padding: 2px 0 2px clamp(14px, 1.4vw, 22px) !important;
border-left: 3px solid var(--vk-rood) !important;
text-align: left !important;
}
.question-container:not(.vk-hero) .ls-questionhelp { clear: both !important; }
.question-container:not(.vk-hero):has(> .ls-questionhelp) .ls-label-question,
.question-container:not(.vk-hero):has(> .ls-questionhelp) .question-text {
margin-bottom: 4px !important;
}
.question-container:not(.vk-hero):has(> .ls-questionhelp) .ls-label-question > h2 {
margin-bottom: 4px !important;
}
.question-container:not(.vk-hero):has(> .ls-questionhelp) > .ls-questionhelp {
margin-top: 0 !important;
}
.question-container:not(.vk-hero) .ls-label-question > h2 + i,
.question-container:not(.vk-hero) .ls-label-question > h2 + em { margin-top: 0 !important; }
.question-container:not(.vk-hero) .ls-label-question:has(> i) > h2,
.question-container:not(.vk-hero) .ls-label-question:has(> em) > h2 { margin-bottom: 6px !important; }
.question-container .asterisk .label,
.question-container .asterisk .label-default,
.question-container .ls-mandatory .label {
background: rgba(74, 255, 137, .16) !important;
color: #1c6b3a !important;
border: 1px solid rgba(28, 107, 58, .30) !important;
border-radius: 0 !important;
font-family: 'Noto Sans', system-ui, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: .02em !important;
text-transform: none !important;
padding: 4px 9px !important;
cursor: help !important;
}
.question-container .slider-item.slider-item {
display: flex !important;
padding: 10px 0 34px !important;
float: none !important;
}
.question-container .slider-item.slider-item > * { float: none !important; }
.question-container .slider-item.slider-item .slider-left-span,
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item .slider-right-span,
.question-container .slider-item.slider-item .slider-right {
width: auto !important;
padding: 0 !important;
}
.question-container .slider-item.slider-item > .col-sm-11,
.question-container .slider-item.slider-item > [class*="col-sm-1"]:not(.slider-left):not(.slider-right) {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
}
.question-container .slider-item.slider-item .slider-track,
.question-container .slider-item.slider-item .slider .slider-track,
.question-container .slider-item.slider-item input[type="range"] {
border-radius: 0 !important;
}
.question-container .slider-item.slider-item .slider-handle {
border: 4px solid #fff !important;
box-shadow: 0 3px 12px rgba(0, 7, 61, .45) !important;
}
.question-container .btn-smiley,
.question-container .btn-smiley label,
.question-container .button-item.btn-smiley label {
text-align: center !important;
}
.question-container .btn-smiley label {
display: block !important;
margin: 0 auto !important;
font-family: var(--vk-optie-letter) !important;
font-size: var(--vk-optie-maat) !important;
font-weight: var(--vk-optie-gewicht) !important;
color: var(--vk-bijschrift-kleur) !important;
line-height: var(--vk-bijschrift-regel) !important;
font-style: normal !important;
}
#vk-eind-hero.vk-hero .vk-portret,
#welcome-container.vk-hero .vk-portret {
width: clamp(300px, 40%, 560px) !important;
max-width: 42% !important;
border: none !important;
box-shadow: 0 26px 48px -12px rgba(0, 7, 61, .75),
0 8px 18px -6px rgba(0, 7, 61, .55) !important;
transform: translateY(-4px) !important;
}
@media (max-width: 820px) {
#vk-eind-hero.vk-hero .vk-portret,
#welcome-container.vk-hero .vk-portret { width: 78% !important; max-width: 78% !important; }
}
.question-container.vk-textonly.vk-accent {
background-image:
linear-gradient(90deg, rgba(0, 7, 61, .92) 0%, rgba(0, 7, 61, .58) 62%, rgba(0, 7, 61, .40) 100%),
var(--vk-accentbeeld) !important;
background-image:
linear-gradient(90deg,
color-mix(in srgb, var(--vk-hero-overlay, #00073d) 92%, transparent) 0%,
color-mix(in srgb, var(--vk-hero-overlay, #00073d) 58%, transparent) 62%,
color-mix(in srgb, var(--vk-hero-overlay, #00073d) 40%, transparent) 100%),
var(--vk-accentbeeld) !important;
background-size: cover !important;
background-position: center 30% !important;
}
.question-container .slider-item.slider-item {
gap: clamp(12px, 1.4vw, 22px) !important;
}
.question-container .slider-item.slider-item .slider-track,
.question-container .slider-item.slider-item .slider .slider-track,
.question-container .slider-item.slider-item input[type="range"] {
height: 14px !important;
}
.question-container .slider-item.slider-item .slider-handle {
width: 38px !important; height: 38px !important;
}
.question-container .slider-item.slider-item input[type="range"]::-webkit-slider-thumb { margin-top: -12px !important; }
.question-container .slider-item.slider-item::after { height: 30px !important; top: 2px !important; }
.vk-mozaiek.vk-vorm-strook ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-strook.vk-patroon-1 ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-strook.vk-patroon-2 ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-strook.vk-patroon-3 ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-cirkels.vk-patroon-1 ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-cirkels.vk-patroon-2 ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-cirkels.vk-patroon-3 ul.vk-tegel-wrap .answer-item {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.question-container:not(.vk-hero) { position: relative !important; }
.question-container .asterisk,
.question-container .ls-mandatory {
position: absolute !important;
top: clamp(10px, 1.4vw, 22px) !important;
right: clamp(20px, 3vw, 48px) !important;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: 2 !important;
}
@media (max-width: 700px) {
.question-container .asterisk,
.question-container .ls-mandatory {
position: static !important;
display: block !important;
margin: 0 0 8px !important;
}
}
.question-container .row.ls-answers:has(.btn-smiley) {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
justify-content: center !important;
gap: clamp(6px, 1vw, 16px) !important;
margin: 0 !important;
grid-template-columns: none !important;
}
.question-container .row.ls-answers:has(.btn-smiley) > div {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
float: none !important;
}
.btn-smiley {
height: 100% !important;
justify-content: flex-start !important;
padding: 18px clamp(6px, 1vw, 14px) 20px !important;
}
.question-container .btn-smiley label { max-width: 22ch !important; }
@media (max-width: 700px) {
}
@media (max-width: 460px) {
.btn-smiley img { width: 44px !important; }
}
.question-container .slider-item.slider-item::after { content: none !important; }
.question-container .slider-item.slider-item .slider-left  { text-align: left !important; }
.question-container .slider-item.slider-item .slider-left-span  { text-align: left !important; }
.question-container .slider-item.slider-item .slider-right { text-align: right !important; }
.question-container .slider-item.slider-item .slider-right-span { text-align: right !important; }
ul.vk-tegel-wrap .answer-item[style*="span 2"] .vk-antwoord-tegel,
.vk-mozaiek.vk-patroon-1:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(7n + 1) .vk-antwoord-tegel,
.vk-mozaiek.vk-patroon-2:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(3n + 1) .vk-antwoord-tegel,
.vk-mozaiek.vk-patroon-3:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(6n + 4) .vk-antwoord-tegel {
align-items: center !important;
justify-content: center !important;
}
.vk-mozaiek.vk-patroon-1:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(7n + 1) .vk-tegel-tekst,
.vk-mozaiek.vk-patroon-2:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(3n + 1) .vk-tegel-tekst,
.vk-mozaiek.vk-patroon-3:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(6n + 4) .vk-tegel-tekst {
text-align: center !important;
padding: 0 20px !important;
line-height: 1.20 !important;
}
.vk-mozaiek .vk-doorgeef { display: contents !important; }
.vk-mozaiek.vk-vorm-wolk {
display: flex !important;
flex-wrap: wrap !important;
grid-template-columns: none !important;
grid-auto-rows: auto !important;
max-width: 940px !important;
}
.vk-mozaiek.vk-vorm-wolk ul.vk-tegel-wrap .answer-item {
grid-column: auto !important; grid-row: auto !important;
width: auto !important; flex: 0 0 auto !important;
}
.vk-mozaiek.vk-vorm-wolk .vk-antwoord-tegel {
display: inline-flex !important;
width: auto !important; height: auto !important;
background: none !important;
background-image: none !important;
background-color: transparent !important;
outline: none !important;
box-shadow: none !important;
border-bottom: 3px solid transparent !important;
padding: 4px 8px !important;
transition: color .14s ease, background-color .14s ease, border-color .14s ease !important;
}
.vk-mozaiek.vk-vorm-wolk .vk-antwoord-tegel::before { content: none !important; }
.vk-mozaiek.vk-vorm-wolk .vk-tegel-tekst {
color: var(--vk-leisteen) !important;
font-family: var(--vk-optie-letter) !important;
font-weight: var(--vk-optie-gewicht) !important;
text-shadow: none !important;
padding: 0 !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
@keyframes vkAdem {
0% { transform: scale(.88); }
50% { transform: scale(1.16); }
100% { transform: scale(.88); }
}
@keyframes vkDrift {
0% { transform: translate(0, 0); }
20% { transform: translate(17px, -14px); }
40% { transform: translate(-8px, 16px); }
60% { transform: translate(-20px, -7px); }
80% { transform: translate(11px, 13px); }
100% { transform: translate(0, 0); }
}
@keyframes vkDrift2 {
0% { transform: translate(0, 0); }
25% { transform: translate(-15px, 12px); }
50% { transform: translate(14px, 15px); }
75% { transform: translate(9px, -16px); }
100% { transform: translate(0, 0); }
}
.vk-mozaiek.vk-vorm-wolk .vk-antwoord-tegel { overflow: visible !important; }
.vk-mozaiek.vk-vorm-wolk .vk-tegel-tekst {
display: inline-block !important;
transform-origin: center center !important;
animation: vkAdem 19s ease-in-out infinite !important;
will-change: transform !important;
}
.vk-mozaiek.vk-vorm-wolk ul.vk-tegel-wrap .answer-item {
animation: vkDrift 23s ease-in-out infinite !important;
position: relative !important;
will-change: transform !important;
}
.vk-mozaiek.vk-vorm-wolk .vk-tegel-tekst,
.vk-mozaiek.vk-vorm-wolk .vk-anders-tekst,
.vk-mozaiek.vk-vorm-wolk .vk-anders-invoer {
font-size: var(--vk-optie-maat) !important;
}
.vk-mozaiek.vk-vorm-wolk:hover .vk-tegel-tekst,
.vk-mozaiek.vk-vorm-wolk:hover ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-wolk:has(:focus-visible) .vk-tegel-tekst,
.vk-mozaiek.vk-vorm-wolk:has(:focus-visible) ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected,
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-tegel-tekst,
html.vk-beweging-uit .vk-mozaiek.vk-vorm-wolk .vk-tegel-tekst,
html.vk-beweging-uit .vk-mozaiek.vk-vorm-wolk ul.vk-tegel-wrap .answer-item {
animation-play-state: paused !important;
}
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected { transform: none !important; }
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-tegel-tekst { transform: scale(1) !important; }
html.vk-beweging-uit .vk-mozaiek.vk-vorm-wolk .vk-tegel-tekst,
html.vk-beweging-uit .vk-mozaiek.vk-vorm-wolk ul.vk-tegel-wrap .answer-item { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
.vk-mozaiek.vk-vorm-wolk .vk-tegel-tekst,
.vk-mozaiek.vk-vorm-wolk ul.vk-tegel-wrap .answer-item { animation: none !important; transform: none !important; }
}
.vk-mozaiek.vk-vorm-wolk .answer-item:hover .vk-antwoord-tegel { border-bottom-color: var(--vk-rood) !important; }
.vk-mozaiek.vk-vorm-wolk .answer-item:hover .vk-tegel-tekst { color: var(--vk-rood) !important; }
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-antwoord-tegel {
background-color: var(--vk-rood) !important;
border-bottom-color: var(--vk-rood) !important;
outline: none !important;
}
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-tegel-tekst { color: var(--vk-tegel-tekst-gekozen, #fff) !important; }
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-antwoord-tegel::after { content: none !important; }
.vk-mozaiek.vk-vorm-wolk li.radio-text-item,
.vk-mozaiek.vk-vorm-wolk li.checkbox-text-item { flex: 0 0 100% !important; margin-top: 10px !important; }
.vk-mozaiek.vk-vorm-wolk .vk-anders-tegel {
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-bottom: 3px solid transparent !important;
padding: 4px 8px !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
border-radius: 0 !important;
aspect-ratio: auto !important;
}
.vk-mozaiek.vk-vorm-wolk .vk-anders-tekst {
color: var(--vk-leisteen) !important;
font-family: var(--vk-optie-letter) !important;
font-weight: var(--vk-optie-gewicht) !important;
line-height: 1.1 !important;
text-shadow: none !important;
gap: 8px !important;
white-space: nowrap !important;
}
.vk-mozaiek.vk-vorm-wolk .vk-anders-tekst::after { font-size: 1.15em !important; opacity: 1 !important; }
.vk-mozaiek.vk-vorm-wolk .vk-anders-invoer {
color: var(--vk-leisteen) !important;
border-bottom-color: rgba(46, 58, 63, .40) !important;
}
.vk-mozaiek.vk-vorm-wolk .answer-item:hover .vk-anders-tegel { border-bottom-color: var(--vk-rood) !important; }
.vk-mozaiek.vk-vorm-wolk .answer-item:hover .vk-anders-tekst { color: var(--vk-rood) !important; }
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-anders-tegel {
background-color: var(--vk-rood) !important;
border-color: transparent !important;
border-bottom-color: var(--vk-rood) !important;
padding: 4px 8px !important;
}
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-anders-tekst,
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-anders-invoer { color: var(--vk-tegel-tekst-gekozen, #fff) !important; }
.vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-anders-invoer {
border-bottom-color: rgba(255, 255, 255, .55) !important;
caret-color: #fff !important;
}
.vk-mozaiek.vk-vorm-vergelijk {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
grid-auto-rows: auto !important;
gap: 14px !important;
padding: 4px 0 28px !important;
}
.vk-mozaiek.vk-vorm-vergelijk ul.vk-tegel-wrap .answer-item {
grid-column: span 1 !important; grid-row: span 1 !important;
}
.vk-mozaiek.vk-vorm-vergelijk .vk-antwoord-tegel {
display: block !important;
height: auto !important;
min-height: 130px !important;
background: #fff !important;
background-image: none !important;
border: 2px solid #dcd8d2 !important;
outline: none !important;
padding: 22px 22px 24px !important;
}
.vk-mozaiek.vk-vorm-vergelijk .vk-antwoord-tegel::before { content: none !important; }
.vk-mozaiek.vk-vorm-vergelijk .vk-tegel-tekst {
color: var(--vk-leisteen) !important;
text-shadow: none !important;
text-align: left !important;
padding: 0 !important;
font-size: var(--vk-optie-maat) !important;
line-height: 1.30 !important;
white-space: normal !important;
}
.vk-mozaiek.vk-vorm-vergelijk .answer-item:hover .vk-antwoord-tegel {
border-color: var(--vk-rood) !important; box-shadow: 0 6px 18px rgba(0,7,61,.12) !important;
}
.vk-mozaiek.vk-vorm-vergelijk .answer-item.vk-selected .vk-antwoord-tegel {
border-color: var(--vk-rood) !important; background: rgba(183,49,49,.05) !important; outline: none !important;
}
.vk-mozaiek.vk-vorm-vergelijk .answer-item.vk-selected .vk-antwoord-tegel::after {
top: 10px !important; right: 10px !important;
}
.vk-mozaiek.vk-vorm-cirkels {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(calc(var(--vk-cirkel-maat, 124px) + 16px), 1fr)) !important;
grid-auto-rows: auto !important;
justify-items: center !important;
gap: 22px 12px !important;
padding: 10px 0 30px !important;
max-width: var(--vk-cirkel-raster, 860px) !important;
}
.vk-mozaiek.vk-vorm-cirkels ul.vk-tegel-wrap .answer-item {
grid-column: span 1 !important; grid-row: span 1 !important; width: auto !important;
}
.vk-mozaiek.vk-vorm-cirkels .vk-antwoord-tegel {
width: var(--vk-cirkel-maat, 124px) !important;
height: var(--vk-cirkel-maat, 124px) !important;
border-radius: 50% !important;
background-image: none !important;
background-color: var(--vk-tegel-grond) !important;
align-items: center !important; justify-content: center !important;
outline: none !important;
border: 3px solid transparent !important;
}
.vk-mozaiek.vk-vorm-cirkels .vk-antwoord-tegel::before { content: none !important; }
.vk-mozaiek.vk-vorm-cirkels .vk-tegel-tekst {
text-align: center !important; padding: 0 12px !important;
line-height: 1.20 !important; white-space: normal !important;
}
.vk-mozaiek.vk-vorm-cirkels .answer-item:hover .vk-antwoord-tegel { border-color: var(--vk-rood) !important; box-shadow: none !important; }
.vk-mozaiek.vk-vorm-cirkels .answer-item.vk-selected .vk-antwoord-tegel {
border-color: var(--vk-rood) !important; background-color: var(--vk-rood) !important; outline: none !important;
}
.vk-mozaiek.vk-vorm-cirkels .answer-item.vk-selected .vk-tegel-tekst { color: var(--vk-tegel-tekst-gekozen, #fff) !important; }
.vk-mozaiek.vk-vorm-cirkels .answer-item.vk-selected .vk-antwoord-tegel::after { content: none !important; }
.vk-mozaiek.vk-vorm-cirkels ul.vk-tegel-wrap .vk-anders-tegel {
box-sizing: content-box !important;
width: var(--vk-cirkel-maat, 116px) !important;
height: var(--vk-cirkel-maat, 116px) !important;
min-width: 0 !important;
border-radius: 50% !important;
background-color: var(--vk-tegel-grond) !important;
background-image: none !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: 3px solid transparent !important;
outline: none !important;
overflow: hidden !important;
}
.vk-mozaiek.vk-vorm-cirkels .vk-anders-tekst { padding: 0 12px !important; }
.vk-mozaiek.vk-vorm-cirkels .vk-anders-tekst::after { font-size: 1.05em !important; }
.vk-mozaiek.vk-vorm-cirkels .vk-anders-invoer { max-width: 84px !important; }
.vk-mozaiek.vk-vorm-cirkels ul.vk-tegel-wrap .answer-item:hover .vk-anders-tegel {
border-color: var(--vk-rood) !important; box-shadow: none !important;
}
.vk-mozaiek.vk-vorm-cirkels ul.vk-tegel-wrap .answer-item.vk-selected .vk-anders-tegel {
border-color: var(--vk-rood) !important;
background-color: var(--vk-rood) !important;
outline: none !important;
}
#vk-leesbalk {
position: fixed !important;
top: 12px !important; right: 12px !important;
z-index: 1200 !important;
display: flex !important;
gap: 6px !important;
}
#vk-leesbalk button {
width: 44px !important; height: 44px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
background: #fff !important;
color: var(--vk-leisteen) !important;
border: 2px solid var(--vk-leisteen) !important;
border-radius: 0 !important;
font-family: 'Nunito Sans', system-ui, sans-serif !important;
font-weight: 800 !important;
font-size: 17px !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 2px 8px rgba(0, 7, 61, .18) !important;
transition: background-color .14s ease, color .14s ease, border-color .14s ease !important;
}
#vk-leesbalk button span { font-size: 12px !important; margin-left: 1px !important; }
@media (hover: hover) {
#vk-leesbalk button:hover:not(:disabled):not([aria-pressed="true"]):not(.vk-actief) { border-color: var(--vk-rood) !important; color: var(--vk-rood) !important; }
}
#vk-leesbalk button:disabled { opacity: .35 !important; cursor: default !important; }
#vk-leesbalk button:focus-visible { outline: 3px solid var(--vk-rood) !important; outline-offset: 2px !important; }
#vk-leesbalk button[aria-pressed="true"],
#vk-leesbalk button.vk-actief {
background: var(--vk-rood) !important;
border-color: var(--vk-rood) !important;
color: var(--vk-tegel-tekst-gekozen, #fff) !important;
}
@media (max-width: 560px) {
#vk-leesbalk { position: absolute !important; top: 10px !important; bottom: auto !important; right: 10px !important; }
body { position: relative !important; padding-top: 64px !important; }
}
@media print { #vk-leesbalk { display: none !important; } }
html.vk-contrast .vk-mozaiek:not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) .vk-antwoord-tegel.vk-antwoord-tegel::before,
html.vk-contrast ul.vk-tegel-wrap .vk-antwoord-tegel.vk-antwoord-tegel:not(.vk-anders-tegel)::before {
background-color: var(--vk-tegel-grond) !important;
background-image: none !important;
}
html.vk-contrast .vk-mozaiek:not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) .vk-antwoord-tegel.vk-antwoord-tegel {
background-image: none !important;
background-color: var(--vk-tegel-grond) !important;
}
html.vk-contrast .vk-tegel-tekst.vk-tegel-tekst,
html.vk-contrast .vk-anders-tekst.vk-anders-tekst,
html.vk-contrast .vk-anders-invoer.vk-anders-invoer {
color: var(--vk-tegel-tekst-contrast, #fff) !important;
text-shadow: none !important;
}
html.vk-contrast .vk-mozaiek:not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) .answer-item:hover .vk-antwoord-tegel.vk-antwoord-tegel::before,
html.vk-contrast .vk-mozaiek:not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) .answer-item:focus-within .vk-antwoord-tegel.vk-antwoord-tegel::before,
html.vk-contrast .vk-mozaiek:not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) .answer-item.vk-selected .vk-antwoord-tegel.vk-antwoord-tegel::before {
background-color: var(--vk-tegel-grond) !important;
background-image: none !important;
}
html.vk-contrast ul.vk-tegel-wrap .answer-item:hover .vk-antwoord-tegel {
box-shadow: 0 0 0 4px var(--vk-rood) !important;
}
html.vk-contrast .vk-mozaiek.vk-vorm-wolk .vk-tegel-tekst,
html.vk-contrast .vk-mozaiek.vk-vorm-wolk .vk-anders-tekst,
html.vk-contrast .vk-mozaiek.vk-vorm-wolk .vk-anders-invoer { color: #10161f !important; }
html.vk-contrast .vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-tegel-tekst,
html.vk-contrast .vk-mozaiek.vk-vorm-wolk .answer-item.vk-selected .vk-anders-tekst {
color: var(--vk-tegel-tekst-gekozen, #fff) !important;
}
html.vk-contrast #welcome-container.vk-hero,
html.vk-contrast #vk-eind-hero.vk-hero,
html.vk-contrast .question-container.vk-textonly {
background-image: none !important;
background-color: var(--vk-hero-overlay, #00073d) !important;
}
html.vk-contrast #welcome-container.vk-hero .vk-hero-tekst,
html.vk-contrast #vk-eind-hero.vk-hero .vk-hero-tekst,
html.vk-contrast #welcome-container.vk-hero p,
html.vk-contrast #vk-eind-hero.vk-hero p,
html.vk-contrast #welcome-container.vk-hero li,
html.vk-contrast #vk-eind-hero.vk-hero li,
html.vk-contrast .question-container.vk-textonly p {
color: var(--vk-hero-tekst-contrast, #fff) !important;
text-shadow: none !important;
}
html.vk-contrast #welcome-container.vk-hero h1,
html.vk-contrast #vk-eind-hero.vk-hero h1,
html.vk-contrast .question-container.vk-textonly h2,
html.vk-contrast .question-container.vk-textonly h3 {
color: var(--vk-hero-titel-contrast, #fff) !important;
text-shadow: none !important;
}
html.vk-contrast {
--vk-leisteen: #10161f;
--vk-inkt: #10161f;
--vk-bijschrift-kleur: #10161f;
}
html.vk-contrast .question-container:not(.vk-hero) .ls-questionhelp,
html.vk-contrast .question-container:not(.vk-hero) .ls-label-question > i {
border-left-width: 5px !important;
}
html.vk-contrast .elicit-button.btn,
html.vk-contrast .button-item.btn.btn-default,
html.vk-contrast .vk-mozaiek.vk-vorm-vergelijk .vk-antwoord-tegel {
border-color: var(--vk-leisteen) !important;
border-width: 3px !important;
}
html.vk-contrast .btn-smiley { border-color: rgba(16, 22, 31, .30) !important; }
html.vk-contrast .question-container .slider-item.slider-item .slider-track,
html.vk-contrast .question-container .slider-item.slider-item input[type="range"] {
background-image:
linear-gradient(to right, transparent calc(50% - 2px), #10161f calc(50% - 2px),
#10161f calc(50% + 2px), transparent calc(50% + 2px)),
linear-gradient(to right, rgba(16, 22, 31, .32), rgba(16, 22, 31, .20) 50%, rgba(16, 22, 31, .32)) !important;
}
html.vk-contrast .vk-antwoord-tegel { outline-color: rgba(16, 22, 31, .35) !important; }
html.vk-contrast ul.vk-tegel-wrap .answer-item.vk-selected .vk-antwoord-tegel { outline-width: 4px !important; }
.question-container .slider-item.slider-item {
max-width: 1240px !important;
margin: 0 auto 0 0 !important;
align-items: center !important;
}
.question-container .slider-item.slider-item .slider-left-span,
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item .slider-right-span,
.question-container .slider-item.slider-item .slider-right {
height: auto !important;
min-height: 0 !important;
align-self: center !important;
flex: 0 0 clamp(130px, 17%, 220px) !important;
}
.question-container .slider-item.slider-item > .col-sm-11,
.question-container .slider-item.slider-item > [class*="col-sm-1"]:not(.slider-left):not(.slider-right) {
align-self: center !important;
}
.question-container .slider-item.slider-item > .control-label.vk-leeg {
flex: 0 0 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.question-container .slider-item.slider-item .slider-container {
width: 100% !important;
max-width: none !important;
flex: 1 1 auto !important;
padding: 0 !important;
}
@media (min-width: 768px) {
.question-container .slider-item.slider-item .slider-container,
.question-container .slider-item.slider-item .slider-container.ls-input-group {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item > *:has(.slider-left-span) {
padding-right: clamp(16px, 2vw, 32px) !important;
}
.question-container .slider-item.slider-item .slider-right,
.question-container .slider-item.slider-item > *:has(.slider-right-span) {
padding-left: clamp(16px, 2vw, 32px) !important;
}
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item .slider-right,
.question-container .slider-item.slider-item > label.control-label {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
.question-container .slider-item.slider-item .slider,
.question-container .slider-item.slider-item input[type="range"] { width: 100% !important; }
.question-container .slider-item.slider-item .slider.slider-horizontal .slider-track { width: 100% !important; }
.question-container .slider-item.slider-item .slider-track,
.question-container .slider-item.slider-item .slider .slider-track,
.question-container .slider-item.slider-item input[type="range"] {
background-image: linear-gradient(to right,
rgba(0, 7, 61, .16) 0%, rgba(0, 7, 61, .07) 50%, rgba(0, 7, 61, .16) 100%) !important;
}
.question-container .slider-item.slider-item .slider.slider-horizontal .slider-handle {
top: 50% !important;
margin-top: 0 !important;
}
.question-container .slider-item.slider-item .slider.slider-horizontal .slider-handle,
.question-container .slider-item.slider-item input[type="range"]::-webkit-slider-thumb {
background: var(--vk-groen) !important;
border: 4px solid #fff !important;
box-shadow: 0 0 0 3px #1c6b3a, 0 3px 12px rgba(0, 7, 61, .35) !important;
width: 32px !important; height: 32px !important;
transition: background-color .18s ease, box-shadow .18s ease, width .18s ease, height .18s ease !important;
}
.question-container .slider-item.slider-item .slider.slider-untouched .slider-handle,
.question-container .slider-item.slider-item:not(.vk-gebruikt) input[type="range"]::-webkit-slider-thumb {
background: var(--vk-rood) !important;
box-shadow: 0 0 0 2px rgba(183, 49, 49, .45), 0 3px 12px rgba(0, 7, 61, .38) !important;
width: 40px !important; height: 40px !important;
}
.vk-tripool-vlak .vk-tripool-stip,
.question-container [class*="triade"] .ball,
.question-container [class*="triade"] .triade-ball {
background: var(--vk-rood) !important;
border: 3px solid #fff !important;
box-shadow: 0 0 0 2px rgba(183, 49, 49, .45) !important;
}
.question-container.vk-gebruikt .vk-tripool-stip,
.question-container.vk-gebruikt [class*="triade"] .ball,
.question-container.vk-gebruikt [class*="triade"] .triade-ball {
background: var(--vk-groen) !important;
box-shadow: 0 0 0 3px #1c6b3a !important;
}
@media (max-width: 900px) {
.question-container .slider-item.slider-item {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-areas: "baan baan" "links rechts" !important;
align-items: start !important;
gap: 16px clamp(16px, 5vw, 40px) !important;
padding: 6px 0 30px !important;
max-width: none !important;
}
.question-container .slider-item.slider-item
> *:not(.slider-left):not(.slider-right):not(:has(.slider-left-span)):not(:has(.slider-right-span)) {
grid-area: baan !important;
align-self: center !important;
}
.question-container .slider-item.slider-item .slider-left-span,
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item .slider-right-span,
.question-container .slider-item.slider-item .slider-right {
flex: none !important;
width: auto !important;
align-self: start !important;
padding: 0 !important;
}
.question-container .slider-item.slider-item .slider-left  { grid-area: links  !important; text-align: left  !important; }
.question-container .slider-item.slider-item .slider-left-span  { grid-area: links  !important; text-align: left  !important; }
.question-container .slider-item.slider-item .slider-right { grid-area: rechts !important; text-align: right !important; }
.question-container .slider-item.slider-item .slider-right-span { grid-area: rechts !important; text-align: right !important; }
.question-container .slider-item.slider-item .slider,
.question-container .slider-item.slider-item .slider.slider-horizontal,
.question-container .slider-item.question-container .slider-item.slider-item .slider-container,
.question-container .slider-item.slider-item input[type="range"] { width: 100% !important; max-width: none !important; }
}
.vk-mozaiek.vk-vorm-rij {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
grid-auto-rows: 104px !important;
grid-auto-flow: row !important;
gap: 14px !important;
padding: 10px 0 30px !important;
max-width: 940px !important;
}
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-rij.vk-patroon-1 ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-rij.vk-patroon-2 ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-rij.vk-patroon-3 ul.vk-tegel-wrap .answer-item {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.vk-mozaiek.vk-vorm-rij .vk-antwoord-tegel {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
align-items: center !important;
justify-content: center !important;
}
.vk-mozaiek.vk-vorm-rij .vk-tegel-tekst {
text-align: center !important;
padding: 0 12px !important;
line-height: 1.28 !important;
}
@keyframes vkWieg {
0%   { transform: translateY(0); }
50%   { transform: translateY(-3px); }
100%   { transform: translateY(0); }
}
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item {
animation: vkWieg 7s ease-in-out infinite !important;
will-change: transform;
}
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item:nth-child(4n + 2) { animation-delay: -1.6s !important; }
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item:nth-child(4n + 3) { animation-delay: -3.3s !important; }
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item:nth-child(4n + 4) { animation-delay: -5.0s !important; }
html.vk-beweging-uit .vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item,
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item:hover,
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item.vk-selected {
animation: none !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .answer-item {
animation: none !important;
transform: none !important;
}
}
.vk-mozaiek.vk-vorm-rij ul.vk-tegel-wrap .vk-anders-tegel {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
align-items: center !important;
justify-content: center !important;
padding: 14px 20px !important;
}
@media (max-width: 600px) {
.vk-mozaiek.vk-vorm-rij { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 96px !important; }
}
#vk-eind-hero.vk-hero .vk-eind-knop {
position: absolute !important;
right: clamp(16px, 3vw, 44px) !important;
bottom: clamp(16px, 3vw, 40px) !important;
z-index: 3 !important;
margin: 0 !important;
max-width: calc(100% - 32px) !important;
text-align: right !important;
}
#vk-eind-hero.vk-hero .vk-eind-knop .btn {
max-width: min(52ch, 100%) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#vk-eind-hero.vk-hero .vk-hero-tekst { padding-bottom: 72px !important; }
@media (max-width: 820px) {
#vk-eind-hero.vk-hero .vk-eind-knop {
position: static !important;
margin: 26px 0 0 !important;
text-align: left !important;
max-width: none !important;
}
#vk-eind-hero.vk-hero .vk-eind-knop .btn { white-space: normal !important; }
#vk-eind-hero.vk-hero .vk-hero-tekst { padding-bottom: 0 !important; }
}
.question-container textarea,
.question-container input[type="text"]:not(.vk-anders-invoer):not(.vk-anders-tegel *),
.question-container input[type="email"],
.question-container input[type="tel"],
.question-container input[type="number"],
.question-container input[type="url"] {
box-sizing: border-box !important;
font-family: 'Noto Sans', system-ui, sans-serif !important;
font-size: clamp(17px, 1.35vw, 20px) !important;
line-height: 1.55 !important;
color: var(--vk-leisteen) !important;
background: #fff !important;
border: 2px solid rgba(46, 58, 63, .22) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 14px 16px !important;
transition: border-color .16s ease !important;
}
.question-container textarea {
min-height: 220px !important;
resize: vertical !important;
}
.question-container textarea:focus,
.question-container input[type="text"]:not(.vk-anders-invoer):not(.vk-anders-tegel *):focus,
.question-container input[type="email"]:focus,
.question-container input[type="tel"]:focus,
.question-container input[type="number"]:focus,
.question-container input[type="url"]:focus {
border-color: var(--vk-rood) !important;
outline: none !important;
}
.question-container textarea::placeholder,
.question-container input::placeholder {
color: rgba(46, 58, 63, .45) !important;
font-style: italic !important;
}
.question-container .ls-questionhelp + div .text-info,
.question-container .hint-item,
.question-container .ls-input-limit {
font-family: 'Noto Sans', system-ui, sans-serif !important;
font-size: 14px !important;
color: var(--vk-leisteen) !important;
opacity: .7 !important;
}
:root { --vk-antwoord-inspring: min(7vw, 170px); }
.question-container:not(.vk-hero):not(.vk-textonly) > .answer-container {
padding-left: var(--vk-antwoord-inspring) !important;
}
@media (max-width: 820px) {
:root { --vk-antwoord-inspring: 5px; }
.question-container:not(.vk-hero):not(.vk-textonly) > .answer-container {
padding-left: 5px !important;
}
}
.vk-hero-rechts {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: clamp(10px, 1.4vw, 20px) !important;
flex: 0 1 auto !important;
min-width: 0 !important;
}
#vk-logo {
position: static !important;
align-self: flex-end !important;
pointer-events: none !important;
line-height: 0 !important;
}
#welcome-container.vk-hero .vk-hero-rechts,
#vk-eind-hero.vk-hero .vk-hero-rechts {
flex: 0 1 auto !important;
align-self: center !important;
width: clamp(300px, 44%, 640px) !important;
max-width: 46% !important;
}
#welcome-container.vk-hero .vk-hero-rechts .vk-portret,
#vk-eind-hero.vk-hero .vk-hero-rechts .vk-portret {
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
margin: 0 !important;
}
@media (max-width: 820px) {
#welcome-container.vk-hero .vk-hero-rechts,
#vk-eind-hero.vk-hero .vk-hero-rechts {
width: 100% !important;
max-width: 100% !important;
align-self: stretch !important;
}
#welcome-container.vk-hero .vk-hero-rechts .vk-portret,
#vk-eind-hero.vk-hero .vk-hero-rechts .vk-portret { max-height: 320px !important; object-fit: contain !important; object-position: right !important; }
}
#vk-logo img {
height: clamp(56px, 6.4vw, 104px) !important;
width: auto !important;
display: block !important;
filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .85))
drop-shadow(0 2px 8px rgba(0, 7, 61, .28)) !important;
}
#welcome-container.vk-hero,
#vk-eind-hero.vk-hero { position: relative !important; }
@media (max-width: 820px) {
#vk-logo img { height: clamp(46px, 9vw, 72px) !important; }
}
@media (max-width: 560px) { #vk-logo { top: 16px !important; } }
@media print { #vk-logo { display: none !important; } }
@media (max-width: 480px) {
.question-container .slider-item.slider-item .slider-left-span,
.question-container .slider-item.slider-item .slider-left,
.question-container .slider-item.slider-item .slider-right-span,
.question-container .slider-item.slider-item .slider-right {
line-height: 1.35 !important;
}
}
@media (max-width: 600px) {
.vk-mozaiek {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
padding: 4px 0 22px !important;
}
.vk-mozaiek.vk-patroon-1:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(n),
.vk-mozaiek.vk-patroon-2:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(n),
.vk-mozaiek.vk-patroon-3:not(.vk-vorm-cirkels):not(.vk-vorm-strook):not(.vk-vorm-rij):not(.vk-vorm-wolk):not(.vk-vorm-vergelijk) ul.vk-tegel-wrap .answer-item:nth-child(n) {
grid-column: span 1 !important;
grid-row: span 1 !important;
}
.vk-mozaiek .vk-tegel-tekst {
line-height: 1.2 !important;
padding: 0 8px !important;
}
.vk-mozaiek .vk-anders-tegel { padding: 6px 8px !important; }
.vk-mozaiek.vk-vorm-ruim { grid-auto-rows: 66px !important; gap: 8px !important; }
}
@media (max-width: 380px) {
.vk-mozaiek {
grid-auto-rows: minmax(56px, auto) !important;
gap: 6px !important;
}
.vk-mozaiek .vk-tegel-tekst {
padding: 6px !important;
}
}
.vk-mozaiek.vk-vorm-wolk {
align-items: center !important;
justify-content: center !important;
gap: clamp(58px, 5vw, 80px) clamp(38px, 3.6vw, 60px) !important;
padding: 34px 0 40px !important;
}
.vk-mozaiek.vk-vorm-wolk ul.vk-tegel-wrap .answer-item:nth-child(7n + 1) { margin-top:  0    !important; }
@media (prefers-reduced-motion: reduce) {
.vk-mozaiek.vk-vorm-wolk { gap: 44px clamp(16px, 2vw, 30px) !important; }
}
@media (max-width: 600px) {
.vk-mozaiek { grid-auto-rows: minmax(66px, auto) !important; }
}
@media (max-width: 900px) {
.question-container .slider-item.slider-item.slider-item > *:has(.slider-left-span),
.question-container .slider-item.slider-item > .slider-left {
grid-area: links !important;
text-align: left !important;
align-self: start !important;
padding: 0 !important;
width: auto !important;
flex: none !important;
}
.question-container .slider-item.slider-item.slider-item > *:has(.slider-right-span),
.question-container .slider-item.slider-item > .slider-right {
grid-area: rechts !important;
text-align: right !important;
align-self: start !important;
padding: 0 !important;
width: auto !important;
flex: none !important;
}
}
@media (min-width: 901px) {
.question-container .slider-item.slider-item > *:has(.slider-left-span)  { text-align: left  !important; }
.question-container .slider-item.slider-item > *:has(.slider-right-span) { text-align: right !important; }
.question-container .slider-item.slider-item > *:has(.slider-left-span),
.question-container .slider-item.slider-item > *:has(.slider-right-span) {
flex: 0 0 clamp(130px, 17%, 220px) !important;
min-width: 0 !important;
}
.question-container .slider-item.slider-item
> *:not(.control-label):not(.slider-left):not(.slider-right):not(:has(.slider-left-span)):not(:has(.slider-right-span)) {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
}
}
.question-container .slider-item.slider-item > label.control-label.vk-leeg.vk-leeg {
display: none !important;
flex: 0 0 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.question-container .slider-item.slider-item > label.control-label:not(.vk-leeg) {
flex: 0 0 clamp(110px, 14%, 200px) !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
align-self: center !important;
text-align: right !important;
padding-right: 14px !important;
}
#welcome-container.vk-hero .vk-hero-knop #ls-button-submit[value="movesubmit"],
#vk-eind-hero.vk-hero .vk-hero-knop #ls-button-submit[value="movesubmit"],
.navigator #ls-button-submit[value="movesubmit"] {
background-color: var(--vk-knop-af-bg, var(--vk-knop-bg, var(--vk-rood))) !important;
border-color:     var(--vk-knop-af-rand, var(--vk-knop-rand, var(--vk-rood))) !important;
color:            var(--vk-knop-af-tekst, var(--vk-knop-tekst, #fff)) !important;
}
.vk-mozaiek.vk-vorm-vierkant,
.vk-mozaiek.vk-vorm-liggend,
.vk-mozaiek.vk-vorm-staand {
display: grid !important;
grid-auto-flow: row !important;
gap: 12px !important;
padding: 4px 0 28px !important;
align-items: stretch !important;
max-width: 1100px !important;
}
.vk-mozaiek.vk-vorm-vierkant {
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
grid-auto-rows: auto !important;
}
.vk-mozaiek.vk-vorm-vierkant .vk-antwoord-tegel,
.vk-mozaiek.vk-vorm-vierkant .vk-anders-tegel { aspect-ratio: 1 / 1 !important; height: auto !important; }
.vk-mozaiek.vk-vorm-liggend {
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
grid-auto-rows: auto !important;
}
.vk-mozaiek.vk-vorm-liggend .vk-antwoord-tegel,
.vk-mozaiek.vk-vorm-liggend .vk-anders-tegel { aspect-ratio: 2 / 1 !important; height: auto !important; }
.vk-mozaiek.vk-vorm-staand {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
grid-auto-rows: auto !important;
}
.vk-mozaiek.vk-vorm-staand .vk-antwoord-tegel,
.vk-mozaiek.vk-vorm-staand .vk-anders-tegel { aspect-ratio: 3 / 4 !important; height: auto !important; }
@media (max-width: 600px) {
.vk-mozaiek.vk-vorm-vierkant,
.vk-mozaiek.vk-vorm-liggend,
.vk-mozaiek.vk-vorm-staand {
grid-template-columns: repeat(2, 1fr) !important;
grid-auto-rows: minmax(66px, auto) !important;
gap: 8px !important;
}
.vk-mozaiek.vk-vorm-vierkant .vk-antwoord-tegel,
.vk-mozaiek.vk-vorm-liggend  .vk-antwoord-tegel,
.vk-mozaiek.vk-vorm-staand   .vk-antwoord-tegel,
.vk-mozaiek.vk-vorm-vierkant .vk-anders-tegel,
.vk-mozaiek.vk-vorm-liggend  .vk-anders-tegel,
.vk-mozaiek.vk-vorm-staand   .vk-anders-tegel {
aspect-ratio: auto !important;
height: 100% !important;
}
}
@media (max-width: 900px) {
.question-container .slider-item.slider-item :has(> .slider-container):has(> .slider-left) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-areas: "baan baan" "links rechts" !important;
align-items: start !important;
gap: 14px clamp(16px, 5vw, 40px) !important;
width: 100% !important;
padding: 0 !important;
}
.question-container .slider-item.slider-item :has(> .slider-left) > .slider-container {
grid-area: baan !important;
width: 100% !important;
margin: 0 !important;
}
.question-container .slider-item.slider-item :has(> .slider-container) > .slider-left {
grid-area: links !important;
text-align: left !important;
width: auto !important;
padding: 0 !important;
}
.question-container .slider-item.slider-item :has(> .slider-container) > .slider-right {
grid-area: rechts !important;
text-align: right !important;
width: auto !important;
padding: 0 !important;
}
.question-container .slider-item.slider-item :has(> .slider-container) > .slider-right.visible-xs-block {
display: none !important;
}
.question-container .slider-item.slider-item :has(> .slider-container) > .slider-right.hidden-xs {
display: block !important;
}
}
.navigator #ls-button-previous,
.navigator #ls-button-submit {
box-sizing: border-box !important;
min-width: clamp(160px, 16vw, 220px) !important;
padding: 13px 28px !important;
border-width: 2px !important;
border-style: solid !important;
font-size: 19px !important;
line-height: 1.3 !important;
letter-spacing: .07em !important;
white-space: nowrap !important;
}
@media (max-width: 560px) {
.navigator.space-col {
display: flex !important;
gap: 12px !important;
margin: 0 !important;
}
.navigator.space-col > [class*="col-xs-6"] {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
float: none !important;
}
.navigator.space-col > [class*="col-xs-6"]:not(:has(button:not([disabled]))) {
display: none !important;
}
.navigator #ls-button-previous,
.navigator #ls-button-submit {
width: 100% !important;
min-width: 0 !important;
padding: 13px 8px !important;
letter-spacing: .05em !important;
}
}
.question-container .slider-item.slider-item .slider.slider-horizontal {
width: calc(100% - 40px) !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
.question-container .slider-item.slider-item .slider.slider-horizontal .slider-handle {
margin-left: 0 !important;
transform: translate(-50%, -50%) !important;
}
.btn-smiley { box-sizing: border-box !important; }
@media (max-width: 700px) {
.question-container .row.ls-answers:has(.btn-smiley) { gap: 10px !important; }
.question-container .row.ls-answers:has(.btn-smiley) > div { flex: 0 0 calc((100% - 20px) / 3) !important; }
}
@media (max-width: 460px) {
.question-container .row.ls-answers:has(.btn-smiley) > div { flex: 0 0 calc((100% - 10px) / 2) !important; }
}
.question-container .row.ls-answers:has(.btn-smiley)::before,
.question-container .row.ls-answers:has(.btn-smiley)::after {
content: none !important;
display: none !important;
}
@media (max-width: 560px) {
.question-container:not(.vk-hero):not(.vk-textonly) {
padding: 24px 14px !important;
margin-bottom: 8px !important;
}
.question-container:not(.vk-hero):not(.vk-textonly) > .answer-container > .container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}
#vk-eind-hero.vk-hero,
#welcome-container.vk-hero,
.question-container.vk-hero {
padding-left: 20px !important;
padding-right: 20px !important;
}
.question-container.vk-textonly:not(.vk-hero) {
padding-left: 14px !important;
padding-right: 14px !important;
}
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 560px) {
.question-container:not(.vk-hero) .question-text,
.question-container:not(.vk-hero) .ls-label-question,
.question-container:not(.vk-hero) .question-text h2,
.question-container:not(.vk-hero) .ls-label-question h2 {
font-size: 19px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
.question-container.vk-textonly .question-text,
.question-container.vk-textonly .ls-label-question {
font-size: 17px !important;
}
.question-container:not(.vk-hero) .ls-questionhelp,
.question-container:not(.vk-hero) .ls-questionhelp p,
.question-container:not(.vk-hero) .question-text em,
.question-container:not(.vk-hero) .question-text i,
.question-container:not(.vk-hero) .ls-label-question i,
.question-container:not(.vk-hero) .ls-label-question em {
font-size: 15px !important;
line-height: 1.4 !important;
}
.elicit-button label h3,
.button-item.btn label h3 { font-size: 17px !important; }
.elicit-button label h4,
.button-item.btn label h4 { font-size: 15px !important; }
#vk-eind-hero.vk-hero h1,
#welcome-container.vk-hero h1,
#vk-eind-hero.vk-hero .vk-survey-titel,
#welcome-container.vk-hero .vk-survey-titel {
font-size: 22px !important;
}
#vk-eind-hero.vk-hero p,
#welcome-container.vk-hero p,
#vk-eind-hero.vk-hero li,
#welcome-container.vk-hero li,
#vk-eind-hero.vk-hero .survey-welcome,
#welcome-container.vk-hero .survey-welcome {
font-size: 16px !important;
}
#ls-button-submit,
#ls-button-previous,
.navigator #ls-button-previous,
.navigator #ls-button-submit,
#welcome-container.vk-hero .vk-hero-knop .btn {
font-size: 17px !important;
}
.question-container textarea { font-size: 16px !important; }
}
@media (max-width: 560px) {
.question-container .slider-item.slider-item .slider.slider-horizontal {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.question-container .slider-item.slider-item .slider.slider-horizontal .slider-handle,
.question-container .slider-item.slider-item input[type="range"]::-webkit-slider-thumb {
width: 26px !important; height: 26px !important;
}
.question-container .slider-item.slider-item .slider.slider-untouched .slider-handle,
.question-container .slider-item.slider-item:not(.vk-gebruikt) input[type="range"]::-webkit-slider-thumb {
width: 30px !important; height: 30px !important;
}
.question-container .slider-item.slider-item input[type="range"]::-webkit-slider-thumb { margin-top: -6px !important; }
.question-container .slider-item.slider-item:not(.vk-gebruikt) input[type="range"]::-webkit-slider-thumb { margin-top: -8px !important; }
}
ul.vk-tegel-wrap .answer-item label.vk-label-hidden {
display: block !important;
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
white-space: nowrap !important;
}
ul.vk-tegel-wrap .answer-item:has(input:focus-visible) .vk-antwoord-tegel {
outline: 3px solid var(--vk-rood) !important;
outline-offset: 4px !important;
}
.elicit-button label h4,
.button-item.btn label h4 {
color: var(--vk-accent-tekst, var(--vk-rood)) !important;
}
.footer-vitae a {
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
html.vk-contrast .question-container.vk-textonly .question-text,
html.vk-contrast .question-container.vk-textonly .ls-label-question,
html.vk-contrast .question-container.vk-textonly .question-text h1,
html.vk-contrast .question-container.vk-textonly .ls-label-question h1 {
color: var(--vk-hero-titel-contrast, #fff) !important;
}
html.vk-contrast #vk-eind-hero.vk-hero .vk-hero-tekst a:not(.btn),
html.vk-contrast #welcome-container.vk-hero .vk-hero-tekst a:not(.btn),
html.vk-contrast #welcome-container.vk-hero a:not(.btn) {
color: var(--vk-hero-tekst-contrast, #fff) !important;
text-decoration: underline !important;
}
.question-container .asterisk.vk-verplaatst,
.question-container .ls-mandatory.vk-verplaatst,
.question-container .ls-question-mandatory.vk-verborgen,
.ls-questions-have-errors.vk-verborgen { display: none !important; }
.vk-stip {
color: var(--vk-rood) !important;
font-weight: 800 !important;
margin-left: .18em !important;
cursor: help !important;
text-decoration: none !important;
}
.vk-sr {
position: absolute !important; width: 1px !important; height: 1px !important;
overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
.vk-melding {
display: grid !important;
grid-template-rows: 0fr !important;
transition: grid-template-rows .25s ease !important;
clear: both !important;
}
.vk-melding > div { overflow: hidden !important; min-height: 0 !important; }
.question-container.vk-mist .vk-melding { grid-template-rows: 1fr !important; }
.vk-melding p {
margin: 14px 0 0 !important;
padding: 8px 12px !important;
border-left: 3px solid var(--vk-rood) !important;
background: color-mix(in srgb, var(--vk-rood) 8%, #fff) !important;
color: var(--vk-accent-tekst, var(--vk-rood)) !important;
font-family: var(--vk-optie-letter) !important;
font-size: var(--vk-optie-maat) !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.45 !important;
}
html.vk-beweging-uit .vk-melding { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .vk-melding { transition: none !important; } }
html.vk-contrast .vk-melding p { background: #fff !important; }

:root { --vk-versie: "3.01"; --vk-build: "vertelkamer_2026_111"; }