/*
 * supplier-mobile.css — /labs/b2bTransaction/supplier on phones (≤767px).
 *
 * The page is desktop-only Angular markup on listings.css (body min-width
 * 1510px, a fixed 216px filter rail, a 9-column div table) plus !important
 * generalStyle utilities and inline styles. Everything here sits inside the
 * media query, so desktop is untouched; overriding the utilities and inline
 * styles needs !important.
 *
 * The phone-only chrome in supplier.php (filter button, drawer head / foot,
 * backdrop) carries the `hidden` attribute, so it stays off desktop even
 * without this file; the rules below show it.
 *
 * Phone design (Jun 2026-09-28: "not every field has to come along", then
 * "still too many tags and buttons"): one pill per card (the order status),
 * everything else as text; each card keeps its own actions as text links plus
 * one main button; the bulk tools that act on ticked orders (and the ticks,
 * select-all and sort chips) stay on desktop.
 *
 * Plain CSS on purpose, with no sibling .less: FileResolver compiles a .less on
 * request, and www-data cannot write into assets/stylesheets/ on B3/C, so a
 * new .less there is served as a 404 (FIX-1843b). No nesting either — iOS
 * Safari before 16.5 cannot read native CSS nesting.
 */

@media (max-width: 767px) {

  /* ── App shell (same header / rail treatment as /labs/products/) ────────── */
  html body {
    min-width: 0; /* listings.css: body { min-width: 1510px } */
  }

  #leftMainMenu {
    display: none; /* the header hamburger is the one mobile menu (Jun 2026-07-07) */
  }

  /* fixed header: 94px with 26/16px inline margins on desktop → a 52px app bar */
  #header #header {
    height: 52px !important;
  }

  #header #header > .col-xs-12 {
    height: 52px;
  }

  #header #header > .col-xs-12 > .col-xs-12 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* new_header.php hides both logos below 768px; bring back the desktop one, smaller */
  #header #header a.block.hidden-md.hidden-sm.hidden-xs {
    display: block !important;
    padding: 11px 0 0 14px;
  }

  #header #header a.block.hidden-md.hidden-sm.hidden-xs img {
    height: 30px;
    width: auto;
  }

  #header #header #sideMenuBar {
    top: 0;
    height: 52px;
  }

  #header #header #btnMainMenu {
    height: 52px;
    padding: 0 16px;
    line-height: 52px;
  }

  /* inline `padding: 90px 0 0 45px` (header + rail) */
  .b2bs-shell {
    padding: 52px 0 0 !important;
  }

  #sse_message_box {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
  }

  /* ── Filter rail → off-canvas drawer ────────────────────────────────────── */
  .b2bs-shell .filter {
    top: 0;
    bottom: 0;
    left: 0;
    width: 86vw;
    max-width: 340px;
    height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    background: #fff;
    z-index: 10002;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(-104%);
    /* closed = off screen AND out of the tab order; hide only after the slide-out */
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .b2bs-shell.b2bs-filters-open .filter {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
  }

  .b2bs-shell .filter > div {
    flex-shrink: 0;
  }

  /* the rail's own scroller (inline min-height 615px, padding-bottom 100px) */
  .b2bs-shell .filter > div:not(.b2bs-m-drawer-head):not(.b2bs-m-drawer-foot) {
    min-height: 0 !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }

  .b2bs-shell .filter [id^="filter_"] {
    padding: 4px 0 8px;
  }

  .b2bs-shell .b2bs-m-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .b2bs-shell.b2bs-filters-open .b2bs-m-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .b2bs-shell .b2bs-m-drawer-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 8px 0 16px;
    background: #2b2e3d;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }

  .b2bs-shell .b2bs-m-drawer-head .close {
    margin-left: auto;
    padding: 4px 10px;
    color: #fff;
    opacity: 0.85;
    font-size: 30px;
    font-weight: 300;
    text-shadow: none;
  }

  .b2bs-shell .b2bs-m-drawer-foot {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: auto;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #eceef1;
  }

  .b2bs-shell .b2bs-m-drawer-foot .btn {
    padding: 10px;
    font-size: 15px;
  }

  /* ── Main column ────────────────────────────────────────────────────────── */
  #product_index_main {
    width: 100%;
    float: none;
    display: block;
    padding: 0 12px 88px;
  }

  /* marked b2bs-m-hide in the markup: the And/Or search switch, the "Fulfilled
     by Viewider ( … )" wrapper of two tab labels, and the card fields below */
  #product_index_main .b2bs-m-hide {
    display: none !important;
  }

  #product_index_main .allProductText {
    padding-top: 12px;
    font-size: 18px;
    line-height: 34px;
  }

  #product_index_main .allProductText > .b2bs-m-filterwrap {
    display: block;
    float: right;
  }

  #product_index_main .allProductText .b2bs-m-filterbtn {
    padding: 6px 14px;
    border-radius: 17px;
    font-size: 14px;
    line-height: 20px;
  }

  #product_index_main .allProductText .b2bs-m-filterbtn .badge {
    margin-left: 6px;
    background-color: #337ab7;
  }

  /* balance: a line of text with "Check Balance" as a link (desktop: a pulled-right box) */
  #product_index_main .allProductText > .alert {
    float: none !important;
    clear: both;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: none;
    color: #6b7280;
    font-size: 13px !important;
    line-height: 1.4;
  }

  #product_index_main .allProductText > .alert > span {
    margin: 0 !important;
    text-align: left;
  }

  #product_index_main .allProductText > .alert > .btn {
    flex: 0 0 auto;
    padding: 0;
    border: 0 !important;
    background: none !important;
    box-shadow: none;
    color: #337ab7 !important;
    font-size: 13px;
  }

  #product_index_main .searchAndExcel {
    padding-top: 10px;
  }

  /* order-status counters (tap to filter): 4 × 220px boxes → one flat strip */
  #product_index_main .searchAndExcel > .w-100 {
    padding: 0 !important;
    background: none !important;
  }

  #product_index_main .searchAndExcel .nav-pills {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 !important;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  /* Bootstrap's .nav clearfix (content " ", display table) would become grid items */
  #product_index_main .searchAndExcel .nav-pills::before,
  #product_index_main .searchAndExcel .nav-pills::after {
    display: none;
  }

  /* margin: Bootstrap's .nav-pills > li + li { margin-left: 2px } */
  #product_index_main .searchAndExcel .nav-pills > li {
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
  }

  #product_index_main .searchAndExcel .nav-pills > li + li {
    border-left: 1px solid #eef0f2;
  }

  #product_index_main .searchAndExcel .nav-pills .nav-link {
    display: block;
    height: 100%;
    padding: 6px 4px !important;
    border: 0 !important;
    border-radius: 0;
  }

  /* count on top, label under it; the dot carries the colour (no side bar) */
  #product_index_main .searchAndExcel .navBlock {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    height: 100%;
    padding: 0;
    border: 0 !important;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  #product_index_main .searchAndExcel .navText {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
  }

  /* search: inline width calc(100% - 756px) */
  #product_index_main .searchAndExcel > .inputBox {
    display: block;
    width: 100% !important;
    margin-top: 10px;
  }

  #product_index_main .searchAndExcel > .inputBox select.width-150 {
    width: 110px !important;
    padding-left: 6px;
    padding-right: 4px;
  }

  /* bulk tools act on ticked orders — they stay on desktop, together with the
     ticks, the select-all box and the sort chips; each card has its own actions */
  #product_index_main .b2bs-actions,
  #product_index_main .b2bs-selcount,
  #product_index_main .divTableBody > .divTableRow:not(.listingBox),
  #product_index_main .listingBox > .b2bs-c-check,
  #product_index_main .listingBox > .b2bs-c-spacer {
    display: none !important;
  }

  /* ── Fulfilment tabs → underlined text tabs with the short names ────────── */
  #product_index_main .productList {
    height: auto;
    display: block;
    margin: 10px 0 24px;
  }

  #product_index_main .b2bs-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #e6e8eb;
  }

  #product_index_main .b2bs-tabs > div {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 -1px !important;
    padding: 8px 4px !important;
    border-bottom: 2px solid transparent;
    background: none !important;
    color: #6b7280 !important;
    font-size: 13px;
    line-height: 1.3;
  }

  /* the selected tab is the one ng-class paints bk-color-white */
  #product_index_main .b2bs-tabs > .bk-color-white {
    border-bottom-color: #337ab7;
    color: #337ab7 !important;
    font-weight: 600;
  }

  /* ── Order cards ────────────────────────────────────────────────────────── */

  /* What a card leaves out (desktop keeps it all): the fulfilment badge (the
     tab already says it), sales record ids, PO id, "Tracking: N/A", the
     list/image toggle and the product-id line (b2bs-m-hide), the modified time,
     and buyer id / address / phone — except on the Fulfilled by Supplier tab
     (b2bs-own-ship), where the supplier ships to the buyer. */
  #product_index_main .listingBox > .b2bs-c-modified {
    display: none !important;
  }

  #product_index_main .b2bs-m-buyerdetail {
    display: none;
  }

  #product_index_main .b2bs-own-ship .b2bs-m-buyerdetail {
    display: block;
  }

  #product_index_main .productList > .bk-color-white {
    background: transparent !important;
  }

  #product_index_main .divTable,
  #product_index_main .divTableBody {
    display: block;
    width: 100%;
  }

  /* card: order id | status, products, country | confirmed, actions */
  #product_index_main .divTableBody > .listingBox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "sr status"
      "prod prod"
      "buyer when"
      "act act";
    column-gap: 8px;
    margin: 0 0 8px;
    padding: 10px 12px 2px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
  }

  #product_index_main .listingBox > .divTableCell {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  #product_index_main .listingBox > .b2bs-c-sr {
    grid-area: sr;
  }

  #product_index_main .listingBox > .b2bs-c-status {
    grid-area: status;
  }

  #product_index_main .listingBox > .b2bs-c-products {
    grid-area: prod;
  }

  #product_index_main .listingBox > .b2bs-c-buyer {
    grid-area: buyer;
  }

  #product_index_main .listingBox > .b2bs-c-confirm {
    grid-area: when;
  }

  #product_index_main .listingBox > .b2bs-c-actions {
    grid-area: act;
  }

  /* status: the one pill on the card; Seller Pickup / Supplier Direct as text under it */
  #product_index_main .b2bs-c-status > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  /* the fulfilment-badge wrapper — not the supplier-direct badge (itself a
     div.badge) and not the order total */
  #product_index_main .b2bs-c-status > div > div:not(.badge):not(.b2bs-m-total) {
    display: contents;
  }

  #product_index_main .b2bs-c-status a.badge {
    margin: 0 !important;
    padding: 3px 8px;
    font-size: 11px !important;
    font-weight: 600;
  }

  #product_index_main .b2bs-c-status div.badge {
    margin: 0 !important;
    padding: 0;
    background: none !important;
    color: #337ab7 !important;
    font-size: 11px !important;
    font-weight: 500;
  }

  #product_index_main .b2bs-c-status div.badge.bk-color-red {
    color: #c9302c !important;
  }

  /* the order total (Σ unit price × quantity), under the status */
  #product_index_main .b2bs-m-total {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
  }

  /* order id (label dropped) and, once shipped, the tracking line as text */
  #product_index_main .b2bs-c-sr {
    font-size: 12px;
    color: #6b7280;
  }

  #product_index_main .b2bs-c-sr .alert {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
  }

  #product_index_main .b2bs-c-sr .alert > u {
    display: none;
  }

  #product_index_main .b2bs-c-sr .alert > div {
    display: inline;
  }

  #product_index_main .b2bs-c-sr .width-100-pct {
    margin: 2px 0 0 !important;
  }

  #product_index_main .b2bs-c-sr .width-100-pct > div {
    display: inline;
    font-weight: 400;
  }

  #product_index_main .b2bs-c-sr .width-100-pct > div > u {
    text-decoration: none;
  }

  #product_index_main .b2bs-c-sr .width-100-pct > div > .m-t-5 {
    display: inline;
    margin: 0 0 0 8px !important;
  }

  /* shipment status / checkpoint: still tap-to-trace, shown as link text */
  #product_index_main .b2bs-c-sr .width-100-pct .badge {
    padding: 0;
    background: none !important;
    color: #337ab7 !important;
    font-size: 12px !important;
    font-weight: 500;
    white-space: nowrap !important;
  }

  /* products: thumbnail | title, then unit price × quantity — what a supplier
     reads first (Jun) — then sku · shipment type · stock, small and grey */
  #product_index_main .b2bs-c-products {
    margin-top: 8px;
    font-size: 13px;
  }

  #product_index_main .b2bs-c-products .bk-color-blacke {
    background: none !important;
  }

  #product_index_main .b2bs-p-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }

  #product_index_main .b2bs-p-item + .b2bs-p-item {
    margin-top: 10px;
  }

  /* its image block (ng-show; ng-hide still wins) lends its two children to the grid */
  #product_index_main .b2bs-p-main {
    display: contents;
  }

  #product_index_main .b2bs-p-main > .inline-block[style*="80px"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 44px !important;
    height: 44px !important;
  }

  #product_index_main .b2bs-p-main img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 4px;
    object-fit: contain;
  }

  #product_index_main .b2bs-p-main > .inline-block[style*="calc(100% - 85px)"] {
    grid-column: 2;
    width: auto !important;
    line-height: 1.35;
  }

  #product_index_main .b2bs-p-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #111827;
  }

  /* The "|" separators are bare text nodes, so the line is font-size 0 and each
     part brings its own size back; flex order puts price × quantity first. */
  #product_index_main .b2bs-p-meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 2px 0 0 !important;
    font-size: 0;
    line-height: 20px;
  }

  /* line break after price × quantity */
  #product_index_main .b2bs-p-meta::before {
    content: "";
    order: -1;
    flex-basis: 100%;
    height: 0;
  }

  #product_index_main .b2bs-p-meta .badge {
    display: inline;
    position: static;
    margin: 0 10px 0 0;
    padding: 0;
    vertical-align: baseline;
    background: none !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 400;
    white-space: nowrap;
  }

  #product_index_main .b2bs-p-meta > b {
    order: -3;
    margin-right: 8px;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
  }

  #product_index_main .b2bs-p-meta > .bold.badge {
    order: -2;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 700;
  }

  #product_index_main .b2bs-p-meta > .bold.badge::before {
    content: "× ";
    color: #6b7280;
    font-weight: 400;
  }

  /* the sku takes what is left of its line and ends in an ellipsis */
  #product_index_main .b2bs-p-meta > .badge:first-child {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #product_index_main .b2bs-p-meta .badge.bk-color-green {
    color: #15803d !important;
    font-weight: 600;
  }

  #product_index_main .b2bs-p-meta .badge.bk-color-red {
    color: #c9302c !important;
    font-weight: 600;
  }

  #product_index_main .b2bs-p-meta .badge.bk-color-blue {
    color: #2563eb !important;
  }

  #product_index_main .b2bs-p-meta .badge.bk-color-yellow {
    color: #b45309 !important;
  }

  /* country (and, on Fulfilled by Supplier, buyer + tracking entry) | confirmed time */
  #product_index_main .b2bs-c-buyer {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
  }

  #product_index_main .b2bs-c-buyer > u {
    font-weight: 400 !important;
    text-decoration: none;
  }

  #product_index_main .b2bs-c-confirm {
    margin-top: 6px;
    color: #9ca3af;
    font-size: 12px;
    white-space: nowrap;
  }

  #product_index_main .b2bs-c-confirm:empty {
    display: none;
  }

  /* per-order actions: text links, the main action (b2bs-a-main) as the one button */
  #product_index_main .b2bs-c-actions {
    margin-top: 8px;
    padding: 0 !important;
    border-top: 1px solid #f0f1f3 !important;
  }

  /* remark: inline rows=4 and a -23px desktop alignment margin → two lines.
     The empty inline-block before it only opened a blank line box. */
  #product_index_main .b2bs-c-actions > .inline-block.bold:empty {
    display: none !important;
  }

  #product_index_main .b2bs-c-actions textarea {
    display: block;
    height: 44px;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f9fafb;
    font-size: 12px;
  }

  /* text links on the left, the main button pushed right (next line if it has to wrap) */
  #product_index_main .b2bs-c-actions > .padding-10 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    padding: 4px 0 !important;
  }

  #product_index_main .b2bs-c-actions > .padding-10 > .btn,
  #product_index_main .b2bs-c-actions > .padding-10 > a {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 0;
    border: 0;
    background: none !important;
    box-shadow: none;
    color: #337ab7 !important;
    font-size: 13px;
    font-weight: 500;
  }

  #product_index_main .b2bs-c-actions > .padding-10 > a:not(.btn) {
    color: #6b7280 !important;
  }

  #product_index_main .b2bs-c-actions > .padding-10 > .btn-danger {
    color: #c9302c !important;
  }

  #product_index_main .b2bs-c-actions > .padding-10 > .b2bs-a-main {
    order: 1;
    margin: 4px 0 4px auto !important;
    padding: 6px 16px;
    border-radius: 16px;
    background: #337ab7 !important;
    color: #fff !important;
  }

  /* direct-ship status line ("已出直寄標籤 …") on its own row */
  #product_index_main .b2bs-c-actions > .padding-10 > div {
    order: -1;
    flex: 1 1 100%;
    margin: 6px 0 0 !important;
    text-align: left;
  }

  /* ── Paging: back / next only ───────────────────────────────────────────── */
  #product_index_main .min-width-1050 {
    min-width: 0 !important;
  }

  #product_index_main .min-width-1050 .bk-color-white {
    background: none !important;
  }

  #product_index_main .min-width-1050 .noselect {
    padding-left: 0 !important;
  }

  #product_index_main .listBack {
    display: flex;
    justify-content: center;
    height: auto;
    padding: 8px 0;
    background: none;
  }

  #product_index_main .listBack .paging {
    padding-top: 0;
  }

  #product_index_main .listBack .paging .pagingBtn {
    padding: 9px 22px;
  }

  #product_index_main .listBack .showCount,
  #product_index_main .listBack .goToPage {
    display: none;
  }

  /* ── Overlays with fixed desktop widths ─────────────────────────────────── */
  /* the modal layer starts 250px down on desktop (listings.css) */
  html body .blockScreen {
    padding-top: 60px;
  }

  /* mark-ship / out-of-stock / delivery-note … boxes: inline 610px × fixed height */
  html body .blockScreen > center > div[style*="610px"] {
    width: auto !important;
    max-width: calc(100vw - 24px);
    height: auto !important;
    margin: 0 12px;
    padding-bottom: 12px !important;
    overflow: hidden;
  }

  /* supplier-direct shipment panel: inline 80vw × 80vh, lifted 140px */
  html body .blockScreen > center > div[style*="80vw"] {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 76px) !important;
    margin-top: 0 !important;
    overflow-y: auto;
  }

  html body .blockScreen .table > .width-65-pct.table-cell,
  html body .blockScreen .table > .width-35-pct.table-cell {
    display: block;
    width: 100% !important;
    padding-right: 0 !important;
  }

  /* the panel scrolls as a whole; only the order list keeps its own scroller
     (desktop nests three fixed-height scrollers, two with inline overflow) */
  html body .blockScreen .supplierDirectCalculatedHigh {
    height: auto !important;
    overflow: visible !important;
  }

  html body .blockScreen .supplierDirectLeftCalHightTop {
    height: auto !important;
    max-height: 45vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* its order rows: id | shipment type, details | last-mile warehouse → stacked */
  html body .blockScreen .supplierDirectLeftCalHightTop .table > .table-cell {
    display: block;
    width: auto !important;
  }

  html body .blockScreen .supplierDirectLeftCalHightTop .table-cell[style*="calc(100% - 120px)"] {
    width: auto !important;
  }

  html body .blockScreen .supplierDirectLeftCalHightBottom {
    height: auto !important;
  }

  /* its own pager (absolutely placed on desktop) */
  html body .blockScreen .listBack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 4px;
  }

  html body .blockScreen .listBack .paging {
    order: -1;
    flex: 1 1 100%;
    padding-top: 0 !important;
  }

  html body .blockScreen .listBack .showCount,
  html body .blockScreen .listBack .goToPage {
    position: static;
  }

  html body .blockScreen .listBack .showCount p {
    margin: 0;
  }

  /* shipment tracking detail (isExpand 80vw × 80vh / isNotExpand 60vw × 630px) */
  html body #popUpMsg {
    margin-top: 0 !important;
  }

  html body #popUpMsg #shipmentDetail {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 76px) !important;
    overflow-y: auto;
  }

  /* legacy "new version" announcement (825 × 525 picture box) */
  html body #popup_new_version > .pos-rel {
    width: calc(100vw - 16px) !important;
    height: auto !important;
    margin-top: 8vh !important;
    padding-bottom: 16px;
    background-size: cover;
  }

  html body #popup_new_version > .pos-rel > .width-100-pct {
    padding-top: 24px !important;
  }

  html body #popup_new_version .inline-block[style*="210px"] {
    width: 100% !important;
    padding: 6px 0 !important;
  }

  html body #popup_new_version .width-56-pct {
    width: 92% !important;
  }
}