:root {
    --white: #FFF;
    --black: #000;
    --primary: #20315C;
    --secondary: #AA334D;
    --secondary-hover: #B3485F;
    --secondary-active: #992E45;
    --tertiary: #399356;
    --quaternary: #3D89BE;
    --focus: #399356;
    --input-color: rgba(32,49,92,.8);
    --input-border-color: rgba(32,49,92,.4);
    --input-disabled-bg: rgba(32,49,92,.05);
    --dropdown-border-color: rgba(32,49,92,.2);
    --dropdown-item-hover-bg: rgba(32,49,92,.1);
    --fw-semibold: 600
}

@font-face {
    font-family: DM Sans;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/DMSans-Regular.woff2) format("woff2")
}

@font-face {
    font-family: DM Sans;
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url(/assets/fonts/DMSans-SemiBold.woff2) format("woff2")
}

.input-error {
    display: block;
    margin-top: .8125rem;
    padding: 0 .6875rem;
    font-size: .875rem;
    line-height: 1.5rem;
    color: var(--secondary)
}

.check-box {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.check-box_container {
    position: relative;
    border: none
}

.check-box_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    opacity: 0;
    cursor: pointer
}

.check-box_label {
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1.8125rem;
    font-size: inherit;
    line-height: inherit;
    border-radius: .25rem;
    outline-offset: 4px;
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    cursor: pointer;
    transition: all .3s ease-out
}

    .check-box_label:hover {
        outline-color: var(--black)
    }

    .check-box_label:after, .check-box_label:before {
        position: absolute;
        top: 16px;
        left: 0;
        display: inline-block;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        content: "";
        border-radius: 4px
    }

    .check-box_label:before {
        z-index: 1;
        background-color: var(--white);
        border: 1px solid rgba(32,49,92,.4)
    }

    .check-box_label:after {
        z-index: 2;
        opacity: 0;
        background-color: var(--primary);
        background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='11'%20viewBox='0%200%2010%2011'%3e%3cpath%20d='M1,4l3.75,5L9,1'%20fill='none'%20stroke='%23fff'%20stroke-linecap='round'%20stroke-width='2'/%3e%3c/svg%3e");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px 10px;
        transition: opacity .2s ease-out
    }

.check-box_required {
    color: var(--secondary)
}

.check-box input[type=checkbox] {
    top: 4px;
    left: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    opacity: 0
}

    .check-box input[type=checkbox]:checked + label:after {
        opacity: 1
    }

    .check-box input[type=checkbox]:focus-visible + label:before {
        border: 2px solid var(--focus)
    }

.check-box.--invalid .check-box_label {
    color: var(--secondary)
}

.check-box.--invalid .check-box_container {
    border-radius: .25rem;
    border: 1px solid var(--secondary)
}

inputinfo {
    display: block;
    margin-top: .8125rem;
    padding: 0 .6875rem;
    font-size: .875rem;
    line-height: 1.5rem;
    color: var(--input-color)
}

    inputinfo span a {
        color: var(--input-color);
        -webkit-text-decoration: underline;
        text-decoration: underline
    }

.short-answer {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.short-answer_label {
    display: block;
    margin-bottom: .8125rem;
    font-size: inherit;
    font-weight: var(--fw-semibold);
    line-height: inherit
}

    .short-answer_label div {
        display: inline-block
    }

.short-answer_required {
    color: var(--secondary)
}

.short-answer_input {
    padding: 1rem .6875rem;
    width: 100%;
    border-radius: .25rem;
    font-size: inherit;
    line-height: inherit;
    background-color: var(--white);
    border: 1px solid var(--input-border-color);
    color: var(--input-color);
    outline-offset: 0;
    outline-width: 2px;
    outline-style: solid;
    outline-color: transparent;
    transition: all .2s ease-out
}

    .short-answer_input:hover {
        outline-color: var(--black)
    }

    .short-answer_input:focus {
        outline-color: var(--focus)
    }

    .short-answer_input:disabled {
        background-color: var(--input-disabled-bg);
        cursor: not-allowed
    }

        .short-answer_input:disabled:hover {
            outline-color: transparent
        }

.short-answer.--invalid .short-answer_label {
    color: var(--secondary)
}

.short-answer.--invalid .short-answer_input {
    border-color: var(--secondary)
}

.long-answer {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.long-answer_label {
    display: block;
    margin-bottom: .8125rem;
    font-size: inherit;
    font-weight: var(--fw-semibold);
    line-height: inherit
}

.long-answer_required {
    color: var(--secondary)
}

.long-answer_input {
    padding: 1rem .6875rem;
    width: 100%;
    min-height: 187px;
    border-radius: .25rem;
    font-size: inherit;
    line-height: inherit;
    background-color: var(--white);
    border: 1px solid var(--input-border-color);
    color: var(--input-color);
    outline-offset: 0;
    outline-width: 2px;
    outline-style: solid;
    outline-color: transparent;
    transition: all .2s ease-out
}

    .long-answer_input:hover {
        outline-color: var(--black)
    }

    .long-answer_input:focus {
        outline-color: var(--focus)
    }

    .long-answer_input:disabled {
        background-color: var(--input-disabled-bg);
        cursor: not-allowed
    }

        .long-answer_input:disabled:hover {
            outline-color: transparent
        }

.long-answer.--invalid .long-answer_label {
    color: var(--secondary)
}

.long-answer.--invalid .long-answer_input {
    border-color: var(--secondary)
}

.button-secondary {
    position: relative;
    padding: .6875rem 5.5rem .6875rem 1.375rem;
    display: inline-block;
    font-size: .875rem;
    font-weight: var(--fw-semibold);
    line-height: 1.5rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    outline-offset: 0;
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 1.5rem;
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    color: var(--white);
    transition: all .2s ease-out
}

    .button-secondary:hover {
        background-color: var(--secondary-hover);
        border-color: var(--secondary-hover);
        color: var(--white)
    }

    .button-secondary:active {
        background-color: var(--secondary-active);
        border-color: var(--secondary-active);
        color: var(--white)
    }

    .button-secondary:focus-visible {
        outline-color: var(--black)
    }

    .button-secondary:after {
        position: absolute;
        top: 50%;
        right: 1rem;
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.17,11l-5.36-5.36,1.41-1.41,7.78,7.78-7.78,7.78-1.41-1.41,5.36-5.36H4v-2h12.17Z'%20fill='%23fff'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 80% 80%;
        background-position: center;
        transform: translateY(-50%)
    }

.title-block {
    margin-bottom: 1.5625rem;
    display: block;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    color: var(--primary)
}

@media (min-width: 768px) {
    .title-block {
        margin-bottom: 1.8125rem
    }
}

.title-block h2 {
    color: inherit
}

.text-block {
    margin-bottom: 1.5625rem;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primary)
}

@media (min-width: 768px) {
    .text-block {
        margin-bottom: 1.8125rem
    }
}

.text-block a {
    color: inherit
}

.searchable-dropdown {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.searchable-dropdown_label {
    display: block;
    margin-bottom: .8125rem;
    font-size: inherit;
    font-weight: var(--fw-semibold);
    line-height: inherit
}

.searchable-dropdown_required {
    color: var(--secondary)
}

.searchable-dropdown_dropdown {
    position: relative
}

.searchable-dropdown_dropdown-button {
    position: relative;
    padding: 1rem 3rem 1rem .75rem;
    display: block;
    width: 100%;
    text-align: left;
    border-radius: .25rem;
    font-size: inherit;
    line-height: inherit;
    outline-offset: 0;
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    background-color: var(--white);
    border: 1px solid var(--input-border-color);
    color: var(--input-text-color);
    transition: all .2s ease-out
}

    .searchable-dropdown_dropdown-button:focus-visible {
        outline-color: var(--focus)
    }

    .searchable-dropdown_dropdown-button:disabled {
        background-color: var(--input-disabled-bg);
        cursor: not-allowed
    }

        .searchable-dropdown_dropdown-button:disabled:hover {
            outline-color: transparent
        }

    .searchable-dropdown_dropdown-button:after {
        position: absolute;
        top: 50%;
        right: .75rem;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.17,11l-5.36-5.36,1.41-1.41,7.78,7.78-7.78,7.78-1.41-1.41,5.36-5.36H4v-2h12.17Z'%20fill='%2320315C'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        transition: all .2s ease-out;
        transform: translateY(-50%) rotate(90deg)
    }

    .searchable-dropdown_dropdown-button.show:after {
        transform: translateY(-50%) rotate(270deg)
    }

.searchable-dropdown_dropdown-menu {
    position: absolute;
    top: 3.6875rem;
    left: 0;
    z-index: 1000;
    padding: .25rem;
    width: 100%;
    max-height: 220px;
    overflow-y: hidden;
    border-radius: .25rem;
    background-color: var(--white);
    border: 1px solid var(--dropdown-border-color)
}

.searchable-dropdown_dropdown-search {
    padding: 1rem .6875rem;
    display: block;
    width: 100%;
    font-size: inherit;
    line-height: inherit;
    border-radius: .125rem;
    outline-offset: 0;
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    color: var(--input-text-color);
    transition: all .2s ease-out
}

    .searchable-dropdown_dropdown-search:hover {
        outline-color: var(--black)
    }

    .searchable-dropdown_dropdown-search:focus {
        outline-color: var(--quaternary)
    }

    .searchable-dropdown_dropdown-search::-webkit-search-cancel-button {
        color: var(--primary)
    }

.searchable-dropdown_dropdown-list {
    margin-top: 8px;
    margin-bottom: 0;
    padding-left: 0;
    max-height: 144px;
    overflow-y: auto;
    list-style: none
}

.searchable-dropdown_dropdown-item-button {
    padding: .875rem .5rem;
    display: block;
    width: 100%;
    text-align: left;
    font-size: inherit;
    line-height: inherit;
    border-radius: .125rem;
    background-color: transparent;
    border: none;
    transition: all .2s ease-out
}

    .searchable-dropdown_dropdown-item-button:hover {
        background-color: var(--dropdown-item-hover-bg)
    }

.searchable-dropdown.invalid .searchable-dropdown_label {
    color: var(--secondary)
}

.searchable-dropdown.invalid .searchable-dropdown_dropdown-button {
    border-color: var(--secondary)
}

.searchable-dropdown .fade-enter-active, .searchable-dropdown .fade-leave-active {
    transition: opacity .3s ease-out
}

.searchable-dropdown .fade-enter-from, .searchable-dropdown .fade-leave-to {
    opacity: 0
}

.dropdown {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.dropdown_label {
    display: block;
    margin-bottom: .8125rem;
    font-size: inherit;
    font-weight: var(--fw-semibold);
    line-height: inherit
}

.dropdown_required {
    color: var(--secondary)
}

.dropdown_dropdown {
    position: relative
}

.dropdown_dropdown-button {
    position: relative;
    padding: 1rem 3rem 1rem .75rem;
    display: block;
    width: 100%;
    text-align: left;
    border-radius: .25rem;
    font-size: inherit;
    line-height: inherit;
    outline-offset: 0;
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    background-color: var(--white);
    border: 1px solid var(--input-border-color);
    color: var(--input-text-color);
    transition: all .2s ease-out
}

    .dropdown_dropdown-button:focus-visible {
        outline-color: var(--focus)
    }

    .dropdown_dropdown-button:disabled {
        background-color: var(--input-disabled-bg);
        cursor: not-allowed
    }

        .dropdown_dropdown-button:disabled:hover {
            outline-color: transparent
        }

    .dropdown_dropdown-button:after {
        position: absolute;
        top: 50%;
        right: .75rem;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.17,11l-5.36-5.36,1.41-1.41,7.78,7.78-7.78,7.78-1.41-1.41,5.36-5.36H4v-2h12.17Z'%20fill='%2320315C'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        transition: all .2s ease-out;
        transform: translateY(-50%) rotate(90deg)
    }

    .dropdown_dropdown-button.show:after {
        transform: translateY(-50%) rotate(270deg)
    }

.dropdown_dropdown-menu {
    position: absolute;
    top: 3.6875rem;
    left: 0;
    z-index: 1000;
    padding: .25rem;
    width: 100%;
    max-height: 220px;
    overflow-y: hidden;
    border-radius: .25rem;
    background-color: var(--white);
    border: 1px solid var(--dropdown-border-color)
}

.dropdown_dropdown-list {
    margin-top: 8px;
    margin-bottom: 0;
    padding-left: 0;
    max-height: 144px;
    overflow-y: auto;
    list-style: none
}

.dropdown_dropdown-item-button {
    padding: .875rem .5rem;
    display: block;
    width: 100%;
    text-align: left;
    font-size: inherit;
    line-height: inherit;
    border-radius: .125rem;
    background-color: transparent;
    border: none;
    transition: all .2s ease-out
}

    .dropdown_dropdown-item-button:hover {
        background-color: var(--dropdown-item-hover-bg)
    }

.dropdown.invalid .dropdown_label {
    color: var(--secondary)
}

.dropdown.invalid .dropdown_dropdown-button {
    border-color: var(--secondary)
}

.dropdown .fade-enter-active, .dropdown .fade-leave-active {
    transition: opacity .3s ease-out
}

.dropdown .fade-enter-from, .dropdown .fade-leave-to {
    opacity: 0
}

.file-upload {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

    .file-upload input[type=file] {
        padding: .25rem;
        width: 100%;
        border-radius: .25rem;
        border: 1px solid rgba(32,49,92,.4)
    }

        .file-upload input[type=file]:before {
            padding: .75rem 1.5rem;
            display: inline-block;
            content: "Selecteer";
            border-radius: 2px;
            cursor: pointer;
            outline-offset: 0;
            outline-width: 2px;
            outline-style: solid;
            background-color: var(--primary);
            color: var(--white);
            transition: all .2s ease-out
        }

        .file-upload input[type=file]:hover:before {
            background-color: #37466d
        }

        .file-upload input[type=file]:active:before {
            background-color: #1d2c53
        }

        .file-upload input[type=file]:focus-visible {
            outline-color: var(--focus)
        }

        .file-upload input[type=file]::-webkit-file-upload-button {
            visibility: hidden
        }

        .file-upload input[type=file].--en:before {
            content: "Select file"
        }

.file-upload_label {
    display: block;
    margin-bottom: .8125rem;
    font-size: inherit;
    font-weight: var(--fw-semibold);
    line-height: inherit
}

.file-upload_required, .file-upload.--invalid .file-upload_label {
    color: var(--secondary)
}

.file-upload.--invalid .file-upload-container {
    border-color: var(--secondary)
}

.date-input {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.date-input_label {
    display: block;
    margin-bottom: .8125rem;
    font-size: inherit;
    font-weight: var(--fw-semibold);
    line-height: inherit
}

.date-input_required {
    color: var(--secondary)
}

.date-input_input {
    padding: 1rem .6875rem;
    width: 100%;
    border-radius: .25rem;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    background-color: var(--white);
    border: 1px solid var(--input-border-color);
    color: var(--input-color);
    outline-offset: 0;
    outline-width: 2px;
    outline-style: solid;
    outline-color: transparent;
    transition: all .2s ease-out
}

    .date-input_input:hover {
        outline-color: var(--black)
    }

    .date-input_input:focus {
        outline-color: var(--focus)
    }

    .date-input_input:disabled {
        background-color: var(--input-disabled-bg);
        cursor: not-allowed
    }

        .date-input_input:disabled:hover {
            outline-color: transparent
        }

.date-input.--invalid .date-input_label {
    color: var(--secondary)
}

.date-input.--invalid .date-input_input {
    border-color: var(--secondary)
}

.multiple-choice {
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.5rem
}

.multiple-choice_container {
    position: relative
}

.multiple-choice_listitem {
    list-style-type: none
}

.multiple-choice_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    opacity: 0;
    cursor: pointer
}

.multiple-choice_input-label {
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 1.8125rem;
    font-size: inherit;
    line-height: inherit;
    border-radius: .25rem;
    outline-offset: 4px;
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    cursor: pointer;
    transition: all .3s ease-out
}

    .multiple-choice_input-label:hover {
        outline-color: var(--black)
    }

    .multiple-choice_input-label:after, .multiple-choice_input-label:before {
        position: absolute;
        top: 16px;
        left: 0;
        display: inline-block;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        content: "";
        border-radius: 4px
    }

    .multiple-choice_input-label:before {
        z-index: 1;
        background-color: var(--white);
        border: 1px solid rgba(32,49,92,.4)
    }

    .multiple-choice_input-label:after {
        z-index: 2;
        opacity: 0;
        background-color: var(--primary);
        background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='11'%20viewBox='0%200%2010%2011'%3e%3cpath%20d='M1,4l3.75,5L9,1'%20fill='none'%20stroke='%23fff'%20stroke-linecap='round'%20stroke-width='2'/%3e%3c/svg%3e");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px 10px;
        transition: opacity .2s ease-out
    }

.multiple-choice_label {
    display: block;
    margin-bottom: .8125rem;
    font-size: inherit;
    font-weight: var(--fw-semibold);
    line-height: inherit
}

.multiple-choice_required {
    color: var(--secondary)
}

.multiple-choice input[type=checkbox] {
    top: 4px;
    left: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    opacity: 0
}

    .multiple-choice input[type=checkbox]:checked + label:after {
        opacity: 1
    }

    .multiple-choice input[type=checkbox]:focus-visible + label:before {
        border: 2px solid var(--focus)
    }

    .multiple-choice input[type=checkbox]:disabled + label {
        cursor: not-allowed
    }

        .multiple-choice input[type=checkbox]:disabled + label:hover, .multiple-choice input[type=checkbox]:disabled + label :focus-visible {
            outline: 0 !important
        }

        .multiple-choice input[type=checkbox]:disabled + label:after {
            opacity: .5
        }

.app {
    color: var(--primary);
    font-family: DM Sans
}

.loading-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: sans-serif;
    font-size: 16px
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #cccccc;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite
}

.loading-text {
    margin-top: 16px
}

    .loading-text .dots:after {
        content: ".";
        animation: dots 1.2s steps(3,end) infinite
    }

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes dots {
    0% {
        content: "."
    }

    33% {
        content: ".."
    }

    66% {
        content: "..."
    }

    to {
        content: "."
    }
}