.nav-wrapper nav {
    margin-top: 0;
}

.menu-button {
    color: black;
    padding: 0;
    border: none;
}

.menu-button:hover,
.menu-button:active {
    color: lightgrey;
}

.sidebar-menu-item {
    display: flex;
    flex: 1;
    align-items: center;
}

.row-title {
    flex: 1;
    text-align: start;
}

.offcanvas {
    max-width: 90%;
}

/*.mm-show {*/
/*    min-width: 280px;*/
/*    padding: 8px 0;*/
/*    margin-top: 0;*/
/*    border: 0;*/
/*    border-radius: 0 0 8px 8px;*/
/*    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);*/
/*}*/

/* =========================================================
   KV HUIZEN - DESKTOP MENU
   ========================================================= */


/* =========================================================
   1. BASIS
   ========================================================= */

.mod-menu_dropdown-metismenu,
.mod-menu_dropdown-metismenu ul,
.mod-menu_dropdown-metismenu li {
    box-sizing: border-box;
}

.mod-menu_dropdown-metismenu {
    margin: 0 !important;
    padding: 0 !important;
}

.mod-menu_dropdown-metismenu ul,
.mod-menu_dropdown-metismenu li {
    margin: 0 !important;
}

.mod-menu_dropdown-metismenu a {
    text-decoration: none;
}


/* =========================================================
   2. HOOFDMENU ITEMS
   ========================================================= */

.mod-menu_dropdown-metismenu > li.level-1 {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


.mod-menu_dropdown-metismenu > li.level-1 > a,
.mod-menu_dropdown-metismenu > li.level-1 > button {
    position: relative;

    display: flex !important;
    align-items: center !important;

    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    box-sizing: border-box;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: #fff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition: color 150ms ease;
}


/* =========================================================
   3. HOOFDMENU HOVER / ACTIVE
   ========================================================= */

.mod-menu_dropdown-metismenu > li.level-1:hover,
.mod-menu_dropdown-metismenu > li.level-1:hover > a,
.mod-menu_dropdown-metismenu > li.level-1:hover > button,
.mod-menu_dropdown-metismenu > li.level-1.js-hover-active,
.mod-menu_dropdown-metismenu > li.level-1.js-hover-active > a,
.mod-menu_dropdown-metismenu > li.level-1.js-hover-active > button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* =========================================================
   4. SEPARATORS HOOFDMENU
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
+ li.level-1
> a::before,

.mod-menu_dropdown-metismenu
> li.level-1
+ li.level-1
> button::before {

    content: "";

    position: absolute;

    left: 0;
    top: 17px;
    bottom: 17px;

    width: 1px;

    background: rgba(255, 255, 255, .18);

    pointer-events: none;
}


/* =========================================================
   5. HOOFDMENU PIJLTJES
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
> button
.caret {

    display: none !important;
}


.mod-menu_dropdown-metismenu
> li.level-1.deeper.parent
> button::after {

    content: "";

    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    margin-left: 10px;

    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;

    transform: rotate(45deg);

    transition: transform 160ms ease;
}


/* Pijltje omhoog bij geopend menu */
.mod-menu_dropdown-metismenu
> li.level-1.deeper.parent.js-hover-active
> button::after {

    transform: rotate(225deg);
}


/* =========================================================
   6. HOOFDDROPDOWN
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1.deeper.parent
> ul {

    position: absolute;

    left: 0;
    top: 100%;

    z-index: 1000;

    display: block !important;

    width: auto;
    min-width: 350px;

    height: auto !important;
    max-height: none !important;

    margin: 10px 0 0 0 !important;
    padding: 6px 0 !important;

    box-sizing: border-box;

    /*
     * Neutraal lichtgrijs.
     */
    background: #f7f7f7 !important;
    background-color: #f7f7f7 !important;
    background-image: none !important;

    /*
     * Groene accentlijn.
     */
    border: 0 !important;
    border-top: 3px solid #35b000 !important;

    border-radius: 0 0 8px 8px;

    box-shadow:
            0 10px 25px rgba(0, 0, 0, .16),
            0 2px 6px rgba(0, 0, 0, .08);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-4px);

    transition:
            opacity 180ms ease,
            transform 180ms ease,
            visibility 0s linear 180ms;
}


/*
 * JavaScript opent hoofdmenu.
 */
.mod-menu_dropdown-metismenu
> li.level-1.deeper.parent
> ul.js-hover-open {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    transition:
            opacity 180ms ease,
            transform 180ms ease,
            visibility 0s linear 0s;
}


/* =========================================================
   7. LEVEL 2 ITEMS
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2 {

    position: relative;

    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/* =========================================================
   8. LEVEL 2 LINKS
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2
> a {

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 14px !important;

    box-sizing: border-box;

    border: 0 !important;
    outline: none !important;

    background: transparent !important;

    color: #292929;

    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
            background-color 120ms ease,
            color 120ms ease;
}


/* =========================================================
   9. LEVEL 2 BUTTONS
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2
> button {

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 14px !important;

    box-sizing: border-box;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    background: transparent !important;

    color: #292929;

    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;

    text-align: left;

    cursor: pointer;

    transition:
            background-color 120ms ease,
            color 120ms ease;
}


/* =========================================================
   10. LEVEL 2 HOVER
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2
> a:hover,

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2
> button:hover,

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2.js-hover-active
> button {

    background: #e8f4e1 !important;
    color: #35a900 !important;
}


/* =========================================================
   11. LEVEL 2 PIJLTJES
   ========================================================= */

.mod-menu_dropdown-metismenu
li.level-2.deeper.parent
> button::after {

    content: "";

    flex: 0 0 auto;

    width: 6px;
    height: 6px;

    margin-left: auto;

    border-right: 2px solid #333;
    border-bottom: 2px solid #333;

    transform: rotate(-45deg);

    transition: border-color 150ms ease;
}


.mod-menu_dropdown-metismenu
li.level-2.deeper.parent
> button:hover::after,

.mod-menu_dropdown-metismenu
li.level-2.deeper.parent.js-hover-active
> button::after {

    border-color: #35a900;
}


/* =========================================================
   12. LEVEL 2 SUBMENU - NAAR RECHTS
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2.deeper.parent
> ul {

    position: absolute !important;

    left: 100% !important;
    top: -3px !important;

    z-index: 1001;

    display: block !important;

    width: 240px !important;
    min-width: 240px !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 6px 0 !important;

    box-sizing: border-box;

    /*
     * Zelfde neutrale achtergrond als hoofd-dropdown.
     */
    background: #f7f7f7 !important;
    background-color: #f7f7f7 !important;
    background-image: none !important;

    border: 0 !important;

    border-radius: 0 7px 7px 7px;

    box-shadow:
            8px 10px 25px rgba(0, 0, 0, .14),
            0 2px 6px rgba(0, 0, 0, .07);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-4px);

    transition:
            opacity 160ms ease,
            transform 160ms ease,
            visibility 0s linear 160ms;
}


/*
 * JavaScript opent level-2 submenu.
 */
.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2.deeper.parent
> ul.js-hover-open {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);

    transition:
            opacity 160ms ease,
            transform 160ms ease,
            visibility 0s linear 0s;
}


/* =========================================================
   13. LEVEL 3 ITEMS
   ========================================================= */

.mod-menu_dropdown-metismenu
li.level-3 {

    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.mod-menu_dropdown-metismenu
li.level-3
> a {

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 7px 14px !important;

    box-sizing: border-box;

    background: transparent !important;

    color: #333;

    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;

    text-decoration: none;

    transition:
            background-color 120ms ease,
            color 120ms ease;
}


.mod-menu_dropdown-metismenu
li.level-3
> a:hover {

    background: #e8f4e1 !important;
    color: #35a900;
}

/* =========================================================
   15. NAV HEADINGS VERBERGEN
   ========================================================= */

.mod-menu_dropdown-metismenu
> li.level-1
> ul
> li.level-2
> span.nav-header {

    display: none !important;
}


/* =========================================================
   16. ACTIEVE LINK
   ========================================================= */

.mod-menu_dropdown-metismenu
li.level-2.current
> a {

    color: #35a900;
    font-weight: 500;
}


/* =========================================================
   17. FOCUS
   ========================================================= */

.mod-menu_dropdown-metismenu a:focus,
.mod-menu_dropdown-metismenu a:focus-visible,
.mod-menu_dropdown-metismenu button:focus,
.mod-menu_dropdown-metismenu button:focus-visible {

    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 991px) {

    /*
     * Mobiel heeft een volledig eigen menu.
     */

    .mod-menu_dropdown-metismenu {
        display: none;
    }
}

/* =========================================================
   MOBIEL MENU
   ========================================================= */

@media (max-width: 1199.98px) {

    /* -----------------------------------------------------
       Menu button
       ----------------------------------------------------- */

    @media (max-width: 1199.98px) {

        nav.d-flex.d-xl-none {
            align-items: center;
        }

        .menu-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            height: 100%;
            margin: 0;
            padding: 0 18px;
        }
    }

    .menu-button:hover,
    .menu-button:focus,
    .menu-button:active {
        background: transparent;
        color: #222;
        box-shadow: none;
    }


    /* -----------------------------------------------------
       Offcanvas
       ----------------------------------------------------- */

    .offcanvas {
        width: min(88vw, 720px);
        max-width: 100%;
        border: 0;
        box-shadow: 4px 0 18px rgba(0, 0, 0, .15);
    }

    .offcanvas-header-alt {
        padding: 22px 28px 18px;
        border-bottom: 1px solid #ddd;
    }

    .offcanvas-title {
        margin: 0;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 600;
        color: #20242a;
    }

    .offcanvas-header-alt .btn-close {
        width: 24px;
        height: 24px;
        opacity: .65;
    }

    .offcanvas-body {
        padding: 22px 28px;
    }


    /* -----------------------------------------------------
       Menu
       ----------------------------------------------------- */

    .offcanvas-menu {
        width: 100%;
        margin: 0 !important;
    }

    .offcanvas-menu .sidebar-menu {
        width: 100%;
    }


    /* -----------------------------------------------------
       Alle menu-items
       ----------------------------------------------------- */

    .offcanvas-menu .sidebar-menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 44px;

        margin: 0 !important;
        padding: 9px 12px;

        border: 0;
        border-radius: 0;

        background: transparent;
        color: #20242a;

        font-size: 17px;
        font-weight: 400;
        line-height: 1.3;

        text-align: left;
        text-decoration: none;
    }

    .offcanvas-menu .sidebar-menu-item:hover,
    .offcanvas-menu .sidebar-menu-item:focus {
        background: #f5f5f5;
        color: #20242a;
        box-shadow: none;
    }


    /* -----------------------------------------------------
       Level 1
       ----------------------------------------------------- */

    .offcanvas-menu .level-1 {
        min-height: 48px;
        padding: 10px 12px;

        font-size: 18px;
        font-weight: 600;
    }


    /* -----------------------------------------------------
       Level 2
       ----------------------------------------------------- */

    .offcanvas-menu .level-2 {
        min-height: 44px;
        padding: 8px 12px 8px 28px;

        font-size: 17px;
        font-weight: 400;
    }


    /* -----------------------------------------------------
       Level 3
       ----------------------------------------------------- */

    .offcanvas-menu .level-3 {
        min-height: 40px;
        padding: 7px 12px 7px 42px;

        font-size: 16px;
        font-weight: 400;
        color: #555;
    }


    /* -----------------------------------------------------
       Submenu containers
       ----------------------------------------------------- */

    .offcanvas-menu .side-block {
        padding: 0 !important;
        margin: 0;
        border: 0;
        background: transparent;
    }


    /* -----------------------------------------------------
       Tekst + pijltje
       ----------------------------------------------------- */

    .offcanvas-menu .menu-item-row {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        padding: 0;
        margin: 0;
    }

    .offcanvas-menu .row-title {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .offcanvas-menu .fa-icon {
        flex: 0 0 auto;
        margin-left: 12px;
        font-size: 12px;
    }


    /* -----------------------------------------------------
       Actief item
       ----------------------------------------------------- */

    .offcanvas-menu .sidebar-menu-item.active {
        background: #edf6e9;
        color: #2eaa00;
        font-weight: 600;
    }


    /* -----------------------------------------------------
       Actief submenu-item
       ----------------------------------------------------- */

    .offcanvas-menu .level-2.active,
    .offcanvas-menu .level-3.active {
        background: #edf6e9;
        color: #2eaa00;
        font-weight: 600;
    }


    /* -----------------------------------------------------
       Open menu-item
       ----------------------------------------------------- */

    .offcanvas-menu .sidebar-btn[aria-expanded="true"] {
        color: #20242a;
    }

    .offcanvas-menu .sidebar-btn[aria-expanded="true"] .fa-icon {
        color: #2eaa00;
    }


    /* -----------------------------------------------------
       Bootstrap overrides
       ----------------------------------------------------- */

    .offcanvas-menu .btn {
        --bs-btn-padding-x: 0;
        --bs-btn-padding-y: 0;
    }

    .offcanvas-menu .col {
        width: 100%;
        flex: none;
    }
}