/* oxygen-300 - latin-ext_latin */
@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/oxygen-v15-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/oxygen-v15-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/oxygen-v15-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/oxygen-v15-latin-ext_latin-300.svg#Oxygen') format('svg'); /* Legacy iOS */
}
/* oxygen-regular - latin-ext_latin */
@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/oxygen-v15-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/oxygen-v15-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/oxygen-v15-latin-ext_latin-regular.svg#Oxygen') format('svg'); /* Legacy iOS */
}
/* oxygen-700 - latin-ext_latin */
@font-face {
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/oxygen-v15-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/oxygen-v15-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/oxygen-v15-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
    url('/fonts/oxygen-v15-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/oxygen-v15-latin-ext_latin-700.svg#Oxygen') format('svg'); /* Legacy iOS */
}

/* overpass-regular - latin_cyrillic */
@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/overpass-v11-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/overpass-v11-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/overpass-v11-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/overpass-v11-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/overpass-v11-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/overpass-v11-latin_cyrillic-regular.svg#Overpass') format('svg'); /* Legacy iOS */
}
/* overpass-300 - latin_cyrillic */
@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/overpass-v11-latin_cyrillic-300.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/overpass-v11-latin_cyrillic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/overpass-v11-latin_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/overpass-v11-latin_cyrillic-300.woff') format('woff'), /* Modern Browsers */
    url('/fonts/overpass-v11-latin_cyrillic-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/overpass-v11-latin_cyrillic-300.svg#Overpass') format('svg'); /* Legacy iOS */
}
/* overpass-700 - latin_cyrillic */
@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/overpass-v11-latin_cyrillic-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('/fonts/overpass-v11-latin_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/overpass-v11-latin_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/overpass-v11-latin_cyrillic-700.woff') format('woff'), /* Modern Browsers */
    url('/fonts/overpass-v11-latin_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/overpass-v11-latin_cyrillic-700.svg#Overpass') format('svg'); /* Legacy iOS */
}

:root {
    --green: #00b555;
    --greendark: #03a977;
    --blue: #074f8e;
    --bluelight: #63a3d5;
    --bluelight2: #63a3d0;
    --bluelighter: #d6edff;
    --bluedark: #00315c;
    --orange: #e95f2b;
    --transition-default: all .3s linear;
}

body {
    color: #074f8e;
}

    body.login {
        background-image: linear-gradient(135deg, #63a3d5 0%, #064f8e 100%);
    }

.page-title {
    margin-bottom: 0px;
    margin-top: 25px;
}

.page-subtitle {
    margin-bottom: 10px;
    color: darkslategray;
}

.main-container {
    background-color: #fdfdfd;
}

/*      General form    */
.form-group label {
    color: #535354;
}

.form-group textarea {
    width: 100%;
    padding: 10px;
}

.form-control {
    border-radius: 5px;
    border: 1px solid #e9ecef;
}

    .form-control:focus {
        border-color: #3c6fa3;
        color: #3b3f5c;
    }

.form-login .form-control::placeholder {
    color: #064f8e;
    font-size: 14px;
    opacity: 1;
}

.form-login .checkbox .custom-control label,
.custom-control label {
    text-transform: inherit;
}

.btn, .btn-group, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ColVis_MasterButton, .fc-state-default {
    /*box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.2);*/
    margin: 0;
}

    .btn,
    .btn-group .btn,
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    .ColVis_MasterButton,
    .fc-state-default {
        padding: 0.4375rem 1.25rem;
        box-shadow: none !important;
    }

    .btn-group .dropdown-toggle {
        padding-left: 0.4375rem;
        padding-right: 0.4375rem;
    }

    .btn:hover {
        transition: box-shadow 0.2s ease-in-out;
        box-shadow: inset 0px 3px 6px 0 rgba(0, 0, 0, 0.3) !important;
    }

    .btn:focus {
        transition: box-shadow 0.1s ease-in-out;
        box-shadow: inset 0px 6px 9px 0 rgba(0, 0, 0, 0.3) !important;
    }

.btn-button-1 {
    background-color: var(--blue) !important;
    color: #fff !important;
    border: 0 !important;
}

.btn-button-5,
.btn-secondary {
    background-color: var(--bluelight) !important;
    color: #fff !important;
    border: 0 !important;
}

.btn-primary,
.btn-success,
.badge-success,
.swal2-modal .swal2-confirm.swal2-styled {
    background-image: none !important;
    background-color: var(--greendark) !important;
    border: 0 !important;
}

h2.swal2-title {
    font-size: 14px !important;
}

.badge-secondary, .badge-secondary:focus, .badge-secondary:hover {
    color: #fff;
    background-color: #97999e;
    background-image: linear-gradient(-20deg, #888a90 0%, #cccccc 100%) !important;
}

.btn-gradient-danger {
    background: linear-gradient(-20deg, #e91e1e 0%, #ff9494 100%) !important;
    border: 0 !important;
}

.btn-danger,
.badge-danger,
.swal2-modal .swal2-cancel.swal2-styled {
    background: linear-gradient(-20deg, #e91e1e 0%, #ff9494 100%) !important;
    border: 0 !important;
}

.checkbox-large {
    width: 15px !important;
    height: 15px;
}

.switch.s-success input:checked + .slider {
    background-color: #1da016;
}


/*      Badge           */
.badge-dark {
    color: #fff;
    background-color: #63a3d5;
    font-weight: normal;
    padding: 0.5em 0.8em 0.5em 0.8em;
    font-size: 0.8em;
}

table .badge-success, table .badge-primary, table .badge-warning, table .badge-danger, table .badge-info, table .badge-secondary, table .badge-dark {
    box-shadow: none;
    will-change: opacity, transform;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

/*      Modal           */
.modal-backdrop.show {
    background-color: #454656;
    opacity: 0.7,
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 1050px;
    }
}


/*      Tabs            */
.animated-underline-content .nav-tabs .nav-link.active, .animated-underline-content .nav-tabs .show > .nav-link {
    border-color: transparent;
    color: #064f8e;
}

.animated-underline-content .nav-tabs .nav-link:before {
    background-color: #064f8e;
    height: 2px;
}

/*      Header          */
.desktop-nav.header {
    background-color: #FFFF;
    height: 91px;
}

/*      List Colors     */
.bullet-primary > li:before {
    background-color: #1a73e9;
    color: #fff;
}

.bullet-success > li:before {
    background-color: #1abc9c;
    color: #fff;
}

.bullet-info > li:before {
    background-color: #00b1f4;
    color: #fff;
}

.bullet-danger > li:before {
    background-color: #e7515a;
    color: #fff;
}

.bullet-warning > li:before {
    background-color: #e9b02b;
    color: #fff;
}

.bullet-secondary > li:before {
    background-color: #074F8E;
    color: #fff;
}

.bullet-dark > li:before {
    background-color: #4f5163;
    color: #fff;
}


/*      Default Buttons       */

.btn-default:hover,
.btn-default:focus {
    color: #3b3f5c !important;
    background-color: #dfdfdf;
    box-shadow: none;
}

.btn-default:active,
.btn-default.active {
    background-color: #dfdfdf;
    border-top: 1px solid #dfdfdf
}

.btn-primary {
    color: #fff !important;
    background-color: var(--blue) !important;
    border-color: #1a73e9;
}

    .btn-primary:hover,
    .btn-primary:focus {
        color: #fff !important;
        background-color: #3258db;
        box-shadow: none;
    }

    .btn-primary:active,
    .btn-primary.active {
        background-color: #3258db;
        border-top: 1px solid #3258db
    }

    .btn-primary.disabled,
    .btn-primary.btn[disabled],
    .btn-primary:disabled {
        background-color: #1a73e9;
        border-color: #1a73e9;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover,
    .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover,
    .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus,
    .open > .dropdown-toggle.btn-primary:hover {
        color: #fff !important;
        background-color: #2aebcb;
        border-color: #2aebcb;
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
        color: #fff !important;
        background-color: #3258db;
        border-color: #3258db;
    }

    .btn-primary .caret {
        border-top-color: #fff
    }

.btn-group.open .btn-primary.dropdown-toggle {
    background-color: #335eb2
}

.btn-secondary {
    color: #fff !important;
    background-color: #074F8E;
    border-color: #074F8E;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: #fff !important;
        background-color: #1369b5;
        box-shadow: none;
        border-color: #1369b5;
    }

    .btn-secondary:active,
    .btn-secondary.active {
        background-color: #1369b5;
        border-top: 1px solid #1369b5
    }

    .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
        color: #fff !important;
        background-color: #1369b5;
        border-color: #1369b5;
    }

    .btn-secondary.disabled,
    .btn-secondary.btn[disabled],
    .btn-secondary:disabled {
        background-color: #074F8E;
        border-color: #074F8E;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .btn-secondary .caret {
        border-top-color: #fff
    }

.btn-info {
    color: #fff !important;
    background-color: #00b1f4;
    border-color: #00b1f4
}

    .btn-info:hover,
    .btn-info:focus {
        color: #fff !important;
        background-color: #209dff;
        box-shadow: none;
        border-color: #209dff;
    }

    .btn-info:active,
    .btn-info.active {
        background-color: #209dff;
        border-top: 1px solid #209dff
    }

    .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle {
        color: #fff !important;
        background-color: #209dff;
        border-color: #209dff;
    }

    .btn-info.disabled,
    .btn-info.btn[disabled],
    .btn-info:disabled {
        background-color: #00b1f4;
        border-color: #00b1f4;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info.focus:active, .btn-info:active:focus,
    .btn-info:active:hover, .open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover {
        color: #fff !important;
        background-color: #209dff;
        border-color: #209dff
    }

    .btn-info .caret {
        border-top-color: #fff
    }

.btn-group.open .btn-info.dropdown-toggle {
    background-color: #2a85a0
}

.btn-warning {
    color: #fff !important;
    background-color: var(--orange);
    border-color: var(--orange);
}

    .btn-warning:hover,
    .btn-warning:focus {
        color: #fff !important;
        background-color: #cf5020;
        box-shadow: none;
        border-color: #cf5020;
    }

    .btn-warning:active,
    .btn-warning.active {
        background-color: #cf5020;
        border-top: 1px solid #cf5020
    }

    .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle {
        color: #212529;
        background-color: #cf5020;
        border-color: #cf5020;
    }

    .btn-warning.disabled,
    .btn-warning.btn[disabled],
    .btn-warning:disabled {
        background-color: #cf5020;
        border-color: #cf5020;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning.focus:active, .btn-warning:active:focus,
    .btn-warning:active:hover, .open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover {
        color: #fff !important;
        background-color: #f80;
        border-color: #f80
    }

    .btn-warning .caret {
        border-top-color: #fff
    }

.btn-group.open .btn-warning.dropdown-toggle {
    background-color: #df8505
}

.btn-danger {
    color: #fff !important;
    background-color: #e7515a;
    border-color: #e7515a;
}

    .btn-danger:hover,
    .btn-danger:focus {
        color: #fff !important;
        background-color: #ff3743;
        box-shadow: none;
        border-color: #ff3743;
    }

    .btn-danger:active,
    .btn-danger.active {
        background-color: #df303b;
        border-top: 1px solid #df303b;
    }

    .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
        color: #fff !important;
        background-color: #df303b;
        border-color: #df303b;
    }

    .btn-danger.disabled,
    .btn-danger.btn[disabled],
    .btn-danger:disabled {
        background-color: #e7515a;
        border-color: #e7515a;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger.focus:active, .btn-danger:active:focus,
    .btn-danger:active:hover, .open > .dropdown-toggle.btn-danger.focus, .open > .dropdown-toggle.btn-danger:focus, .open > .dropdown-toggle.btn-danger:hover {
        color: #fff !important;
        background-color: #c00;
        border-color: #c00
    }

    .btn-danger .caret {
        border-top-color: #fff
    }

.btn-group.open .btn-danger.dropdown-toggle {
    background-color: #a9302a
}

.btn-dark {
    color: #fff !important;
    background-color: #4f5163;
    border-color: #4f5163;
}

    .btn-dark:hover,
    .btn-dark:focus {
        color: #fff !important;
        background-color: #454656;
        box-shadow: none;
        border-color: #454656;
    }

    .btn-dark:active,
    .btn-dark.active {
        background-color: #454656;
        border-top: 1px solid #454656
    }

    .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle {
        color: #fff !important;
        background-color: #454656;
        border-color: #454656;
    }

    .btn-dark.disabled,
    .btn-dark.btn[disabled],
    .btn-dark:disabled {
        background-color: #4f5163;
        border-color: #4f5163;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .btn-dark .caret {
        border-top-color: #fff
    }

.btn-group.open .btn-dark.dropdown-toggle {
    background-color: #484848
}

.btn-success {
    color: #fff !important;
    background-color: #1abc9c;
    border-color: #1abc9c
}

    .btn-success:hover,
    .btn-success:focus {
        color: #fff !important;
        background-color: #2ea37d;
        box-shadow: none;
        border-color: #2ea37d;
    }

    .btn-success:active,
    .btn-success.active {
        background-color: #2ea37d;
        border-top: 1px solid #2ea37d
    }

    .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
        color: #fff !important;
        background-color: #2ea37d;
        border-color: #2ea37d;
    }

    .btn-success.disabled,
    .btn-success.btn[disabled],
    .btn-success:disabled {
        background-color: #1abc9c;
        border-color: #1abc9c;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success.focus:active, .btn-success:active:focus,
    .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover {
        color: #fff !important;
        background-color: #17c678;
        border-color: #17c678
    }

    .btn-success .caret {
        border-top-color: #fff
    }


ul.pagination li a:hover:not(.active) {
    background-color: #064f8e;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

ul.pagination li a {
    margin-left: 6px;
    box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.2);
}

    ul.pagination li a.page-link:focus {
        box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.2);
    }

.page-item.active .page-link {
    background-color: #064f8e;
    border-color: #1369b5;
    border-radius: 4px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #064f8e;
    border-color: #3b3f5c;
    color: #fff;
}

.page-item.active .page-link {
    background-color: #064f8e;
    border-color: #1369b5;
    border-radius: 4px;
}

#filterTestResults span.select2.select2-container {
    margin-bottom: 0 !important;
}

#addTestResultsModal span.select2.select2-container {
    width: 90% !important;
}

span.select2.select2-container.select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple {
    border: 1px solid #074F8E;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #63A3D5;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #074F8E;
    color: white;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 4px 15px;
    color: #888ea8;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

/* Datatable */
div.dataTables_wrapper div.dataTables_filter input {
    width: 10rem;
}

    div .dataTables_wrapper div.dataTables_filter input:focus {
        animation: grow0 1.0s forwards;
    }

.table > tbody > tr > td {
    vertical-align: top;
}

/*Animate width to 100%*/
@keyframes grow0 {
    from {
        width: 10rem;
    }

    to {
        width: 40rem;
    }
}

/* Login */
body .login {
    background-image: linear-gradient(135deg, #2196F3 0%, #000000 100%);
}

.form-login .forgot-pass a {
    color: #074f8e;
}

/* Sweet alert */
.swal2-modal .swal2-confirm.swal2-styled {
    border-radius: .3rem !important;
}

.swal2-modal .swal2-cancel.swal2-styled {
    border-radius: .3rem !important;
}

.swal2-icon.swal2-warning {
    color: #e85d25 !important;
}

.swal2-modal .swal2-content {
    color: #e85d25 !important;
}

.swal2-popup.swal2-toast {
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: .625em !important;
}

    .swal2-popup.swal2-toast .swal2-icon-text {
        font-size: 2em !important;
    }

/*      Datatables      */
.table > thead > tr > th {
    color: #074F8E;
}

.table-hover:not(.table-dark) tbody tr:nth-of-type(odd):hover {
    background-color: #fbfcfd !important;
    cursor: auto;
}

.table-hover:not(.table-dark) tbody tr:nth-of-type(even):hover {
    background-color: #fff !important;
    cursor: auto;
}

.table-striped tbody tr:nth-of-type(odd).selected,
.table-striped tbody tr:nth-of-type(even).selected,
.table-striped tbody tr:nth-of-type(odd):hover.selected,
.table-striped tbody tr:nth-of-type(even):hover.selected,
.table-striped tbody tr.selected {
    background-color: #c5ddf0 !important;
}

#DataTables_Table_1_wrapper {
    margin-top: 0;
}

.dt-body-center {
    text-align: center;
}

.dt-body-right {
    text-align: right;
}


/*      Testresultaten  */
.module-header td {
    font-weight: bold;
}

.module-header:not(:first-child) td {
    padding-top: 50px;
}

/*      Icons           */
[class^="flaticon-"], [class*=" flaticon-"] {
    font-size: 15px;
    font-weight: bold;
}

#modernSidebar [class^="flaticon-"], #modernSidebar [class*=" flaticon-"] {
    font-weight: normal;
}

.flaticon-arrow-left-1, .flaticon-arrow-right {
    font-weight: normal;
}

/*      Sidebar         */
.modernSidebar-nav.header nav#modernSidebar ul.menu-categories li.menu > a[aria-expanded="true"] {
    background-color: rgba(255,255,255,0.1);
}

    .modernSidebar-nav.header nav#modernSidebar ul.menu-categories li.menu > a[aria-expanded="true"] div i:after {
        display: none;
    }

/*      Multiselect     */

.ms-container .ms-list.ms-focus {
    border-color: #1369b5;
    outline: 0;
    outline: thin dotted \9;
}

.ms-container ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
}

.ms-container .ms-optgroup-container {
    width: 100%;
}

.ms-container .ms-optgroup-label {
    margin: 0;
    padding: 5px 0px 0px 5px;
    cursor: pointer;
    color: #999;
}

.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection {
    border-bottom: 1px #e9ecef solid;
    padding: 2px 10px;
    color: #343f55;
    font-size: 14px;
}

.ms-container .ms-selectable li.ms-hover {
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    background-color: #1369b5;
}

.ms-container .ms-selection li.ms-hover {
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    background-color: #1369b5;
}

.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled {
    background-color: #e9ecef;
    color: #a9b8fa;
    cursor: text;
}

/*      Dashboard home  */
.toolbar-toggle {
    color: #064f8e;
}

/*      Progress bar    */
.testgroep-data .progress {
    height: 20px;
    font-size: 10px;
    font-weight: bold;
}

.testgroep-data .progress-bar {
    box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.6);
}

.progress-bar.bg-danger {
    background-color: rgb(233, 176, 43) !important;
    background-image: linear-gradient(-20deg, rgb(187, 39, 48) 0%, rgb(231, 81, 90) 100%);
}

.progress-bar.bg-warning {
    background-color: rgb(233, 176, 43) !important;
    background-image: linear-gradient(-20deg, rgb(193, 143, 26) 0%, rgb(233, 176, 43) 100%);
}

.progress-bar.bg-excellent {
    background-color: #18d644 !important;
    border: 0 color: #fff;
    background-image: linear-gradient(-20deg, rgb(9, 173, 47) 0%, rgb(24, 214, 68) 100%);
}

.progress-bar.bg-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff;
}

.data-widgets .widget.t-sales-widget i {
    background-color: #63a3d5;
    color: #064f8e;
}

.data-widgets .widget.t-order-widget i {
    background-color: #63a3d5;
    color: #064f8e;
}

.data-widgets .widget.t-customer-widget i {
    background-color: #63a3d5;
    color: #064f8e;
}

.data-widgets .widget.t-income-widget i {
    background-color: #63a3d5;
    color: #064f8e;
}

.monthly-chart .monthly-chart-tab.nav-pills .nav-link.active, .monthly-chart .monthly-chart-tab.nav-pills .show > .nav-link {
    background-image: linear-gradient(-20deg, #064f8e 0%, #63a3d5 100%);
}

.ct-series-a .ct-bar {
    stroke: #064f8e;
    stroke-width: 6px;
}

.ct-series-b .ct-bar {
    stroke: #63a3d5;
    stroke-width: 4px;
}

.new-products .table > tbody > tr > td span.badge.badge-info {
    background-color: #bae7ff;
    color: #00b1f4;
    box-shadow: none;
}

.new-products .table > tbody > tr > td span.badge.badge-success {
    background-color: #b6fff1;
    color: #1abc9c;
    box-shadow: none;
}

.new-products .table > tbody > tr > td span.badge.badge-secondary {
    background-color: #dccff7;
    color: #805dca;
    box-shadow: none;
}

.dropdown-toggle.mb-4 {
    margin-bottom: 0 !important;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.bootstrap-select.show .dropdown-toggle {
    border: 1px solid #63a3d5 !important;
}

.thema-onderdeel {
    margin-bottom: 20px;
    border: 1px solid #e7e5e5;
    border-radius: 5px;
    padding: 15px;
}

    .thema-onderdeel .widget-content-area {
        padding: 0;
        box-shadow: none;
    }

        .thema-onderdeel .widget-content-area .form-group {
            margin-top: 20px;
        }

.mce-branding-powered-by {
    display: none;
}

.mce-ico {
    color: #000 !important;
}

.widget-header .form-group {
    padding-left: 15px;
    margin-bottom: 0;
}

.widget-header .form-check-label {
    width: 100%;
    cursor: pointer;
}

.widget.box .widget-header {
    padding: 0;
}

.btn-group.bootstrap-select,
.btn-group.bootstrap-select .dropdown-menu,
.btn.dropdown-toggle {
    box-shadow: none;
}

a.badge:not([href]):not([tabindex]) {
    color: #fff;
    cursor: pointer;
}

.treeview.widget-content {
    position: sticky;
    top: 120px;
}

.treeview .node-toggle:before {
    border-bottom: 7px #064f8e solid;
}

.jstree-default .jstree-clicked {
    background: #f1f3f1;
    border-radius: 2px;
    box-shadow: inset 0 0 1px #999;
    padding: 3px;
    margin: -3px;
}

.jstree-default li.hoofd-thema > ul {
    display: none;
}

.jstree-default li.hoofd-thema.active > ul {
    display: block;
}

.chart-container {
    position: relative;
}

.thema-onderdeel > .chart {
    display: flex;
}

.thema-onderdeel .loading {
    top: 50px;
    padding: 5px;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    position: absolute;
}

.chart {
    margin-bottom: 0px;
}

.code {
    color: darkgrey;
    top: 15px;
    right: 15px;
    width: 100%;
    text-align: right;
}

.thema-onderdeel {
    display: block;
    width: 75%;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #e7e5e5;
    border-radius: 5px;
    background-color: #fff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-box-shadow: 0px 2px 4px rgb(126 142 177 / 12%);
    box-shadow: 0px 2px 4px rgb(126 142 177 / 12%);
    padding: 15px;
    position: relative;
    min-height: 150px;
}

form .thema-onderdeel {
    width: 100%;
    text-align: left;
    min-height: auto;
}

#outer-klok canvas:nth-last-of-type(2) {
    position: absolute;
    top: 0;
}

.chart .outer-klok {
    width: 100%;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

    .chart .outer-klok canvas {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 30%;
        position: relative;
    }

    .chart .outer-klok .percent-0 {
        position: absolute;
        text-align: center;
        left: 0%;
        top: 95%;
        width: 25%;
        height: 7%;
    }

    .chart .outer-klok .percent-50 {
        position: relative;
        top: 0%;
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

    .chart .outer-klok .percent-100 {
        position: absolute;
        text-align: center;
        right: 0%;
        top: 95%;
        width: 25%;
        height: 7%;
    }

.outer-klok .percent {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-family: 'Overpass', sans-serif !important;
    font-weight: 600 !important;
    font-size: 30px !important;
    top: 102%;
}

    .outer-klok .percent span {
        font-family: 'Overpass', sans-serif !important;
        font-weight: 600 !important;
        font-size: 35px !important;
    }

.outer-klok .score {
    position: absolute;
    left: 50%;
    top: 114%;
    font-family: 'Overpass', sans-serif !important;
    transform: translate(-50%, 0);
    font-weight: 600 !important;
    font-size: 16px !important;
}

.chart .outer-klok p.benchmark-verschil {
    top: 122%;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 14px !important;
}

    .chart .outer-klok p.benchmark-verschil span {
        font-size: 14px !important;
    }

.chart .outer-klok p.meting2-verschil {
    position: absolute;
    width: 100%;
    top: 131%;
    text-align: center;
    font-size: 14px !important;
}

    .chart .outer-klok p.meting2-verschil span {
        font-size: 14px !important;
    }

.chart .outer-klok p.meting2-score {
    text-align: center;
    position: absolute;
    top: 140%;
    width: 100%;
    font-size: 14px !important;
}

    .chart .outer-klok p.meting2-score span {
        font-size: 14px !important;
    }

.outer-klok .percent-0,
.outer-klok .percent-0 span,
.outer-klok .percent-50,
.outer-klok .percent-50 span,
.outer-klok .percent-100,
.outer-klok .percent-100 span {
    font-size: 16px !important;
}

.chart-container .beschrijving {
    margin: 40px auto 10px auto;
    text-align: left;
    max-width: 600px;
    color: #000;
}

.chart-container .grafiek-titel {
    font-size: 16px;
    color: #e95f2b;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0;
}

.ge-content {
    font-size: 16px;
}

    .ge-content .code {
        display: none;
    }

    .ge-content .code {
        display: none;
    }

.jstree-clicked {
    font-weight: bold;
}

.container-
.chart-info,
.container-dataanalyse .beschrijving {
    display: none;
}


/* 
//    
//  
//   RAPPORTAGE
//
//
*/


.ge-mainControls .ge-addRowGroup .btn.btn-primary {
    background-color: var(--blue) !important;
}

.ge-mainControls .ge-addRowGroup .ge-row-icon .column {
    background-color: rgba(255,255,255,.3);
}

.ge-canvas.ge-editing .column > .ge-tools-drawer {
    background-color: var(--bluelighter);
}

.ge-canvas.ge-editing .column {
    border-color: var(--bluelight);
}

    .ge-canvas.ge-editing .column > .ge-tools-drawer a {
        color: var(--bluelight);
    }

    .ge-canvas.ge-editing .column > .ge-tools-drawer > a.ge-add-row,
    .ge-canvas.ge-editing .row > .ge-tools-drawer > a.ge-add-column {
        color: var(--blue);
    }


/* 
//    
//  
//   GRAFIEKEN
//
//
*/

.row {
    page-break-inside: avoid;
}

.pagina,
.page-end-after {
    page-break-after: always;
}

.chart canvas.empty {
    background: url(/images/favicon.png) no-repeat;
    background-position: center;
    width: 100%;
    margin-top: 100px;
}

.chart-info {
}

.chart-info,
.chart-warning {
    position: relative;
    padding: 7.5px 10px 10px 40px;
    text-align: left;
    border-radius: 5px;
    border: 1px solid var(--bluelight);
    background-color: #fff;
    font-size: 13px;
    line-height: 20px;
    color: var(--bluelight);
}

    .chart-info:before,
    .chart-warning:before {
        content: "i";
        width: 24px;
        height: 24px;
        border-radius: 5px 0 5px;
        background-color: var(--bluelight);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        line-height: 24px;
        text-align: center;
    }

    .chart-info:before {
        font-family: 'Times New Roman', serif;
    }

.chart-warning {
    color: var(--orange);
    border-color: var(--orange);
}

    .chart-warning:before {
        content: "!";
        background-color: var(--orange);
    }

    .chart-info strong,
    .chart-warning strong {
        text-transform: uppercase;
        display: block;
        font-size: 14px;
    }

    .chart-info + .chart-info,
    .chart-info + .chart-warning,
    .chart-warning + .chart-info,
    .chart-warning + .chart-warning {
        margin-top: 15px;
    }


/* 
//    
//  
//   INHOUDSOPGAVE
//
//
*/

body.dragging, body.dragging * {
    cursor: move !important;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ul.report-contents {
    margin: 0;
    padding: 0;
    counter-reset: item;
}

    ul.report-contents ol {
        margin: 0 0 0 15px;
        padding: 0;
    }

    ul.report-contents li {
        cursor: grab;
    }

        ul.report-contents li input {
            width: 15px;
            height: 15px;
            float: left;
            margin: 3px 8px 0 0;
            display: none;
        }

    ul.report-contents.select li input {
        display: block;
    }

    ul.report-contents li.placeholder {
        position: relative;
        /** More li styles **/
    }

        ul.report-contents li.placeholder:before {
            position: absolute;
            /** Define arrowhead **/
        }

    ul.report-contents .add {
        padding: 10px;
        margin-top: -10px;
        display: inline;
        position: absolute;
        font-size: 15px;
    }

        ul.report-contents .add:hover {
            color: #e95f2b;
            transform: scale(2,2);
            transition: all 1s ease-out;
        }


.outer-klok p {
    color: #000;
}

p.meting2-verschil,
p.meting2-score {
    color: #074F8E;
}

span.pos,
span.pos * {
    color: rgb(85,126,70) !important;
}

span.neg,
span.neg * {
    color: rgb(255,136,55) !important;
}

span.klein {
    font-size: 14px !important;
}

.page-title {
    width: 100%;
}

    .page-title h3 {
        font-size: 30px;
        color: var(--bluedark);
        font-family: "Oxygen", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 500;
        margin-bottom: 20px;
    }

.empty-data-cache {
    position: absolute;
    top: 25px;
    right: 30px;
}

body {
    background-color: #f2f9ff;
}

#content {
    margin-left: 100px;
    margin-bottom: 30px;
}

.modernSidebar-nav.header {
    width: 100px;
    background-color: var(--blue);
}

    .modernSidebar-nav.header nav#modernSidebar {
        width: 100px;
    }

        .modernSidebar-nav.header nav#modernSidebar ul.menu-categories li.menu > a {
            height: 90px;
            border-bottom-color: rgba(255, 255, 255, .3);
        }

            .modernSidebar-nav.header nav#modernSidebar ul.menu-categories li.menu > a i {
                font-size: 20px;
            }

            .modernSidebar-nav.header nav#modernSidebar ul.menu-categories li.menu > a span {
                font-size: 12px;
            }

        .modernSidebar-nav.header nav#modernSidebar ul.menu-categories li.menu .submenu {
            left: 100px;
            background-color: var(--bluelight);
        }

            .modernSidebar-nav.header nav#modernSidebar ul.menu-categories li.menu .submenu .list-unstyled > li > a {
                color: #fff;
                font-size: 14px;
            }

.container-dataanalyse {
    position: relative;
    height: 100%;
}

.dataanalyse aside {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: calc(100% + 30px);
    z-index: 100;
    background-color: rgba(200,219,233, .9);
    padding: 15px;
    transform: translateX(-100%);
    transition: var(--transition-default);
}

    .dataanalyse aside.open {
        transform: translateX(0);
    }

    .dataanalyse aside h4 {
        color: var(--blue);
    }

    .dataanalyse aside .dataanalyse__filterrow {
        margin-bottom: 15px;
        max-width: 320px;
    }

.dataanalayse__open {
    position: absolute;
    top: 100px;
    right: -40px;
    width: 40px;
    height: 45px;
    border-radius: 0 10px 10px 0;
    border: none;
    background-color: #c8dbe9;
}

    .dataanalayse__open span {
        width: 20px;
        height: 1px;
        background-color: var(--blue);
        position: absolute;
        top: 15px;
        left: 7.5px;
        z-index: 1;
        transition: var(--transition-default);
    }

        .dataanalayse__open span:nth-child(2) {
            top: 20px;
            left: 9px;
            width: 17px;
        }

        .dataanalayse__open span:nth-child(3) {
            top: 25px;
            left: 10.5px;
            width: 14px;
        }

        .dataanalayse__open span:nth-child(4) {
            top: 30px;
            left: 12px;
            width: 11px;
        }

.dataanalyse aside .dataanalayse__open:hover span:nth-child(1) {
    transform: translateY(-2px);
}

.dataanalyse aside .dataanalayse__open:hover span:nth-child(2) {
    transform: translateY(-1px);
}

.dataanalyse aside .dataanalayse__open:hover span:nth-child(3) {
    transform: translateY(0px);
}

.dataanalyse aside .dataanalayse__open:hover span:nth-child(4) {
    transform: translateY(2px);
}

.dataanalyse aside.open .dataanalayse__open span:nth-child(1) {
    top: 20px;
    left: 17px;
    width: 0;
}

.dataanalyse aside.open .dataanalayse__open span:nth-child(4) {
    top: 25px;
    left: 17px;
    width: 0;
}

.dataanalyse aside.open .dataanalayse__open span:nth-child(2),
.dataanalyse aside.open .dataanalayse__open span:nth-child(3) {
    top: 22px;
    left: 5px;
    width: 25px;
    transform: rotate(45deg);
}

.dataanalyse aside.open .dataanalayse__open span:nth-child(3) {
    transform: rotate(-45deg);
}

.dataanalyse aside.open .dataanalayse__open:hover span:nth-child(2),
.dataanalyse aside.open .dataanalayse__open:hover span:nth-child(3) {
    top: 22px;
    left: 3px;
    width: 28px;
}

.dataanalyse aside .treeview.widget-content {
    position: relative;
    top: unset;
    padding: 15px 15px 15px 20px;
    border-radius: 4px;
}

.dataanalyse aside .treeview li.hoofd-thema {
    padding-left: 0;
}

.dataanalyse aside .treeview .jstree-default {
    column-count: 3;
}

.dataanalyse aside .treeview li a {
    font-size: 14px;
    color: #888ea8;
    display: inline-block;
    padding: 1px 0;
    margin: 0 !important;
    box-shadow: none;
    position: relative;
}

    .dataanalyse aside .treeview li a.has--children:before {
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' width='15' height='15' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2363a3d5' d='m16.843 13.789c.108.141.157.3.157.456 0 .389-.306.755-.749.755h-8.501c-.445 0-.75-.367-.75-.755 0-.157.05-.316.159-.457 1.203-1.554 3.252-4.199 4.258-5.498.142-.184.36-.29.592-.29.23 0 .449.107.591.291 1.002 1.299 3.044 3.945 4.243 5.498z'/%3E%3C/svg%3E");
        width: 15px;
        height: 15px;
        position: absolute;
        top: 5px;
        left: -15px;
        transform: rotate(180deg);
        transition: var(--transition-default);
    }

    .dataanalyse aside .treeview li a.has--children.jstree-clicked:before {
        transform: rotate(0deg);
    }

    .dataanalyse aside .treeview li a:hover {
        color: var(--blue);
    }

.dataanalyse aside .treeview .jstree-default .jstree-clicked {
    background-color: transparent;
    color: var(--blue);
    display: inline-block;
}

.dataanalyse__active {
    color: var(--bluedark);
    margin-bottom: 15px;
}

    .dataanalyse__active span {
        font-weight: bold;
    }

.dataanalyse .layout-spacing {
    margin-top: 10px;
    margin-bottom: 0;
}

.dataanalyse__placeholder {
    display: flex;
    justify-content: center;
}

    .dataanalyse__placeholder > div {
        max-width: 600px;
        text-align: center;
        padding: 75px 0 50px;
    }

        .dataanalyse__placeholder > div svg {
            margin-bottom: 30px;
        }

.dataanalyse h3 {
    color: var(--blue);
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 45px;
    position: relative;
}

    .dataanalyse h3:after {
        content: "";
        width: 100px;
        height: 3px;
        position: absolute;
        bottom: -15px;
        left: calc(50% - 50px);
        background-color: var(--bluelight);
    }

.dataanalyse__charts {
    display: flex;
    flex-wrap: wrap;
}

.dataanalyse .thema-onderdeel {
    width: calc(50% - 15px);
    box-shadow: none;
    margin-bottom: 30px;
}

    .dataanalyse .thema-onderdeel:nth-child(odd) {
        margin-right: 30px;
    }

    .dataanalyse .thema-onderdeel .informatie div {
        display: none;
    }

    .dataanalyse .thema-onderdeel .informatie {
        text-align: left;
        position: absolute;
        top: 0px;
        right: 0;
        z-index: 1;
    }

        .dataanalyse .thema-onderdeel .informatie:hover div {
            display: block;
            width: 550px;
            background-color: var(--bluelighter);
            border-radius: 5px;
            padding: 10px;
            position: absolute;
            top: 30px;
            right: 0;
            font-size: 12px;
            z-index: 1;
        }

        .dataanalyse .thema-onderdeel .informatie .icon {
            cursor: help;
            display: block;
            width: 30px;
            height: 30px;
        }

        .dataanalyse .thema-onderdeel .informatie .icon svg {
            width: 100%;
            height: 100%;
        }

    .dataanalyse .thema-onderdeel .chart + .chart {
        margin-top: 60px;
    }

.dataanalyse .chart-container .grafiek-titel {
    font-size: 20px;
    text-align: left;
    margin-bottom: 15px;
}

.dataanalyse .chart-container .code {
    font-size: 12px;
    text-align: left;
    margin-bottom: 15px;
    display: none;
}