.app-menu.navbar-menu .d4-mobile-icons-menu {
    display: none;
}

@media (max-width: 767.98px) {
    html[data-layout=vertical]:not([dir=rtl]) .app-menu.navbar-menu,
    html[data-layout=vertical][dir=rtl] .app-menu.navbar-menu,
    html[data-layout=semibox]:not([dir=rtl]) .app-menu.navbar-menu,
    html[data-layout=semibox][dir=rtl] .app-menu.navbar-menu,
    html[data-layout=horizontal] .app-menu.navbar-menu {
        background: #eef3f9 !important;
        border-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100vw !important;
        padding: 0;
        width: 100vw !important;
    }

    html[data-layout=vertical] body.vertical-sidebar-enable .app-menu.navbar-menu,
    html[data-layout=semibox] body.vertical-sidebar-enable .app-menu.navbar-menu,
    html[data-layout=horizontal] body.menu .app-menu.navbar-menu {
        bottom: 0;
        height: calc(100vh - 70px);
        max-height: none;
        top: 70px;
    }

    html[data-layout=horizontal] body.menu .app-menu.navbar-menu {
        max-height: 100vh;
        overflow: hidden;
    }

    .app-menu.navbar-menu #scrollbar,
    .app-menu.navbar-menu #scrollbar > .container-fluid {
        height: 100%;
    }

    .app-menu.navbar-menu .d4-mobile-menu-standard {
        display: none;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu {
        --d4-mobile-menu-bg: #eef3f9;
        --d4-mobile-menu-surface: #ffffff;
        --d4-mobile-menu-text: var(--vz-header-bg, #16345f);
        --d4-mobile-menu-muted: #6b7c93;
        --d4-mobile-menu-active: var(--vz-header-bg, #16345f);
        --d4-mobile-menu-border: rgba(22, 52, 95, 0.08);
        --d4-mobile-menu-icon-bg: #e8eef7;
        --d4-mobile-menu-icon-color: var(--vz-header-bg, #16345f);
        --d4-mobile-menu-shadow: 0 8px 24px rgba(22, 52, 95, 0.08);
        background: var(--d4-mobile-menu-bg);
        color: var(--d4-mobile-menu-text);
        display: block;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        position: relative;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__panel {
        background: var(--d4-mobile-menu-bg);
        bottom: 0;
        display: flex;
        flex-direction: column;
        left: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: transform 180ms ease, opacity 180ms ease;
        z-index: 1;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__panel.is-active {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        z-index: 3;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__panel.is-previous {
        opacity: 0;
        transform: translateX(-16%);
        z-index: 2;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__header {
        align-items: center;
        background: var(--d4-mobile-menu-bg);
        border-bottom: 0;
        display: grid;
        flex: 0 0 auto;
        gap: 12px;
        grid-template-columns: 44px 1fr 44px;
        min-height: 56px;
        padding: 12px 16px 4px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__panel--root .d4-mobile-icons-menu__header {
        grid-template-columns: 1fr 44px;
        padding-top: 14px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__title {
        color: var(--d4-mobile-menu-text);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__nav-button {
        align-items: center;
        background: var(--d4-mobile-menu-icon-bg);
        border: 0;
        border-radius: 10px;
        color: var(--d4-mobile-menu-text);
        display: inline-flex;
        height: 40px;
        justify-content: center;
        padding: 0;
        width: 40px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__nav-button:hover,
    .app-menu.navbar-menu .d4-mobile-icons-menu__nav-button:focus {
        background: color-mix(in srgb, var(--d4-mobile-menu-icon-bg) 70%, var(--d4-mobile-menu-text));
        color: var(--d4-mobile-menu-text);
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__item-symbol {
        align-items: center;
        color: var(--d4-mobile-menu-icon-color);
        display: inline-flex;
        height: 1em;
        justify-content: center;
        line-height: 1;
        width: 1em;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__item-symbol::before {
        display: block;
        line-height: 1;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__item-image {
        border-radius: 8px;
        height: 30px;
        object-fit: contain;
        width: 30px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu .badge {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 10px;
        overflow-y: auto;
        padding: 4px 16px calc(88px + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__list-item {
        align-items: center;
        appearance: none;
        background: var(--d4-mobile-menu-surface);
        border: 0;
        border-radius: 14px;
        box-shadow: var(--d4-mobile-menu-shadow);
        box-sizing: border-box;
        color: var(--d4-mobile-menu-text);
        display: grid;
        gap: 14px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: 68px;
        padding: 12px 14px;
        position: relative;
        text-align: left;
        width: 100%;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__list-item:hover,
    .app-menu.navbar-menu .d4-mobile-icons-menu__list-item:focus,
    .app-menu.navbar-menu .d4-mobile-icons-menu__list-item.active,
    .app-menu.navbar-menu .d4-mobile-icons-menu__list-item.current-page {
        box-shadow: 0 10px 28px rgba(22, 52, 95, 0.14);
        color: var(--d4-mobile-menu-active);
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__list-icon {
        align-items: center;
        align-self: center;
        background: var(--d4-mobile-menu-icon-bg);
        border-radius: 12px;
        display: flex;
        flex-shrink: 0;
        height: 44px;
        justify-content: center;
        justify-self: center;
        line-height: 0;
        width: 44px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__list-icon .d4-mobile-icons-menu__item-symbol {
        font-size: 20px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__list-text {
        align-self: center;
        font-size: 14px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__list-arrow {
        align-self: center;
        color: var(--d4-mobile-menu-muted);
        font-size: 14px;
        padding-right: 4px;
    }

    .app-menu.navbar-menu .d4-mobile-icons-menu__divider {
        border-color: var(--d4-mobile-menu-border);
        margin: 4px 0;
        opacity: 1;
    }
}