/**
 * Mobiele layout van de per-kamp aanmeldpagina's (/kinderkamp/aanmelden e.d.)
 * — "variant B", besluit Richard 05-08-2026.
 *
 * Op mobiel (<768px) wordt de volgorde: compacte weektabel -> kampkaarten ->
 * info ("Wanneer kun je aanmelden?" / presale-uitleg). Desktop en tablet
 * blijven ongewijzigd; alles hieronder zit in één max-width media query.
 *
 * Hoe: de kolom (layout_kampen, col_1) wordt een flex-kolom; de wrappers van
 * de 15 fase-displays (5 kamptypes x ready/pre/open) worden met
 * display:contents transparant gemaakt zodat .view-header (info),
 * .view-content (tabel) en .view-footer (seintje-knop) elk een eigen
 * flex-item worden en onafhankelijk geordend kunnen worden t.o.v. het
 * kaartenblok (block_perkamp). De fase-displays staan óók leeg in de DOM,
 * dus dit werkt in elke registratiefase.
 *
 * De tabellen worden per fase-groep compact: thead weg, elke rij één
 * flex-regel (datum/kamp links, status rechts). Kolomindexen per groep:
 *   *_ready : 1=jongens 2=meisjes 3=datum 4=aanmelden("Week", kapotte token)
 *   *_pre   : 1=kamp 2=jongens 3=meisjes            (tk heet tk_block!)
 *   *_open  : 1=kamptype 2=datum 3=jongens 4=meisjes 5=aanmeldlink
 * In de ready-fase zijn jongens/meisjes per definitie identiek ("nog niet
 * open") — daar tonen we er één en verbergen we de kapotte Week-kolom.
 *
 * Laadt in de theme-groep (weight 106) zodat de yeti-CDN en de eerdere
 * ozk-bestanden niet stil winnen. Zie ook de speeltuin/het besluit:
 * memory ozknext-beschikbaarheid-views-port (05-08-2026).
 */

@media (max-width: 767.98px) {

  /* ── 1. kolom als flex zodat `order` werkt ──────────────────────────
     Alleen de layout-kolom die het kaartenblok bevat (= layout_kampen). */
  .layout-builder__layout > div:has(> .block-views-blockbeschikbaarheid-zomerkampen-block-perkamp) {
    display: flex;
    flex-direction: column;
  }

  /* Paginatitel altijd bovenaan houden. */
  .layout-builder__layout > div:has(> .block-views-blockbeschikbaarheid-zomerkampen-block-perkamp) > .block-field-blocknodepagetitle {
    order: -10;
  }

  /* ── 2. fase-blokwrappers transparant maken ─────────────────────────
     Vier lagen: blokdiv > .content > (anonieme div) > .view — daarna zijn
     view-header/content/footer directe flex-items van de kolom. */
  :is(.block-views-blockbeschikbaarheid-zomerkampen-kk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-top-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-block,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-top-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-top-open),
  :is(.block-views-blockbeschikbaarheid-zomerkampen-kk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-top-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-block,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-top-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-top-open) > .content,
  :is(.block-views-blockbeschikbaarheid-zomerkampen-kk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-top-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-block,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-top-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-top-open) > .content > div,
  :is(.block-views-blockbeschikbaarheid-zomerkampen-kk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-top-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-block,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-top-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-top-open) > .content > div > .view-id-beschikbaarheid_zomerkampen {
    display: contents;
  }

  /* ── 3. de nieuwe volgorde ──────────────────────────────────────────
     tabel (-8) -> kaarten (-6) -> info (-4) -> seintje-knop (-3) -> rest (0). */
  :is(.block-views-blockbeschikbaarheid-zomerkampen-kk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-top-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-block,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-top-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-top-open) .view-content {
    order: -8;
    margin-bottom: 1rem;
  }
  .block-views-blockbeschikbaarheid-zomerkampen-block-perkamp {
    order: -6;
  }
  :is(.block-views-blockbeschikbaarheid-zomerkampen-kk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-top-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-block,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-top-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-top-open) .view-header {
    order: -4;
    margin: .25rem 0 .5rem;
  }
  :is(.block-views-blockbeschikbaarheid-zomerkampen-kk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-top-ready,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-block,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-top-pre,
      .block-views-blockbeschikbaarheid-zomerkampen-kk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-bk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-tk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-jk-open,
      .block-views-blockbeschikbaarheid-zomerkampen-top-open) .view-footer {
    order: -3;
    margin-bottom: .75rem;
  }

  /* ── 4. compacte weektabel ──────────────────────────────────────────
     Geldt voor de view-divs zelf (die zijn display:contents, maar hun
     nakomelingen matchen gewoon). Rijen worden flex-regels. */
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready,
      .view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre,
      .view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content :is(table, tbody) {
    display: block;
    width: 100%;
  }
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready,
      .view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre,
      .view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content thead {
    display: none;
  }
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready,
      .view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre,
      .view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody tr {
    display: flex;
    flex-wrap: wrap; /* vangnet: liever een tweede regel dan horizontale overloop */
    align-items: center;
    gap: .4rem .6rem;
    padding: .5rem .25rem;
  }
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready,
      .view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre,
      .view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody tr + tr {
    border-top: 1px solid #dee2e6;
  }
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready,
      .view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre,
      .view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td {
    display: block;
    border: 0;
    padding: 0;
    background: none;
  }

  /* statusblokjes ("nog niet open" / vrij / vol ...) compact en uniform:
     vierkante hoeken, gelijke breedte (besluit Richard 05-08). */
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready,
      .view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre,
      .view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td > div {
    display: inline-block;
    padding: .18rem .55rem;
    font-size: .78rem;
    border-radius: 3px;
    /* breed genoeg voor "bijna vol" en "nog niet open" incl. prefix, zodat
       de pills per rij gelijk uitlijnen (besluit Richard 05-08) */
    min-width: 8em;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    margin: 0;
  }

  /* — ready: 1=jongens 2=meisjes 3=datum 4="Week N"-label —
     regel wordt: Week N (vet) · datum · [nog niet open]-pill rechts */
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready) .view-content tbody td:nth-child(4) {
    order: -2;
    font-weight: 600;
    white-space: nowrap;
  }
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready) .view-content tbody td:nth-child(3) {
    order: -1;
    color: #6e6a73;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready) .view-content tbody td:nth-child(1) {
    margin-left: auto;
  }
  /* meisjes-status is in deze fase per definitie identiek aan jongens —
     één pill volstaat. */
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready) .view-content tbody td:nth-child(2) {
    display: none;
  }

  /* ♂/♀-prefix vóór de statuspills (kleur = status, symbool = geslacht;
     besluit Richard 05-08: "pills kleur = status"). \FE0E dwingt de
     tekstweergave af i.p.v. een emoji. */
  :is(.view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre) .view-content tbody td:nth-child(2) > div::before,
  :is(.view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td:nth-child(3) > div::before {
    content: "\2642\FE0E  ";
  }
  :is(.view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre) .view-content tbody td:nth-child(3) > div::before,
  :is(.view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td:nth-child(4) > div::before {
    content: "\2640\FE0E  ";
  }

  /* — pre: 1=kamp 2=jongens 3=meisjes — */
  :is(.view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre) .view-content tbody td:nth-child(1) {
    font-weight: 600;
  }
  :is(.view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre) .view-content tbody td:nth-child(2) {
    margin-left: auto;
  }

  /* — open: 1=kamptype 2=datum 3=jongens 4=meisjes 5=aanmeldlink — */
  :is(.view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td:nth-child(1) {
    display: none; /* kamptype-naam staat al in paginatitel en kaarten */
  }
  :is(.view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td:nth-child(2) {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  :is(.view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td:nth-child(3) {
    margin-left: auto;
  }
  :is(.view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td:nth-child(5) {
    white-space: nowrap;
  }

  /* ── 4b. kampdata-tabel in de open fase ──────────────────────────────
     Zodra de inschrijving opent krijgt de kampdata-tabel (homepage en /kampen)
     een vierde kolom met een aanmeldknop. Gemeten in een simulatie op dev:
     392px tabel in een kolom van 360px, waarvan de knopkolom 138px. De koppen
     inkorten hielp niet -- de kolombreedte kwam van de inhoud -- maar een
     compactere knop wel. Aan de lettermaat viel niets te winnen: de cellen staan
     al op .8rem met white-space:nowrap (regel in custom.css), en dat nowrap is
     ook waarom de kolommen niet meekrimpen -- alleen kortere inhoud of minder
     padding helpt.

     Deze regels gelden voor de hele lp_body-familie; welke variant in beeld is
     hangt van het seizoen af. */
  :is(.view-display-id-lp_body_pre, .view-display-id-lp_body_presale,
      .view-display-id-lp_body_open, .view-display-id-lp_body_nextyear,
      .view-display-id-lp_body_inter) table :is(td, th) {
    padding-left : .2rem;
    padding-right: .2rem;
  }
  :is(.view-display-id-lp_body_pre, .view-display-id-lp_body_presale,
      .view-display-id-lp_body_open, .view-display-id-lp_body_nextyear,
      .view-display-id-lp_body_inter) .btn {
    padding-left : .5rem;
    padding-right: .5rem;
    font-size    : .85rem;
  }

  /* ── 5. overzichtstabel alle kampen (/ouders/aanmelden) ──────────────
     Die tabel blijft wél een tabel — hij vergelijkt kampen naast elkaar —
     maar de statusblokjes zaten er als een gekleurd blok ín een cel die
     zelf ook al padding had. Gemeten op 390px: van de 381px tabelbreedte
     ging 128px op aan padding en randen, tegen 256px echte tekst. De
     leeftijdskolom hield 61px over en brak "klas 2 t/m 15 jaar" over vier
     regels; de tabel liep 15px buiten beeld (op 360px zelfs 45px).

     Oplossing: de cel is het gekleurde vlak, in plaats van een gekleurd
     vlak in een cel. Dat is ook hoe D7 het deed — vandaar dat
     ozk-d7-parity-extra.css nog altijd td.nog-niet-open / td.nog-plek /
     td.vol kent. Scherpe hoeken horen daarbij: een pill met ronding
     midden in een cel oogt als een knop, en klikbaar is hij niet.

     Alleen de overzicht_*-displays: de fase-displays hierboven zijn op
     mobiel juist géén tabel meer (kaartregels met pills op vaste breedte,
     besluit 05-08) en moeten die pill-vorm houden. */
  :is(.view-display-id-overzicht_ready, .view-display-id-overzicht_open,
      .view-display-id-overzicht_dicht, .view-display-id-overzicht_pre,
      .view-display-id-overzicht_presale, .view-display-id-overzicht_post) table {
    /* Smallere celpadding: vier kolommen x 20px was 80px van de 381px. */
    --ozk-celpad: .3rem;
  }
  :is(.view-display-id-overzicht_ready, .view-display-id-overzicht_open,
      .view-display-id-overzicht_dicht, .view-display-id-overzicht_pre,
      .view-display-id-overzicht_presale, .view-display-id-overzicht_post) table :is(th, td) {
    padding-left : var(--ozk-celpad);
    padding-right: var(--ozk-celpad);
  }
  /* De cel met een statusblokje erin geeft zijn padding af aan dat blokje. */
  :is(.view-display-id-overzicht_ready, .view-display-id-overzicht_open,
      .view-display-id-overzicht_dicht, .view-display-id-overzicht_pre,
      .view-display-id-overzicht_presale, .view-display-id-overzicht_post) table td:has(> div[class]) {
    padding: 0;
  }
  :is(.view-display-id-overzicht_ready, .view-display-id-overzicht_open,
      .view-display-id-overzicht_dicht, .view-display-id-overzicht_pre,
      .view-display-id-overzicht_presale, .view-display-id-overzicht_post) table td > div[class] {
    display      : block;
    padding      : .35rem .3rem;
    min-width    : 0;
    border-radius: 0;
    text-align   : center;
  }
}

/* Extra smalle schermen: pills een fractie kleiner zodat de open-fase-rij
   (datum + 2 pills + aanmeldlink) op één regel blijft. */
@media (max-width: 389.98px) {
  :is(.view-display-id-kk_ready, .view-display-id-bk_ready,
      .view-display-id-tk_ready, .view-display-id-jk_ready,
      .view-display-id-top_ready,
      .view-display-id-kk_pre, .view-display-id-bk_pre,
      .view-display-id-tk_block, .view-display-id-jk_pre,
      .view-display-id-top_pre,
      .view-display-id-kk_open, .view-display-id-bk_open,
      .view-display-id-tk_open, .view-display-id-jk_open,
      .view-display-id-top_open) .view-content tbody td > div {
    font-size: .72rem;
    min-width: 7em;
  }
}