html.force-mobile {
    min-width: 320px;
    background: #f5f6f8;
    --mobile-viewport-width: min(480px, 100vw);
    --mobile-viewport-left: max(0px, calc((100vw - 480px) / 2));
}

html.force-mobile.homepage-theme,
html.force-mobile body.homepage-page {
    background: linear-gradient(to bottom, #ffe2c5 0%, #ffffff 100%) !important;
    background-attachment: fixed;
    background-size: 100% 100%;
}

html.force-mobile body:not(.passport-page) {
    background: linear-gradient(to bottom, #ffe2c5 0%, #ffffff 100%) !important;
    background-attachment: fixed;
    background-size: 100% 100%;
}

html.force-mobile body {
    width: 100%;
    min-width: 320px;
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}

html.force-mobile body.passport-page .passport .header {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

html.force-mobile .van-overlay,
html.force-mobile .share,
html.force-mobile #container {
    left: var(--mobile-viewport-left) !important;
    right: auto !important;
    width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
}

html.force-mobile .payment-all {
    left: calc(var(--mobile-viewport-left) + 12px) !important;
    width: calc(var(--mobile-viewport-width) - 24px) !important;
    max-width: none !important;
    transform: none !important;
}

html.force-mobile .payment-time {
    left: var(--mobile-viewport-left) !important;
    width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
}

html.force-mobile .fui-navbar,
html.force-mobile .fui-footer {
    left: var(--mobile-viewport-left) !important;
    right: auto !important;
    width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
}

html.force-mobile body > .wrapper,
html.force-mobile body > .page,
html.force-mobile body > .homepage,
html.force-mobile body > .passport {
    width: 100%;
    min-width: 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

html.force-mobile .container,
html.force-mobile .container-fluid {
    width: 100%;
    max-width: 100%;
}

html.force-mobile .row {
    margin-left: 0;
    margin-right: 0;
}

html.force-mobile .modal-dialog {
    width: auto;
    max-width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
}

html.force-mobile .dialog,
html.force-mobile .modal,
html.force-mobile .modal-backdrop,
html.force-mobile .notification,
html.force-mobile .header,
html.force-mobile .footer,
html.force-mobile #foot .foot {
    left: var(--mobile-viewport-left) !important;
    right: auto !important;
    width: var(--mobile-viewport-width) !important;
    max-width: var(--mobile-viewport-width) !important;
}

html.force-mobile .dialog-content {
    width: calc(100% - 30px);
    max-width: 420px;
}

html.force-mobile .modal-dialog {
    width: calc(100% - 30px) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html.force-mobile .notification {
    right: auto !important;
    box-sizing: border-box;
}

html.force-mobile .footer > .no-gutters > .col-auto,
html.force-mobile .footer .row {
    width: 100%;
}

html.force-mobile .footer .row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    flex-wrap: nowrap !important;
}

html.force-mobile .footer .row > .col-auto {
    width: auto;
    flex: none !important;
    max-width: none;
    min-width: 0;
}

html.force-mobile .footer .btn {
    width: 100% !important;
    max-width: 100%;
}

html.force-mobile .footer.mobile-bottom-nav {
    left: calc(var(--mobile-viewport-left) + 12px) !important;
    right: auto !important;
    width: calc(var(--mobile-viewport-width) - 24px) !important;
    max-width: none !important;
    transform: none !important;
}

html.force-mobile .footer.mobile-bottom-nav.is-hidden {
    transform: translateY(calc(100% + 28px)) !important;
}

@media screen and (max-width: 480px) {
    html.force-mobile .footer.mobile-bottom-nav {
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        transform: translateX(0) !important;
    }

    html.force-mobile .footer.mobile-bottom-nav.is-hidden {
        transform: translateY(calc(100% + 28px)) !important;
    }
}

html.force-mobile img {
    max-width: 100%;
}