:root {
    --fc-event-border-color: var(--bs-success);
    --fc-event-bg-color: #fed;
    --fc-event-text-color: black;
    --fc-bg-event-color: #ff00004f;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/Roboto-normal-fw300.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Roboto-normal-fw400.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/Roboto-normal-fw500.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/Roboto-normal-fw700.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url(fonts/Roboto-normal-fw900.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Roboto-mono-fw400.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/Roboto-mono-fw500.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/Roboto-mono-fw600.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/Roboto-mono-fw700.woff2) format('woff2');
}

.showPreloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    opacity: 1 !important;
}

.backgroundloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    opacity: 0.15;
    background: no-repeat center center rgba(0,0,0,1)
}

.showMenuloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    background: url("../images/loader.svg") no-repeat center center rgba(0,0,0,0.15)
}

.FontMono {
    font-family: Roboto Mono;
    font-size: 13px;
}

.fc-daygrid-block-event {
    border: 1px solid #ffe3d8;
}

.fc-event {
    cursor: pointer;
}

@media (max-width: 768px) {
    .fc-daygrid-day-frame {
        padding-bottom: 0.5em;
    }

        .fc-daygrid-day-frame .fc-daygrid-week-number {
            bottom: 0;
            top: initial;
        }

    .fc-dayGridYear-button {
        font-size: 0.8em !important;
    }

    .fc-dayGridMonth-button {
        font-size: 0.8em !important;
    }

    .fc-today-button {
        font-size: 0.8em !important;
    }

    .fc-prev-button {
        font-size: 0.8em !important;
    }

    .fc-next-button {
        font-size: 0.8em !important;
    }

    .fc-toolbar-title {
        font-size: 1.2em !important;
        margin: 10px !important;
    }

    .fc .fc-daygrid-day-number {
        font-size: 11px;
    }
}

.fc-scrollgrid-sync-inner {
    height: 100%;
}

.fc-daygrid-day-top {
    position: relative;
}

.fc .fc-daygrid-day-number {
    color: #39687b;
    margin: 3px;
    font-size: 12px;
    text-align: right;
    letter-spacing: -1px;
}

    .fc .fc-daygrid-day-number:not(.fc-daygrid-month-start) {
        width: 25px;
    }

.fc-daygrid-day-number,
.fc-daygrid-day-top {
    z-index: 10 !important;
}

.fc .fc-daygrid-day-bg .fc-bg-event,
.fc-daygrid-bg-harness {
    cursor: initial;
    z-index: 3;
}

.fc-bg-event .fc-event-title {
    bottom: 0;
    margin-bottom: -1px !important;
    padding-right: 3px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: '..';
    max-width: 97%;
}

.fc-event-time {
    display: none;
}

.fc-daygrid-dot-event .fc-event-title {
    font-weight: 300;
}

.fc-button {
    padding: 0.25rem 0.5rem 0.25rem 0.5rem !important;
}

body {
    color: #212529;
}

.card-body {
    font-family: jouwloonCsn !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 300 !important;
    font-family: jouwloonCsn !important;
}

h6 {
    font-family: jouwloonCsn !important;
}

a {
    color: #47778a;
}

    a:hover {
        color: #5c8999;
    }

.input-group-append {
    align-items: center;
    padding: 0.475rem 0.75rem;
    font-size: 1rem;
    color: #212529 !important;
    text-align: center;
    background-color: #47778a;
    border-radius: 0px 5px 5px 0px;
    z-index: 100;
    position: relative !important;
    display: flex;
}

label.infoBox > i.bi.bi-info-circle-fill {
    color: #60A3B7 !important;
}

label.waarschuwingsBox > i.bi.bi-info-circle-fill {
    color: #856404 !important;
}

label.foutBox > i.bi.bi-info-circle-fill {
    color: #C1543F !important;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
    margin-right: -2px;
}

.input-group-outline {
    background: white;
    border-radius: 5px;
}

.form-control:focus {
    color: #212529;
    border-color: #7b809a;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(110, 131, 154, 0.18);
    z-index: 1;
}

.input-group-append > i.bi {
    color: white !important;
}

i.passwordVisible {
    color: #959595 !important;
}

i.passwordVisibleLogin {
    color: #959595 !important;
}



.passwordVisible {
    background-color: white !important;
    color: #50647e !important;
    border-style: solid !important;
    border-color: #cccbcb !important;
    border-width: 1px 1px 1px 0px !important;
    cursor: pointer;
    padding-left: 10px !important;
}

.passwordVisibleLogin {
    cursor: pointer;
    position: absolute;
    top: 35%;
    right: 5%;
    color: #959595;
    z-index: 999;
    font-size: 14pt;
}

a#navbarDropdownMenuLink.dropdown-toggle::after {
    font: normal normal normal 22px/1 FontAwesome !important;
}

.AdmInstellingSmaller p {
    font-size: 13px;
    letter-spacing: -0.4px;
}

.sidebar-background {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50%;
    -webkit-font-smoothing: antialiased;
    opacity: 0.1;
}

#sidenav-main {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

    #sidenav-main .active {
        background-color: #47778a;
        box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(38, 49, 68, 0.4);
        background-image: unset;
    }

.bg-gradient-primary {
    background: linear-gradient(60deg, #47778a, #2e505e);
}

.bg-gradient-tertiary {
    background: linear-gradient(60deg, #fd950c, #df8002);
}

.shadow-primary {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px #2e505e !important;
}

.dropdown-menu {
    --bs-dropdown-divider-bg: #e9ecef !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

    .dropdown-menu.shadow-primary {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

.dropdown-item.active {
    background-color: #47778a;
    color: white;
}

.logo {
    margin: 1rem;
    text-align: center;
}

.card [class*="card-header-"] {
    margin: 0px 15px 0;
    padding: 0;
    position: relative;
    border-radius: 5px;
    color: white;
}

.card-title {
    color: white;
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius);
}

.tooltip {
    z-index: 2600;
}
/* --  --  Styling van de tooltip  --  -- */
.tooltip-inner {
    background-color: #315564;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: #315564 !important;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: #315564 !important;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-bottom-color: #315564 !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-bottom-color: #315564 !important;
}

/* --  --  --  --  --  --  --  --  --  -- */

.bg-gradient-blanco {
    color: #717070 !important;
    background: transparent !important;
    border: solid 1px #bebebf !important;
    -webkit-box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.10);
    cursor: pointer;
}

.bg-success {
    background: #689160 !important;
}

.bg-success-pushmelding {
    background: #e0eedb !important;
}

.bg-danger {
    background: #bc5350 !important;
}

.bg-danger-pushmelding {
    background: #f2dede !important
}

.bg-warning {
    background: #f0984a !important;
}

.bg-warning-pushmelding {
    background: #fff4ea !important;
}

.bg-primary {
    background: #47778a !important;
}

.bg-secondary {
    background: #525557 !important;
}

.bg-beschikbaarheid {
    background: #9d6a7d !important;
}

.bg-extrabeschikbaarheid {
    background: #07977c !important;
}

.bg-verlof {
    background: #7e6695 !important;
}

.bg-verlofwettelijk {
    background: #7e6695;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .10) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .10) 75%, transparent 75%, transparent);
}

.bg-verlofbovenwettelijk {
    background: #a489bd;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .10) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .10) 75%, transparent 75%, transparent);
}

.bg-verlofwettelijkvervalt {
    background: #ffbf00;
    color: #b00;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .10) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .10) 75%, transparent 75%, transparent);
}

.bg-opendienst {
    background: #9D2A50;
}

.bg-ruilverzoek {
    background: #AC961C;
}

.bg-aangeboden {
    background: #9D6236;
}

.bg-schoolrooster {
    background: #0f8ba4 !important;
}

.bg-schoolvakantie {
    background: #1ba4a4 !important;
}

.bg-schoolvrijstelling {
    background: #5facdb !important;
}

.text-success {
    color: #689160 !important
}

.text-success-chat {
    color: #0bd038 !important;
}

.text-verlof {
    color: #7e6695 !important;
}

.text-danger {
    color: #bc5350 !important;
}

.text-info {
    color: #98cce6 !important;
}

.text-primary {
    color: #47778a !important;
}

.text-secondary {
    color: #525557 !important;
}

.text-loader {
    color: #47778a !important;
}

.btn {
    font-family: Roboto !important;
}

.badge {
    font-family: Roboto !important;
    font-weight: 400;
}

.countdown-badge {
    padding: 2px 6px 2px 6px;
    display: inline-block;
    width: fit-content;
    color: #922820;
    background: #ffe1da;
    cursor: pointer;
}

.uitnodiging-badge {
    padding: 2px 6px 2px 6px;
    display: inline-block;
    width: fit-content;
    color: white;
    background: #689160;
    cursor: default;
}

.chatBox {
    background: linear-gradient(#47778a0a, #47778a00);
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.50;
}

table {
    vertical-align: middle;
}

    /* Zorg ervoor dat de actiebuttons binnen de tabel
   niet vetgedrukt zijn om ruimte te besparen */
    table .btn {
        font-weight: 300 !important;
    }

    table > tbody > tr.even {
        background-color: #fbfbfb;
    }

.dark-version table > tbody > tr.even {
    background-color: #2a334b;
}

.daterangepicker {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    color: #7b809a;
    border-radius: 0.375rem;
    padding-top: 15px;
}

    .daterangepicker .ranges li {
        font-size: 0.875rem !important;
        font-family: jouwloonCsn !important;
    }

        .daterangepicker .ranges li.active {
            background-color: #47778a;
        }

.btn-primary {
    display: inline-block;
    text-decoration: none;
    background: #47778a !important;
    color: white !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-primary:hover {
        background: #5c8999 !important;
        box-shadow: none !important;
    }

    .btn-primary:focus {
        box-shadow: none !important;
    }

    .btn-primary:active {
        background: #47778a !important;
    }

.btn-outline-primary {
    display: inline-block;
    text-decoration: none;
    color: #39687b !important;
    border: 1px solid #39687b !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
}

    .btn-outline-primary:hover {
        border: solid 1px #5c8999 !important;
        color: #47778a !important;
    }

    .btn-outline-primary:focus {
        box-shadow: none !important;
        background-color: transparent !important;
    }

    .btn-outline-primary:active {
        background-color: transparent !important;
    }

.btn.dropdown-toggle.btn-outline-primary.show {
    background: transparent;
}

.btn-secondary {
    display: inline-block;
    text-decoration: none;
    color: #4a7686 !important;
    background: transparent !important;
    border: solid 1px #4a7686 !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-secondary:hover {
        border: solid 1px #5c8999 !important;
        color: #5c8999 !important;
        box-shadow: none;
    }

    .btn-secondary:focus {
        box-shadow: none !important;
    }

    .btn-secondary:active {
        box-shadow: none;
        background: transparent !important;
    }

.btn-outline-secondary {
    display: inline-block;
    text-decoration: none;
    color: #787c7e !important;
    background: transparent !important;
    border: solid 1px #787c7e !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-outline-secondary:hover {
        border: solid 1px #888c8f !important;
        color: #888c8f !important;
        box-shadow: none;
    }

    .btn-outline-secondary:focus {
        box-shadow: none !important;
    }

    .btn-outline-secondary:active {
        box-shadow: none;
        background: transparent !important;
    }

.btn-outline-secondary-light {
    display: inline-block;
    text-decoration: none;
    color: #787c7e;
    background: transparent !important;
    border: solid 1px #bbb;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-outline-secondary-light:hover {
        color: #9ea2a4 !important;
        box-shadow: none;
    }

.btn-success {
    display: inline-block;
    text-decoration: none;
    background: #689160 !important;
    color: white !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-success:hover {
        background-color: #79a470 !important;
        box-shadow: none;
    }

    .btn-success:focus {
        box-shadow: none !important;
        z-index: 0 !important;
    }

    .btn-success:active {
        box-shadow: none;
        background: #689160 !important;
    }

.btn-danger {
    display: inline-block;
    text-decoration: none;
    background: #bc5350 !important;
    color: white !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-danger:hover {
        background-color: #cc6663 !important;
        box-shadow: none;
    }

    .btn-danger:focus {
        box-shadow: none;
    }

    .btn-danger:active {
        box-shadow: none;
        background: #bc5350 !important;
    }

.btn-outline-danger {
    display: inline-block;
    text-decoration: none;
    color: #bc5350 !important;
    border: 1px solid #bc5350 !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
}

    .btn-outline-danger:hover {
        border: solid 1px #d77471 !important;
        color: #d77471 !important;
    }

    .btn-outline-danger:focus {
        box-shadow: none;
        background-color: transparent !important;
    }

    .btn-outline-danger:active {
        box-shadow: none;
        background-color: transparent !important;
    }

.btn-warning {
    display: inline-block;
    text-decoration: none;
    background: #ea8d3b !important;
    color: white !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-warning:hover {
        background: #f0984a !important;
        box-shadow: none;
    }

    .btn-warning:focus {
        box-shadow: none;
    }

    .btn-warning:active {
        box-shadow: none;
        background: #ea8d3b !important;
    }

.btn-link {
    color: #47778a;
}

    .btn-link:hover {
        color: #5c8999;
    }

    .btn-link:focus {
        color: #5c8999;
    }

.btn-updatemodal {
    display: inline-block;
    text-decoration: none;
    background: #1f363c !important;
    color: white !important;
    text-align: center !important;
    cursor: pointer;
    font-size: 0.850rem !important;
    text-transform: none !important;
    font-weight: 500 !important;
    width: auto;
    box-shadow: none;
}

    .btn-updatemodal:hover {
        background: #3d555c !important;
    }

    .btn-updatemodal:focus {
        color: #3d555c;
    }


/* Actie buttons in de DataTables */
td button.btn {
    text-transform: none;
    font-size: 10pt;
    font-weight: 400;
}

/*Tabel informatie*/
.table thead tr th {
    border-color: #afb2c2 !important;
    padding-left: 5px !important;
    padding-bottom: 6px !important;
    text-transform: none !important;
}

table tr.opmerking-alert {
    border-bottom: 2px solid #f5c96d !important;
    border-right: 1px solid #fdcb62 !important;
}

.dataTable > tbody > tr {
    height: 40px !important;
    /* min. hoogte voor alle DataTable rows aanhouden */
}

.dataTable > theader > th {
    text-transform: none !important;
}

/* Pas effect + kleur toe voor alle table rows met class table-hover */
table.table-hover > tbody > tr {
    -webkit-transition: background-color 0.4s ease-out !important;
    -moz-transition: background-color 0.4s ease-out !important;
    -o-transition: background-color 0.4s ease-out !important;
    transition: background-color 0.4s ease-out !important;
}

    table.table-hover > tbody > tr:hover {
        background-color: #f2f2f2 !important;
    }

.dark-version table.table-hover > tbody > tr:hover {
    background-color: #070f24 !important;
}

/* Zorg voor juiste kleuren verhouding bij tabellen met class table-striped */
table.table-striped > tbody > tr:nth-of-type(2n+1) {
    --bs-table-striped-bg: #f5f5f5;
}

table.table {
    --bs-table-color: #344767;
    --bs-table-striped-color: #344767;
    --bs-table-active-color: #344767;
    --bs-table-hover-color: #344767;
    border-color: #e1e1e1;
}

table.table-striped > tbody > tr {
    --bs-table-accent-bg: #fff;
}

button.center-dropdown .filter-option .filter-option-inner {
    text-align: center !important;
    font-size: 1.25em;
}

.dataTables_filter {
    float: left !important;
}

input[type="search"] {
    border: 1px solid rgb(211, 211, 211);
    border-radius: 4px;
    background: #fbfbfb !important;
    font-family: Arial;
}

    input[type="search"]:focus {
        box-shadow: 0 0 2px #fff !important;
    }

/* .dataTables_wrapper .dataTables_filter input:not(:valid):not(:focus) {
    box-shadow: 0 0 5px #fff !important;
}*/
.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
    -webkit-appearance: none !important;
}

.dataTables_wrapper .dataTables_filter button {
    visibility: hidden;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:valid ~ button {
    visibility: visible;
}

#GebruikerRolBeheerTabel thead {
    display: none;
}

.not-allowed {
    cursor: not-allowed;
}

.hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 1199.98px) {
    .fc-daygrid-month-start {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: '..';
        max-width: 100%;
    }
}

.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233e3e3e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233e3e3e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.dark-version .card p {
    opacity: 0.75;
}

.dark-version .accordion {
    --bs-accordion-bg: #202940 !important;
}

.dark-version .accordion-item {
    border: var(--bs-accordion-border-width) solid rgb(121, 127, 141);
}

.dark-version .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.dark-version .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.dark-version table.table-striped > tbody > tr:hover {
    background-color: #192134 !important;
}

.dark-version table.table-striped > tbody > tr:nth-of-type(2n+1) {
    --bs-table-striped-bg: #202940;
}

.dark-version table.table-striped > tbody > tr {
    --bs-table-accent-bg: #2a334b;
}

.dark-version .modal-content {
    background-color: #1a2035 !important;
}

.dark-version .text-dark {
    color: var(--bs-gray-200) !important;
}

    .dark-version .text-dark.active {
        color: var(--bs-dark) !important;
    }

.dark-version .WWInfoBox {
    background-color: #14192b !important
}

.dark-version .markeerAchtergrond {
    background: #332e23;
}

.dark-version .shadow-primary {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px #1e1e1e !important;
}

.dark-version .datumSelectie-Downloads {
    border-color: #98acb5 !important;
    color: #98acb5 !important;
}

    .dark-version .datumSelectie-Downloads:hover {
        border-color: #e2e9ec !important;
        color: #e2e9ec !important;
    }

.dark-version .datumSelectie-Overzichten {
    border-color: #98acb5 !important;
    color: #98acb5 !important;
}

    .dark-version .datumSelectie-Overzichten:hover {
        border-color: #e2e9ec !important;
        color: #e2e9ec !important;
    }

.dark-version .btn-outline-secondary-light {
    border-color: #ccc;
    color: #ccc;
}

.HiddenTekst {
    color: #eeecec14;
    font-size: 18px !important;
    font-family: 'Roboto';
    cursor: default;
}

.dark-version .HiddenTekst {
    color: #1b2139;
    font-size: 18px !important;
    font-family: 'Roboto';
    cursor: default;
}

.dark-version .bg-success-pushmelding {
    background: #606f5b !important;
}

.dark-version input[type="search"] {
    background: #293248 !important
}

.dark-version fieldset {
    background-color: #202940 !important;
    border-color: #646464;
}

    .dark-version fieldset .border {
        border-color: #646464 !important;
    }

    .dark-version fieldset .form-control {
        background-color: #2c3448 !important;
    }

.dark-version .form-floating > input {
    background-color: #1a2035 !important;
}

.dark-version fieldset .form-control:disabled {
    color: #1a2036;
    background-color: #1a2035 !important;
}

.dark-version .form-control:disabled {
    color: #1a2036;
    background-color: #1a2035 !important;
}

.dark-version .btn-outline-primary {
    color: #98acb5 !important;
    border-color: #98acb5 !important;
}

    .dark-version .btn-outline-primary:hover {
        color: #e2e9ec !important;
        border-color: #e2e9ec !important;
    }

.dark-version .datumSelectie {
    background-color: transparent !important;
}

.dark-version .list-group-item {
    border: var(--bs-list-group-border-width) solid rgba(255, 254, 254, 0.37);
}


    .dark-version .clock-timepicker input {
        background: #2c3448;
    }

body.dark-version .date-range-picker-button {
    color: white;
}

body.dark-version .daterangepicker th.prev span,
body.dark-version .daterangepicker th.next span {
    border-color: white;
}

body.dark-version .daterangepicker th.prev:hover span,
body.dark-version .daterangepicker th.next:hover span,
body.dark-version .daterangepicker th.prev:focus span,
body.dark-version .daterangepicker th.next:focus span,
body.dark-version .daterangepicker th.prev:active span,
body.dark-version .daterangepicker th.next:active span {
    border-color: black;
}

body.dark-version .daterangepicker,
body.dark-version .daterangepicker .drp-calendar .calendar-table {
    background-color: #1a2035 !important;
    border: none;
}

    body.dark-version .daterangepicker .calendar-table td.off {
        background-color: initial;
    }

    body.dark-version .daterangepicker .calendar-table td:hover,
    body.dark-version .daterangepicker .calendar-table td:focus,
    body.dark-version .daterangepicker .calendar-table td:active {
        color: rgba(0, 0, 0, 0.50);
    }

    body.dark-version .daterangepicker .calendar-table td.ends:hover,
    body.dark-version .daterangepicker .calendar-table td.ends:focus,
    body.dark-version .daterangepicker .calendar-table td.ends:active,
    body.dark-version .callout {
        color: white;
    }

fieldset {
    border: 1px solid #dbdbdb;
    border-radius: 0.3em;
    background-color: #FDFDFD;
}

    fieldset .form-control {
        background-color: #FFF !important;
    }

legend {
    margin-bottom: 0px;
}

.legend-subtitle {
    background: linear-gradient(60deg, #47778a, #2e505e);
    border-radius: 0.3em;
    padding: 3px 10px 3px 10px !important;
    color: white;
    font-size: 0.9em;
    float: none;
    width: auto;
    font-weight: 300;
}

.form-control:disabled {
    background-color: #f7f7f7 !important;
    cursor: not-allowed;
}

.table .Vandaag-bg {
    background-color: #edfbed;
}

#AanvraagKalenderTabel .table td:hover {
    background-color: rgba(0, 0, 0, .075) !important;
}

.MaxRechtKolomInh {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    text-wrap: wrap;
    white-space: pre-wrap;
}

.MaxRechtKolomInhSmall {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(10%, 1fr);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    text-wrap: wrap;
    white-space: pre-wrap;
}

.HuidigeAanvraag {
    background-color: rgba(156, 218, 255, 0.15);
}

.OmliggendeAanvraag {
    background-color: #fcf5e3;
}

.toonOmliggendeAanvraagMelding {
    display: block !important;
}

.CollectiefCheckbox {
    font-size: 30px;
}

@media (min-width: 992px) {
    .CollectiefCheckbox {
        font-size: 20px;
    }
}

.bootstrap-select .dropdown-menu .show .dropdown-menu {
    margin-top: 0px !important;
}

    .bootstrap-select .dropdown-menu .show .dropdown-menu .dropdown-item {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        text-wrap: wrap;
        white-space: pre-wrap;
    }

.bootstrap-select .dropdown-menu:not(.show) .dropdown-menu {
    display: none;
}

.dropdown-menu-breedte {
    min-width: max-content !important;
}

.dropdown-selectie-h46 {
    height: 46px !important;
}
/* xs */
@media (max-width: 576px) {
    .modal-dialog {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    input[type="search"] {
        max-width: 40vw;
    }

    .w-xs-45 {
        width: 45px !important;
    }

    .fc-header-toolbar .fc-toolbar-chunk {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .fc-header-toolbar .fc-toolbar-chunk .fc-today-button {
            margin-left: 0;
            margin-top: 0.25em;
        }

    table {
        font-size: 10px !important;
    }

    .AdmInstellingSmaller p {
        font-size: 12px !important;
    }

    .h6-responsive {
        font-size: 12px !important
    }

    .h6-header-responsive {
        font-size: 12px !important;
    }
}

/* sm */
@media (min-width: 576px) {
    table {
        font-size: 10px !important;
    }

    .AdmInstellingSmaller p {
        font-size: 11px !important;
    }
}

/* md */
@media (min-width: 768px) {

    table {
        font-size: 11px !important;
    }

        table .badge {
            font-size: 10px !important;
        }

    .AdmInstellingSmaller p {
        font-size: 12px !important;
    }

    .aanvraag-col-border-right {
        border-right: solid 2px #f5f5f5;
    }

    /* Toon Uitnodigings button op juist formaat voor tablet/desktop versie */
    #buttonSchoolRoosterWerknemers {
        padding: 5.5px 10px 5px 10px !important
    }
}

@media (max-width: 768px) {
    .w-xs-45 {
        width: 45px !important;
    }

    table {
        font-size: 11px !important;
    }

    .AdmInstellingSmaller p {
        font-size: 12px !important;
    }

    /* Toon Filter buttons op juist formaat voor mobiele versie */
    .FilterButton {
        padding: 5px !important;
    }

    /* Toon Uitnodigings button op juist formaat voor mobiele versie */
    #buttonSchoolRoosterWerknemers {
        padding: 5.5px 10px 6.5px 10px !important;
    }

    /* Toon Datum button op juist formaat voor mobiele versie */
    .datumSelectie-Overzichten {
        width: 45px;
        background: url("/assets/images/date_icon.svg") no-repeat right 12px top 6px !important;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        caret-color: transparent;
        padding: 3.7px 0px 5px 15px !important;
    }

    /* Toon Datum button op juist formaat voor mobiele versie */
    .datumSelectie-Downloads {
        caret-color: transparent;
    }

    .icon-td-align-middle {
        margin-top: 30px;
    }

    /* Verberg de Tooltip voor de mobiele versie */
    .tooltip {
        display: none !important;
    }

    #sidenav-main {
        box-shadow: 0 14px 16px -12px rgba(0, 0, 0, 0.56), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    }

    .rounded-sm-0 {
        border-radius: 0px !important;
    }
}

/* lg */
@media (min-width: 992px) {

    table {
        font-size: 12px !important;
    }

        table .badge {
            font-size: 10px !important;
        }

    select option {
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .AdmInstellingSmaller p {
        font-size: 13px !important;
    }
}

/* xl */
@media (min-width: 1200px) {
}

/* xxl */
@media (min-width: 1400px) {
}

.alert {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
    --bs-alert-padding-y: 0.5rem;
}

.alert-danger {
    background: #f2dede;
    border: solid 1px #e0b1b8;
    color: #b94a48;
}

.alert-warning {
    background: #fcf5e3;
    border: solid 1px #d7c39a;
    color: #8f7343 !important;
}

/*.alert-warning:hover {
        cursor: pointer;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        opacity: 0.8;
    }*/

.alert-success {
    background: #d7e6d2;
    border: solid 1px #adbba1;
    color: #3c763d;
}

.alert-info {
    background: #d9edf7;
    border: solid 1px #98cce6;
    color: #3a87ad;
}

/*.alert-info:hover {
        cursor: pointer;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        opacity: 0.8;
    } */

.alert-dismissible .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.75em auto no-repeat;
    padding: 0.75rem 0.75rem;
}

.callout {
    padding: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-color: rgb(233, 236, 239);
    border-left-width: .25rem;
    border-radius: .375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
    background: #ffffffbf;
}

.dark-version .callout {
    background: #333a53;
}

.callout-danger {
    border-left-color: #ffa0a0;
}

.callout-warning {
    border-left-color: #f5c96d;
}

.callout-success {
    border-left-color: #a2c882;
}

.callout-info {
    border-left-color: #98cce6;
}

.datumSelectie {
    padding-left: 10px !important;
    background-color: #ffffffbf !important;
    cursor: pointer;
    background-size: 20px;
    background-origin: border-box;
    background-image: url("/assets/images/date_icon.svg") !important;
    background-repeat: no-repeat;
    background-position: right 10px top 10px;
    width: 240px;
}

.datumSelectie-Overzichten {
    cursor: pointer;
    background: url("/assets/images/date_icon.svg") no-repeat right 10px top 5px;
    border-color: #39687b !important;
    border-radius: 0.5rem !important;
    color: #39687b;
    font-weight: 500 !important;
    font-family: Roboto !important;
    font-size: 0.850rem !important;
    padding: 3px 35px 3.7px 15px;
}

    .datumSelectie-Overzichten:hover {
        border: solid 1px #5c8999 !important;
        color: #47778a !important;
        opacity: .75;
    }

    .datumSelectie-Overzichten:focus {
        color: #39687b;
    }

.datumSelectie-Downloads {
    cursor: pointer;
    background: url("/assets/images/date_icon.svg") no-repeat right 20px top 10px;
    border-color: #39687b !important;
    border-radius: 0.5rem !important;
    color: #39687b;
    font-weight: 500 !important;
    font-family: Roboto !important;
    font-size: 0.850rem !important;
    padding: 10px 10px 10px 25px;
    text-align: left;
}

    .datumSelectie-Downloads:hover {
        border: solid 1px #5c8999 !important;
        color: #47778a !important;
        opacity: .75;
    }

    .datumSelectie-Downloads:focus {
        color: #39687b;
    }

.input-datumSelectie {
    cursor: pointer;
    background-origin: border-box;
    background: url("/assets/images/date_icon.svg") no-repeat right 10px top 18px !important;
}

.input-upload-icon {
    cursor: pointer;
    background-origin: border-box;
    background: url("/assets/images/upload_icon.svg") no-repeat right 10px top 18px !important;
}

.callout-pijl-rechts {
    background: url("/assets/images/chevron-right.svg") no-repeat right 50% top 50% !important;
    background-size: 18px !important;
}

.callout-xmark {
    background: url("/assets/images/xmark.svg") no-repeat right 50% top 50% !important;
    background-size: 18px !important;
}

.btn-callout,
.btn-callout-secondary,
.btn-callout-success,
.btn-callout-danger,
.btn-callout-warning,
.btn-callout-info {
    padding: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
    border-left-width: .25rem;
    border-radius: .375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
    background: #ffffffbf;
    margin: 0.5rem;
    flex-shrink: 1;
}

    .btn-callout:hover,
    .btn-callout:focus,
    .btn-callout-secondary:hover,
    .btn-callout-secondary:focus,
    .btn-callout-success:hover,
    .btn-callout-success:focus,
    .btn-callout-danger:hover,
    .btn-callout-danger:focus,
    .btn-callout-warning:hover,
    .btn-callout-warning:focus,
    .btn-callout-info:hover,
    .btn-callout-info:focus {
        cursor: pointer;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
        opacity: 0.8;
    }

.btn-callout {
    color: #47778a !important;
    border-color: #47778a !important;
}

    .btn-callout:hover,
    .btn-callout:focus {
        color: #47778a !important;
    }

.btn-callout-secondary {
    color: #787c7e !important;
    border-color: #787c7e !important;
}

    .btn-callout-secondary:hover,
    .btn-callout-secondary:focus {
        color: #787c7e !important;
    }

.btn-callout-success {
    color: #689160 !important;
    border-color: #689160 !important;
}

    .btn-callout-success:hover,
    .btn-callout-success:focus {
        color: #689160 !important;
    }

.btn-callout-danger {
    color: #bc5350 !important;
    border-color: #bc5350 !important;
}

    .btn-callout-danger:hover,
    .btn-callout-danger:focus {
        color: #bc5350 !important;
    }

.btn-callout-warning {
    color: #f5c96d !important;
    border-color: #f5c96d !important;
}

    .btn-callout-warning:hover,
    .btn-callout-warning:focus {
        color: #f5c96d !important;
    }

.btn-callout-info {
    color: #98cce6 !important;
    border-color: #98cce6 !important;
}

    .btn-callout-info:hover,
    .btn-callout-info:focus {
        color: #98cce6 !important;
    }

.dark-version .btn-callout,
.dark-version .btn-callout-secondary,
.dark-version .btn-callout-success,
.dark-version .btn-callout-danger,
.dark-version .btn-callout-warning,
.dark-version .btn-callout-info {
    background: #1d253c;
}

.MutatieWeergaven {
    text-decoration: #ffbb64 underline wavy 1px;
    height: fit-content !important;
    padding-bottom: 13px !important;
}

.form-floating > label {
    padding: 0.875rem 0;
    left: 5px !important;
}

.form-floating > input {
    padding-left: 10px !important;
    background-color: #ffffffbf !important;
}

.time-input {
    font-family: jouwloonCsn !important;
    font-size: 14px;
    border: none;
    color: #495057;
    border-radius: 2px;
    padding: 4px;
}

.accordion-item {
    color: black;
}


/* scroll snap takes care of restoring scroll position */
.swipe-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

    /* scrollbar should be hidden */
    .swipe-container::-webkit-scrollbar {
        display: none;
    }

    /* main element should always snap into view */
    .swipe-container .swipe-element {
        scroll-snap-align: start;
        /*background-color: whitesmoke;*/
    }

    /* actions and element should be 100% wide */
    .swipe-container .action,
    .swipe-container .swipe-element {
        min-width: 100%;
    }

    .swipe-container .action {
        display: flex;
        align-items: center;
    }

    /* icon should remain sticky */
    .swipe-container i {
        color: white;
        position: sticky;
        left: 16px;
        right: 16px;
    }

    .swipe-container .right {
        justify-content: flex-end;
        background-color: cornflowerblue;
    }


.pull-to-refresh {
    position: fixed;
    top: -50px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: top 0.2s ease-in-out;
    z-index: 9999 !important;
}

    .pull-to-refresh .visible {
        top: 0;
    }

.zoekveld {
    background-color: #fbfbfb;
    border: solid 1px #d3d3d3;
    border-radius: 4px;
    color: #6c6c6c;
    font-family: Arial;
}

.BeweegOpEnNeer {
    animation: BeweegOpEnNeer 2s ease-in-out infinite alternate;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    /* Chrome, Safari, Opera */
    position: relative;
}

@keyframes BeweegOpEnNeer {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.BeweegLinksNaarRechts {
    /* Start de animatie, met tijdsduur */
    animation: BeweegLinksNaarRechts 1.4s;
    /* Doorloop de animatie telkens opnieuw */
    animation-iteration-count: infinite;
}

@keyframes BeweegLinksNaarRechts {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-5deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(-15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    60% {
        transform: rotate(0deg);
    }

    70% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(10deg);
    }

    90% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.tox-promotion,
.statusbar__branding,
.tox-statusbar__right-container {
    display: none !important;
}

.tox-tinymce-aux {
    z-index: 2501 !important;
}

/* Manipuleer de hoogte van de progressbar */
.progress {
    height: 30px !important;
}

.progress-bar {
    border-radius: unset;
    height: 30px;
}

hr.divider {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top-width: 0px;
    border-top-style: none;
    border-top-color: currentcolor;
    border-top: 1px solid rgba(179, 178, 178, 0.52);
}

/* Aan/Uit switch: AAN */
.form-switch .form-check-input:checked::after {
    border-color: #689160;
    box-shadow: 0 4px 6px -1px rgba(18, 174, 13, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.form-switch .form-check-input:checked {
    background-color: #689160;
}

/* Aan/Uit switch: UIT */
.form-switch .form-check-input::after {
    border-color: #b5b5b5;
    box-shadow: 0 4px 6px -1px rgba(38, 38, 38, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.form-switch .form-check-input {
    background-color: #e1e1e1;
    border-radius: 0.4rem;
    width: 2.2rem;
}
    /* Aan/uit switch onder elkaar uitlijnen indien wel/niet aangevinkt */
    .form-switch .form-check-input::after {
        left: -2px;
    }

    .form-switch .form-check-input:checked::after {
        left: -5px;
    }

.timeline-aanvraagdetails .timeline-block .timeline-content {
    font-size: 10px;
}

.JL_timepicker {
    width: 52px !important;
}

.Default {
    cursor: default;
}

/* Dropdown voor de leeftijd beperken */
.leeftijdDropdown > div.dropdown-menu > div > ul.dropdown-menu {
    max-height: 255px;
    overflow-y: auto;
}

canvas.tekenen {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/voorbeeld-tekenen.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid black;
    cursor: crosshair;
    -webkit-transition-property: opacity 0.3s ease-in 200ms;
    -moz-transition-property: opacity 0.3s ease-in 200ms;
    -o-transition-property: opacity 0.3s ease-in 200ms;
    transition: opacity 0.3s ease-in 200ms;
}

.tox .tox-edit-area::before {
    border: none !important;
}

.dashboard-notificatie-container .dashboard-notificatie .avatar,
.dashboard-notificatie-container .dashboard-notificatie .avatar-sm {
    width: 1.25em !important;
    height: 1.25em !important;
    margin-right: 0 !important;
}

.gebruiker-content img {
    object-fit: contain !important;
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
}

.GeenSelectie {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.labelTextarea {
    background-color: white;
    height: 9px !important;
    margin-top: 8px;
    opacity: 1 !important;
    border-radius: 5px;
    margin-left: 0px;
    width: 112% !important;
    margin-bottom: 1px;
    padding-left: 12px !important;
    padding-bottom: 18px !important;
    padding-top: 3px !important;
}

.dark-version .labelTextarea {
    background-color: unset !important;
}

.DisabledAchterground {
    background-color: #f7f7f7 !important;
}

.dark-version .DisabledAchterground {
    background-color: #1a2035 !important;
}

.form-floating:focus-within .labelTextarea {
    width: 112% !important;
}

.form-floating:not(:focus-within) .labelTextarea {
    width: 98% !important;
}

.spinner-grow {
    --bs-spinner-animation-speed: 1.75s;
}

.markeerAchtergrond {
    background: floralwhite;
}

.scheidingslijn {
    display: flex;
    align-items: center;
    text-align: center;
}

    .scheidingslijn::before,
    .scheidingslijn::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ececec;
    }

    .scheidingslijn:not(:empty)::before {
        margin-right: .25em;
    }

    .scheidingslijn:not(:empty)::after {
        margin-left: .25em;
    }

.vr-scheidingslijn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;  
}

.vr-scheidingslijn div {
    margin: 0.5em 0px 0.5em 0px;
}

.vr-scheidingslijn::before,
.vr-scheidingslijn::after {
    flex: 1;
    content: '';
    align-self: center;
    width: 1px;
    background-color: #ececec;
    height: 100%;
}

.dark-version hr{
    color:gray;
}

.dark-version #Foutmelding a {
    color: #47778a !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.NieuwsModal img {
    max-width: 100%;
    height: auto;
}

/* Radio buttons stijlen */
.form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
    border-color: #47778a;
}

.form-check:not(.form-switch) .form-check-input[type="radio"]::after {
    background-image: linear-gradient(195deg, #477689 0%, #386070 100%), var(--bs-gradient);
}


/* Promotie modal (t.b.v. updates en belangrijke nieuwtjes */
.promo-background-img {
    background-image: url("/assets/images/promo-modal/promo-background.jpg");
    background-size: cover;
}

.modal-promo-body {
    border: 1px white;
    border-radius: 0.5rem;
}

.modal-promo-carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23706a69' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    width: 30px;
    height: 30px;
}

.modal-promo-carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23706a69' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    width: 30px;
    height: 30px;
}

.carousel-caption {
    right: 10%;
    left: 10%;
    padding-bottom: 1em;
}

    .carousel-caption p {
        font-size: 1.01em;
        background: #6f6f6f3d;
        padding: 5px 10px 5px 10px;
        margin-top: 5px;
        margin-bottom: 10px;
        border-radius: 0.25em;
    }

#ReleaseNotesModal {
    background-color: rgba(228, 228, 228, 0.75);
}
/* Einde promotie modal */

/* Help accordeon */
.container-video {
    display: flex;
    justify-content: center;
}

.iframe-video {
    aspect-ratio: 16/9;
    height: auto;
    width: 100% !important;
}

.accordion-bg-lightpurple {
    background-color: #fbfdff;
    border: solid 1px #eee;
    border-radius: 0.25em;
}

.dark-version .accordion-bg-lightpurple {
    background-color: unset;
}
/* Einde Help accordeon */

button.no-style {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.dashboard-notificatie .notificatie-sluiten {
    color: #618695 !important;
}

.dashboard-notificatie .notificatie-sluiten:hover,
.dashboard-notificatie .notificatie-sluiten:focus {
    color: #3f5862 !important;
}

.dark-version #downloadbox #next img, .dark-version #downloadbox #prev img {
    filter: invert();
}