/*
 * The views of the DataTables on mobile (js/dt-mobile-views.js) : cards (dt-mv-card), the whole table in a horizontal scroll box
 * (dt-mv-scroll) and the collapsed view of Responsive (dt-mv-list) are classes of the wrapper.
 * Everything is under max-width: 991.98px (the breakpoint of Metronic), the desktop is not changed.
 * Responsive hides the cells of the columns that do not fit with an inline display: none, the cards and the scroll box show them
 * again with !important. RTL and LTR with the logical properties.
 */
:root {
    --dt-mv-card: #FFFFFF;
    --dt-mv-soft: #F3F6F9;
    --dt-mv-line: #EBEDF3;
    --dt-mv-text: #3F4254;
    --dt-mv-muted: #7E8299;
    --dt-mv-primary: #3699FF;
    --dt-mv-primary-soft: #E1F0FF;
    --dt-mv-success: #1BC5BD;
    --dt-mv-success-soft: #C9F7F5;
    --dt-mv-warning: #FFA800;
    --dt-mv-warning-soft: #FFF4DE;
    --dt-mv-shadow: rgba(56, 71, 109, 0.22);
}

html[data-theme=dark] {
    --dt-mv-card: #1E1E2D;
    --dt-mv-soft: #2B2B40;
    --dt-mv-line: #323248;
    --dt-mv-text: #CDCDDE;
    --dt-mv-muted: #92929F;
    --dt-mv-primary-soft: #212E48;
    --dt-mv-success-soft: #1C3238;
    --dt-mv-warning-soft: #392F28;
    --dt-mv-shadow: rgba(0, 0, 0, 0.6);
}

.dt-mv-bar,
.dt-mv-details,
.dt-mv-more,
.dt-mv-menu,
.context-menu-item > .dt-mv-cm-icon,
.dt-mv-selbar,
.dt-mv-showmore {
    display: none;
}

@media (max-width: 991.98px) {
    /* ---------------------------------------------------------------- the switch of the views, above the table */
    .dt-mv-toggle {
        display: inline-flex;
        gap: 2px;
        padding: 3px;
        background: var(--dt-mv-soft);
        border: 1px solid var(--dt-mv-line);
        border-radius: 0.65rem;
    }

    .dt-mv-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.65rem;
        border: 0;
        border-radius: 0.45rem;
        background: transparent;
        color: var(--dt-mv-muted);
        font: inherit;
        font-size: 0.85rem;
        line-height: 1.4;
        cursor: pointer;
    }

        .dt-mv-btn svg {
            width: 15px;
            height: 15px;
            flex: none;
        }

        .dt-mv-btn[aria-pressed=true] {
            background: var(--dt-mv-card);
            color: var(--dt-mv-primary);
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }

        .dt-mv-btn:focus-visible,
        .dt-mv-more:focus-visible {
            outline: 2px solid var(--dt-mv-primary);
            outline-offset: 1px;
        }

    /* the child rows of Responsive are only for the compact view */
    .dt-mv-card table.dataTable > tbody > tr.child,
    .dt-mv-scroll table.dataTable > tbody > tr.child {
        display: none !important;
    }

    /* ---------------------------------------------------------------- the scroll view : only the table scrolls, the page and the pager stay */
    .dt-mv-scroll .dt-mv-box {
        position: relative;
    }

    .dt-mv-scroll .dt-mv-scroller {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .dt-mv-scroll table.dataTable {
        width: max-content !important;
        min-width: 100%;
        margin-top: 0 !important;
    }

        .dt-mv-scroll table.dataTable > thead > tr > th,
        .dt-mv-scroll table.dataTable > tbody > tr > td,
        .dt-mv-scroll table.dataTable > tfoot > tr > th,
        .dt-mv-scroll table.dataTable > tfoot > tr > td {
            display: table-cell !important;
            white-space: nowrap;
        }

            .dt-mv-scroll table.dataTable > thead > tr > th.never,
            .dt-mv-scroll table.dataTable > tbody > tr > td.never,
            .dt-mv-scroll table.dataTable > tbody > tr > td.dt-mv-details,
            .dt-mv-scroll table.dataTable > tfoot > tr > .never {
                display: none !important;
            }

        /* the + of Responsive */
        .dt-mv-scroll table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
        .dt-mv-scroll table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
            padding-left: 0.75rem;
            cursor: auto;
        }

            .dt-mv-scroll table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
            .dt-mv-scroll table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
            .dt-mv-scroll table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before {
                display: none !important;
            }

    /* the name column stays at the start : the column with dt-mv-sticky, or the first one */
    .dt-mv-scroll:not(.dt-mv-has-sticky) table.dataTable > * > tr > :first-child,
    .dt-mv-scroll table.dataTable > * > tr > .dt-mv-sticky {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: var(--dt-mv-card);
        box-shadow: inset -1px 0 0 var(--dt-mv-line);
    }

    /* a colored row keeps its color on the sticky cell */
    .dt-mv-scroll:not(.dt-mv-has-sticky) table.dataTable > tbody > tr[class*=table-] > :first-child,
    .dt-mv-scroll table.dataTable > tbody > tr[class*=table-] > .dt-mv-sticky,
    .dt-mv-scroll:not(.dt-mv-has-sticky) table.dataTable > tbody > tr.selected > :first-child,
    .dt-mv-scroll table.dataTable > tbody > tr.selected > .dt-mv-sticky {
        background-color: inherit;
    }

    /* the shadow of the end edge : more of the table is behind it (the start edge is under the sticky column) */
    .dt-mv-scroll .dt-mv-box::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        width: 18px;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s;
        background: linear-gradient(to left, var(--dt-mv-shadow), transparent);
    }

    .dt-mv-rtl.dt-mv-scroll .dt-mv-box::after {
        background: linear-gradient(to right, var(--dt-mv-shadow), transparent);
    }

    .dt-mv-scroll .dt-mv-box.dt-mv-more-end::after {
        opacity: 1;
    }

    /* ---------------------------------------------------------------- the cards */
    .dt-mv-card table.dataTable {
        display: block;
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

        .dt-mv-card table.dataTable > thead,
        .dt-mv-card table.dataTable > tfoot {
            display: none !important;
        }

        .dt-mv-card table.dataTable > tbody {
            display: grid;
            gap: 0.75rem;
        }

            .dt-mv-card table.dataTable > tbody > tr {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                gap: 0.35rem 0.6rem;
                position: relative;
                box-sizing: border-box;
                padding: 0.8rem 0.9rem;
                background: var(--dt-mv-card) !important;
                color: var(--dt-mv-text) !important;
                border: 1px solid var(--dt-mv-line);
                border-inline-start: 4px solid var(--dt-mv-stripe, var(--dt-mv-line));
                border-radius: 0.85rem;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
            }

                /* the state of the row */
                .dt-mv-card table.dataTable > tbody > tr.table-success {
                    border-color: var(--dt-mv-success);
                    border-inline-start-color: var(--dt-mv-stripe, var(--dt-mv-success));
                }

                .dt-mv-card table.dataTable > tbody > tr.table-warning {
                    border-style: dashed;
                    border-color: var(--dt-mv-warning);
                    border-inline-start-style: solid;
                    border-inline-start-color: var(--dt-mv-stripe, var(--dt-mv-warning));
                    opacity: 0.8;
                }

                .dt-mv-card table.dataTable > tbody > tr.table-danger {
                    border-color: #F64E60;
                }

                .dt-mv-card table.dataTable > tbody > tr.table-info,
                .dt-mv-card table.dataTable > tbody > tr.table-primary {
                    border-color: var(--dt-mv-primary);
                }

                .dt-mv-card table.dataTable > tbody > tr.selected {
                    border-color: var(--dt-mv-primary);
                    background: var(--dt-mv-primary-soft) !important;
                    box-shadow: 0 0 0 1px var(--dt-mv-primary);
                }

                /* the cells : the inline display: none of Responsive is overridden */
                .dt-mv-card table.dataTable > tbody > tr > td {
                    display: block !important;
                    position: relative;
                    min-width: 0;
                    box-sizing: border-box;
                    width: auto !important;
                    max-width: 100%;
                    padding: 0 !important;
                    border: 0 !important;
                    background: transparent !important;
                    color: inherit;
                    text-align: start !important;
                    white-space: normal;
                    overflow-wrap: anywhere;
                    cursor: auto;
                }

                    /* the labels are ::before, the + of Responsive (also a ::before) is cleared */
                    .dt-mv-card table.dataTable > tbody > tr > td::before {
                        content: none !important;
                        position: static !important;
                        display: none !important;
                        top: auto !important;
                        left: auto !important;
                        right: auto !important;
                        width: auto !important;
                        height: auto !important;
                        margin: 0 !important;
                        border: 0 !important;
                        border-radius: 0 !important;
                        box-shadow: none !important;
                        background: none !important;
                        color: var(--dt-mv-muted) !important;
                        font-family: inherit !important;
                        font-size: 0.85rem !important;
                        font-weight: 400 !important;
                        line-height: 1.5 !important;
                        text-align: start !important;
                        text-indent: 0 !important;
                        box-sizing: border-box !important;
                    }

                    /* a field : the label at the start, the value next to it */
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-field {
                        flex: 0 0 100%;
                        padding-inline-start: 36% !important;
                        min-height: 1.5em;
                        line-height: 1.5;
                    }

                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-field::before {
                            content: attr(data-label) !important;
                            display: block !important;
                            position: absolute !important;
                            top: 0 !important;
                            inset-inline-start: 0 !important;
                            left: auto;
                            width: 34% !important;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                    /* the title */
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-title {
                        order: -3;
                        flex: 0 0 100%;
                        font-size: 1.05rem;
                        font-weight: 700;
                        line-height: 1.45;
                    }

                    /* next to the title, small, with its label */
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-sub {
                        order: -2;
                        flex: 0 1 auto;
                        font-size: 0.85rem;
                        color: var(--dt-mv-muted);
                    }

                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-sub::before {
                            content: attr(data-label) " " !important;
                            display: inline !important;
                            white-space: pre;
                        }

                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-sub a,
                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-sub span {
                            color: var(--dt-mv-text);
                        }

                    /* the amounts, side by side */
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-money {
                        order: 2;
                        flex: 1 1 0;
                        min-width: 5.5rem;
                        padding: 0.4rem 0.55rem !important;
                        background: var(--dt-mv-soft) !important;
                        border-radius: 0.5rem;
                        font-weight: 700;
                        font-variant-numeric: tabular-nums;
                    }

                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-money::before {
                            content: attr(data-label) !important;
                            display: block !important;
                            font-size: 0.78rem !important;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-money .btn-icon {
                            height: 1.6rem;
                            width: 1.6rem;
                            margin-top: -0.2rem;
                        }

                    /* the fields behind "more details" */
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-extra {
                        order: 3;
                    }

                    .dt-mv-card table.dataTable > tbody > tr:not(.dt-mv-open) > td.dt-mv-extra,
                    .dt-mv-card table.dataTable > tbody > tr:not(.dt-mv-open) > td.dt-mv-details,
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-hide,
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-empty {
                        display: none !important;
                    }

                    .dt-mv-card table.dataTable > tbody > tr.dt-mv-open > td.dt-mv-extra {
                        padding-top: 0.2rem !important;
                        border-top: 1px dashed var(--dt-mv-line) !important;
                    }

                    /* the hidden columns of the table (mobileViews: { details: true }) : after the other fields behind "more details" */
                    .dt-mv-card table.dataTable > tbody > tr.dt-mv-open > td.dt-mv-details {
                        order: 4;
                        flex: 0 0 100%;
                        display: grid !important;
                        gap: 0.35rem;
                    }

                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-details > .dt-mv-detail {
                            display: flow-root;
                            position: relative;
                            min-height: 1.5em;
                            padding-top: 0.2rem;
                            padding-inline-start: 36%;
                            border-top: 1px dashed var(--dt-mv-line);
                            line-height: 1.5;
                        }

                            .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-details > .dt-mv-detail::before {
                                content: attr(data-label);
                                position: absolute;
                                top: 0.2rem;
                                inset-inline-start: 0;
                                width: 34%;
                                overflow: hidden;
                                color: var(--dt-mv-muted);
                                font-size: 0.85rem;
                                line-height: 1.5;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                    /* the footer : the buttons of the row */
                    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-actions {
                        order: 10;
                        flex: 0 0 100%;
                        display: flex !important;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 0.15rem;
                        margin-top: 0.15rem;
                        padding-top: 0.45rem !important;
                        border-top: 1px solid var(--dt-mv-line) !important;
                    }

                        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-actions > .dt-mv-more {
                            margin-inline-end: auto;
                        }

                    /* the row of "no data" */
                    .dt-mv-card table.dataTable > tbody > tr > td.dataTables_empty {
                        flex: 1 1 100%;
                        padding: 1rem !important;
                        text-align: center !important;
                        color: var(--dt-mv-muted);
                    }

                        .dt-mv-card table.dataTable > tbody > tr > td.dataTables_empty::before {
                            display: none !important;
                        }

    /* the floats of the cells (an icon next to a value) stay in their cell */
    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-title,
    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-field {
        display: flow-root !important;
    }

    /* "more details" */
    .dt-mv-card .dt-mv-more {
        display: inline-block;
        padding: 0.15rem 0;
        border: 0;
        background: none;
        color: var(--dt-mv-primary);
        font: inherit;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
    }

        .dt-mv-card .dt-mv-more::after {
            content: " \25BE";
        }

    .dt-mv-card tr.dt-mv-open .dt-mv-more::after {
        content: " \25B4";
    }

    /* without a footer (no Actions column) "more details" and ⋮ are in the title cell, they are put in a footer line at the bottom of the card :
       "more details" at the start, ⋮ at the end, like the cards with a footer */
    .dt-mv-card table.dataTable > tbody > tr.dt-mv-more-bottom {
        padding-bottom: 3rem;
    }

        .dt-mv-card table.dataTable > tbody > tr.dt-mv-more-bottom::before {
            content: "";
            position: absolute;
            bottom: 2.75rem;
            inset-inline: 0.9rem;
            border-top: 1px solid var(--dt-mv-line);
        }

        /* the buttons of the title cell (⋮, "more details") are placed on the card */
        .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-title {
            position: static !important;
        }

    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-title > .dt-mv-more {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 0;
        inset-inline-start: 0.9rem;
        height: 2.75rem;
        padding: 0;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.5;
    }

    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-title > .dt-mv-menu {
        top: auto;
        bottom: calc((2.75rem - (1.35em + 1.1rem + 2px)) / 2);
        inset-inline-end: 0.9rem;
        width: calc(1.35em + 1.1rem + 2px);
        height: calc(1.35em + 1.1rem + 2px);
        border-radius: 0.42rem;
        font-size: 1rem;
    }

    .dt-mv-card .dataTables_processing {
        top: 3rem !important;
    }
}

/* the totals bar of a list on mobile (e.g. Views/Reception/List.cshtml) : the amounts side by side, it stays at the bottom of the screen
   (over the bottom bar of the mobile navigation) while the list is scrolled */
@media (max-width: 991.98px) {
    .dt-mv-totals-bar {
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
        margin: 1rem -0.25rem 0;
        padding: 0.55rem 0.65rem;
        background: var(--dt-mv-card);
        border: 1px solid var(--dt-mv-line);
        border-radius: 0.75rem;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
        text-align: center;
    }

    body.mnav-on .dt-mv-totals-bar {
        bottom: calc(var(--mnav-bar-h, 0px) + var(--mnav-safe-bottom, 0px) + 0.4rem);
    }

    .dt-mv-totals-bar > div {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .dt-mv-totals-bar span {
        font-size: 0.78rem;
        color: var(--dt-mv-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dt-mv-totals-bar strong {
        font-size: 0.95rem;
        color: var(--dt-mv-text);
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }
}

/* ---------------------------------------------------------------- phase 2 : the bar above the cards, the menu of a row, the sort,
   the selection with a long press, "show more" (js/dt-mobile-views.js) */
@media (max-width: 991.98px) {
    /* the switch of the views and the sort */
    .dt-mv-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .dt-mv-sort {
        display: none;
        align-items: center;
        gap: 0.3rem;
        max-width: 55%;
        padding: 0.3rem 0.75rem;
        border: 1px solid var(--dt-mv-line);
        border-radius: 1rem;
        background: var(--dt-mv-card);
        color: var(--dt-mv-muted);
        font: inherit;
        font-size: 0.82rem;
        line-height: 1.4;
        cursor: pointer;
    }

        .dt-mv-sort span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dt-mv-sort svg {
            width: 14px;
            height: 14px;
            flex: none;
        }

    .dt-mv-card .dt-mv-sort:not(.kt-hide) {
        display: inline-flex;
    }

    /* the ⋮ of a card : next to the buttons of the footer (the size of their btn-sm btn-icon), or at the end of the footer line of a card
       without a footer */
    .dt-mv-card .dt-mv-menu {
        display: grid;
        place-items: center;
        position: absolute;
        top: 0.45rem;
        inset-inline-end: 0.4rem;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border: 0;
        border-radius: 0.5rem;
        background: transparent;
        color: var(--dt-mv-muted);
        cursor: pointer;
    }

        .dt-mv-card .dt-mv-menu svg {
            width: 16px;
            height: 16px;
        }

        .dt-mv-card .dt-mv-menu:active {
            background: var(--dt-mv-soft);
        }

    .dt-mv-card table.dataTable > tbody > tr > td.dt-mv-actions > .dt-mv-menu {
        position: static;
        width: calc(1.35em + 1.1rem + 2px);
        height: calc(1.35em + 1.1rem + 2px);
        border-radius: 0.42rem;
    }

    .dt-mv-btn:focus-visible,
    .dt-mv-sort:focus-visible,
    .dt-mv-menu:focus-visible,
    .dt-mv-showmore:focus-visible,
    .dt-mv-sheet-item:focus-visible,
    .dt-mv-selbar button:focus-visible {
        outline: 2px solid var(--dt-mv-primary);
        outline-offset: 1px;
    }

    /* "show more" under the cards */
    .dt-mv-card .dt-mv-showmore:not(.kt-hide) {
        display: block;
        width: 100%;
        margin-top: 0.75rem;
        padding: 0.6rem;
        border: 1px dashed var(--dt-mv-line);
        border-radius: 0.75rem;
        background: var(--dt-mv-card);
        color: var(--dt-mv-primary);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    /* the selection : the cards are not text-selected by the long press, the bar is at the bottom of the screen */
    .dt-mv-card.dt-mv-selectable table.dataTable > tbody > tr {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .dt-mv-card.dt-mv-selecting table.dataTable > tbody > tr:not(.selected) {
        opacity: 0.85;
    }

    /* the circle of the selection takes the place of the ⋮ (the menu is in the bar) */
    .dt-mv-card.dt-mv-selecting table.dataTable > tbody > tr:not(.child)::after {
        content: "";
        position: absolute;
        top: 0.75rem;
        inset-inline-end: 0.75rem;
        display: grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid var(--dt-mv-line);
        border-radius: 50%;
        color: #FFFFFF;
        font-size: 0.85rem;
        line-height: 1;
    }

    .dt-mv-card.dt-mv-selecting table.dataTable > tbody > tr.selected::after {
        content: "\2713";
        border-color: var(--dt-mv-primary);
        background: var(--dt-mv-primary);
    }

    .dt-mv-card.dt-mv-selecting .dt-mv-menu {
        visibility: hidden;
    }

    .dt-mv-card.dt-mv-selecting .dt-mv-selbar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        inset-inline: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        z-index: 1035;
        padding: 0.5rem 0.6rem 0.5rem 0.9rem;
        background: var(--dt-mv-text);
        color: var(--dt-mv-card);
        border-radius: 0.85rem;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    }

    body.mnav-on .dt-mv-card.dt-mv-selecting .dt-mv-selbar {
        bottom: calc(var(--mnav-bar-h, 0px) + var(--mnav-safe-bottom, 0px) + 0.6rem);
    }

    .dt-mv-selcount {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
    }

    .dt-mv-selbar button {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.7rem;
        border: 0;
        border-radius: 0.55rem;
        background: rgba(255, 255, 255, 0.14);
        color: inherit;
        font: inherit;
        font-size: 0.85rem;
        cursor: pointer;
    }

        .dt-mv-selbar button.kt-hide {
            display: none;
        }

        .dt-mv-selbar button svg {
            width: 14px;
            height: 14px;
        }

    /* the bottom sheet (the sort) */
    .dt-mv-sheet-bg {
        position: fixed;
        inset: 0;
        z-index: 10050;
        display: flex;
        align-items: flex-end;
        background: rgba(0, 0, 0, 0.4);
    }

    .dt-mv-sheet {
        width: 100%;
        max-height: 75vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        background: var(--dt-mv-card);
        color: var(--dt-mv-text);
        border-radius: 1.1rem 1.1rem 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
    }

    .dt-mv-grip {
        width: 40px;
        height: 4px;
        margin: 0.15rem auto 0.6rem;
        border-radius: 2px;
        background: var(--dt-mv-line);
    }

    .dt-mv-sheet-title {
        margin-bottom: 0.35rem;
        color: var(--dt-mv-muted);
        font-size: 0.85rem;
        font-weight: 600;
    }

    .dt-mv-sheet-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem 0.25rem;
        border: 0;
        border-bottom: 1px solid var(--dt-mv-line);
        background: none;
        color: inherit;
        font: inherit;
        text-align: start;
        cursor: pointer;
    }

        .dt-mv-sheet-item:last-child {
            border-bottom: 0;
        }

        .dt-mv-sheet-item.active {
            color: var(--dt-mv-primary);
            font-weight: 600;
        }

        .dt-mv-sheet-item small {
            color: var(--dt-mv-muted);
            font-weight: 400;
        }

    /* the menus of the pages (jQuery contextMenu : the ⋮ of a card, a long press, a right click) on mobile : a bottom sheet that slides up
       over a dark layer, every item with its icon at the start and the texts in one line, the sub menus open in it */
    .context-menu-list.context-menu-root.dt-mv-sheet-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 80vh;
        height: auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        margin: 0 !important;
        padding: 0.5rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
        border: 0 !important;
        border-radius: 1.1rem 1.1rem 0 0 !important;
        background: var(--dt-mv-card) !important;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2) !important;
        font-size: 1rem;
    }

        /* the grip */
        .context-menu-list.context-menu-root.dt-mv-sheet-menu::before {
            content: "";
            display: block;
            width: 40px;
            height: 4px;
            margin: 0.15rem auto 0.5rem;
            border-radius: 2px;
            background: var(--dt-mv-line);
        }

        .context-menu-list.context-menu-root.dt-mv-sheet-menu.dt-mv-slide {
            animation: dt-mv-slide-up 0.22s ease-out;
        }

        .context-menu-list.dt-mv-sheet-menu .context-menu-item {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-height: 3rem;
            padding: 0.6rem 1rem !important;
            border-radius: 0.6rem;
            background: transparent;
            color: var(--dt-mv-text);
            box-sizing: border-box;
        }

            .context-menu-list.dt-mv-sheet-menu .context-menu-item.context-menu-hidden {
                display: none;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-item.context-menu-disabled {
                opacity: 0.5;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-item.context-menu-hover {
                background: var(--dt-mv-soft) !important;
                color: var(--dt-mv-text) !important;
            }

            /* the icon of the plugin (a font glyph absolute at the left) is replaced by a Line Awesome one in the row */
            .context-menu-list.dt-mv-sheet-menu .context-menu-item.context-menu-icon::before {
                display: none !important;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-item > .dt-mv-cm-icon,
            .context-menu-list.dt-mv-sheet-menu .context-menu-item > i,
            .context-menu-list.dt-mv-sheet-menu .context-menu-item > svg {
                display: inline-block;
                position: static !important;
                flex: none;
                width: 1.5rem;
                margin: 0 !important;
                color: var(--dt-mv-muted) !important;
                font-size: 1.35rem;
                text-align: center;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-item > svg {
                height: 1.1rem;
            }

            /* an item without an icon keeps its text under the others */
            .context-menu-list.dt-mv-sheet-menu .context-menu-item:not(.context-menu-separator):not(:has(> .dt-mv-cm-icon, > i, > svg)) {
                padding-inline-start: calc(1rem + 1.5rem + 0.85rem) !important;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-item > span {
                flex: 1 1 auto;
                min-width: 0;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-item.dt-mv-cm-danger,
            .context-menu-list.dt-mv-sheet-menu .context-menu-item.dt-mv-cm-danger > .dt-mv-cm-icon {
                color: #F64E60 !important;
            }

        .context-menu-list.dt-mv-sheet-menu .context-menu-separator {
            display: block;
            min-height: 0;
            padding: 0 !important;
            margin: 0.35rem 1rem;
            border-bottom: 1px solid var(--dt-mv-line);
        }

        /* a sub menu : its title, then its items under it, indented */
        .context-menu-list.dt-mv-sheet-menu .context-menu-submenu {
            flex-wrap: wrap;
            cursor: default;
        }

            .context-menu-list.dt-mv-sheet-menu .context-menu-submenu::after {
                display: none;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-submenu.context-menu-hover {
                background: transparent !important;
            }

            .context-menu-list.dt-mv-sheet-menu .context-menu-submenu > .context-menu-list {
                position: static !important;
                display: block !important;
                flex: 0 0 100%;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                margin: 0.25rem 0 0 !important;
                padding: 0 !important;
                padding-inline-start: 1.5rem !important;
                border: 0 !important;
                box-shadow: none !important;
                background: transparent !important;
            }

                .context-menu-list.dt-mv-sheet-menu .context-menu-submenu > .context-menu-list .context-menu-item {
                    min-height: 2.6rem;
                    color: var(--dt-mv-muted);
                    font-size: 0.95rem;
                }

    body:has(> .context-menu-list.dt-mv-sheet-menu) #context-menu-layer {
        opacity: 0.4 !important;
    }

    /* the sort sheet slides up too */
    .dt-mv-sheet {
        animation: dt-mv-slide-up 0.22s ease-out;
    }
}

@keyframes dt-mv-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .context-menu-list.context-menu-root.dt-mv-sheet-menu.dt-mv-slide,
    .dt-mv-sheet {
        animation: none;
    }
}