/*
 * The navigation of the phones and tablets (partials/_mobile-nav.cshtml, js/Common/MobileNav.js).
 * Everything is under max-width: 991.98px (the breakpoint of Metronic), the desktop is not changed.
 * RTL and LTR with the logical properties, the dark theme colors are in css/dark/dark.css (--mnav-*).
 */
@media (max-width: 991.98px) {
    :root {
        --mnav-top-h: 60px;
        --mnav-bar-h: 72px;
        --mnav-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mnav-bg: #ffffff;
        --mnav-bg-soft: #F3F6F9;
        --mnav-border: #EBEDF3;
        --mnav-text: #3F4254;
        --mnav-text-muted: #6E7083;
        --mnav-primary: #1B6FD1;
        --mnav-primary-soft: #E1F0FF;
        --mnav-primary-text: #0B4A99;
        --mnav-on-primary: #ffffff;
        --mnav-active: #0B4A99;
        --mnav-danger: #D42A3C;
        --mnav-warning: #E0A100;
        --mnav-backdrop: rgba(0, 0, 0, 0.45);
        --mnav-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
    }

    /* ---------------------------------------------------------------- the old mobile header (2 hamburgers + topbar toggle) and the topbar are replaced */
    body.mnav-on #kt_header_mobile,
    body.mnav-on #kt_header .topbar,
    body.mnav-on #kt_header_menu_wrapper {
        display: none !important;
    }

    body.mnav-on.header-mobile-fixed .wrapper {
        padding-top: var(--mnav-top-h);
    }

    body.mnav-on.header-mobile-fixed.subheader-mobile-fixed.subheader-enabled .wrapper {
        padding-top: calc(var(--mnav-top-h) + 65px);
    }

    body.mnav-on.header-mobile-fixed.subheader-mobile-fixed .subheader {
        top: var(--mnav-top-h);
    }

    /* the room of the bottom bar is under the wrapper : the body has the height of the screen (Metronic), the page goes over it */
    body.mnav-on .wrapper {
        padding-bottom: calc(var(--mnav-bar-h) + var(--mnav-safe-bottom));
    }

    body.mnav-on.mnav-kb .wrapper {
        padding-bottom: 0;
    }

    /* the floating buttons go over the bottom bar */
    body.mnav-on .scrolltop {
        bottom: calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 12px);
    }

    /* the pay bar and the messages of the pricing pages (css/Pricing/Pricing.css) */
    body.mnav-on .zp .paybar {
        bottom: calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 8px);
    }

    body.mnav-on.mnav-kb .zp .paybar {
        bottom: 12px;
    }

    body.mnav-on .zp-toast {
        bottom: calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 88px);
    }

    body.mnav-on #toast-container.toast-bottom-right,
    body.mnav-on #toast-container.toast-bottom-left,
    body.mnav-on #toast-container.toast-bottom-center,
    body.mnav-on #toast-container.toast-bottom-full-width {
        bottom: calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 12px);
    }

    body.mnav-sheet-open {
        overflow: hidden;
    }

    /* the AI chat (its loader is at the end of _Layout) is opened by its button of the top bar (.mnav-ai-btn), its floating button is not shown.
       Its shadow root sets everything with !important (all: initial, bottom, right...), only its --rw-edge variable (bottom and right)
       can be set from the page : the closed button goes out of the screen. While the chat is opened but its page is not shown yet
       (loading, or failed) its button and its message come back over the bottom bar (body.ai-chat-open, js/Common/AiChat.js) */
    body.mnav-on [data-rag-widget]:not([data-open]) {
        --rw-edge: -200px;
    }

    body.mnav-on.ai-chat-open [data-rag-widget]:not([data-open]) {
        --rw-edge: calc(var(--mnav-bar-h) + var(--mnav-safe-bottom) + 12px);
    }

    /* ---------------------------------------------------------------- the top bar */
    .mnav-top {
        position: fixed;
        top: 0;
        inset-inline: 0;
        z-index: 97;
        height: var(--mnav-top-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-inline: 12px 8px;
        background: var(--mnav-bg);
        color: var(--mnav-text);
        box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.12);
    }

    .mnav-title {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        text-align: start;
    }

    .mnav-title-module {
        font-size: 12px;
        line-height: 1.3;
        color: var(--mnav-text-muted);
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mnav-title-page {
        display: flex;
        align-items: center;
        gap: 4px;
        max-width: 100%;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
    }

    .mnav-title-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mnav-top-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
    }

    .mnav-icon-btn,
    .mnav-avatar {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--mnav-text);
        font-size: 22px;
    }

    .mnav-icon-btn[hidden] {
        display: none;
    }

    .mnav-avatar {
        overflow: hidden;
        background: var(--mnav-primary-soft);
        color: var(--mnav-primary-text);
        font-size: 16px;
        font-weight: 700;
    }

    .mnav-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ---------------------------------------------------------------- the bottom bar */
    .mnav-bar {
        position: fixed;
        bottom: 0;
        inset-inline: 0;
        z-index: 96;
        height: calc(var(--mnav-bar-h) + var(--mnav-safe-bottom));
        padding-bottom: var(--mnav-safe-bottom);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        background: var(--mnav-bg);
        border-top: 1px solid var(--mnav-border);
        box-shadow: var(--mnav-shadow);
    }

    body.mnav-kb .mnav-bar {
        display: none;
    }

    .mnav-bar-cell {
        display: flex;
        justify-content: center;
        min-width: 0;
    }

    .mnav-bar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 56px;
        max-width: 100%;
        min-height: 52px;
        padding: 4px 8px;
        border: 0;
        border-radius: 16px;
        background: none;
        color: var(--mnav-text-muted);
        font-size: 11px;
        line-height: 1.2;
    }

    .mnav-bar-item i {
        font-size: 24px;
    }

    .mnav-bar-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mnav-bar-item:hover,
    .mnav-bar-item:focus {
        color: var(--mnav-primary-text);
    }

    /* darker than the + next to it, the same in both themes */
    .mnav-bar-item.active {
        background: var(--mnav-active);
        color: var(--mnav-on-primary);
        font-weight: 700;
    }

    /* the icons drawn with lines (the + and the search) : the color of the text around them, in both themes */
    .mnav-svg {
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mnav-search-btn {
        color: var(--mnav-text);
    }

    .mnav-search-btn:hover,
    .mnav-search-btn:focus {
        background: var(--mnav-bg-soft);
        color: var(--mnav-primary-text);
    }

    /* a ring of the color of the bar keeps it apart from the page in the light and the dark theme */
    .mnav-plus,
    .mnav-plus:hover,
    .mnav-plus:focus {
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: var(--mnav-primary);
        color: var(--mnav-on-primary);
        text-decoration: none;
        box-shadow: 0 0 0 4px var(--mnav-bg), 0 6px 16px rgba(27, 111, 209, 0.45);
    }

    .mnav-plus .mnav-svg {
        stroke-width: 2.6;
    }

    /* the menu of the top bar and the floating + are for the tablets only */
    .mnav-burger,
    .mnav-plus.mnav-top-plus,
    .mnav-plus.mnav-top-plus:hover,
    .mnav-plus.mnav-top-plus:focus {
        display: none;
    }

    .mnav-plus:active {
        transform: scale(0.94);
    }

    /* ---------------------------------------------------------------- the sheets */
    .mnav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: var(--mnav-backdrop);
        animation: mnav-fade-in 300ms ease-out;
    }

    .mnav-sheet {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1041;
        max-height: 92vh;
        max-height: 92dvh;
        display: flex;
        flex-direction: column;
        background: var(--mnav-bg);
        color: var(--mnav-text);
        border-radius: 20px 20px 0 0;
        padding-bottom: var(--mnav-safe-bottom);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
        animation: mnav-sheet-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
        outline: none;
    }

    /* closing (MobileNav.js hide) : the sheet goes down and the backdrop fades, then both are hidden */
    .mnav-sheet.mnav-sheet-out {
        animation: mnav-sheet-out 300ms cubic-bezier(0.4, 0, 1, 1) forwards;
        pointer-events: none;
    }

    .mnav-backdrop.mnav-backdrop-out {
        animation: mnav-fade-out 300ms ease-in forwards;
        pointer-events: none;
    }

    .mnav-sheet.mnav-sheet-full {
        height: 92vh;
        height: 92dvh;
    }

    .mnav-sheet.mnav-sheet-plus {
        max-height: 86vh;
        max-height: 86dvh;
    }

    .mnav-backdrop[hidden],
    .mnav-sheet[hidden] {
        display: none;
    }

    /* dragged down (with the head) to close the sheet (MobileNav.js) : the transparent border makes it big enough for a finger */
    .mnav-grabber {
        box-sizing: content-box;
        width: 40px;
        height: 5px;
        margin: 0 auto;
        border: 10px solid transparent;
        border-inline-width: 40px;
        border-radius: 14px;
        background: var(--mnav-text-muted);
        background-clip: content-box;
        opacity: 0.45;
        flex: 0 0 auto;
        cursor: grab;
        touch-action: none;
    }

    .mnav-sheet-head {
        touch-action: none;
    }

    .mnav-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 8px 4px 16px;
        padding-inline: 16px 8px;
        flex: 0 0 auto;
    }

    .mnav-sheet-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mnav-sheet-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px 16px;
    }

    .mnav-search {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 4px 0 12px;
        background: var(--mnav-bg);
    }

    .mnav-search input {
        width: 100%;
        height: 44px;
        padding-inline: 40px 12px;
        border: 1px solid var(--mnav-border);
        border-radius: 12px;
        background: var(--mnav-bg-soft);
        color: var(--mnav-text);
        font-size: 14px;
    }

    .mnav-search input:focus {
        outline: 2px solid var(--mnav-primary);
        outline-offset: -1px;
    }

    .mnav-search i,
    .mnav-search .mnav-svg {
        position: absolute;
        inset-inline-start: 12px;
        top: 16px;
        font-size: 20px;
        color: var(--mnav-text-muted);
    }

    .mnav-label {
        margin: 16px 0 8px;
        font-size: 12px;
        font-weight: 700;
        color: var(--mnav-text-muted);
    }

    .mnav-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .mnav-grid.mnav-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .mnav-grid.mnav-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .mnav-tile {
        min-height: 88px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 4px;
        border: 1px solid var(--mnav-border);
        border-radius: 14px;
        background: var(--mnav-bg);
        color: var(--mnav-text);
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
    }

    .mnav-tile i {
        font-size: 24px;
        color: var(--mnav-primary);
    }

    .mnav-tile.active,
    .mnav-tile.selected {
        background: var(--mnav-primary-soft);
        border-color: var(--mnav-primary);
        color: var(--mnav-primary-text);
        font-weight: 700;
    }

    .mnav-action {
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border: 1px solid var(--mnav-border);
        border-radius: 12px;
        background: var(--mnav-bg);
        color: var(--mnav-text);
        font-size: 13px;
        text-align: start;
        width: 100%;
    }

    .mnav-action i {
        font-size: 22px;
        color: var(--mnav-primary);
        flex: 0 0 auto;
    }

    .mnav-grid > .mnav-action.mnav-wide {
        grid-column: 1 / -1;
    }

    /* the tools of the topbar : one row of round icons under the search of the menu, a dot for the news, filled when on */
    .mnav-tools {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
        gap: 4px;
        margin: 4px 0 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--mnav-border);
    }

    .mnav-tool {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding: 2px 0;
        border: 0;
        background: none;
        color: var(--mnav-text);
        font-size: 11px;
        line-height: 1.25;
        text-align: center;
    }

    .mnav-tool-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mnav-tool-icon {
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: var(--mnav-primary-soft);
        color: var(--mnav-primary-text);
        transition: transform .12s ease, background-color .12s ease;
    }

    .mnav-tool-icon .mnav-svg {
        stroke-width: 1.8;
    }

    .mnav-tool:active .mnav-tool-icon {
        transform: scale(.94);
    }

    .mnav-tool-on .mnav-tool-icon {
        background: var(--mnav-primary);
        color: var(--mnav-on-primary);
    }

    .mnav-tool-danger .mnav-tool-icon::after,
    .mnav-tool-warning .mnav-tool-icon::after,
    .mnav-has-news::after {
        content: '';
        position: absolute;
        top: 2px;
        inset-inline-end: 2px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid var(--mnav-bg);
        background: var(--mnav-danger);
    }

    .mnav-tool-warning .mnav-tool-icon::after {
        background: var(--mnav-warning);
    }

    .mnav-has-news {
        position: relative;
    }

    .mnav-bar-item.mnav-has-news::after {
        top: 8px;
        inset-inline-end: calc(50% - 16px);
    }

    /* the same tools in the top bar : the tablets only */
    .mnav-top-tools {
        display: none;
    }

    .mnav-action.mnav-danger,
    .mnav-action.mnav-danger i {
        color: var(--mnav-danger);
    }

    .mnav-primary-btn {
        width: 100%;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: 14px;
        background: var(--mnav-primary);
        color: var(--mnav-on-primary);
        font-size: 15px;
        font-weight: 700;
    }

    .mnav-secondary-btn {
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--mnav-border);
        border-radius: 12px;
        background: var(--mnav-bg-soft);
        color: var(--mnav-text);
        font-weight: 600;
    }

    .mnav-back {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--mnav-primary-text);
        font-weight: 600;
    }

    .mnav-module-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 4px 0 8px;
        font-size: 16px;
        font-weight: 700;
    }

    .mnav-module-head i {
        font-size: 24px;
        color: var(--mnav-primary);
    }

    .mnav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mnav-row {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 8px 12px;
        border: 0;
        border-radius: 10px;
        background: none;
        color: var(--mnav-text);
        font-size: 14px;
        text-align: start;
    }

    .mnav-row:hover,
    .mnav-row:focus {
        background: var(--mnav-bg-soft);
        color: var(--mnav-text);
    }

    .mnav-row.active {
        background: var(--mnav-primary-soft);
        color: var(--mnav-primary-text);
        font-weight: 700;
    }

    .mnav-row small {
        color: var(--mnav-text-muted);
        flex: 0 0 auto;
    }

    .mnav-empty {
        padding: 16px 0;
        color: var(--mnav-text-muted);
        text-align: center;
    }

    .mnav-user {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 4px 0 12px;
    }

    .mnav-user .mnav-avatar {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .mnav-user-name {
        font-size: 16px;
        font-weight: 700;
    }

    .mnav-muted {
        color: var(--mnav-text-muted);
        font-size: 12px;
    }

    .mnav-stack > * + * {
        margin-top: 8px;
    }

    /* the account sheet : the logins of the insurances, the theme and the language in one row each, the sign out */
    .mnav-user-logins {
        margin-top: 8px;
    }

    .mnav-user-logins .alert {
        margin: 0;
    }

    .mnav-setting {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        margin-top: 8px;
        padding: 4px 0;
        border-top: 1px solid var(--mnav-border);
        font-size: 13px;
        color: var(--mnav-text);
    }

    .mnav-seg {
        display: inline-flex;
        flex: 0 0 auto;
        padding: 3px;
        border-radius: 10px;
        background: var(--mnav-bg-soft);
    }

    .mnav-seg button {
        min-width: 40px;
        min-height: 34px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: none;
        color: var(--mnav-text-muted);
        font-size: 12px;
    }

    .mnav-seg button.active {
        background: var(--mnav-bg);
        color: var(--mnav-primary-text);
        font-weight: 700;
        box-shadow: 0 0 0 1px var(--mnav-border);
    }

    .mnav-signout {
        margin-top: 8px;
    }

    .mnav-sheet .btn-group .btn {
        min-height: 44px;
    }

    /* the personalization of the bottom bar */
    .mnav-bar-preview {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        align-items: center;
        margin: 12px 0 4px;
        padding: 8px 4px;
        border-radius: 16px;
        background: var(--mnav-bg-soft);
    }

    .mnav-slot {
        border: 2px solid var(--mnav-primary);
        background: var(--mnav-bg);
        color: var(--mnav-text);
    }

    .mnav-slot.selected {
        border-width: 3px;
        background: var(--mnav-primary-soft);
        color: var(--mnav-primary-text);
        font-weight: 700;
    }

    .mnav-slot-locked {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .mnav-bar-buttons {
        position: sticky;
        bottom: -16px;
        display: flex;
        gap: 8px;
        margin: 16px -16px -16px;
        padding: 12px 16px;
        background: var(--mnav-bg);
        border-top: 1px solid var(--mnav-border);
    }

    .mnav-bar-buttons .mnav-primary-btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* the tabs of the page (patient file, clinic--) : a row of chips under the top bar, the only horizontal scroll */
    .mnav-chips {
        position: fixed;
        top: var(--mnav-top-h);
        inset-inline: 0;
        z-index: 96;
        height: 56px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-inline: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        background: var(--mnav-bg);
        border-top: 1px solid var(--mnav-border);
        box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.15);
    }

    .mnav-chips::-webkit-scrollbar {
        display: none;
    }

    .mnav-chip {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--mnav-border);
        border-radius: 20px;
        background: var(--mnav-bg-soft);
        color: var(--mnav-text);
        font-size: 13px;
        white-space: nowrap;
    }

    .mnav-chip.active {
        background: var(--mnav-primary);
        border-color: var(--mnav-primary);
        color: var(--mnav-on-primary);
        font-weight: 700;
    }

    .mnav-chip-others:not(.active)::after {
        content: "\25BE";
        margin-inline-start: 4px;
    }

    body.mnav-on.mnav-has-chips.header-mobile-fixed .wrapper {
        padding-top: calc(var(--mnav-top-h) + 56px);
    }

    body.mnav-on.mnav-has-chips.header-mobile-fixed.subheader-mobile-fixed.subheader-enabled .wrapper {
        padding-top: calc(var(--mnav-top-h) + 56px + 65px);
    }

    body.mnav-on.mnav-has-chips.header-mobile-fixed.subheader-mobile-fixed .subheader {
        top: calc(var(--mnav-top-h) + 56px);
    }

    /* the tabs of the subheader (reports, appointments, ...) are shown as the chips (MobileNav.js) */
    body.mnav-on .mnav-chips-source {
        display: none !important;
    }

    .mnav-top .mnav-back-btn {
        flex: 0 0 auto;
        margin-inline-start: -8px;
    }

    .mnav-action.mnav-current {
        background: var(--mnav-primary-soft);
        border-color: var(--mnav-primary);
        color: var(--mnav-primary-text);
        font-weight: 700;
    }

    /* the editor of the patient file tabs */
    .mnav-edit-row {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0 4px 0;
        padding-inline-start: 12px;
        border-bottom: 1px solid var(--mnav-border);
    }

    .mnav-edit-btns {
        display: flex;
        gap: 2px;
        flex: 0 0 auto;
    }

    .mnav-edit-btn {
        border-radius: 10px;
        color: var(--mnav-primary-text);
        font-size: 20px;
    }

    .mnav-edit-btn:disabled {
        opacity: 0.35;
    }

    /* the patient results of the quick search (Patients/Patient/_QuickSearchResult.cshtml) */
    .mnav-search-all {
        margin-bottom: 4px;
    }

    .mnav-patients {
        padding: 4px 0;
    }

    .mnav-patients a {
        display: inline-block;
        min-height: 32px;
        line-height: 32px;
    }

    @keyframes mnav-sheet-in {
        from {
            transform: translateY(100%);
        }

        to {
            transform: none;
        }
    }

    @keyframes mnav-sheet-out {
        from {
            transform: none;
        }

        to {
            transform: translateY(100%);
        }
    }

    @keyframes mnav-fade-in {
        from {
            opacity: 0;
        }
    }

    @keyframes mnav-fade-out {
        to {
            opacity: 0;
        }
    }
}

/* the tablets (768 - 991px) : no bottom bar, the menu (a side sheet with 2 columns) is opened from the top bar and the + floats at the bottom end.
   --mnav-bar-h is the room of the + : the end of the page, the scroll top button, the pay bar and the messages stay above it */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --mnav-bar-h: 76px;
    }

    .mnav-bar,
    .mnav-bar-only {
        display: none;
    }

    .mnav-burger {
        display: inline-flex;
        flex: 0 0 auto;
        margin-inline-start: -4px;
    }

    /* the tools of the topbar as icons, the ones of the quick panel after a line */
    .mnav-top-tools {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-inline-end: 4px;
    }

    .mnav-top-tools:empty {
        display: none;
    }

    .mnav-icon-btn.mnav-top-tool {
        width: 40px;
        height: 44px;
        border-radius: 10px;
    }

    .mnav-top-tool .mnav-tool-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: none;
        color: var(--mnav-text);
    }

    .mnav-top-tool:hover .mnav-tool-icon,
    .mnav-top-tool:focus-visible .mnav-tool-icon {
        background: var(--mnav-bg-soft);
    }

    .mnav-top-tool.mnav-tool-on .mnav-tool-icon {
        background: var(--mnav-primary);
        color: var(--mnav-on-primary);
    }

    .mnav-top-sep {
        width: 1px;
        height: 24px;
        margin-inline: 4px;
        background: var(--mnav-border);
    }

    .mnav-plus.mnav-top-plus,
    .mnav-plus.mnav-top-plus:hover,
    .mnav-plus.mnav-top-plus:focus {
        display: inline-flex;
        position: fixed;
        bottom: calc(var(--mnav-safe-bottom) + 16px);
        inset-inline-end: 24px;
        width: 56px;
        height: 56px;
        box-shadow: 0 6px 16px rgba(27, 111, 209, 0.45);
    }

    body.mnav-kb .mnav-plus.mnav-top-plus {
        display: none;
    }

    .mnav-sheet.mnav-sheet-side {
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        inset-inline-end: auto;
        width: 600px;
        max-width: 100%;
        height: auto;
        max-height: none;
        border-radius: 0;
        border-start-end-radius: 20px;
        border-end-end-radius: 20px;
        padding-top: env(safe-area-inset-top, 0px);
        animation-name: mnav-side-in;
    }

    .mnav-sheet.mnav-sheet-side.mnav-sheet-out {
        animation-name: mnav-side-out;
    }

    .mnav-sheet-side .mnav-grabber {
        display: none;
    }

    .mnav-sheet-side .mnav-sheet-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 0;
    }

    .mnav-side {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        gap: 12px;
    }

    .mnav-side-modules {
        flex: 0 0 220px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 16px;
        border-inline-end: 1px solid var(--mnav-border);
        padding-inline-end: 8px;
    }

    .mnav-side-modules .mnav-row i {
        font-size: 20px;
        color: var(--mnav-primary);
        vertical-align: middle;
        margin-inline-end: 4px;
    }

    .mnav-side-modules .mnav-grid-2 {
        grid-template-columns: 1fr;
    }

    .mnav-side-pages {
        flex: 1 1 auto;
        min-width: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 16px;
    }

    .mnav-side-pages .mnav-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    /* only the pages have a border, not the modules of the start side */
    .mnav-side-pages .mnav-list .mnav-row {
        height: 100%;
        border: 1px solid var(--mnav-border);
    }

    .mnav-side-pages .mnav-list .mnav-row.active {
        border-color: var(--mnav-primary);
    }

    /* from its side of the screen : --mnav-side-from is set by MobileNav.js from the direction of the page (RTLStyle.css sets it on the body, not on <html>) */
    @keyframes mnav-side-in {
        from {
            transform: translateX(var(--mnav-side-from, -100%));
        }

        to {
            transform: none;
        }
    }

    @keyframes mnav-side-out {
        from {
            transform: none;
        }

        to {
            transform: translateX(var(--mnav-side-from, -100%));
        }
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .mnav-sheet,
    .mnav-backdrop {
        animation: none;
    }
}

/* the menu of the visitors (partials/_header-mobile.cshtml, js/Common/VisitorNav.js) : the pages under the header */
@media (max-width: 991.98px) {
    .vnav-toggle {
        margin-inline-start: 8px;
    }

    .vnav-backdrop {
        position: fixed;
        inset: 55px 0 0;
        z-index: 96;
        background: var(--mnav-backdrop);
    }

    .vnav-panel {
        position: fixed;
        top: 55px;
        inset-inline: 0;
        z-index: 97;
        max-height: calc(100dvh - 55px);
        overflow-y: auto;
        padding: 12px 16px 16px;
        background: var(--mnav-bg);
        color: var(--mnav-text);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
        animation: vnav-in .2s ease-out;
    }

    .vnav-panel[hidden],
    .vnav-backdrop[hidden] {
        display: none;
    }

    body.vnav-open {
        overflow: hidden;
    }

    .vnav-account {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 8px;
    }

    .vnav-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .vnav-links a,
    .vnav-tool {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 46px;
        padding: 0 12px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--mnav-text);
        font-size: 14px;
        font-weight: 600;
        text-align: start;
        text-decoration: none;
    }

    .vnav-links a i,
    .vnav-tool i {
        width: 22px;
        font-size: 20px;
        color: var(--mnav-text-muted);
        text-align: center;
    }

    .vnav-links a:hover,
    .vnav-tool:hover {
        background: var(--mnav-bg-soft);
        color: var(--mnav-text);
    }

    .vnav-links a.active {
        background: var(--mnav-primary-soft);
        color: var(--mnav-primary-text);
    }

    .vnav-links a.active i {
        color: var(--mnav-primary-text);
    }

    .vnav-tools {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--mnav-border);
    }

    .vnav-tool .fas {
        font-size: 16px;
    }

    @keyframes vnav-in {
        from { opacity: 0; transform: translateY(-8px); }
    }
}

/* the mobile navigation is not shown on the desktop */
@media (min-width: 992px) {
    .vnav-toggle,
    .vnav-panel,
    .vnav-backdrop,
    .mnav-top,
    .mnav-bar,
    .mnav-chips,
    .mnav-backdrop,
    .mnav-sheet {
        display: none !important;
    }
}