:root {
    --zoom: .85;
    --bs-spacer: calc(var(--bs-spacer) * var(--zoom)) !important;
    --shark-font-family: 'Red Hat Display', sans-serif !important;
}

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


html {
    overflow-y: scroll;
}

body {
    color: var(--body-text-color);
    font-size: max(calc(var(--zoom) * 14px), 14px);
    font-family: var(--shark-font-family);
}

@media (min-width: 1400px) {
    body {
        font-size: max(calc(var(--zoom) * 15px), 15px);
    }
}

body .text-gray {
    color: var(--text-gray);
}

.text-primary {
    color: var(--text-primary) !important;
}

.bg-primary {
    background-color: var(--bkg-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.border-secondary {
    border-color: var(--border-secondary) !important;
}

.border-black {
    border-color: var(--border-black-accent) !important;
}

a {
    color: var(--link-color);
}

@media (min-width: 576px) {
    #erp .form-control-search {
        min-width: calc(var(--zoom) * 220px);
    }
}

@media (min-width: 1600px) {
    #erp .form-control-search {
        min-width: calc(var(--zoom) * 400px);
    }
}

@media (max-width: 575px) {
    .input-group {
        --margin-bottom: 6px;
    }

    .input-group-text {
        font-size: calc(var(--zoom)* 14px);
    }
}

.input-group-icon {
    background-color: var(--bkg-white);
}

.header-search {
    display: none;
}

.btn-search {
    display: none;
}

@media (min-width: 992px) {
    .btn-search {
        display: block;
    }
}

@media (min-width: 1200px) {
    .header-search {
        display: flex;
    }

    .btn-search {
        display: none;
    }
}

.visibility-hidden {
    visibility: hidden;
}

.show-more {
    display: inline-block;
    color: var(--text-black-accent);
    border-bottom: 1px solid var(--border-black-accent);
    text-decoration: none;
}

    .show-more:hover {
        color: var(--link-color);
        border-color: var(--link-color);
    }

.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-disabled,
.btn-cancel {
    padding-top: calc(var(--zoom)*12px);
    padding-bottom: calc(var(--zoom)*12px);
    font-weight: 700;
    font-size: calc(var(--zoom)*17px);
    height: max(44px, calc(var(--zoom)* 44px)); /*zoom1=bestond niet, 52px uit bootstrap*/
    line-height: 0;
}

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-tertiary:hover,
    .btn-disabled:hover,
    .btn-cancel {
        color: var(--btn-hover-text-color);
    }

.btn-primary {
    background-color: var(--btn-primary-bkg-color);
    border-color: var(--btn-primary-border-color);
    color: var(--btn-primary-text-color);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary .active,
    .btn-primary.show {
        background-color: var(--btn-primary-hover-bkg-color) !important;
        border-color: var(--btn-primary-hover-border-color) !important;
        color: var(--btn-primary-hover-text-color) !important;
    }

.btn-secondary {
    background-color: var(--btn-secondary-bkg-color);
    border-color: var(--btn-secondary-border-color);
    color: var(--btn-secondary-text-color);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active,
    .btn-secondary .active,
    .btn-secondary.show {
        background-color: var(--btn-secondary-hover-bkg-color) !important;
        border-color: var(--btn-secondary-hover-border-color) !important;
        color: var(--btn-secondary-hover-text-color) !important;
    }

.btn-tertiary {
    background-color: var(--btn-tertiary-bkg-color);
    border-color: var(--btn-tertiary-border-color);
    color: var(--btn-tertiary-text-color);
}

    .btn-tertiary:hover,
    .btn-tertiary:focus,
    .btn-tertiary:active,
    .btn-tertiary.active,
    .btn-tertiary .active,
    .btn-tertiary.show {
        background-color: var(--btn-tertiary-hover-bkg-color) !important;
        border-color: var(--btn-tertiary-hover-border-color) !important;
        color: var(--btn-tertiary-hover-text-color) !important;
    }

.btn-disabled {
    background-color: var(--btn-disabled-bkg-color);
    border-color: var(--btn-disabled-border-color);
    color: var(--btn-disabled-text-color);
}

    .btn-disabled:hover,
    .btn-disabled:focus,
    .btn-disabled:active,
    .btn-disabled.active,
    .btn-disabled .active,
    .btn-disabled.show {
        background-color: var(--btn-disabled-hover-bkg-color) !important;
        border-color: var(--btn-disabled-hover-border-color) !important;
        color: var(--btn-disabled-hover-text-color) !important;
        cursor: not-allowed;
    }

.btn-gray {
    color: var(--btn-gray-text-color);
    background-color: var(--btn-gray-bkg-color);
    border-color: var(--btn-gray-border-color);
}

    .btn-gray:focus,
    .btn-gray:hover,
    .btn-gray:active,
    .btn-gray.active,
    .btn-gray .active,
    .btn-gray.show {
        color: var(--btn-gray-hover-text-color) !important;
        background-color: var(--btn-gray-hover-bkg-color) !important;
        border-color: var(--btn-gray-hover-border-color) !important;
    }

.btn-cancel {
    color: var(--btn-cancel-text-color);
    background-color: var(--btn-cancel-bkg-color);
    border-color: var(--btn-cancel-border-color);
}

    .btn-cancel:focus,
    .btn-cancel:hover,
    .btn-cancel:active,
    .btn-cancel.active,
    .btn-cancel .active,
    .btn-cancel.show {
        color: var(--btn-cancel-hover-text-color) !important;
        background-color: var(--btn-cancel-hover-bkg-color) !important;
        border-color: var(--btn-cancel-hover-border-color) !important;
    }

.btn-transparent {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

    .btn-transparent:focus,
    .btn-transparent:hover,
    .btn-transparent:active,
    .btn-transparent.active,
    .btn-transparent .active,
    .btn-transparent:first-child:active,
    .btn-transparent.show {
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

.btn-outline-primary.btn,
.btn-outline-secondary.btn,
.btn-outline-tertiary.btn {
    --bs-btn-bg: var(--btn-outline-bkg-color);
    --bs-btn-hover-color: var(--btn-outline-bkg-color);
    --bs-btn-active-color: var(--btn-outline-bkg-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--btn-primary-bkg-color);
    --bs-btn-border-color: var(--btn-primary-border-color);
    --bs-btn-hover-bg: var(--btn-primary-bkg-color);
    --bs-btn-hover-border-color: var(--btn-primary-border-color);
    --bs-btn-active-bg: var(--btn-primary-bkg-color);
    --bs-btn-active-border-color: var(--btn-primary-border-color);
    --bs-btn-disabled-color: var(--btn-primary-bkg-color);
    --bs-btn-disabled-border-color: var(--btn-primary-border-color);
}

.btn-outline-secondary {
    --bs-btn-color: var(--btn-secondary-bkg-color);
    --bs-btn-border-color: var(--btn-secondary-border-color);
    --bs-btn-hover-bg: var(--btn-secondary-bkg-color);
    --bs-btn-hover-border-color: var(--btn-secondary-border-color);
    --bs-btn-active-bg: var(--btn-secondary-bkg-color);
    --bs-btn-active-border-color: var(--btn-secondary-border-color);
    --bs-btn-disabled-color: var(--btn-secondary-bkg-color);
    --bs-btn-disabled-border-color: var(--btn-secondary-border-color);
}

.btn-outline-tertiary {
    --bs-btn-color: var(--btn-tertiary-bkg-color);
    --bs-btn-border-color: var(--btn-tertiary-border-color);
    --bs-btn-hover-bg: var(--btn-tertiary-bkg-color);
    --bs-btn-hover-border-color: var(--btn-tertiary-border-color);
    --bs-btn-active-bg: var(--btn-tertiary-bkg-color);
    --bs-btn-active-border-color: var(--btn-tertiary-border-color);
    --bs-btn-disabled-color: var(--btn-tertiary-bkg-color);
    --bs-btn-disabled-border-color: var(--btn-tertiary-border-color);
}

.btn-outline-nohover {
    --bs-btn-hover-bg: var(--btn-outline-bkg-color);
    --bs-btn-active-bg: var(--btn-outline-bkg-color);
}

.btn-outline-primary.btn-outline-nohover.btn:hover,
.btn-outline-primary.btn-outline-nohover.btn:focus,
.btn-outline-primary.btn-outline-nohover.btn:active {
    border-color: var(--btn-primary-border-color);
}

.btn-outline-secondary.btn-outline-nohover.btn:hover,
.btn-outline-secondary.btn-outline-nohover.btn:focus,
.btn-outline-secondary.btn-outline-nohover.btn:active {
    border-color: var(--btn-secondary-border-color);
}

.btn-outline-tertiary.btn-outline-nohover.btn:hover,
.btn-outline-tertiary.btn-outline-nohover.btn:focus,
.btn-outline-tertiary.btn-outline-nohover.btn:active {
    border-color: var(--btn-tertiary-border-color);
}



/*.btn-outline-primary {
    border-color: var(--btn-primary-border-color);
    color: var(--btn-primary-bkg-color);
    background-color: var(--btn-outline-bkg-color);
}

.btn-outline-secondary {
    border-color: var(--btn-secondary-border-color);
    color: var(--btn-secondary-bkg-color);
    background-color: var(--btn-outline-bkg-color);
}

.btn-outline-tertiary {
    border-color: var(--btn-tertiary-border-color);
    color: var(--btn-tertiary-bkg-color);
    background-color: var(--btn-outline-bkg-color);
}*/

.border-gray {
    border-color: var(--border-gray);
}

.dropdown-toggle::after {
    display: none !important;
}

.dropdown-menu {
    z-index: 9002;
    font-size:0.9rem/*zoom1=bestond niet*/
}

.dropdown-chevron-disabled{
    opacity: 0.5;
}

dropdown-item:active,
.dropdown-item.active {
    background-color: var(--dropdown-item-active-bkg-color);
}

.btn {
    box-shadow: none;
}

    .btn:focus,
    .btn:hover,
    .form-control:focus,
    .form-control:active:focus {
        box-shadow: none;
        border-color: var(--bts-border-color);
        outline: none;
    }

button,
.accordion-button,
.accordion-button:focus,
.accordion-button:not(.collapsed) {
    box-shadow: none;
    border: none;
    outline: none;
}

.btn-lg {
    padding: calc(var(--zoom) * 14px);
}

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

.form-control {
    --margin-bottom: 8px; /* Mogelijk uncommenten */
    padding: 12px 14px;
}

    .form-control.form-error {
        border-color: var(--error-color);
    }

.form-error-message {
    color: var(--error-color);
    --display: block; /* mogelijk uncommenten */
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-4 {
    flex: 4;
}

.flex-5 {
    flex: 5;
}

.flex-6 {
    flex: 6;
}

.flex-7 {
    flex: 7;
}

.flex-8 {
    flex: 8;
}

.flex-9 {
    flex: 9;
}

.flex-10 {
    flex: 10;
}

.flex-1-1-0 {
    flex: 1 1 0;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.bg-gray {
    background-color: var(--bkg-gray);
}

.mb-6 {
    margin-bottom: 6rem !important; /* !important, anders werkt het niet met de bootstrap varianten*/
}

.w-46px {
    width: calc(var(--zoom)*46px);
}

.w-68px {
    width: calc(var(--zoom)*68px);
}

.w-70px {
    width: calc(var(--zoom)*70px);
}

.w-80px {
    width: calc(var(--zoom)*80px);
}

.w-90px {
    width: calc(var(--zoom)*90px);
}

.w-100px {
    width: calc(var(--zoom)*100px);
}

.w-110px {
    width: calc(var(--zoom)*110px);
}

.w-120px {
    width: calc(var(--zoom)*120px);
}

.w-160px {
    width: calc(var(--zoom)*96px);
}

.w-200px {
    width: calc(var(--zoom)*126px);
}

.mw-200px {
    min-width: calc(var(--zoom)*126px);
}

.w-270px {
    width: calc(var(--zoom)*196px);
}

.w-340px {
    width: calc(var(--zoom)*266px);
}

@media (min-width: 576px) {
    .w-160px {
        width: calc(var(--zoom)*112px);
    }

    .w-200px {
        width: calc(var(--zoom)*142px);
    }

    .mw-200px {
        min-width: calc(var(--zoom)*142px);
    }

    .w-270px {
        width: calc(var(--zoom)*212px);
    }

    .w-340px {
        width: calc(var(--zoom)*282px);
    }
}

@media (min-width: 1200px) {
    .w-160px {
        width: calc(var(--zoom)*160px);
    }

    .w-200px {
        width: calc(var(--zoom)*200px);
    }

    .mw-200px {
        min-width: calc(var(--zoom)*200px);
    }

    .w-270px {
        width: calc(var(--zoom)*270px);
    }

    .w-340px {
        width: calc(var(--zoom)*340px);
    }
}

.h-68px {
    height: calc(var(--zoom)*68px);
}

.h-80px {
    height: calc(var(--zoom)*80px);
}

.login-left {
    padding-left: 20px;
    padding-right: 20px;
}

.login-form {
    width: 100%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 40px;
}

.login-logo {
    padding-top: 60px;
    padding-bottom: 60px;
}

    .login-logo img {
        max-width: 180px;
    }

.login-welcome {
    padding-bottom: 240px;
}

.login-copyright-wrapper {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
}

.login-pass-forget:hover {
    cursor: pointer;
    text-decoration: underline;
    color: var(--link-hover-color);
}

@media (min-width: 768px) {
    .login-left {
        width: 50%;
        min-height: 100vh;
        padding-left: 80px;
        padding-right: 80px;
    }

    .login-right {
        width: 50%;
    }

    .login-form {
        width: 75%;
        padding: 0;
        margin-top: 0;
    }

    .login-copyright-wrapper {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .login-copyright {
        width: 75%;
    }
}

@media (min-width: 1400px) {
    .login-left {
        width: 60%;
        padding-left: 160px;
        padding-right: 160px;
    }

    .login-right {
        width: 40%;
    }

    .login-form {
        width: 50%;
    }

    .login-copyright {
        width: 50%;
    }
}

.header-navigation {
    position: sticky;
    /*top: 0; Deze later op -1px*/
    width: 100%;
}

    .header-navigation .k-tabstrip-items li {
        margin-right: 2rem;
    }

.header-top {
    background-color: var(--header-bkg-color);
    z-index: 9102;
}

    @media (min-width: 992px) {
        .header-top {
            display: flex;
            flex-direction: row-reverse;
            align-items: start;
            justify-content: space-between;
            padding-top: 1.3rem;/*zoom1=1.5rem*/
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    }

.header-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    background-color: var(--header-top-nav-bkg-color);
    z-index: 9002;
    flex-direction: column;
}

.header-top-nav-base {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    align-items: center;
}

.header-top-nav-mobile {
    display: none;
    align-items: center;
    flex-direction: column;
    background-color: var(--header-bkg-color);
}

    .header-top-nav-mobile .searchbar {
        padding: 0.5rem 1rem;
        background-color: var(--search-bar-mobile-bkg-color);
    }

    .header-top-nav-mobile .searchbar input {
        appearance: none;
        border: 0;
    }

    .header-top-nav-mobile .language-menu-bar {
        padding: 0.5rem 1rem;
        background-color: var(--header-lang-menu-bar-mobile-bkg-color);
    }

        .header-top-nav-mobile .language-menu-bar .menubar i {
            padding: 0rem 0.85rem;
            color: var(--header-lang-menu-bar-mobile-help-color);
            cursor: pointer;
        }

    @media (min-width: 992px) {
        .header-top-nav {
            position: relative;
            background-color: var(--header-bkg-color);
            height: initial;
        }

        .header-top-nav-base {
            align-items: normal;
            position: relative;
            background-color: var(--header-bkg-color);
            padding-left: 0;
            padding-right: 0;
        }
    
        .header-top-nav-mobile{
            display: none !important;
        }
    }

.header-top-content {
    padding: 90px 1.5rem 1px;
    background-color: var(--header-bkg-color);
}

@media (min-width: 992px) {
    .header-top-content {
        padding: 0;
    }
}

.header-navigation-sticky {
    top: 64px;
    background-color: var(--header-bkg-color);
}

@media (min-width: 992px) {
    .header-navigation-sticky {
        top: -1px;
    }
}

.header-bars .fa-bars {
    padding: 0.5rem 0.5rem;
    border-radius: 0.25rem;
}

.header-bars:hover {
    cursor: pointer;
}

@media (min-width: 992px) {
    .header-bars {
        display: none;
    }
}

.sidebar {
    position: fixed;
    top: 180px;
    left: 0;
    bottom: 0;
    flex: none;
    background-color: var(--sidebar-bkg-color);
    z-index: 9003;
    display: none;
}

.sidebar-sticky{
    display: flex;
    height: 100%;
}

.sidebar-logo-navigation {
    flex: 1;
}

@media (min-width: 992px) {
    .sidebar {
        position: relative;
        top: 0;
        display: block;
    }

    .sidebar-sticky {
        position: sticky;
        top: 0;
        display: block;
        height: initial;
    }

    .sidebar-logo-navigation {
        height: 100vh;
    }

    .sidebar.collapsed {
        width: 60px;
    }

        .sidebar.collapsed .menu-text {
            display: none;
        }

        .sidebar.collapsed .sidebar-navigation a,
        .sidebar.collapsed .sidebar-navigation .icon {
            justify-content: center;
        }

        .sidebar.collapsed .sidebar-navigation li a {
            padding: 0;
        }

        .sidebar.collapsed .sidebar-logo {
            display: none;
        }

        .sidebar.collapsed .sidebar-logo-r {
            display: block;
            margin-top: 28px;
            margin-bottom: 48px;
            text-align: center;
        }
}

.sidebar.active {
    left: 0;
    right: 0;
    display: block;
}

@media (max-width: 991px) {
    .sidebar.active ~ .headercontent #flyOut-at-top,
    .sidebar.active ~ .headercontent #helpPanel-at-top {
        display: none !important;
    }

    .sidebar.active ~ .headercontent .header-top-nav-mobile {
        display: flex;
    }

    .sidebar.active ~ .headercontent .header-top-nav {
        height: 160px;
    }
}


@media (min-width: 1400px) {
    .sidebar {
        width: 250px;/*zoom1=260px*/
    }
}

.sidebar-logo {
    display: none;
    margin-top: 28px;
    margin-left: 20px;
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .sidebar-logo {
        display: block;
    }
}

@media (min-width: 1400px) {
    .sidebar-logo {
        margin-left: 46px;
        margin-bottom: 40px;
    }
}

.sidebar-logo img {
    max-width: 120px;
}

@media (min-width: 1400px) {
    .sidebar-logo img {
        max-width: 144px;
    }
}

.sidebar-logo-r {
    display: none;
}

.sidebar-navigation {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sidebar-navigation li {
        display: block;
    }

        .sidebar-navigation li a {
            display: flex;
            align-items: center;
            height: 58px;
            padding: 0 24px;
            color: var(--sidebar-item-text-color);
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;
        }

@media (min-width: 992px) {
    .sidebar-navigation li a {
        padding: 0 20px;
        font-size: 14px;
    }
}

@media (min-width: 1400px) {
    .sidebar-navigation li a {
        padding: 0 10px 0 26px; /*zoom1=0 46px*/
        font-size: 17px;
    }
}

.sidebar-navigation li a:hover {
    color: var(--sidebar-item-hover-text-color);
    background-color: var(--sidebar-item-hover-bkg-color);
}

.sidebar-navigation .icon {
    display: flex;
    width: 32px;
    margin-right: 24px;
}

    .sidebar-navigation .icon img {
        max-width: 100%;
    }

@media (min-width: 992px) {
    .sidebar-navigation .icon {
        width: 26px;
        margin-right: 6px;
    }
}

@media (min-width: 1400px) {
    .sidebar-navigation .icon {
        width: 44px;
        margin-right: 0;
    }
}

.sidebar-line {
    height: 1px;
    margin: 0 20px;
    background-color: var(--sidebar-line-color);
}

.sidebar.collapsed .sidebar-line {
    margin: 0 6px;
}

@media (min-width: 1400px) {
    .sidebar-line {
        margin-left: 26px; /*zoom1=46px*/
        margin-right: 26px; /*zoom1=46px*/
    }
}

.step-icon:hover .bg-icon {
    background-color: var(--dashboard-icon-hover-bkg-color);
}

.bg-icon {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 62px;
    margin-right: 8px;
    border-radius: 4px;
    background-color: var(--dashboard-icon-bkg-color);
}

.sidebar-activities {
    --activities-top: calc(var(--tabstrip-items-top) + var(--tabstrip-items-height));
    position: sticky;
    top: var(--activities-top);
    bottom: auto;
    right: auto;
    align-self: flex-end;
    height: calc(100vh - var(--activities-top));
    margin-bottom: calc(var(--activities-top) - 100vh);
}

.sidebar-activities {
    --activities-width: min(500px, calc(100vw - 86px));
    --activities-right-offset: 86px;
    margin-right: calc(-1 * (var(--activities-width) + var(--activities-right-offset)));
    transition: none;
    background: var(--sidebar-activities-bkg);
    box-shadow: 0px 0px 10px var(--sidebar-activities-boxshadow-color);
}

@media (min-width: 768px) {
    .padding-right {
        padding-right: 86px !important;
    }
}

.sidebar-activities.active {
    margin-right: calc(-1 * var(--activities-right-offset));
}

.toggle-sidebar-activities .fas {
    transition: 250ms;
}

.sidebar-activities.active .toggle-sidebar-activities .fas {
    transform: rotate(180deg);
}

.switch-col-width {
    width: 100%;
}

@media (min-width: 1200px) {
    .switch-col-width {
        width: 50%;
    }
}

.switch-col-width.active {
    width: 100%;
}

#activities {
    width: var(--activities-width);
}

@keyframes show-sidebar-activities {
    from {
        transform: translateX(var(--activities-width));
    }

    to {
        transform: translateX(0);
    }
}

@keyframes hide-sidebar-activities {
    from {
        transform: translateX(calc(-1 * var(--activities-width)));
    }

    to {
        transform: translateX(0);
    }
}

.sidebar-activities.activity-toggled.active {
    animation: show-sidebar-activities 250ms ease both;
}

.sidebar-activities.activity-toggled:not(.active) {
    animation: hide-sidebar-activities 250ms ease both;
}

@media (max-width: 768px) {
    .sidebar-activities {
        --activities-width: calc(100vw - 86px);
    }

    .sidebar-activities.active {
        width: 100vw;
    }

    .sidebar-activities .activity {
        width: 100%;
    }
}

.toggle-sidebar-activities:hover {
    cursor: pointer;
}

.max-w-logo {
    max-width: 180px;
}

.activity {
    width: 420px;
}

.activity-timeline {
    flex: 1 1 auto;
    min-height: 0;
}

.activity-list {
    display: grid;
    grid-template-rows: repeat(auto-fill, 60px);
    grid-auto-rows: 0;
    row-gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.activity-slot {
    min-height: 0;
    overflow: hidden;
}

    .activity-slot .activity {
        height: 100%;
    }

.activity-detail {
    font-size: 0.875rem;
    color: var(--text-black-accent);
}

.circle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    width: 34px;
    height: 34px;
    font-weight: 700;
    color: var(--circle-color);
    border-radius: 100%;
    box-shadow: inset 0px 3px 6px var(--circle-boxshadow-color);
}

.yellow-circle {
    background-color: var(--yellow-circle-bkg-color);
}

.green-circle {
    background-color: var(--green-circle-bkg-color);
}

.line:not(td) {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1px;
    background-color: var(--line-bkg-color);
}

.check {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    transform: translateY(80%);
    width: 46px;
    height: 46px;
    font-size: calc(var(--zoom)*18px);
    color: var(--check-text-color);
    background-color: var(--check-bkg-color);
    border-radius: 100%;
    border: 1px solid var(--check-border-color);
}


.line-green, .check-green {
    background-color: var(--green-circle-bkg-color);
    border-color: var(--green-circle-bkg-color);
    color: var(--circle-color);
}

.check-green {
}

.accordion-item {
    margin-bottom: 8px;
}

.accordion-body {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
}

.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='%23212529'%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");
}

.form-check-input:checked {
    background-color: var(--cbx-checked-bkg-color);
    border-color: var(--cbx-border-color);
}

.form-check-input.green:checked {
    background-color: var(--cbx-checked-green-bkg-color);
    border-color: var(--cbx-green-border-color);
}

.form-check-checkbox {
    display: inline-block;
    margin-left: -1.5em;
}

.form-check-label {
    display: inline-block;
}

.form-check-input {
    margin-top: 0;
    min-width: 26px; /* Veranderd van width naar min-width */
    min-height: 26px; /* Veranderd van height naar min-height */
    --min-width: 18px;
    --min-height: 18px;
    box-shadow: none;
    border-color: var(--cbx-border-color);
}

    .form-check-input.green {
        border-color: var(--cbx-green-border-color);
    }

    .form-check-input:focus {
        box-shadow: none;
        border-color: var(--cbx-border-color);
    }

    .form-check-input.green:focus {
        border-color: var(--cbx-green-border-color);
    }

.form-radio .form-check-input {
    min-width: 22px; /* Veranderd van width naar min-width */
    min-height: 22px; /* Veranderd van height naar min-height */
    background-color: var(--rdo-bkg-color);
    border-color: var(--rdo-border-color);
}

    .form-radio .form-check-input:checked,
    .form-radio .form-check-input:focus {
        border-color: var(--rdo-checked-border-color);
        background-color: var(--rdo-checked-bkg-color);
    }

.form-check-input[type="radio"] + label {
    margin-left: 0.25rem;
}

.fs-4 {
    font-size: 1rem;
}

@media (min-width: 1400px) {
    .fs-4 {
        font-size: 1.5rem;
    }
}

.h1 {
    font-size: calc(var(--zoom)*20px);
}

.h2 {
    font-size: calc(var(--zoom)*18px);
}

.h3 {
    font-size: calc(var(--zoom)*18px);
}

.h4 {
    margin-bottom: 0;
    font-size: calc(var(--zoom)*16px);
}


@media (min-width: 1200px) {
    .h1 {
        font-size: calc(var(--zoom)*20px);
    }

    .h2 {
        font-size: calc(var(--zoom)*18px);
    }

    .h3 {
        font-size: calc(var(--zoom)*18px);
    }

    .h4 {
    }
}

@media (min-width: 1400px) {
    .h1 {
        font-size: calc(var(--zoom)*22px);
    }

    .h2 {
        font-size: calc(var(--zoom)*20px);
    }

    .h3 {
    }

    .h4 {
        font-size: calc(var(--zoom)*18x);/*zoom1=18px*/
    }
}

@media (min-width: 1600px) {
    .h1 {
        font-size: calc(var(--zoom)*26px);
    }

    .h2 {
        font-size: calc(var(--zoom)*22px);
    }

    .h3 {
    }

    .h4 {
    }
}

ul li a {
    color: var(--link-color);
}

    ul li a:hover {
        color: var(--link-hover-color);
    }

.z-10 {
    z-index: 10;
}

.z-50 {
    z-index: 50;
}

.z-1021 {
    z-index: 1021;
}

.z-10021 {
    z-index: 10021;
}

@media (min-width: 1600px) {
    .col-xxxl-4 {
        width: 33.333333%;
    }
}

.main-sidebar.hide-manuals {
    display: grid;
    grid-template-rows: 1fr auto;
}

    .main-sidebar.hide-manuals .manuals {
        display: none;
    }

    .main-sidebar .manuals ul li a:hover {
        color: var(--link-hover-color);
    }

@media (min-width: 1600px) {
    .main-sidebar {
        padding-left: 40px;
    }
}

.hidden-mobile {
    display: none;
}

@media (min-width: 992px) {
    .hidden-mobile {
        display: inline-block;
    }
}

.table-wrapper {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.max-w-full {
    max-width: 100%;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 0.75rem;
}

.table > :not(:first-child) {
    border-top: 2px solid var(--table-primary-border-color);
}

@media (max-width: 1599px) {
    .table {
    }
}

.table-wrapper {
    overflow-x: auto;
}

.table {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.table-primary {
    --bs-table-bg: var(--table-primary-bkg-color);
    --bs-table-striped-bg: var(--table-primary-bkg-color);
    --bs-table-striped-color: var(--table-primary-bkg-color);
    --bs-table-active-bg: var(--table-primary-bkg-color);
    --bs-table-active-color: var(--table-primary-bkg-color);
    --bs-table-hover-bg: var(--table-primary-bkg-color);
    --bs-table-hover-color: var(--table-primary-bkg-color);
    --bs-table-color: var(--table-primary-th-text-color);
    border-color: var(--table-primary-border-color);
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-weight: 700;
    color: var(--page-link-text-color);
    border-color: var(--page-link-color);
    margin: 0 4px;
}

    .page-link:hover {
        color: var(--page-link-hover-text-color);
        background-color: var(--page-link-hover-color);
        border-color: var(--page-link-hover-color);
        cursor: pointer;
    }

.page-item.active .page-link {
    background-color: var(--page-link-hover-color);
    border-color: var(--page-link-hover-color);
}