::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
}

.main-breadcrumb-pre-filler {
    display: none;
    width: 1px;
}

.no-breadcrumb .main-breadcrumb-pre-filler {
    padding-bottom: 0;
}

@media screen and (min-width: 661px) {

    .header-is-offscreen .main-breadcrumb-pre-filler {
        display: block;
    }

    .header-is-offscreen .main-breadcrumb {
        position: fixed;
        top: 0;
        z-index: 8;
        background: white;
        width: 100%;
        max-width: 100%;
    }

    .header-is-offscreen.has-right.has-left .main-breadcrumb {
        width: calc(100% - 300px);
        max-width: calc(100% - 300px);
    }

    .header-is-offscreen.has-breadcrumb .main-content-header {
        margin-top: 0;
    }

    .header-is-offscreen.has-left .main-content,
    .header-is-offscreen.has-right .main-content {
        min-height: 100vh;
    }

    .header-is-offscreen.has-footer.has-left .main-middle-container,
    .header-is-offscreen.has-footer.has-right .main-middle-container {
        min-height: calc(100vh - 100px);
    }

    .has-left .main-left,
    .has-right .main-right {
        min-height: 100vh;
    }

    .has-right .main-right,
    .has-left .main-left {
        max-height: 100vh;
        overflow-x: auto;
    }

    .header-is-offscreen.has-right .main-right,
    .header-is-offscreen.has-left .main-left {
        min-height: 0;
    }
}

@media screen and (min-width: 1201px) {
    .header-is-offscreen.has-left .main-middle-container {
        margin-left: 300px;
    }

    .header-is-offscreen .main-left {
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

@media screen and (min-width: 1025px) {
    .header-is-offscreen .main-right {
        position: fixed;
        z-index: 10;
        top: 0;
        right: 0;
        height: 100vh;
        overflow-y: auto;
    }

    /* Speciaal voor de doorlooptesten, rechterkant niet vastzetten, scrollIntoView werkt niet in een fixed div */
    .env-test .header-is-offscreen .main-right {
        position: relative;
        height: auto;
        max-height: none;
        z-index: 0;
    }
}

@media screen and (max-width: 1440px) {

    .header-is-offscreen.has-right.has-left .main-breadcrumb {
        width: calc(100% - 250px);
        max-width: calc(100% - 250px);
    }

    .header-is-offscreen.has-left .main-middle-container {
        margin-left: 250px;
    }
}

@media screen and (max-width: 1200px) {
    .header-is-offscreen.has-right .main-breadcrumb,
    .header-is-offscreen.has-left .main-breadcrumb,
    .header-is-offscreen.has-right.has-left .main-breadcrumb {
        width: 100vw;
        max-width: 100vw;
    }

    .header-is-offscreen.has-left .main-middle-container {
        margin-left: 0;
    }
}

/*@media screen and (max-width: 1024px) {*/
    /*.header-is-offscreen.has-right .main-breadcrumb,*/
    /*.header-is-offscreen.has-left .main-breadcrumb,*/
    /*.header-is-offscreen.has-right.has-left .main-breadcrumb {*/
        /*width: 100vw;*/
        /*max-width: 100vw;*/
    /*}*/
/*}*/

/*
    Deze directives staan hier voor de doorlooptesten.
    Selenium klikt anders vrijwel altijd op de header in plaats van de knoppen.
*/
.header-is-offscreen.automated-tests-running .main-breadcrumb {
    position: static;
}

.header-is-offscreen.automated-tests-running .main-breadcrumb-pre-filler {
    display: none;
    width: 1px;
}