html {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.nav-item {
    display: flex;
    align-items: center;
}

body {
    display: flex;
    flex-direction: row;
}

.auth-divider:after, .auth-divider:before {
    border-top: thin solid #e5eaef;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    width: 100%;
    left: 0%;
    z-index: 0;
}

:root {
    /*   color variables */
    --clr-gray150: #f4f6fb;
    --clr-gray300: #e1e5ee;
    --radius: 0.2rem;
}

button {
    cursor: pointer;
}

@media (max-width: 1150px) {
    body {
        flex-direction: column;
    }

    nav.desktop-menu {
        display: none;
        margin: 0;
        z-index: 10002;
        position: fixed;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        top: 0;
    }

    .between-col {
        flex-direction: column;
        align-items: center;
    }

    .between-reverse-col {
        flex-direction: column-reverse;
        align-items: center;
    }

    .between-full {
        width: 100%;
    }

    .between-py {
        padding-top: calc(var(--spacing) * 12);
        padding-bottom: calc(var(--spacing) * 12);
    }

    nav.mobile-menu {
        display: block;
        z-index: 10001;
    }

    .menu-shadow {
        display: block !important;
    }

    .max-toolbar {
        max-height: calc(100vh - 120px) !important;
    }

    .max-toolbar-adresboek {
        max-height: calc(100vh - 228px) !important;
    }

    .between-half {
        width: 50%;
    }

    .planning-wrapper {
        max-height: calc(100vh - 120px) !important;
    }

    .between-height-50 {
        height: 50vh;
    }

}

@media (max-width: 950px) {
    .left-header {
        position: relative !important;
    }
}

@media (max-width: 840px) {

    .inherit {
        width: inherit;
    }

}

@media (max-width: 670px) {
    .after-col {
        flex-direction: column;
        align-items: center;
    }

    .after-max-half-screen-height {
        max-height: 50vh;
    }

    .settings-wrapper {
        height: auto;
    }

    .after-col-no-center {
        flex-direction: column;
        align-items: start;
    }

    .after-full {
        width: 100%;
    }

    .max-toolbar {
        max-height: none !important;
    }

    .max-toolbar-adresboek {
        max-height: none !important;
    }

    .no-max-height {
        max-height: none !important;
    }

    .after-fullH {
        height: auto;
    }

    .height-100 {
        height: 100%;
    }

    .after-reverse-col {
        flex-direction: column-reverse;
        align-items: center;
    }

    .after-end {
        justify-content: flex-end;
    }

}

main, nav.mobile-menu {
    max-width: -webkit-fill-available;
}

nav {
    overflow: hidden;
}
.body {
    overflow-y: auto;
}

nav:hover .body {
    overflow-y: visible;
    overflow-y: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body:-webkit-scrollbar {
    width: 8px; /* width of the entire scrollbar */
}

body:-webkit-scrollbar-track {
    background: transparent; /* color of the tracking area */
}

body:-webkit-scrollbar-thumb {
    background-color: #ccc; /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
    border: 3px solid transparent; /* creates padding around scroll thumb */
}

/* Hide scrollbar for Firefox */
body {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.menu-shadow {
    background: #000;
    height: 100%;
    left: 0;
    opacity: .2;
    position: fixed;
    top: 0;
    transition: opacity .2s cubic-bezier(.4,0,.2,1);
    width: 100%;
    z-index: 10001;
    display: none;
}

.hamburger {
    cursor:pointer;
}

.selectedDropdown:hover span {
    color:white !important;
}

.nonSelectedDropdown:hover span {
    color:white !important;
}

textarea.no-resize {
    resize: none;     /* no drag-handle */
    min-height: 120px;   /* set the smallest height you’ll allow */
  }

  textarea {
    min-height: 42px;
    height: 64px;
    overflow-y: hidden;
    box-sizing: border-box;
    resize: none;
  }