/* ============================================================================
   Responsive shell — lets the ERP page (header, menus, alerts, footer, 24-column
   grid) follow the screen width instead of the fixed 1416px desktop page.

   HOW IT IS SWITCHED ON
   The Output class (classes/output.class.php) turns it on for every page that is
   rendered through templates/index/index.tpl or the login page: the viewport meta,
   this file and js/shell.js are added to the page and class "rs" goes on <body>.
   Every rule here sits under body.rs. A screen that was converted by hand also
   calls $output->use_responsive_shell() in its handler; a page without that call
   gets class "rs-default" next to "rs" (see "pages nobody converted" at the end).
   Print templates, ajax answers and standalone documents do not output the head
   placeholder, so they are not affected. All rules are inside @media screen, so
   printing is never touched by this file (the one exception: the summary line of
   a filter block is hidden in print too). The page's own CSS loads after this
   file and may override it.

   WIDTH BANDS (viewport width in CSS px)
     1416 and up   nothing changes: the classic page and header. (The touch rules
                   below can still apply on a touch screen.)
     1024 - 1415   fluid grid; header stays one row: logo | menu | user | log out.
     768 - 1023    same grid; header has two rows: logo + user + log out, then the menu.
     below 768     grid columns stack; compact header (logo, user name, log out);
                   position/department and the version link are hidden - they are
                   not work actions.
   Below 1416 the menus are one line that scrolls sideways inside its own box.

   TOUCH (pointer: coarse, or narrower than 768px, at any width)
     Controls are at least 44px tall and text fields use 16px (iOS zooms into
     smaller ones). Desktop sizes (fine pointer, 768 and up) are not changed.

   FURTHER SECTIONS (easy to miss when scrolling)
     "old jQuery forms and widgets", after the touch rules: Select2 width, fixed-width form fields, the loading /
                       delivery block columns, the datepicker popup and the #pages strip (page numbers of the long lists).
     "list pages with the top bar", after the utilities: the #actions-wrapper bar of the customers, buyers and positions lists.
     "order lists", next to the end: table.rs-orders and #actions.rs-order-actions, the cards of the loading and delivery
                       lists. They live in this shared file because those two lists have no stylesheet of their own.
     "pages nobody converted", the last section: body.rs-default only - the screens that got the shell by default.

   UTILITIES for screens that opt in
     .rs-scroll        a box; below 1416px a wide table inside it scrolls sideways inside the
                       box (from 1416px up the classic page always fits, and a box that scrolls
                       would change how the margins around it collapse). A box that scrolls
                       sideways also clips absolutely positioned popovers inside it (its
                       overflow-y becomes auto too).
     table.rs-cards    below 768px every row becomes a card: thead hidden, each td is
                       a block that starts with its label (the data-label attribute,
                       inline, then a colon) and then holds whatever the cell holds, so
                       any number of children flow naturally; td.rs-card-title is the
                       bold first line; td.rs-card-actions is a wrapping row of buttons.
                       A header row written without <thead> takes class rs-card-head, a row
                       under the list (the pager) takes rs-card-footer: neither is a card.
                       A cell with nothing in it is left out of its card. A card is a column, its title
                       first. The first link of the title is a cover over the whole card (a tap anywhere
                       opens the row); every other link, field and button of the card sits above it.
                       td.rs-card-check is a tick box in the card's top right corner.
                       The number link (td.rs-card-title) and the buttons (td.rs-card-actions) are at
                       least 44px on every touch screen, also in a table row on a tablet.
                       From 768px up the table is otherwise unchanged.
     .rs-ticks         a container whose tick boxes are, on a touch screen, a 24px box drawn inside a
                       44px area that takes the tap (the browser's own box is 13px).
     .rs-actions       a row of buttons that wraps, 8px apart.
     details.rs-filters  collapsible filter block. Write it with the open attribute: it
                       is then open on desktop and without the script, and its summary is
                       hidden from 768px up. On a phone js/shell.js closes it when no
                       field inside has a value, and opens it again from 768px up.
   ========================================================================= */

@media print {
    details.rs-filters > summary { display: none; }
}

@media screen {

/* --- all widths below 1416 ------------------------------------------------ */
@media (max-width: 1415px) {
    body.rs,
    body.rs #wrapper { min-width: 0; }

    /* The container is fluid, still capped at the classic width. */
    body.rs .container_24 { width: auto; max-width: 1416px; margin: 0 auto; padding: 0 8px; box-sizing: border-box; }

    /* Header: a grid so the logo, menu, user and log-out sit in fixed places at any width.
       The logo is the background image of #header; its column keeps the menu clear of it.
       The markup's own grid_N / prefix_N classes are switched off for the three header
       blocks - menu, user info, log out (the last div) - because the #id beats them. */
    body.rs #header {
        display: grid; grid-template-columns: 212px minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center;
        width: auto; height: 46px; margin: 0; float: none;
    }
    body.rs #header > div { width: auto; margin: 0; padding-left: 0; padding-right: 0; float: none; }
    body.rs #parent_menu { grid-column: 2; align-self: start; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
    body.rs #header_user_info { grid-column: 3; height: auto; padding-bottom: 6px; }
    body.rs #header > div:last-child { grid-column: 4; }
    body.rs #logout-button { margin-top: 0; }
    /* Name, position and version link have to fit above the orange line of the 46px strip: no spacer, position on one line. */
    body.rs #header_user_info .aligner { display: none; }
    body.rs #header_user_info .user-position { max-width: 150px; white-space: nowrap; text-overflow: ellipsis; }

    /* Menus: one line, scrolling inside their own box. grid.css floats and wraps
       the child menu items, so it becomes a block with inline-block items. */
    body.rs #wrapper-child-menu { height: auto; min-height: 57px; }
    body.rs #child_menu { display: block; height: auto; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
    body.rs #child_menu li { float: none; display: inline-block; vertical-align: top; }
    body.rs #parent_menu,
    body.rs #child_menu { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
}

/* --- 768 - 1415: the fluid 24-column grid ---------------------------------- */
/* grid.css gives every column a fixed width in px. Here a grid_N is N columns of the whole
   container, like in the 960 grid system, also when it is nested in another grid_M. Percentages
   count from the parent, so a column is N * pitch - 8px (its margins) wide, where
     pitch = (parent width + parent gutter) / parent span.
   The container has no outer gutter and spans 24 (+0px); a grid_M is M * pitch - 8px wide, so for
   the columns nested in it it spans M (+8px). --rs-ctx is that span and --rs-ctx-g the gutter:
   set on every child of the container / of a grid_M, and inherited by any wrapper in between.
   :where() keeps these rules at the specificity of grid.css's own ".container_24 .grid_N", so a
   page rule with a higher specificity, or one loaded after this file, wins over the fluid column
   width, as it wins over grid.css's. */
@media (min-width: 768px) and (max-width: 1415px) {
    body.rs .container_24 > * { --rs-ctx: 24; --rs-ctx-g: 0px; }
    body.rs .grid_1 > * { --rs-ctx: 1; --rs-ctx-g: 8px; }
    body.rs .grid_2 > * { --rs-ctx: 2; --rs-ctx-g: 8px; }
    body.rs .grid_3 > * { --rs-ctx: 3; --rs-ctx-g: 8px; }
    body.rs .grid_4 > * { --rs-ctx: 4; --rs-ctx-g: 8px; }
    body.rs .grid_5 > * { --rs-ctx: 5; --rs-ctx-g: 8px; }
    body.rs .grid_6 > * { --rs-ctx: 6; --rs-ctx-g: 8px; }
    body.rs .grid_7 > * { --rs-ctx: 7; --rs-ctx-g: 8px; }
    body.rs .grid_8 > * { --rs-ctx: 8; --rs-ctx-g: 8px; }
    body.rs .grid_9 > * { --rs-ctx: 9; --rs-ctx-g: 8px; }
    body.rs .grid_10 > * { --rs-ctx: 10; --rs-ctx-g: 8px; }
    body.rs .grid_11 > * { --rs-ctx: 11; --rs-ctx-g: 8px; }
    body.rs .grid_12 > * { --rs-ctx: 12; --rs-ctx-g: 8px; }
    body.rs .grid_13 > * { --rs-ctx: 13; --rs-ctx-g: 8px; }
    body.rs .grid_14 > * { --rs-ctx: 14; --rs-ctx-g: 8px; }
    body.rs .grid_15 > * { --rs-ctx: 15; --rs-ctx-g: 8px; }
    body.rs .grid_16 > * { --rs-ctx: 16; --rs-ctx-g: 8px; }
    body.rs .grid_17 > * { --rs-ctx: 17; --rs-ctx-g: 8px; }
    body.rs .grid_18 > * { --rs-ctx: 18; --rs-ctx-g: 8px; }
    body.rs .grid_19 > * { --rs-ctx: 19; --rs-ctx-g: 8px; }
    body.rs .grid_20 > * { --rs-ctx: 20; --rs-ctx-g: 8px; }
    body.rs .grid_21 > * { --rs-ctx: 21; --rs-ctx-g: 8px; }
    body.rs .grid_22 > * { --rs-ctx: 22; --rs-ctx-g: 8px; }
    body.rs .grid_23 > * { --rs-ctx: 23; --rs-ctx-g: 8px; }
    body.rs .grid_24 > * { --rs-ctx: 24; --rs-ctx-g: 8px; }

    :where(body.rs) .container_24 .grid_1 { width: calc((100% + var(--rs-ctx-g, 0px)) * 1 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_2 { width: calc((100% + var(--rs-ctx-g, 0px)) * 2 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_3 { width: calc((100% + var(--rs-ctx-g, 0px)) * 3 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_4 { width: calc((100% + var(--rs-ctx-g, 0px)) * 4 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_5 { width: calc((100% + var(--rs-ctx-g, 0px)) * 5 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_6 { width: calc((100% + var(--rs-ctx-g, 0px)) * 6 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_7 { width: calc((100% + var(--rs-ctx-g, 0px)) * 7 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_8 { width: calc((100% + var(--rs-ctx-g, 0px)) * 8 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_9 { width: calc((100% + var(--rs-ctx-g, 0px)) * 9 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_10 { width: calc((100% + var(--rs-ctx-g, 0px)) * 10 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_11 { width: calc((100% + var(--rs-ctx-g, 0px)) * 11 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_12 { width: calc((100% + var(--rs-ctx-g, 0px)) * 12 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_13 { width: calc((100% + var(--rs-ctx-g, 0px)) * 13 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_14 { width: calc((100% + var(--rs-ctx-g, 0px)) * 14 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_15 { width: calc((100% + var(--rs-ctx-g, 0px)) * 15 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_16 { width: calc((100% + var(--rs-ctx-g, 0px)) * 16 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_17 { width: calc((100% + var(--rs-ctx-g, 0px)) * 17 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_18 { width: calc((100% + var(--rs-ctx-g, 0px)) * 18 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_19 { width: calc((100% + var(--rs-ctx-g, 0px)) * 19 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_20 { width: calc((100% + var(--rs-ctx-g, 0px)) * 20 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_21 { width: calc((100% + var(--rs-ctx-g, 0px)) * 21 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_22 { width: calc((100% + var(--rs-ctx-g, 0px)) * 22 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_23 { width: calc((100% + var(--rs-ctx-g, 0px)) * 23 / var(--rs-ctx, 24) - 8px); }
    :where(body.rs) .container_24 .grid_24 { width: calc((100% + var(--rs-ctx-g, 0px)) * 24 / var(--rs-ctx, 24) - 8px); }

    :where(body.rs) .container_24 .prefix_1 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 1 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_2 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 2 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_3 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 3 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_4 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 4 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_5 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 5 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_6 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 6 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_7 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 7 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_8 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 8 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_9 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 9 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_10 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 10 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_11 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 11 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_12 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 12 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_13 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 13 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_14 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 14 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_15 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 15 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_16 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 16 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_17 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 17 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_18 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 18 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_19 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 19 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_20 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 20 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_21 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 21 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_22 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 22 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .prefix_23 { padding-left: calc((100% + var(--rs-ctx-g, 0px)) * 23 / var(--rs-ctx, 24)); }

    :where(body.rs) .container_24 .suffix_1 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 1 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_2 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 2 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_3 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 3 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_4 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 4 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_5 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 5 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_6 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 6 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_7 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 7 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_8 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 8 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_9 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 9 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_10 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 10 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_11 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 11 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_12 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 12 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_13 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 13 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_14 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 14 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_15 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 15 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_16 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 16 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_17 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 17 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_18 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 18 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_19 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 19 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_20 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 20 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_21 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 21 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_22 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 22 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .suffix_23 { padding-right: calc((100% + var(--rs-ctx-g, 0px)) * 23 / var(--rs-ctx, 24)); }

    :where(body.rs) .container_24 .push_1 { left: calc((100% + var(--rs-ctx-g, 0px)) * 1 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_2 { left: calc((100% + var(--rs-ctx-g, 0px)) * 2 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_3 { left: calc((100% + var(--rs-ctx-g, 0px)) * 3 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_4 { left: calc((100% + var(--rs-ctx-g, 0px)) * 4 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_5 { left: calc((100% + var(--rs-ctx-g, 0px)) * 5 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_6 { left: calc((100% + var(--rs-ctx-g, 0px)) * 6 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_7 { left: calc((100% + var(--rs-ctx-g, 0px)) * 7 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_8 { left: calc((100% + var(--rs-ctx-g, 0px)) * 8 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_9 { left: calc((100% + var(--rs-ctx-g, 0px)) * 9 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_10 { left: calc((100% + var(--rs-ctx-g, 0px)) * 10 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_11 { left: calc((100% + var(--rs-ctx-g, 0px)) * 11 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_12 { left: calc((100% + var(--rs-ctx-g, 0px)) * 12 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_13 { left: calc((100% + var(--rs-ctx-g, 0px)) * 13 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_14 { left: calc((100% + var(--rs-ctx-g, 0px)) * 14 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_15 { left: calc((100% + var(--rs-ctx-g, 0px)) * 15 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_16 { left: calc((100% + var(--rs-ctx-g, 0px)) * 16 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_17 { left: calc((100% + var(--rs-ctx-g, 0px)) * 17 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_18 { left: calc((100% + var(--rs-ctx-g, 0px)) * 18 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_19 { left: calc((100% + var(--rs-ctx-g, 0px)) * 19 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_20 { left: calc((100% + var(--rs-ctx-g, 0px)) * 20 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_21 { left: calc((100% + var(--rs-ctx-g, 0px)) * 21 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_22 { left: calc((100% + var(--rs-ctx-g, 0px)) * 22 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .push_23 { left: calc((100% + var(--rs-ctx-g, 0px)) * 23 / var(--rs-ctx, 24)); }

    :where(body.rs) .container_24 .pull_1 { left: calc((100% + var(--rs-ctx-g, 0px)) * -1 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_2 { left: calc((100% + var(--rs-ctx-g, 0px)) * -2 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_3 { left: calc((100% + var(--rs-ctx-g, 0px)) * -3 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_4 { left: calc((100% + var(--rs-ctx-g, 0px)) * -4 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_5 { left: calc((100% + var(--rs-ctx-g, 0px)) * -5 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_6 { left: calc((100% + var(--rs-ctx-g, 0px)) * -6 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_7 { left: calc((100% + var(--rs-ctx-g, 0px)) * -7 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_8 { left: calc((100% + var(--rs-ctx-g, 0px)) * -8 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_9 { left: calc((100% + var(--rs-ctx-g, 0px)) * -9 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_10 { left: calc((100% + var(--rs-ctx-g, 0px)) * -10 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_11 { left: calc((100% + var(--rs-ctx-g, 0px)) * -11 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_12 { left: calc((100% + var(--rs-ctx-g, 0px)) * -12 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_13 { left: calc((100% + var(--rs-ctx-g, 0px)) * -13 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_14 { left: calc((100% + var(--rs-ctx-g, 0px)) * -14 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_15 { left: calc((100% + var(--rs-ctx-g, 0px)) * -15 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_16 { left: calc((100% + var(--rs-ctx-g, 0px)) * -16 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_17 { left: calc((100% + var(--rs-ctx-g, 0px)) * -17 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_18 { left: calc((100% + var(--rs-ctx-g, 0px)) * -18 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_19 { left: calc((100% + var(--rs-ctx-g, 0px)) * -19 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_20 { left: calc((100% + var(--rs-ctx-g, 0px)) * -20 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_21 { left: calc((100% + var(--rs-ctx-g, 0px)) * -21 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_22 { left: calc((100% + var(--rs-ctx-g, 0px)) * -22 / var(--rs-ctx, 24)); }
    :where(body.rs) .container_24 .pull_23 { left: calc((100% + var(--rs-ctx-g, 0px)) * -23 / var(--rs-ctx, 24)); }
}

/* --- 768 - 1023: header in two rows ---------------------------------------- */
/* Row 1 = logo, user, log out (the classic 46px strip with its orange line); row 2 = the menu. */
@media (min-width: 768px) and (max-width: 1023px) {
    body.rs #wrapper-header { height: auto; background-color: #efefef; }
    body.rs #header { height: auto; grid-template-columns: 212px minmax(0, 1fr) auto; grid-template-rows: 46px auto; }
    body.rs #header_user_info { grid-column: 2; grid-row: 1; }
    body.rs #header > div:last-child { grid-column: 3; grid-row: 1; }
    body.rs #parent_menu { grid-column: 1 / -1; grid-row: 2; margin-top: 0; padding: 6px 0; }
}

/* --- below 768: phone ------------------------------------------------------ */
@media (max-width: 767px) {
    /* Columns stack, one under another. */
    body.rs .container_24 [class^="grid_"],
    body.rs .container_24 [class*=" grid_"] { display: block; float: none; width: auto; margin: 0 4px; }
    body.rs .container_24 [class^="prefix_"], body.rs .container_24 [class*=" prefix_"],
    body.rs .container_24 [class^="suffix_"], body.rs .container_24 [class*=" suffix_"] { padding-left: 0; padding-right: 0; }
    body.rs .container_24 [class^="push_"], body.rs .container_24 [class*=" push_"],
    body.rs .container_24 [class^="pull_"], body.rs .container_24 [class*=" pull_"] { left: 0; }
    body.rs label.error { width: auto; text-align: left; }

    /* Header: the logo (a background image, scaled to about 140 x 32), the user name, log out; menu below. */
    body.rs #wrapper-header { height: auto; background-color: #efefef; }
    body.rs #header {
        height: auto; grid-template-columns: 140px minmax(0, 1fr) auto; grid-template-rows: 46px auto;
        column-gap: 8px; background-size: 140px auto; background-position: 0 7px;
    }
    body.rs #header_user_info { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
    body.rs #header_user_info .user-name { min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.rs #header_user_info .user-position { display: none; }
    /* the version link has an inline display:block */
    body.rs #header_user_info a { display: none !important; }
    body.rs #header > div:last-child { grid-column: 3; grid-row: 1; }
    body.rs #parent_menu { grid-column: 1 / -1; grid-row: 2; margin-top: 0; padding: 6px 0; }
    body.rs #parent_menu li a { padding: 0 12px; }
    body.rs #child_menu li a { padding-left: 10px; padding-right: 10px; }
}

/* --- login page (templates/index/clear.tpl) -------------------------------- */
@media (max-width: 767px) {
    body.rs #login { width: auto; margin: 16px; padding-bottom: 16px; box-sizing: border-box; }
    body.rs #login_header { width: auto; margin: 2px 2px 16px; }
    body.rs #login .label { float: none; width: auto; height: auto; margin: 0 16px 4px; text-align: left; }
    body.rs #login input[type=text],
    body.rs #login input[type=password] { display: block; width: calc(100% - 32px); margin: 0 16px 12px; box-sizing: border-box; }
    body.rs #login input[type=submit] { float: none; display: block; width: calc(100% - 32px); margin: 16px 16px 0; }
}

/* --- touch: big enough to hit, 16px so that iOS does not zoom in --------------- */
@media (pointer: coarse), (max-width: 767px) {
    body.rs #parent_menu { height: auto; margin-top: 0; align-self: end; }
    body.rs #parent_menu li { height: auto; }
    body.rs #parent_menu li a { line-height: 44px; }
    body.rs #logout-button { margin-top: 1px; line-height: 42px; height: auto; }

    body.rs button,
    body.rs .button,
    body.rs input[type=submit],
    body.rs input[type=button],
    body.rs input[type=text],
    body.rs input[type=password],
    body.rs input[type=email],
    body.rs input[type=number],
    body.rs input[type=search],
    body.rs input[type=tel],
    body.rs input[type=url],
    body.rs input[type=date],
    body.rs input[type=time],
    body.rs input:not([type]),
    body.rs select,
    body.rs textarea,
    body.rs .select2-selection { min-height: 44px; }
    /* The button background is a 22px gradient: stretch it over the taller button. */
    body.rs .button { display: inline-flex; align-items: center; justify-content: center; background-size: 100% 100%; }

    body.rs input[type=text],
    body.rs input[type=password],
    body.rs input[type=email],
    body.rs input[type=number],
    body.rs input[type=search],
    body.rs input[type=tel],
    body.rs input[type=url],
    body.rs input[type=date],
    body.rs input[type=time],
    body.rs input:not([type]),
    body.rs select,
    body.rs textarea,
    body.rs .select2-search__field { font-size: 16px; }

    /* Select2: the box and the text inside it follow the 44px. */
    body.rs .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; font-size: 16px; }
    body.rs .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
    /* The "x" that clears a Select2 (allowClear) is a float:right button before the text (select2 4.1), 26px high in
       select2.css. Here a 44px square; select2's own 20px right margin keeps it clear of the arrow, and the text
       before it is cut with an ellipsis. */
    body.rs .select2-container .select2-selection .select2-selection__clear { min-width: 44px; height: 44px; margin: -1px 20px 0 0; padding: 0; line-height: 44px; font-size: 18px; }
    body.rs .select2-dropdown .select2-search__field { min-height: 44px; }
    body.rs .select2-results__option { min-height: 44px; padding: 12px 8px; box-sizing: border-box; font-size: 16px; }

    /* jQuery UI datepicker: day cells about 40px. */
    body.rs .ui-datepicker { width: 300px; font-size: 16px; }
    body.rs .ui-datepicker td a,
    body.rs .ui-datepicker td span { padding: 10px 0; text-align: center; }
}

/* --- old jQuery forms and widgets (style.css rules written for the 1416px page) --- */
@media (max-width: 1415px) {
    /* style.css gives every Select2 min-width 200px and some pickers 315-330px (.select2-product-select,
       .select2-product-repackage-page / -view, .waste_product_row): wider than a narrow column. */
    body.rs .select2-container { max-width: 100%; }

    /* style.css gives the form fields fixed widths of 303-330px (.info-block ..., .blocks-load-order ...) and the
       "add" links 315-330px. A field next to its floated label (25%) may take the other 75%. */
    body.rs .info-block .info-block-item select,
    body.rs .info-block .info-block-item input[type=text],
    body.rs .info-block .info-block-item input[type=number],
    body.rs .info-block .info-block-item input[type=password],
    body.rs .info-block .info-block-item input[type=email],
    body.rs .info-block .info-block-item textarea,
    body.rs .info-block .info-block-item .info-block-addendum-items { max-width: calc(75% - 8px); box-sizing: border-box; }

    /* A Select2 next to its floated label may take at most the other 75% (style.css gives it min-width 200-330px and
       a left margin of 23-42px, which stay on a tablet; the phone rule below removes the margin). */
    body.rs .info-block .info-block-item .select2-container { max-width: calc(75% - 8px); }

    /* style.css: label.error { width: 460px } */
    body.rs label.error { max-width: 100%; }

    /* The datepicker popup stays inside the screen. */
    body.rs .ui-datepicker { max-width: calc(100vw - 16px); box-sizing: border-box; }

    /* #pages (helper.php pagination(): floated links, hundreds of pages on the order lists) is one strip that scrolls
       inside its own box. Inside a table that scrolls sideways it stays at the left edge of the visible part. */
    body.rs #pages { display: flex; overflow-x: auto; position: sticky; left: 0; max-width: calc(100vw - 16px); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    body.rs #pages a { float: none; flex: 0 0 auto; }

    /* style.css: .info-block table.list { width: 494px } (shifted 10px left to cover the padding of the block), and
       .info-block { overflow: hidden } cuts off a table that is wider than the block: the file list scrolls instead. */
    body.rs .info-block table.list { width: calc(100% + 20px); }
    body.rs .info-block.files-block { overflow-x: auto; }

    /* style.css: .blocks-load-order .rows_products / .rows_transports are two 485px columns, and the two "add" links
       are absolutely placed 475px boxes in the bottom corners. Here the columns share the width and so do the links. */
    body.rs .blocks-load-order .block-load-order .rows_products,
    body.rs .blocks-load-order .block-load-order .rows_transports { width: calc(50% - 6px); box-sizing: border-box; }
    body.rs .blocks-load-order .block-load-order .new_row_button_wrap { width: calc(50% - 15px); box-sizing: border-box; }
    /* The fields in those columns are 303-315px wide in style.css. */
    body.rs .blocks-load-order .block-load-order .block-load-order-item .info-block-item select,
    body.rs .blocks-load-order .block-load-order .block-load-order-item .info-block .info-block-item input[type=text],
    body.rs .blocks-load-order .block-load-order .block-load-order-item .info-block .info-block-item input[type=number],
    body.rs .blocks-load-order .block-load-order .block-load-order-item .info-block .info-block-item input[type=password],
    body.rs .blocks-load-order .block-load-order .block-load-order-item .info-block .info-block-item textarea,
    body.rs .blocks-load-order .block-load-order .block-load-order-item .info-block-item .info-block-addendum-items { max-width: calc(75% - 8px); box-sizing: border-box; }
}

@media (max-width: 767px) {
    /* A phone has one column: labels over their fields, fields as wide as the column. style.css sets the widths with
       selectors up to eight classes long (.blocks-load-order ...), so !important is what beats them (.datepicker has it too). */
    body.rs .info-block .info-block-item label { float: none; width: auto; text-align: left; }
    body.rs .info-block .info-block-item select,
    body.rs .info-block .info-block-item input[type=text],
    body.rs .info-block .info-block-item input[type=number],
    body.rs .info-block .info-block-item input[type=password],
    body.rs .info-block .info-block-item input[type=email],
    body.rs .info-block .info-block-item textarea,
    body.rs .info-block .info-block-item .info-block-addendum-items { float: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin-left: 0 !important; }

    /* style.css: .select2-container { min-width: 200px !important; width: auto !important } and the fixed 315-330px pickers.
       Only the field's own container: Select2 appends the open dropdown's wrapper (also .select2-container) straight to
       <body> with an inline left, and at 100% wide it would push the page sideways while the dropdown is open. */
    body.rs :not(body) > .select2-container { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; box-sizing: border-box; }
    /* The hint under a warehouse filter is indented by 25% inline, to line up with a field next to a label. */
    body.rs .wh-target-hint small { margin-left: 0 !important; }

    /* A bare field in a block (the buyer link) spans the block. */
    body.rs .info-block.files-block > input { width: 100%; box-sizing: border-box; }

    /* The two columns of a loading / delivery block stack, and each "add" link sits in the flow under them. */
    body.rs .blocks-load-order .block-load-order { padding-bottom: 10px; }
    body.rs .blocks-load-order .block-load-order .rows_products,
    body.rs .blocks-load-order .block-load-order .rows_transports { float: none; width: auto; }
    body.rs .blocks-load-order .block-load-order .new_row_button_wrap { position: static; width: auto; margin-top: 8px; padding: 0; }
    body.rs .blocks-load-order .block-load-order .new_row_button_wrap a { float: none; line-height: 44px; }

    /* Save / annul buttons: a row that wraps, with a gap wide enough that the risky one is not hit by mistake
       (the same as .rs-actions, written here because the form must stay unchanged on desktop). */
    body.rs #view-wrapper .actions { display: flex; flex-wrap: wrap; gap: 16px; float: none; }
}

@media (pointer: coarse), (max-width: 767px) {
    /* #pages links: a 44px square to tap. */
    body.rs #pages a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; }

    /* The trash icon that removes a goods / transport line is 22px in style.css; the line leaves room for a 44px one. */
    body.rs .blocks-load-order .block-load-order .block-load-order-item { padding-top: 44px; }
    body.rs .blocks-load-order .block-load-order .block-load-order-item .link-remove { width: 44px; height: 44px; background-position: 50% 50%; }
}

@media (pointer: coarse) and (min-width: 768px) {
    /* style.css: a datepicker is 57px wide - too narrow for a 16px date; same for the time field. */
    body.rs .info-block .info-block-item input.datepicker,
    body.rs .info-block .info-block-item input.time { width: 130px !important; }
}

/* --- utilities ------------------------------------------------------------- */
body.rs .rs-scroll { max-width: 100%; }
@media (max-width: 1415px) {
    body.rs .rs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
body.rs .rs-actions { display: flex; flex-wrap: wrap; gap: 8px; }

body.rs details.rs-filters > summary { display: none; }

@media (max-width: 767px) {
    body.rs details.rs-filters > summary { display: list-item; min-height: 44px; line-height: 44px; font-weight: 600; cursor: pointer; }

    body.rs table.rs-cards,
    body.rs table.rs-cards tbody,
    body.rs table.rs-cards tr,
    body.rs table.rs-cards td { display: block; width: auto; }
    body.rs table.rs-cards thead,
    body.rs table.rs-cards tr.rs-card-head { display: none; }
    body.rs table.rs-cards tr { display: flex; flex-direction: column; position: relative; margin: 0 0 12px; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; }
    body.rs table.rs-cards td { padding: 4px 0; border: 0; text-align: left; }
    body.rs table.rs-cards td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: #666; }
    body.rs table.rs-cards tr.rs-card-footer { margin: 0; padding: 0; border: 0; background: none; }
    body.rs table.rs-cards td:empty { display: none; }
    body.rs table.rs-cards td.rs-card-title { order: -1; font-weight: bold; font-size: 15px; }
    /* The title cell has no label. Same specificity as the data-label rule above, so it must stay below it. */
    body.rs table.rs-cards td.rs-card-title::before { content: none; }
    body.rs table.rs-cards td.rs-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    body.rs table.rs-cards td.rs-card-actions a { padding: 0 12px; border: 1px solid #ccc; border-radius: 5px; }

    /* The first link of the title covers the whole card; the row is the positioned box. Everything else that can be
       tapped sits above that cover. */
    body.rs table.rs-cards td.rs-card-title a:first-child::after { content: ""; position: absolute; inset: 0; }
    body.rs table.rs-cards td a,
    body.rs table.rs-cards td input,
    body.rs table.rs-cards td button,
    body.rs table.rs-cards td select,
    body.rs table.rs-cards td textarea { position: relative; z-index: 1; }
    body.rs table.rs-cards td.rs-card-title a:first-child { position: static; z-index: auto; }
    /* The tick box cell leaves the flow; the title keeps clear of it. */
    body.rs table.rs-cards td.rs-card-check { position: absolute; top: 0; right: 0; padding: 0; }
    body.rs table.rs-cards td.rs-card-check ~ td.rs-card-title { padding-right: 44px; }
}

@media (pointer: coarse), (max-width: 767px) {
    body.rs table.rs-cards td.rs-card-title a,
    body.rs table.rs-cards td.rs-card-actions a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; box-sizing: border-box; }
    body.rs table.rs-cards td.rs-card-title a { padding-left: 0; }

    /* .rs-ticks: a 24px box drawn inside a 44px area. */
    body.rs .rs-ticks input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin: 0; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='10' y='10' width='24' height='24' rx='4' fill='%23fff' stroke='%23777' stroke-width='2'/%3E%3C/svg%3E") center no-repeat; }
    body.rs .rs-ticks input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='10' y='10' width='24' height='24' rx='4' fill='%23cd1627' stroke='%23cd1627' stroke-width='2'/%3E%3Cpath d='M16 22l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E"); }
}

/* --- list pages with the top bar --------------------------------------------------------------------------- */
/* #actions-wrapper holds the search, "Naujas" and "Trinti" of the customers, buyers and positions lists. */
@media (pointer: coarse), (max-width: 767px) {
    /* style.css makes the bar 31px high, on a gradient that is a 31px crop of a sprite. With 44px controls in it the bar
       grows, and the gradient gives way to plain grey on every touch screen (a tablet in landscape too). */
    body.rs #actions-wrapper { height: auto; padding: 4px 0; background: #efefef; }
    body.rs #actions-wrapper #actions { height: auto; line-height: normal; }
    body.rs #actions-wrapper #actions ul li a { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) {
    /* One control under another; the last one ("Trinti") is set apart from the others. */
    body.rs #actions-wrapper #actions ul { float: none; }
    body.rs #actions-wrapper #actions ul li { float: none; margin: 0 5px 8px; }
    body.rs #actions-wrapper #actions ul li:last-child:not(:only-child) { margin-top: 16px; }
    body.rs #actions-wrapper form input[type=text],
    body.rs #actions-wrapper form input[type=submit] { display: block; width: 100%; box-sizing: border-box; }
    body.rs #actions-wrapper form input[type=submit] { margin-top: 8px; }
}


/* --- order lists: loading (upload list) and delivery (unload list) -------------- */
/* Below 768 a row is a card whose first line is the order number and date (the number is a link that covers the whole
   card, so a tap anywhere opens the order), then the status with its action button, then the other cells in their
   order. Rows come from templates/uhb_storage/{upload,unload}_order/row.tpl. */
@media (max-width: 767px) {
    body.rs table.rs-orders tr:not(.rs-card-head) { flex-direction: row; flex-wrap: wrap; align-items: center; }
    body.rs table.rs-orders td { flex: 1 0 100%; box-sizing: border-box; }
    body.rs table.rs-orders td.rs-card-title { order: -3; flex: 0 0 auto; padding-right: 12px; }
    body.rs table.rs-orders td.rs-card-when { order: -2; flex: 1 1 auto; }
    /* The date is read next to the number, without its label. Must stay below the rs-cards rules (same specificity as
       the data-label rule: the later one wins). */
    body.rs table.rs-orders td.rs-card-when::before { content: none; }
    body.rs table.rs-orders td.rs-card-status { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
    /* The status cell holds one wrapper div (status text + action); its children become the cell's own items. */
    body.rs table.rs-orders td.rs-card-status > div { display: contents; }
    /* The delivery list writes the transport line as nowrap; a card has no room for that. */
    body.rs table.rs-orders td div { white-space: normal !important; }

    /* Every link in a card is at least 44px tall (the order number is the cover link of table.rs-cards, the rest sits above it). */
    body.rs table.rs-orders td a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
    body.rs table.rs-orders td.rs-card-title a { font-size: 17px; }
    /* The Finvalda tick is the browser's 13px checkbox; in a card it is a 44px one. */
    body.rs table.rs-orders td input[type=checkbox] { width: 44px; height: 44px; margin: 0; vertical-align: middle; }

    /* The row above the filters (#actions is fixed at 31px high in style.css): the customer select and
       "Formuoti užsakymą" each span the width. */
    body.rs #actions.rs-order-actions { height: auto; line-height: normal; padding-top: 8px; }
    body.rs #actions.rs-order-actions form select,
    body.rs #actions.rs-order-actions form input[type=submit] { display: block; width: 100%; box-sizing: border-box; margin-bottom: 8px; }

    /* Filters: one field per line, labels over them. */
    body.rs details.rs-filters label { display: block; margin: 8px 0 2px; }
    body.rs details.rs-filters br { display: none; }
    body.rs details.rs-filters input[type=text],
    body.rs details.rs-filters select,
    body.rs details.rs-filters input[type=submit] { display: block; width: 100%; box-sizing: border-box; }
    body.rs details.rs-filters input[type=submit] { margin-top: 12px; }
}

@media (pointer: coarse) and (min-width: 768px) {
    /* The select and button of #actions (31px high in style.css) are 44px here. */
    body.rs #actions.rs-order-actions { height: auto; min-height: 31px; line-height: normal; padding-bottom: 8px; }
}


/* --- pages nobody converted by hand (body.rs-default) ----------------------------------------------------------- */
/* These pages have the fluid grid and the header of the shell, but their tables, filter bars and forms were written for
   the 1416px page. style.css cuts off what does not fit (#content and .info-block are overflow:hidden), so below 1416 a
   part of such a page could not be reached. Here those boxes scroll sideways instead: the page stays as it was, 1:1,
   and the wide part is a swipe away. The converted screens do not get these rules - their layouts were checked one by one.
   An info block scrolls only on touch screens and phones: a few of them are 10-20px too full, which on a mouse screen
   would show a scroll bar for nothing. */
@media (max-width: 1415px) {
    body.rs-default #content,
    body.rs-default .fc-view { overflow-x: auto; }
}
@media (pointer: coarse), (max-width: 767px) {
    body.rs-default .info-block { overflow-x: auto; }
}

}