@import url('https://fonts.googleapis.com/css2?family=Imprima&display=swap');

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { font-family: 'Imprima', sans-serif; }

body { background-color: #fff; font-family: 'Imprima', sans-serif; }

dl, ol, ul { margin-bottom: 0; }

a { text-decoration: none; }

.btn-color-1, .btn-color-1:hover { background: #71ae9e; color: #fff; }

.menu { width: 17.5%; background: #CBE7E0; }
.menu .logo { margin-bottom: 35px; }
.menu ul { list-style: none; }
.menu ul li { margin: 3px 0; }
.menu ul li a { text-decoration: none; color: #663358; }

.logout, .logout:hover { background: #71ae9e; color: #fff; }

.mobile-header { background: #CBE7E0; display: none; justify-content: space-between; align-items: center; padding: 10px 20px; }
.mobile-header .logo { max-width: 75px; }
.mobile-header .logo img { max-width: 100%; }

.page-title { margin-bottom: 30px; border-bottom: 1px #ccc solid; padding-bottom: 30px; display: flex; align-items: center; justify-content: space-between; }
.page-title h3 { margin-bottom: 0; }
.page-title h3 { margin-bottom: 0; }

.content { margin-left: 17.5%; position: relative; padding: 25px; }
.content.full { margin-left: 0; }

.dashboard-blocks .block { background: #f9f9f9; height: 100%; }

#slider { margin-top: 10px; }
#slider-handle {
    width: 2em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
}

table tr { position: relative; }
table tr.poi td { background: #ecf7ff; }
.poi-checkbox { position: absolute; top: 13px; right: 20px; }

.pdf-view { font-family: 'Imprima', sans-serif; font-size: 14px; color: #663358; position: relative; z-index: 2; }
.pdf-view h1, .pdf-view h2, .pdf-view h3, .pdf-view h4, .pdf-view p { font-weight: 400; font-family: 'Imprima', sans-serif; color: #663358; }
.pdf-view .pdf-header { width: 100%; display: table; margin-bottom: 100px; }
.pdf-view.vscore .pdf-header { width: 100%; display: table; margin-bottom: 80px; }
.pdf-view .pdf-header .logo { float: left; width: 50%; }
.pdf-view .pdf-header .logo img { max-width: 200px; }
.pdf-view.vscore .pdf-header .logo img { max-width: 100px; }
.pdf-view .pdf-header .header-text { float: right; width: 50%; color: #663358; }
.pdf-view .pdf-header .header-text strong { font-size: 24px; display: block; font-weight: 400; }
.pdf-view .pdf-header .header-text p { margin-top: 0; margin-bottom: 0; }
.pdf-view .pdf-content { margin-top: 40px; display: table; width: 100%; color: #663358; }
.pdf-view.vscore .pdf-content { margin-top: 0; }
.pdf-view .pdf-content table { width: 100%; text-align: left; border-spacing: 0; border-collapse: collapse; }
.pdf-view .pdf-content table tr th { font-weight: 400; }
.pdf-view .pdf-content table tr th, .pdf-view .pdf-content table tr td { color: #663358; width: 50%; text-align: left; font-size:14px; padding: 5px 0; border-top: 1px #ccc dashed; }
.pdf-view .pdf-content:not(.pdf-content) table tr td:nth-child(1) { border-top: 0; }
.pdf-view .pdf-content:not(.pdf-content) table tr td:nth-child(2) { border-top: 0; }

.pdf-view.vscore h4 { font-size: 11px !important; margin-bottom: 0; }
.pdf-view.vscore .pdf-content table tr th, .pdf-view .pdf-content table tr td { font-size: 11px; padding: 0; border-top: 1px #ccc dashed; }

.pdf-view .pdf-content h4 { font-size: 20px; margin-bottom: 10px; margin-top: 10px; }

.pdf-view .pdf-content table.dates tr th, .pdf-view .pdf-content table.dates tr td { border-top: 0; }

.lidnummer { display: none; }

.item-links { position: relative; margin-right: 20px; }
.item-links .icon { width: 16px; height: 16px; display: block; cursor: pointer; float: right; }
.item-links .icon svg { width: 100%; height: 100%; object-fit: contain; display: table; }
.item-links ul { display: none; position: absolute; top: 18px; right: 0; z-index: 999; border-radius: 3px; background: #663358; box-shadow: 0 0 5px rgba(0,0,0,0.25); padding: 0; margin: 0; }
.item-links ul li { list-style: none; }
.item-links ul li a { color: #fff; display: block; padding: 5px 15px; }

.questions-header { background: #fff; width: 100%; padding: 30px 0; position: absolute; top: 0; left: 0; }
.questions-header .logo { margin: 0 auto; width: 140px; }
.questions-header .logo svg { width: 100%; height: 100%; object-fit: contain; }

.questions { background: #FEE68D; height: 100vh; width: 100%; display: table; }
.questions .question { display: none; max-width: 550px; margin: 0 auto; color: #663358; }
.questions .question.intro-page { text-align: center; padding-top: 190px; color: #663358; }
.questions .question.intro-page h2 { font-family: 'kardia'; font-size: 68px !important; color: #663257; }
.questions .question .question-logo { max-width: 200px; display: table; margin: 0 auto; padding-bottom: 25px; }
.questions .question .question-logo img { max-width: 100%; }
.questions .question.active { display: block; }
.questions .question .question-title { margin-bottom: 50px; text-align: center; }
.questions .question .question-title h2 { font-size: 36px; color: #663358; }
.questions .question.intro-page .question-title { position: relative; }
.questions .question.intro-page .question-title h2 { position: relative; z-index: 2; }
.questions .question.intro-page .question-title:before { z-index: 1; position: absolute; content: ''; width: 300px; height: 180px; left: 50%; margin-left: -150px; display: table; background: url('../../images/embleem_blauw.svg') no-repeat; }
/* .questions .question .question-title .category { background: #663358; color: #fff; font-size: 20px; display: table; padding: 5px 10px; border-radius: 5px; margin-bottom: 10px; }*/
.questions .question .question-title .category { margin: 50px auto; color: #663358; font-size: 26px; display: table; }
.questions .question .question-title .category span { font-weight: 600; font-family: 'kardia'; }
.questions .question .question-content { font-size: 20px; max-width: 480px; margin: 0 auto; color: #663358; }
.questions-navigation { width: 100%; bottom: 30px; position: absolute; }
.questions-navigation .btn, #start-quiz { font-size: 18px; border-radius: 25px; padding: 5px 30px; }
#start-quiz { font-size: 18px; margin-top: 25px; }
.questions-navigation .btn.prev { text-align: left; border-width: 1px; border-color: #663358; }

.form-check { padding-left: 0; }
.form-check label { display: block; cursor: pointer; color: #663358; background: rgba(255,255,255,0.5); padding: 8px 30px; border-radius: 10px; transition: all .2s ease-in-out; }
.form-check:has(.input-radio:checked) label { background: rgba(255,255,255, 1); }
.form-check label.selected { background: rgba(255,255,255, 1); }
.form-check .input-radio { display: none; }

.customer-info { position: absolute; top: 45px; right: 50px; color: #663358; }

.error-message { display: none; width: 100%; position: fixed; top: 0; left: 0; background: #e95153; color: #fff; font-size: 20px; }
.error-message .message { padding: 10px 0; }

.slider-container { width: 100%; margin: 20px auto; }
.slider-wrapper { position: relative; width: 100%; }
input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; position: relative; z-index: 2; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 8px; border-radius: 4px; }
input[type="range"]::-moz-range-track { width: 100%; height: 8px; border-radius: 4px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; background: #fff; border: 2px solid #98D0C1; border-radius: 50%; cursor: pointer; margin-top: -11px; }
input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; background: #fff; border: 2px solid #98D0C1; border-radius: 50%; cursor: pointer; }
.score-display { font-size: 18px; margin-top: 10px; font-weight: bold; text-align: center; }
.taskScoreSlider { height: 8px; border-radius: 4px; background: linear-gradient(to right, #98D0C1 50%, #fff 50%); }

.edit-link { width: 16px; height: 16px; display: inline-table; margin-left: 16px; }
.edit-link svg { width: 100%; height: 100%; object-fit: contain; }

.box { background: #f4f4f4; padding: 25px; margin-bottom: 40px; border-radius: 20px; }
.box h4 { margin-bottom: 20px; }
.box p:last-child { margin-bottom: 0; }

.selects { margin-bottom: 20px; display: flex; gap: 15px; }
.selects select { padding: 5px 10px; }
.selects .select-block select { margin-top: 5px; }

.vscore-logo { position: absolute; top: 0; right: -20px; }
.vscore-logo img { width: 89px; height: 34.5px; display: table; }

.donut-chart { width: 400px; height: 400px; position: relative; }
.donut-chart svg { width: 100%; height: 100%; object-fit: contain; }
.donut-chart .text { padding: 50px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; }
.donut-chart .text p { text-align: center; margin-bottom: 0; }
.donut-chart .text p span { font-family: 'kardia'; font-size: 60px; display: block; }
.donut-chart.pdf img { width: 400px; height: 400px; object-fit: contain; }

.vscore .info-text { margin: 50px 0; }
.vscore .info-text h2 { font-family: 'kardia'; }
.vscore .vscore-scores { display: flex; gap: 50px; align-items: center; }
.vscore .vscore-scores .average { position: relative; }
.vscore .vscore-scores .average { }
.vscore .vscore-scores .info { font-size: 22px; }
.vscore .vscore-scores .info p span { font-family: 'kardia'; }

.pdf-scores__intro {  }
.pdf-scores__intro .title { font-size: 36px; line-height: 36px; }
.pdf-scores__intro .title span { color: #FEE68D; }

.pdf-scores { margin-top: 30px; width: 100%; display: table;  }
.pdf-scores .average { width: 50%; float: left; position: relative;  }
.pdf-scores .average .text { position: absolute; top: 95px; left: 60px; text-align: center; }
.pdf-scores .average .text strong { display: block; font-size: 54px; font-weight: 400; line-height: 54px; }
.pdf-scores .info { width: 50%; float: left; font-size: 22px; margin-top: 30px;}
.pdf-scores .info strong { font-weight: 400;  }

.vscore-datetime { font-size: 20px; margin-top: 10px; }

.pdf-chart { width: 300px; height: 300px; }
.pdf-chart img { width: 100%; height: 100%; }

.score-description { clear: both; text-align: center; padding: 30px 60px;  }
.score-description h2 { font-size: 32px; margin-bottom: 10px; margin-top: 0; }

.featured-scores { width: 793px; background: #99D0C1; padding: 20px 45px 30px 45px; position: relative; left: -45px; margin-bottom: 0; display: table; }
.featured-scores h2 { font-size: 24px; margin-bottom: 0; margin-top: 0; }
.featured-scores p { margin-top: 5px; margin-bottom: 20px; }
.featured-scores .featured-scores__items { width: 100%; position: relative; display: table; }
.featured-scores .featured-scores__items .item { position: relative; width: 195px; background: #fff; color: #663358; float: left; padding: 10px; text-align: center; border-radius: 10px; }
.featured-scores .featured-scores__items .item .name { margin-bottom: 10px; font-size: 18px; }
.featured-scores .featured-scores__items .item .result { margin-top: 10px; }
.featured-scores .featured-scores__items .item img { max-width: 100%; }
.featured-scores .featured-scores__items .item:nth-child(1) { margin-right: 29px; }
.featured-scores .featured-scores__items .item:nth-child(2) { margin-right: 29px; }

.clear-items { width: 100%; height: 1px; display: block; clear: both; }

.details { padding: 1px 60px 25px 60px; background: #FAD1D6; border-radius: 20px; margin-top: 0; position: relative; z-index: 2; }
.details h2 { font-size: 20px; text-align: center; }
.details p { margin-bottom: 20px; margin-top: 10px; }
.details p span { float: right; }
.details .details-bar { position: relative; width: 100%; background: rgba(255,255,255,0.3); height: 20px; border-radius: 10px; }
.details .details-bar span { height: 20px; background: #fff; display: block; position: absolute; top: 0; left: 0; border-radius: 10px; }

.scan-view { margin-bottom: 30px; margin-top: 25px; }
.pdf-view .scan-view { padding: 0 60px; }
.scan-view h2 { font-size: 20px; }

.close-div { width: 593px; position: absolute; left: -45px; bottom: 0; background: #FEE68D; padding: 30px 100px 40px 100px; }
.close-div h2 { font-size: 20px; margin: 0; margin-bottom: 10px; }
.close-div p { margin: 0; }

.block-yellow { width: 900px; height: 300px; background: #FEE68D; position: absolute; left: -45px; bottom: -45px; z-index: -1; }

.task-header { background: #fff; width: 100%; height: 100px; display: flex; justify-content: space-between; align-items: center; }
.task-header .item { padding: 0 10px; position: relative; display: flex; justify-content: space-between; align-items: center; width: 500px; margin: 0 auto; }
.task-header .logo { margin: 0 auto; width: 140px; }
.task-header .logo svg { width: 100%; height: 100%; object-fit: contain; }

.task-header .task-menu { width: calc(100% - 20px); position: absolute; top: 50%; margin-top: -12px; right: 10px; left: 10px; display: table; }
.task-header .task-menu .icon { width: 24px; height: 24px; display: table; cursor: pointer; position: absolute; top: 0; right: 0; }
.task-header .task-menu ul { list-style: none; opacity: 0; visibility: hidden; background: #663358; position: absolute; top: 34px; right: 0; padding: 10px; border-radius: 5px; width: 100%; transition: all .3s ease-in; }
.task-header .task-menu.open ul { opacity: 1; visibility: visible;  }
.task-header .task-menu ul li a { color: #fff; padding: 10px; display: block; }

.task-view { background: #FEE68D; min-height: calc(100vh - 100px); padding: 50px 0; font-size: 18px; color: #663257; }
.task-view h1, .task-view h2.title { font-family: 'kardia'; font-size: 26px; color: #663257; }
.task-view .modules { width: 100%; max-width: 500px; display: table; margin: 30px auto; }
.task-view .modules .module { width: 100%; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; margin: 20px 0; padding: 10px 20px; font-family: 'kardia'; text-align: left; font-size: 20px; }
.task-view .modules a.module { background: #98d0c3; color: #663358; }
.task-view .modules div.module { background: #fdf2c7; color: #c9b0a4; }
.task-view .modules div.module img { opacity: 0.25; }
.task-view .modules .module span { width: 34px; height: 34px; display: table; }
.task-view .modules .module span svg { width: 100%; height: 100%; object-fit: contain; display: table; }
.task-view .modules .module.alt { background: #fff3c7; }
.task-view .intro { text-align: center; }
.task-view .task .title { text-align: center; }
.task-view .task .text { text-align: center; }
.task-view .go-back-link { text-align: center; font-size: 18px; display: table; margin: 0 auto; color: #663358; }

.task-view .module-icon { display: table; width: 32px; height: 32px; margin: 30px auto; }
.task-view .module-icon svg { width: 100%; height: 100%; object-fit: contain; }

.task-view .task-question { width: 100%; display: none; max-width: 550px; margin: 0 auto; color: #663358; }
.task-view .task-question.active { display: table; }
.task-view .task-question .question-title { margin-bottom: 50px; text-align: center; }
.task-view .task-question .question-title h2 { font-size: 24px; color: #663358; }
.task-view .task-question .question-title h4 { font-size: 20px; color: #663358; }
.task-view .task-question .question-title .category { margin: 50px auto; color: #663358; font-size: 26px; display: table; }
.task-view .task-question .question-title .category span { font-weight: 600; font-family: 'kardia'; margin-right: 10px; }
.task-view .task-question .question-content { font-size: 20px; max-width: 480px; margin: 0 auto; color: #663358; }
.task-view .task-question .question-content textarea { width: 100%; padding: 20px; border-radius: 10px; color: #663358; }
.task-view .task-question .question-content textarea.not-active { background: #fef3c9; }

.custom-answer-fields .answer-field { display: flex; gap: 15px; align-items: center; justify-content: center; margin: 10px 0; }
.custom-answer-fields .answer-field span { min-width: 170px; }
.custom-answer-fields .answer-field input { padding-left: 10px; padding-right: 10px; }

.task-category-text { display: none; width: 100%; max-width: 550px; margin: 20px auto; }
.task-category-text .content-title { font-family: 'kardia'; font-size: 24px; color: #663358; margin-bottom: 15px; }
.task-category-text h3 { font-family: 'kardia'; font-size: 20px; color: #663358; margin: 15px 0; }
.task-category-text .go-back-link { margin-left: 0; margin-right: 0; margin-bottom: 20px; color: #663358; text-align: left; }

.task-category-files { display: none; width: 100%; max-width: 550px; margin: 20px auto; }
.task-category-files .content-title { text-align: center; font-family: 'kardia'; font-size: 24px; color: #663358; margin-bottom: 15px; }
.task-category-files .go-back-link { margin-left: 0; margin-right: 0; margin-bottom: 20px; color: #663358; text-align: left; }
.task-category-files ul { list-style: none; padding: 0; margin: 30px auto 0 auto; max-width: 300px; }
.task-category-files ul li a { color: #663358; margin: 20px 0; padding: 10px 20px; text-align: center; border-radius: 10px; display: block; background: #fdf2c7; }

.task-user-view { margin-bottom: 40px; }
.task-user-view .task-user-view__answer { margin-top: 20px; background: rgba(0,0,0,0.08); border-radius: 10px; padding: 20px; }
.task-user-view .task-user-view__answer h3 { font-size: 20px; margin-bottom: 10px; }
.task-user-view .task-user-view__answer p:last-child { margin-bottom: 0; }
.task-user-view .task-user-view__answer:last-child {  }

.task-view .alert.alert-success { text-align: center; background: #fef3c9; margin: 0 auto 40px auto; border: 0; padding: 20px 50px; font-size: 20px; color: #663257; }

.icon-link { display: inline-block; width: 20px; height: 20px; }
.icon-link svg { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1200px) {

    .mobile-header { display: flex; width: 100%; }

    .menu {  transition: all .3s ease-in-out; transform: translate(-100%, 0); position: fixed; box-shadow: 0 0 10px rgba(0,0,0,0.25); width: calc(100% - 85px); top: 0; bottom: 0; left: 0; z-index: 99; }
    .menu.active { transform: translate(0, 0); }

    .logout, .logout:hover { display: none; z-index: 99; }

    .content { margin-left: 0; }

    form .w-25 { width: 50% !important; }

}

@media (max-width: 992px) {

    /*
    .questions-navigation { position: relative; bottom: 0; }

    .task-view { min-height: auto; }

    .questions { height: auto; }
    */

    .questions-navigation { bottom: 0; }

    .task-view { padding-top: 30px; }
    .task-view .task-question .question-title .category { margin-top: 0; margin-bottom: 20px; }
    .task-view .task-question .question-title { margin-bottom: 20px; }
    .task-view .task-question .question-content textarea { height: 120px; }

}

@media (max-width: 768px) {

    .questions-header .logo { margin-left: 40px; width: 100px; }

    .questions { padding: 0; }
    .questions .question .question-logo { max-width: 170px; }
    .questions .question .question-title { margin-bottom: 30px; }
    .questions .question .question-title h2 { font-size: 24px; }
    .questions .question .question-title .category { margin: 40px auto 40px auto; font-size: 20px; padding: 3px 8px; }
    .questions .question .question-content { font-size: 18px; }
    .questions-navigation .btn { font-size: 16px; max-width: 48%; }

    .questions .question.intro-page h2 { font-size: 36px !important; }

    .customer-info { top: 40px; }

    .questions-navigation .btn.prev { text-align: center; }

    .questions .question.intro-page .question-title:before { width: 200px; height: 115px; left: 50%; margin-left: -100px; top: -20px; }

    .questions .question.intro-page p { position: relative; z-index: 2; }


}

@media (max-width: 768px) {

    .btn { margin: 5px; width: 100%; }

    form .d-flex { flex-wrap: wrap; }
    form .w-25 { width: 100% !important; }

    .content { padding: 15px; }

    .donut-chart { width: 100%; }

    .task-view .task-question .question-title h2 { font-size: 20px; }
    .task-view .task-question .question-title h4 { font-size: 16px; }

    .custom-answer-fields .answer-field span { min-width: 140px; }

    .custom-answer-fields .answer-field input { max-width: 120px; font-size: 18px; }

}