:root{
    --nb-vertical-navigation-offcanvas-1-width: 375px;
    --nb-vertical-navigation-offcanvas-1-bg: #000000CC;
    --nb-vertical-navigation-offcanvas-1-backdrop-bg: transparent;
    --nb-vertical-navigation-offcanvas-1-color: var(--nb-color-white);
}
.nb-vertical-navigation-offcanvas-1 {

    --nb-offcanvas-width: var(--nb-vertical-navigation-offcanvas-1-width);
    --nb-offcanvas-backdrop-color: var(--nb-vertical-navigation-offcanvas-1-backdrop-bg);

    &:has(.nb-menu-navigation-with-tabs .tab-content .nb-item.active) .nb-menu-images-first-level,
    &:has(.nb-menu-navigation-with-tabs .tab-content .nb-item.active) .nb-menu-links-first-level{
        display: none;
    }

    .nb-btn-close{
        width: 48px;
        height: 48px;
        background: var(--nb-color-white);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 32px;
        right: 25px;
    }

    .nb-offcanvas{
        background: var(--nb-vertical-navigation-offcanvas-1-bg);
        border-right: none;
        backdrop-filter: blur(10px);
    }

    .nb-offcanvas-body{
        padding: 48px 25px 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
    }

    .nb-menu-links-first-level{
        flex-direction: column;

        .nb-link{
            color: var(--nb-vertical-navigation-offcanvas-1-color);

            & + .nb-link{
                margin-top: 10px;
            }
            &:hover{
                text-decoration: underline;
            }
        }
    }

}