@font-face {
    font-family: "luengo";
    src: url("../fonts/luengo-regular.woff2") format("woff2"),
    url("../fonts/luengo-regular.woff") format("woff");
}

@font-face {
    font-family: "luengobold";
    src: url("../fonts/luengo-bold.woff2") format("woff2"),
    url("../fonts/luengo-bold.woff") format("woff");
}

@font-face {
    font-family: "tyfoonsans";
    src: url("../fonts/TyfoonSans-Regular.woff2") format("woff2"),
    url("../fonts/TyfoonSans-Regular.woff") format("woff");
}

@font-face {
    font-family: "tyfoonsansbold";
    src: url("../fonts/TyfoonSans-Bold.woff2") format("woff2"),
    url("../fonts/TyfoonSans-Bold.woff") format("woff");
}

html {
    font-size: 50%;
    /* font-size 1rem = 10px on default browser settings */
}

/* ------------ HEADER ------------ */
.login_header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.main_header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.main_header_pages {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.main_header_cont_login {
    background-color: #ffffff;
}

.username_login {
    width: 100vw;
    background: rgb(22, 91, 137);
    background: linear-gradient(90deg, rgba(22, 91, 137, 1) 0%, rgba(96, 187, 70, 1) 100%);
    display: flex;
    flex: row nowrap;
    align-items: center;
    justify-content: flex-end;
    height: 6rem;
    padding-right: 5rem;
}

.username_pages {
    background-color: #ffffff;
    display: flex;
    flex: row nowrap;
    align-items: center;
    justify-content: flex-end;
    /*height: 6rem;*/
    padding: 0rem 5rem 0 0;
}

.logo_pages {
    padding: 0.5rem 4rem;
}

.header_logo_login {
    width: 40vw;
    height: auto;
}

.nav_pages_cont {
    display: flex;
    justify-content: space-between;
    width: 100vw;
}

.nav_pages {
    flex: row nowrap;
    justify-content: space-between;
    width: 30rem;
    display: flex;
    flex: row nowrap;
    align-items: center;
    padding: 2rem 0 0 5rem;
}

.languages_login {
    width: 15rem;
    padding: 2rem 1.2rem 0 0;
}

.languages_pages {
    width: 15rem;
    padding: 2rem 1.2rem 0 0;
}

.languages_login a, .languages_pages a {
    font-family: tyfoonsans;
    font-size: 1.8rem;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    width: 25%;
    padding: .75rem 0;
    margin: 0;
}

.languages_login a {
    color: #60bb46;
}

.languages_pages a {
    color: #ffffff;
}

.languages_login li, .languages_pages li {
    display: inline;
    text-align: center;
}

.languages_pages a, .nav_pages a {
    font-family: tyfoonsans;
    font-size: 1.8rem;
    text-decoration: none;
    color: #ffffff;
}

.languages_pages a {
    text-transform: uppercase;
}

.two:hover ~ hr, .two.active ~ hr {
    margin-left: 27%;
}

.three:hover ~ hr, .three.active ~ hr {
    margin-left: 54%;
}

.line_login {
    background: #60bb46;
}

.line_pages {
    background: #fff;
    text-align: left;
}

hr {
    height: .25rem;
    width: 25%;
    margin: 0;
    border: none;
    transition: .3s ease-in-out;
}

.username_login p {
    color: #ffffff;
    font-family: tyfoonsans;
    font-size: 1.8rem;
}

.username_pages p {
    color: #60BB46;
    font-family: tyfoonsans;
    font-size: 1.8rem;
}

.username_pages a {
    color: #60BB46;
    font-family: tyfoonsans;
    font-size: 1.8rem;
}

.user_icon {
    width: 4rem;
    height: 4rem;
    padding-right: 2rem;
}

/* ------------ LOGIN SECTION ------------ */
.sctn_login {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5rem;
}

.art_login {
    margin-bottom: 2.5rem;
    background-color: #165b89;
    background-image: url(../img/Login_BG_circle.png);
    background-repeat: no-repeat;
    background-position: top right;
    padding: 3rem 5rem;
    border-radius: 3rem;
}

.login_title {
    color: #ffffff;
    font-family: luengo;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

.art_register p {
    font-family: tyfoonsans;
    font-size: 1.4rem;
    color: #165b89;
    text-align: center;
    line-height: 2rem;
}
.art_register a {
    color: #ffffff;
}

.form_cont {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

legend {
    display: none;
}

.alert-success {
    font-family: tyfoonsans;
    font-size: 1.4rem;
    color: #ffffff;
    padding-top: 2rem;
}

.login_form {
    padding-top: 4rem;
}

.login_form_label_cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
    width: 100%;
}

.login_form label {
    font-family: tyfoonsans;
    font-size: 1.8rem;
    color: #ffffff;
    padding-right: 20px;
}

.login_errormessage {
    font-family: tyfoonsans;
    font-size: 1.5rem;
    color: #FFA0A0;
    padding: .5rem 0 .5rem 0;
}

.login_input {
    font-family: tyfoonsans;
    font-size: 1.8rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4rem;
    border: none;
    height: 4rem;
    width: 35rem;
    padding-left: 2rem;
}

.forgot_password {
    /* text-decoration: none; */
    text-align: right;
    font-size: 1.2rem;
    color: #ffffff;
    font-family: tyfoonsans;
}

.HOVER {
    --width: 100%;
    --time: 0.7s;
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: #60bb46;
    text-align: center;
    border: none;
    padding: 0.8rem;
    width: 15rem;
}

.btn_login_cont {
    margin-top: 3rem;
    border-radius: 1.2rem;
}

.js-cookie-consent-agree {
    margin: 1rem;
    border-radius: 1.2rem;
    --width: 100%;
    --time: 0.7s;
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: #ffffff;
    text-align: center;
    border: none;
    padding: 1rem 1.5rem;
}
.cookie-consent__message a {
    color: #ffffff;
}

.btn_login_input {
    position: relative;
    z-index: 5;
    transition: color var(--time);
    font-family: tyfoonsans;
    font-size: 1.8rem;
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
    text-align: center;
    border: none;
    padding: 0.5rem 1.5rem;
    width: 15rem;
}

.question_answers_form .btn_login_cont {
    cursor: pointer;
}

.HOVER span {
    border-radius: 100%;
    position: absolute;
    display: block;
    content: "";
    z-index: 0;
    width: 0;
    height: 0;
    background: #A3DD93;
    transform: translate(-50%, -50%);
    transition: width var(--time), padding-top var(--time);
}

.HOVER:hover span {
    width: calc(var(--width) * 2.25);
    padding-top: calc(var(--width) * 2.25);
}

/* ------------ REGISTER SECTION ------------ */
/* ------------ STARTMENU  ------------ */
.body_pages {
    background: rgba(22, 91, 137, 1);
    background: linear-gradient(0deg, rgba(96, 187, 70, 1) 0%, rgba(22, 91, 137, 1) 100%);
    min-height: 100vh;
}

.sctn_startmenu, .sctn_module, .sctn_question {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.sctn_module {
    margin-bottom: 10px;
}

.sctn_question {
    min-height: calc(100vh - 300px);
}

.main_header_cont_pages {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    width: 100vw;
}

.header_startmenu {
    padding-bottom: 8rem;
}

.header_startmenu, .header_module {
    color: #ffffff;
    font-family: luengobold;
    font-size: 6rem;
    padding-top: 8rem;
    text-align: center;
}

.header_module {
    padding-top: 1rem;
}

.header_module_title {
    color: #ffffff;
    font-family: tyfoonsans;
    font-size: 2.6rem;
    padding: 0rem 0 6rem 0;
    text-align: center;
}
.admin_title {
    padding: 1rem 0;
}
.dataTables_empty {
    display: none;
}

.header_module_title_feedback {
    padding-bottom: 3rem;
}

.art_startmenu, .art_module {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4rem;
    border: none;
    padding: 5rem;
    text-align: center;
    width: 80vw;
    max-width: 800px;
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .15);
}

.art_module_icon {
    display: flex;
    margin-bottom: 2.5rem;
    margin-top: -3.5rem;
    padding: 3rem 5rem;
}

.art_feedback_module_icon {
    text-align: left;
    margin-bottom: 2.5rem;
    padding: 3rem 5rem;
}

.feedback_intro {
    font-family: tyfoonsans;
    font-size: 1.8rem;
    color: white;
    line-height: 2.4rem;
    padding: 2rem 0;
    margin: 0;
}

.info_icon {
    width: 5rem;
    height: auto;
    padding-right: 4rem;
    align-self: center;
}

.info_icon img {
    width: 5rem;
}

.startmenu_art_title {
    color: #ffffff;
    font-family: luengo;
    font-size: 1.8rem;
    padding-bottom: 5rem;
    text-align: center;
}

.startmenu_item_title {
    text-align: center;
}

.startmenu_items {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* width: 96rem; */
    width: auto;
}

.startmenu_item {
    width: 33.3%;
    padding: 0 2%;
}

.startmenu_icon {
    height: 12vw;
    max-height: 150px;
    border-radius: 8.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.startmenu_img {
    width: auto;
    height: 5vw;
}

.icon_test_starten {
    transition: background-color 0.5s ease;
    background-color: #165B89;
}

.icon_test_starten_hover {
    background-color: #6AA3C9;
}

.startmenu_item:hover span {
    background-color: #6AA3C9;
    width: calc(var(--width) * 2.25);
    padding-top: calc(var(--width) * 2.25);
}

.icon_rapporten_bekijken {
    transition: background-color 0.5s ease;
    background-color: #60BB46;
}

.icon_rapporten_bekijken_hover {
    background-color: #A3DD93;
}

.icon_modules_beheren {
    transition: background-color 0.5s ease;
    background-color: #CECECE;
}

.icon_modules_beheren_hover {
    background-color: #E0E0E0;
}

.startmenu_item_title {
    color: #ffffff;
    font-family: tyfoonsans;
    font-size: 2rem;
    text-align: center;
    padding-top: 2rem;
}

/* ------------ INLEIDING  ------------ */
.introduction_art_title {
    display: none;
}

.introduction_p, .introduction_p a {
    font-family: tyfoonsans;
    font-size: 1.8rem;
    line-height: 2.5rem;
    text-align: left;
    color: #ffffff;
}

.introduction_p p {
    margin-bottom: 2rem;
}

.introduction_p strong {
    font-family: luengobold;
}
.introduction_p em {
    font-style: italic;
}

.btn_next_cont {
    margin-top: 5rem;
    border-radius: 4rem;
}

.btn_next {
    color: #ffffff;
    font-family: luengo;
    font-size: 1.6rem;
    text-decoration: none;
    padding: 1.5rem 3rem;
    border-radius: 4rem;
    margin-top: 5rem;
    border: none;
    z-index: 5;
    position: relative;
    transition: color var(--time);
    font-size: 1.8rem;
    text-align: center;
    width: 15rem;
}

.HOVER_BLUE {
    --width: 100%;
    --time: 0.7s;
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: #165B89;
    text-align: center;
    border: none;
    padding: 1.5rem 1.5rem;
    /* width: 15rem; */
}

.HOVER_BLUE span {
    border-radius: 100%;
    position: absolute;
    display: block;
    content: "";
    z-index: 0;
    width: 0;
    height: 0;
    background: #6AA3C9;
    /*transform: translate(-50%, -50%);
    transition: width var(--time), padding-top var(--time);*/
}

.HOVER_BLUE:hover span {
    /*width: calc(var(--width) * 2.25);
    padding-top: calc(var(--width) * 2.25);*/
}
#privacy_policy_form {
    color: #fff;
    font-family: luengo;
    font-size: 1.8rem;
    text-decoration: none;
    padding: 2rem 2rem;
}
#privacy_policy_form a {
    color: #fff;
}
#privacy_policy_form input {
    margin-right: 1rem;
}
#toast-container {
    font-family: luengo;
    font-size: 1.8rem;
}


/* ------------ PRE-TEST  ------------ */

.tips_title {
    color: #165B89;
    font-family: luengo;
    font-size: 4rem;
    text-align: left;
}
.tips_item:after {
    content: "";
    display: table;
    clear: both;
}
.tips_item {
    padding: 2% 0;
}
.tips_item.first {
    text-align: left;
    float: left;
    width: 15%;
}

.tips_item.first img {
    width: 60%;
}

.tips_item p {
    font-size: 2rem;
    padding-left: 4rem;
}

.pretest_modules_cont {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80vw;
    max-width: 800px;
}

.pretest_module {
    /*width: 12.5vw;*/
    width: 180px;
    height: 16rem;
    background-color: #2E7B70;
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .15);
    border-radius: 4rem;
    margin-top: 2.5rem;
    margin-left: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pretest_module_locked {
    background-color: rgba(47, 124, 112, 0.5);
}

.lock {
    align-self: flex-end;
    padding: 2rem 3rem 0 0;
}

.unlocked {
    align-self: flex-end;
    padding: 1rem 3rem 0 0;
    visibility: hidden;
}

.pretest_module_check {
    margin-bottom: 2rem;
    opacity: 0;
}

.pretest_module_label {
    position: relative;
    font-family: tyfoonsans;
    font-size: 1.6rem;
    color: #ffffff;
    text-align: center;
}

.btn_start_test {
    margin: 3rem auto;
    display: block;
}

.btn_cont_test {
    text-align: center;
}

.pretest_module p {
    position: relative;
    top: 50%;
    height: 2rem;
    margin-bottom: -2rem;
    font-family: tyfoonsans;
    font-size: 1.6rem;
    color: #ffffff;
    text-align: center;
}

.pretest_module p.module_status {
    top: -10%;
    font-weight: bold;
}

.pretest_module_label::before {
    content: "";
    /* display: inline-block; */
    display: block;
    height: 4rem;
    width: 4rem;
    border: .2rem solid #ffffff;
    border-radius: 1rem;
    margin: -2rem auto 2rem auto;
}

.pretest_module_label::after {
    content: "";
    display: block;
    height: 1.5rem;
    width: 3rem;
    border-left: .5rem solid #ffffff;
    border-bottom: .5rem solid #ffffff;
    transform: rotate(-45deg);
    /* margin: auto; */
    margin: -7.5rem auto 2rem auto;
}

.pretest_module_label::before,
.pretest_module_label::after {
    /* position: absolute; */
}

/*Outer-box*/
.pretest_module_label::before {
    top: -6rem;
}

/*Checkmark*/
.pretest_module_label::after {
    left: 4px;
    top: 7px;
}

.pretest_module_check + label::after {
    content: none;
}

/*Unhide the checkmark on the checked state*/
.pretest_module_check:checked + label::after {
    content: "";
}

/* ------------ QUESTION RADIO ------------ */
.question_n {
    font-family: tyfoonsans;
    color: #ffffff;
    font-size: 1.8rem;
    text-align: center;
    padding-top: 1rem;
}

.answers {
    padding-top: 2rem;
    display: block;
    position: relative;
    width: 80vw;
    max-width: 800px;
    padding-left: 9rem;
}

.feedback_answers {
    padding-left: 3rem;
}

.feedback_answers .answer_label {
    cursor: default;
}

.feedback_answers .answer_li:hover label {
    color: #ffffff;
}

.feedback_answers .answer_li:hover .check {
    border: .2rem solid #ffffff;
}

.container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
}

.answer_li {
    padding-top: 2rem;
    display: block;
    position: relative;
}

.answer_radio, .answer_checkbox {
    position: absolute;
    visibility: hidden;
}

.answer_label {
    font-family: tyfoonsans;
    color: #ffffff;
    font-size: 1.8rem;
    padding-left: 5rem;
    display: block;
    position: relative;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
    line-height: 2.5rem;
}

.answer_li:hover label {
    color: #CECECE;
}

.check {
    display: block;
    position: absolute;
    border: .2rem solid #ffffff;
    height: 2.7rem;
    width: 2.7rem;
    top: 1.6rem;
    /*left: -4rem;*/
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.radio_buttons .check {
    border-radius: 100%;
}

.answer_li:hover .check {
    border: .2rem solid #CECECE;
}

.check::before {
    display: block;
    position: absolute;
    content: '';
    height: 1.5rem;
    width: 1.5rem;
    top: .6rem;
    left: .6rem;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

.radio_buttons .check::before {
    border-radius: 100%;
}

input[type=radio]:checked ~ .check, input[type=checkbox]:checked ~ .check {
    border: 2px solid #fff;
}

input[type=radio]:checked ~ .check::before, input[type=checkbox]:checked ~ .check::before {
    background: #fff;
}

input[type=radio]:checked ~ label, input[type=checkbox]:checked ~ label {
    color: #fff;
}

.cke_dialog_ui_hbox label, .cke_dialog_ui_checkbox label {
    color: black !important;
}

.delete_form {
    display: inline;
    width: 20px;
}
.swal-modal {
    font-family: tyfoonsans;
}

.main_question {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sctn_question ol, .sctn_question ul {
    list-style: revert;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.sctn_questions_nav {
    padding: 7rem 0 5rem 0;
}

.sctn_question img {
    max-width: 800px;
    max-height: -webkit-fill-available;
}

.remaining_time_cont {
    display: flex;
    flex: row nowrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
}

.remaining_time_cont img {
    height: 18px;
}

.remaining_time_cont p {
    font-family: tyfoonsans;
    font-size: 1.6rem;
    color: #fff;
    padding-left: 2rem;
}

.questions_nav_cont {
    display: flex;
    flex: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 80vw;
    margin: auto;
}

.questions_ul {
    /*display: flex;*/
    /*flex: row nowrap;*/
    /*justify-content: space-between;*/
    /*width: 50vw;*/
    width: calc(80vw - 300px);
    text-align: center;
}

.question_li {
    display: inline-block;
    border-radius: 100%;
    width: 3.5rem;
    height: 3.5rem;
    border: 2px solid white;
    margin: 1px 1%;
}

.question_li a {
    display: block;
    margin auto;
    margin-top: 0.2rem;
    color: white;
    text-decoration: none;
    font-family: luengo;
    font-size: 1.6rem;
    text-align: center;
    padding: .8rem;
}

.question_active {
    border: 2px solid #165B89;
    background-color: #165B89;
}

.question_done {
    border: 2px solid #165B89;
}

.question_done a {
    color: #165B89;
}

.question_done.question_active a {
    color: #ffffff;
}

.btn_next_question_cont {
    /* margin-top: 5rem; */
    border-radius: 4rem;
}

.btn_next_question, .btn_previous_question, .btn {
    color: #fff;
    font-family: luengo;
    text-decoration: none;
    padding: 1.5rem 1.5rem;
    border-radius: 4rem;
    z-index: 5;
    position: relative;
    transition: color var(--time);
    text-align: center;
    width: 15rem;
    font-size: 1.4rem;
}

.answer_remove_btn {
    width: fit-content;
}

.btn_next_question {
    border: none;
}

.btn_previous_question {
    border: 2px solid #CECECE;
    color: #CECECE;
    display: inline-block;
    transition: .3s ease-in-out;
}

.btn_previous_question:hover {
    border: 2px solid white;
    color: #fff;
}

.btn_back {
    border: 2px solid #fff;
    color: #fff;
    display: inline-block;
    transition: .3s ease-in-out;
    margin-top: 2rem;
}

.btn_back:hover {
    border: 2px solid #CECECE;
    color: #CECECE;
}


/* ------------ OVERZICHT RAPPORTEN ------------ */

.art_rapporten p {
    font-family: tyfoonsans;
    font-size: 1.8rem;
    color: white;
    line-height: 2.4rem;
}

.listp {
    margin-left: 335px;
}
.listspan {
    margin-left: -12px;
}

.rapporten_title {
    font-family: luengo;
    font-size: 2.4rem;
    color: white;
    padding-bottom: 3rem;
}

.rapporten_cont {
    display: flex;
    width: 90vw;
    max-width: 100rem;
    margin: 0 auto;
    justify-content: space-between;
}

.art_rapporten:first-child {
    padding-right: 6rem;
}

.art_rapporten:nth-child(2) {
    width: 40vw;
    min-width: 600px;
}
.text-image {
    float: left;
    padding: 0 20px 15px 0;
    margin: 0 !important;
}

.observer_cont .art_rapporten:nth-child(2) {
    width: auto;
    min-width: auto;
}

.observer_cont .art_rapporten {
    margin-bottom: 70px;
}

.rapporten_table_cont, .modules_table_cont {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4rem;
    border: none;
    padding: 1rem 1rem 3rem 1rem;
    width: 40rem;
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .15);
}

.rapporten_table {
    text-align: center;
    margin: 0 auto;
    width: 35rem;
}
.observer_cont h1 {
    padding-bottom: 1rem;
}
.observer_force {
    margin-bottom: 30px;
}
.rapporten_table.observer_table {
    width: 100%;
}

.observer_table .rapporten_th {
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid white;
}
.observer_table tr th:first-child, .observer_table tr td:first-child {
    border-left: none;
}
.observer_table tr th:last-child, .observer_table tr td:last-child {
    border-right: none;
}

.table_column1 {
    width: 20rem;
}

.rapporten_th, .rapporten_table td, .modules_th, .modules_table td {
    font-family: luengo;
    color: white;
    vertical-align: middle;
}

.rapporten_th, .modules_th {
    border-bottom: 2px solid white;
    font-size: 2rem;
    text-transform: uppercase;
    padding: 1rem;
}

.rapporten_td {
    font-size: 2rem;
}

.rapporten_table td, .modules_table td {
    font-size: 1.6rem;
}

.rapporten_table tr, .modules_table tr {
    height: 5rem;
    margin: auto 0;
}

.rapporten_table tr th:first-child, .test_border, .modules_table tr th:first-child {
    border-right: 2px solid white;
}

.rapporten_table_cont.observer_table_cont {
    width: 100%;
}

.dateform {
    text-align: left;
}
.dates {
    margin-top: 4rem;
    text-align: left;
}
#pensionfund_select_form {
    margin-top: 0;
}
#pensionfund_submit {
    display: flex;
    width: 18rem;
}
.dates .datesinput {
    margin-bottom: 2rem;
    width: 150px;
}
.dates_label {
    font-family: luengo;
    display: block;
    margin: 5rem 0 0 0;
    padding: 0 0 2rem 0;
}

.dates .dateimg {
    display: inline;
    width: 4rem;
}
.cancelBtn, .applyBtn {
    color: black;
}

.pdf_icon, .report_icon {
    margin: auto;
    position: relative;
    z-index: 5;
    display: block;
    width: 3.5rem;
    height: auto;
}
.report_icon {
    width: 2.5rem;
}

.aggregate .pdf_icon, .aggregate .report_icon {
    display: inline-flex;
}

.aggregate .btn_login_input {
    width: auto;
    vertical-align: middle;
}

p.aggregate_available {
    margin-top: 20px;
    font-weight: bold;
}

.art_rapporten .errormessage {
    font-family: tyfoonsans;
    font-size: 2rem;
    color: #FFA0A0;
    padding: .5rem 0 .5rem 0;
}

.checkboxes {
    padding-left: 0;
}

.header_report {
    color: #ffffff;
    font-family: luengobold;
    font-size: 2rem;
    text-align: center;
    padding-bottom: 3rem;
}
.header_report_title {
    color: #ffffff;
    font-family: tyfoonsans;
    font-size: 2.6rem;
    padding: 0rem 0 2rem 0;
    text-align: center;
}
p.download-btn {
    margin: 0;
    padding: 4rem 0;
    vertical-align: middle;
}

p.download-btn a {
    color: white;
    display: flex;
    align-items: center;
}
p.download-btn .pdf_icon {
    margin-left: 0;
    margin-right: 0;
}
.rapporten_cont .pagecontent {
    margin-top: 20px;
}
.rapporten_cont .pagecontent img, .rapporten_cont .pagecontent p {
    margin-bottom: 30px;
}
.rapporten_cont .pagecontent h2 {
    margin-bottom: 10px;
    font-family: luengo;
    font-size: 2rem;
    color: white;
    padding-bottom: 2rem;
    text-decoration: underline;
}
.rapporten_cont .pagecontent h3 {
    margin-bottom: 10px;
    font-family: luengo;
    font-size: 1.8rem;
    color: white;
    padding-bottom: 1.7rem;
}
.pagecontent p a {
    color: white;
}
.rapporten_cont.observer_cont {
    width: 150vw;
    display: block;
    margin-bottom: 50px;
}
.report_page_background {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4rem;
    border: none;
    padding: 3rem;
    box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .15);
}
div.graph {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

div.graph img {
    width: 100%;
}

/* ------------ DIALOG ------------ */
.overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    max-width: 600px;
    background-color: #165B89;
    border-radius: 30px;
    padding: 30px;
    color: white;
    font-family: luengo;
    text-align: center;
}

.dialog h1 {
    font-size: 4rem;
    padding-bottom: 3rem;
}

.dialog p {
    font-size: 2rem;
}

.dialog_buttons {
    padding: 4rem 0 1rem 0;
    display: flex;
    align-items: center;
}

.dialog_buttons span {
    flex: 1;
}

.dialog_buttons .btn {
    border: 1px solid white;
    font-size: 1.8rem;
    padding-left: 3rem;
    padding-right: 3rem;
    white-space: nowrap;
    width: auto;
}

/* ------------ MODULES BEHEREN ------------ */

.modules_form {
    width: 140rem;
}
.interval_form{
    padding-top: 2rem;
}

.interval_error {
    font-family: tyfoonsans;
    font-size: 2rem;
    color: #FFA0A0;
    padding: 1rem 0 0 0;
}

.interval_form input[type=text] {
    width: unset !important;
}

.interval_form * {
    display: inline-block !important;
}

.modules_form * {
    vertical-align: middle;
    display: block;
}
/* Floating column for labels: 25% width */
.col-25 {
    float: left;
    width: 25%;
    margin-top: 10px;
}

/* Floating column for inputs: 75% width */
.col-75 {
    float: left;
    width: 75%;
    margin-top: 10px;
    position: relative;
}

.admin_save {
    margin-top: 5rem;
    float: right;
}

.admin_save input {
    background-color: transparent;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.modules_form input[type=text], .modules_form select, .modules_form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.question_answers_form select {
    width: initial;
}
.answer_hr {
    width: 140rem;
    margin: 4rem 0;
    border-bottom: 1px solid white;
}

.modules_form textarea {
    height: 15rem;
}

.modules_answers textarea {
    height: 10rem;
}

table.dataTable tbody tr {
    background-color: transparent !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 2px solid white !important;
}
table.dataTable.no-footer {
    border-bottom: none !important;
}
table.dataTable thead .sorting_desc {
    background-image: url(../img/sort_desc.png) !important;
}

table.dataTable thead .sorting_asc {
    background-image: url(../img/sort_asc.png) !important;
}
.btn_admin_list .btn {
    display: inline-block;
    width: initial !important;
}

.input_modules_form {
    border: 2px solid #fff;
    border-radius: 4rem;
    background: transparent;
    padding: 1.5rem 1.5rem;
    font-size: 2rem;
    color: #fff;
    font-family: tyfoonsans;
    margin-right: 2rem;
}

.modules_form label {
    font-family: tyfoonsans;
    font-size: 2rem;
    color: #fff;
    padding-top: 1rem;
    display: inline-block;
}
.modules_text p,  .modules_text a {
    font-family: tyfoonsans;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 3rem;
}
.modules_introtext {
    margin-top: 3rem;
}

.btn_save_cont {
    border-radius: 4rem;
    /* display: inline-block; */
}

.btn_save {
    position: relative;
    z-index: 5;
    transition: color var(--time);
    font-family: tyfoonsans;
    font-size: 1.8rem;
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
    text-align: center;
    border: none;
    padding: 0.5rem 1.5rem;
    width: 10rem;
}

.modules_table_cont {
    width: 140rem;
    margin-top: 1rem;
}

.modules_table {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.sctn_module .add_button {
    width: 140rem;
    text-align: right;
}

.modules_table_column1 {
    width: 30rem;
}

.modules_table_column2 {
    width: 20rem;
}

.modules_table_column3 {
    width: 25rem;
}

.timelimit, .table_active {
    text-align: center;
}

.table_active a {
    margin-left: 1.5rem;
}


/* ------------ MEDIA QUERIES  ------------ */
@media only screen and (max-width: 900px) {
    .rapporten_cont {
        display: block;
    }

    .art_rapporten:nth-child(2) {
        margin-top: 5rem;
    }

    .question_li {
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    .question-navigation {
        display: none;
    }
}

@media only screen and (max-width: 1299px) {
    .question_li {
        margin: 2px;
    }
}

/*@media only screen and (max-width: 1700px) {*/

/*  .art_module_icon {*/
/*    width: 100rem;*/
/*  }*/

/*  .pretest_modules_cont {*/
/*    width: 110rem;*/

/*  }*/

/*  .pretest_module {*/
/*    width: 25rem;*/
/*    height: 16rem;*/
/*    margin-left: 1vw;*/
/*  }*/

/*}*/

/*@media only screen and (max-width: 1100px) {*/
/*  .art_startmenu, .art_module {*/
/*    width: 80vw;*/
/*  }*/

/*  .startmenu_icon {*/
/*    width: 20vw;*/
/*    height: 15vw;*/
/*  }*/

/*  .startmenu_img {*/
/*    width: auto;*/
/*    height: 6.5vw;*/
/*  }*/

/*  .art_module_icon {*/
/*    width: 70rem;*/
/*  }*/

/*  .pretest_modules_cont {*/
/*    width: 80rem;*/
/*  }*/

/*}*/

/*@media only screen and (max-width: 800px) {*/
/*  .sctn_login {*/
/*    padding-top: 5rem;*/
/*  }*/

/*  .header_logo_login {*/
/*    width: 60vw;*/
/*    height: auto;*/
/*  }*/

/*  .art_login {*/
/*    width: 70vw;*/
/*    margin-top: 5rem;*/
/*  }*/

/*  .login_form label {*/
/*    padding-bottom: 1rem;*/
/*  }*/

/*  .login_input {*/
/*    width: 100%;*/
/*    padding-left: 0rem;*/
/*  }*/

/*  .login_form_label_cont {*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*    padding-bottom: 3rem;*/
/*  }*/

/*  .forgot_password {*/
/*    text-align: left;*/
/*  }*/

/*  .art_login {*/
/*    margin-top: 1rem;*/
/*    background-image: none;*/
/*  }*/

/*  .header_startmenu h1, .header_module h1 {*/
/*    font-size: 5rem;*/
/*  }*/

/*  .art_startmenu, .art_module {*/
/*    width: 70vw;*/
/*  }*/

/*  .startmenu_items {*/
/*    flex-wrap: wrap;*/
/*  }*/

/*  .startmenu_item {*/
/*    width: 15rem;*/
/*  }*/

/*  .startmenu_icon {*/
/*    width: 15rem;*/
/*    height: 10rem;*/
/*  }*/

/*  .startmenu_img {*/
/*    width: auto;*/
/*    height: 5rem;*/
/*  }*/

/*  .art_module_icon {*/
/*    width: 45rem;*/
/*  }*/

/*  .pretest_modules_cont {*/
/*    width: 55rem;*/
/*  }*/
/*}*/

/*@media only screen and (max-width: 600px) {*/
/*  .main_header_cont_pages {*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*  }*/

/*  .username_pages {*/
/*    padding: 0 0 1rem 4rem;*/
/*  }*/

/*  .introduction_p {*/
/*    font-size: 1.6rem;*/
/*  }*/

/*  .header_module_title {*/
/*    padding-bottom: 2rem;*/
/*  }*/

/*  .art_module_icon {*/
/*    margin-top: 1rem;*/
/*  }*/

/*  .art_module_icon {*/
/*    width: 70vw;*/
/*  }*/

/*  .pretest_modules_cont {*/
/*    width: 25rem;*/
/*  }*/
/*}*/

/*@media only screen and (max-width: 400px) {*/
/*  .sctn_login {*/
/*    padding-top: 1rem;*/
/*  }*/

/*  .username_login {*/
/*    padding-right: 2rem;*/
/*  }*/

/*  .languages_login, .languages_pages {*/
/*    width: 10rem;*/
/*    padding: 1rem 0 0 0;*/
/*  }*/

/*  .art_startmenu {*/
/*    padding: 5rem 1rem;*/
/*  }*/

/*  .startmenu_items {*/
/*    flex-direction: column;*/
/*    justify-content: flex-start;*/
/*  }*/

/*  .startmenu_item {*/
/*    align-self: center;*/
/*    height: 20rem;*/
/*  }*/

/*  .header_startmenu, .header_module {*/
/*    padding: 2rem 0;*/
/*  }*/

/*  .header_startmenu h1, .header_module h1 {*/
/*    font-size: 3rem;*/
/*  }*/

/*  .header_module_title {*/
/*    font-size: 2.4rem;*/
/*  }*/

/*  .btn_login_cont {*/
/*    padding-top: 1rem;*/
/*  }*/

/*  .HOVER {*/
/*    width: 10rem;*/
/*  }*/

/*  .btn_login_input {*/
/*    width: 10rem;*/
/*    padding: 0;*/
/*  }*/

/*  .info_icon {*/
/*    display: none;*/
/*  }*/
/*}*/

div.cookie-consent {
    font-family: "tyfoonsans";
    color: #165b89;
    background-color: rgba(255,255,255,0.3);
    font-size: 12px;
    position: fixed;
    bottom: 0;
    padding: 3px;
    border-top: 1px solid white;
    width: 100%;
    text-align: center;
}
div.cookie-consent p {
    margin: 10px 0;
}

.exam__feedback {
    font-size : 16px;
    text-align: center;
}