:root {
    --onecup-mobile-nav-height: 64px;
    --onecup-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.onecup-mobile-nav,
.onecup-mobile-legacy-mount,
.onecup-mobile-side-menu-close {
    display: none;
}

@media (min-width:1200px) {
    #nav-side > .onecup-mobile-side-menu-close {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 2;
        width: 25px !important;
        height: 25px !important;
        flex: 0 0 25px;
        margin: 0;
    }
}

@media (max-width:1199px) {
    body #wrapper-page {
        padding-bottom: calc(var(--onecup-mobile-nav-height) + var(--onecup-mobile-safe-bottom));
    }

    .footer {
        height: calc(var(--onecup-mobile-nav-height) + var(--onecup-mobile-safe-bottom));
        min-height: calc(var(--onecup-mobile-nav-height) + var(--onecup-mobile-safe-bottom));
        padding: 0 0 var(--onecup-mobile-safe-bottom);
        background: #fff;
        border-top: 1px solid #dce4f0;
        box-shadow: 0 -5px 18px rgba(24, 26, 85, .10);
        box-sizing: border-box;
        z-index: 10001;
    }

    .footer .footer-wrapper,
    .footer .footer-wrapper .footer-options {
        width: 100%;
        height: var(--onecup-mobile-nav-height);
    }

    .onecup-mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
        height: var(--onecup-mobile-nav-height);
        background: #fff;
    }

    .onecup-mobile-nav__item,
    .onecup-mobile-nav__notification > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 48px;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 6px 2px !important;
        color: #657087 !important;
        background: transparent !important;
        border: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
        font: inherit;
        font-size: 10px !important;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        text-decoration: none !important;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .onecup-mobile-nav__item > svg,
    .onecup-mobile-nav__item > i,
    .onecup-mobile-nav__notification > a > svg,
    .onecup-mobile-nav__notification > a > i {
        width: 21px !important;
        height: 21px !important;
        margin: 0 !important;
        color: currentColor !important;
        font-size: 19px !important;
        stroke-width: 2;
    }

    .onecup-mobile-nav__item:hover,
    .onecup-mobile-nav__item:focus-visible,
    .onecup-mobile-nav__item:active,
    .onecup-mobile-nav__item.is-current,
    .onecup-mobile-nav__item.is-menu-open,
    .onecup-mobile-nav__notification.open > a {
        color: #1a73e8 !important;
        background: #eef5ff !important;
        opacity: 1 !important;
        outline: 0;
    }

    .onecup-mobile-nav__item.is-current::before,
    .onecup-mobile-nav__item.is-menu-open::before,
    .onecup-mobile-nav__notification.open::before {
        content: '';
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: #1a73e8;
    }

    .onecup-mobile-nav__item,
    .onecup-mobile-nav__notification {
        position: relative;
    }

    .onecup-mobile-nav__notification {
        display: block;
        width: 100%;
        height: 100%;
    }

    .onecup-mobile-nav__notification > a > small,
    .onecup-mobile-nav__notification > a > .label {
        position: absolute;
        top: 8px;
        left: calc(50% + 6px);
        width: 7px;
        height: 7px;
        min-width: 7px;
        padding: 0;
        background: #f9424b;
        border: 1px solid #fff;
        border-radius: 50%;
        font-size: 0;
    }

    .onecup-mobile-nav__notification.open > .dropdown-menu.notice {
        position: fixed !important;
        top: 55px !important;
        right: 0 !important;
        bottom: calc(var(--onecup-mobile-nav-height) + var(--onecup-mobile-safe-bottom)) !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        overflow-y: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .navside,
    .mini-navbar .navside {
        top: 0 !important;
        bottom: calc(var(--onecup-mobile-nav-height) + var(--onecup-mobile-safe-bottom)) !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        z-index: 10000;
    }

    .onecup-mobile-side-menu-close {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 2;
        display: inline-flex;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #181a55 !important;
        background: #fff !important;
        border: 1px solid #d8e1ed;
        border-radius: 50% !important;
        box-shadow: 0 4px 14px rgba(24, 26, 85, .16);
        opacity: 1;
        cursor: pointer;
    }

    .onecup-mobile-side-menu-close:hover,
    .onecup-mobile-side-menu-close:focus-visible {
        color: #1a73e8 !important;
        background: #eef5ff !important;
        outline: 2px solid #b9d7ff;
        outline-offset: 2px;
    }

    .onecup-mobile-side-menu-close > i,
    .onecup-mobile-side-menu-close > svg {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        color: currentColor !important;
    }

    .navside #side-menu {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .navside .navside-header {
        flex: 0 0 auto;
    }

    .navside .navside-body {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        max-height: none !important;
        padding-bottom: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(206, 217, 231, .55) transparent;
    }

    .navside .navside-body > li > a,
    .navside .navside-footer > li > a {
        display: flex !important;
        align-items: center;
        gap: 12px;
    }

    .navside .navside-body > li > a > i,
    .navside .navside-body > li > a > svg,
    .navside .navside-footer > li > a > i,
    .navside .navside-footer > li > a > svg {
        flex: 0 0 18px;
        margin: 0 !important;
    }

    .navside .navside-body > li > a > .arrow,
    .navside .navside-footer > li > a > .arrow {
        margin-left: auto !important;
    }

    .navside .navside-body::-webkit-scrollbar {
        display: block;
        visibility: visible;
        width: 4px;
    }

    .navside .navside-body::-webkit-scrollbar-thumb {
        display: block;
        visibility: visible;
        background: rgba(206, 217, 231, .55);
        border-radius: 4px;
    }

    .navside .navside-footer {
        position: static !important;
        flex: 0 0 auto;
        bottom: auto !important;
        width: 100%;
        padding-bottom: 4px;
    }

    #side-menu-configuration-heading {
        scroll-margin-top: 10px;
        outline: 0;
    }
}

@media (max-width: 374px) {
    .onecup-mobile-nav__item,
    .onecup-mobile-nav__notification > a {
        font-size: 9px !important;
        letter-spacing: -.02em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navside .navside-body {
        scroll-behavior: auto;
    }
}

/* The footer also owns email/chat panels: collapse only its navigation space. */
@media (max-width: 1199px) {
    body.onecup-mobile-keyboard-open {
        --onecup-mobile-nav-height: 0px;
        --onecup-mobile-safe-bottom: 0px;
    }
    body.onecup-mobile-keyboard-open .onecup-mobile-nav {
        display: none !important;
    }
    body.onecup-mobile-keyboard-open .footer {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
        box-shadow: none !important;
    }
}

/* Keep the scrolling links above the single persistent account exit. */
#nav-side > #side-menu {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
#nav-side .navside-header,
#nav-side .navside-footer {
    flex: 0 0 auto;
}
#nav-side .navside-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
}
#nav-side .navside-footer {
    position: relative;
    bottom: auto !important;
}
@media (min-width: 1200px) {
    #nav-side {
        top: 55px;
        bottom: 0;
        height: auto;
    }
}