/* Two themes, one set of names. Everything below this block uses the variables
   only — a colour written straight into a rule is one that stays dark when the
   rest of the screen turns light. */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0e1116;
  --surface: #171b22;
  --surface-2: #1f242d;
  --line: #2a313b;
  --text: #e6eaf0;
  --muted: #94a0b0;
  --accent: #2f6fed;
  --accent-soft: #1d3a7a;
  --ok: #22a06b;
  --warn: #c77700;
  --danger: #d6001c;
  /* Readable versions of the same colours, for text on the page background. */
  --accent-text: #9dbcff;
  --ok-text: #6fd3a6;
  --warn-text: #e8ab4f;
  --danger-text: #ff8a97;
  --block-bg: rgba(214, 0, 28, 0.12);
  --warn-bg: rgba(199, 119, 0, 0.14);
  --on-accent: #fff;
  --scrim: rgba(0, 0, 0, 0.6);
  --avatar-bg-l: 26%;
  --avatar-bg-s: 34%;
  --avatar-fg-l: 80%;
  --avatar-fg-s: 65%;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --line: #d7dde7;
  --text: #101418;
  --muted: #5b6675;
  --accent: #2f6fed;
  --accent-soft: #dbe6ff;
  --ok: #167c4e;
  --warn: #a35f00;
  --danger: #c0001a;
  --accent-text: #1d4ed8;
  --ok-text: #12694a;
  --warn-text: #8a5000;
  --danger-text: #b3001b;
  --block-bg: rgba(214, 0, 28, 0.08);
  --warn-bg: rgba(199, 119, 0, 0.13);
  --on-accent: #fff;
  --scrim: rgba(16, 24, 40, 0.35);
  --avatar-bg-l: 90%;
  --avatar-bg-s: 58%;
  --avatar-fg-l: 30%;
  --avatar-fg-s: 45%;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

* { box-sizing: border-box; }

/* An explicit display on a class beats the browser's own [hidden] rule, so
   state it once and let it win everywhere. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Alle felter i appen får det samme udseende, ikke kun dem inde i en <label>.
   Felter uden label fik browserens standard, som er HVID -- i mørk tilstand
   stod de som hvide kasser midt på skærmen (genetillæg, salgskonto m.fl.).
   :where() holder specificiteten på nul, så felter med deres eget udseende
   (satsark, søgefelter) stadig styrer sig selv. */
:where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea) {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
}
:where(input, select, textarea)::placeholder { color: var(--muted); opacity: 1; }

/* ---------------------------------------------------------------- gate */

.gate {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* safe center: med to kort kan indholdet blive højere end skærmen, og en
     almindelig centrering ville så skære toppen af i stedet for at rulle. */
  justify-content: safe center;
  gap: 18px;
  padding: 24px;
}
.gate[hidden] { display: none; }
.gate-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.gate-brand { margin: 0; font-size: 26px; letter-spacing: 3px; }
.gate-sub { margin: 4px 0 20px; color: var(--muted); font-size: 14px; }
.gate-help {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
/* Regnestykket bag abonnementet. Talkolonnen står på linje, så man kan følge
   den ned — det er et regnskab, ikke en liste. */
.forbrug { display: flex; flex-direction: column; }
.forbrug-linje {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
}
.forbrug-linje + .forbrug-linje { border-top: 1px solid var(--line); }
.forbrug-linje > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.forbrug-linje.god > :last-child { color: var(--ok); }
.forbrug-linje.muted { color: var(--muted); }
.forbrug-linje.sum { border-top: 1px solid var(--muted); }

/* En aftale man skal kunne læse FØR man skriver under. Fast højde med egen
   rulning, så underskriftsfelterne bliver stående synlige nedenunder. */
.aftale-tekst {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.6;
}
.aftale-tekst h3 { margin: 0 0 2px; font-size: 16px; }
.aftale-tekst h4 { margin: 16px 0 4px; font-size: 13.5px; }
.aftale-tekst p { margin: 0 0 8px; }
.aftale-tekst:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ genetillæg */

.gene-linje {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.gene-linje.dropped { opacity: 0.45; }
.gene-linje.dropped .gene-navn { text-decoration: line-through; }

.gene-hoved { display: flex; align-items: center; gap: 8px; }
.gene-navn { flex: 1 1 10rem; min-width: 0; }
.gene-sats { flex: 0 0 5.5rem; text-align: right; }

.gene-tid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.gene-tid > label { flex: 0 0 7rem; }
.gene-tid > label input { width: 100%; }
.gene-dage { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------- prisen */

/* En henvisning, ikke en advarsel: den skal ikke ligne .gate-help med farvet
   kant, for så læser man den som noget der er gået galt. */
.gate-fine {
  margin: 18px 0 0;
  font-size: 12.5px;
  text-align: center;
}
.gate-fine a { color: var(--muted); }
.gate-fine a:hover { color: var(--text); }

.pris-kort[hidden] { display: none; }
.pris-titel { margin: 0 0 14px; font-size: 18px; letter-spacing: 0.5px; }

.pris-hoved {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.pris-plus { font-size: 20px; color: var(--muted); padding-bottom: 12px; }
.pris-tal { display: flex; flex-direction: column; }
.pris-tal span { font-size: 28px; font-weight: 700; line-height: 1.1; }
.pris-tal small { font-size: 12px; color: var(--muted); }

.pris-inkl { margin: 12px 0 0; font-size: 14px; color: var(--text); }
.pris-under { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.pris-regner {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.pris-regner > label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.pris-skyder { display: flex; align-items: center; gap: 12px; }
.pris-skyder input[type="range"] { flex: 1; accent-color: var(--accent); }
.pris-skyder output {
  flex: 0 0 2.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pris-resultat {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pris-hoejre { text-align: right; }
.pris-stor {
  display: block;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.pris-lille { display: block; font-size: 12px; color: var(--muted); }
.pris-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.pris-liste {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}
.pris-liste li { display: flex; gap: 8px; align-items: baseline; }
.pris-liste li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ok);
  transform: rotate(45deg);
}

.pris-fine {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.demo-label {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tabs button {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  cursor: pointer;
}
.tabs button.active { background: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------- layout */

.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app[hidden] { display: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand .kort {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.brand .word { font-weight: 600; font-size: 15px; letter-spacing: 0.3px; }
/* Which company's plan you are looking at. Only there when there is more than
   one to choose between. */
.orgpicker select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 13px;
  max-width: 46vw;
}
/* Standing in someone else's plan should never feel like your own. */
body.partner-view .topbar { border-bottom: 2px solid var(--warn); }
body.partner-view .brand .kort { background: var(--warn); }

.topbar-right { margin-left: auto; min-width: 0; }
.whoami {
  color: var(--muted);
  font-size: 13px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 14px;
}
.nav a.active { background: var(--surface-2); color: var(--text); }
.nav a .pill {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  text-align: center;
}

.view { padding: 18px 14px 60px; max-width: 1100px; width: 100%; margin: 0 auto; }
/* A week that runs sideways needs every pixel of the screen, so the columns
   stay wide enough to read a customer name in. */
.view.wide { max-width: none; }

/* ---------------------------------------------------------------- pieces */

h2 { font-size: 19px; margin: 0 0 14px; }
h3 { font-size: 15px; margin: 22px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.tile .n { font-size: 26px; font-weight: 700; }
.tile .l { color: var(--muted); font-size: 13px; }
.tile.alert { border-color: var(--warn); }
.tile.alert .n { color: var(--warn); }

.stack { display: flex; flex-direction: column; gap: 12px; }
label { display: block; font-size: 13px; color: var(--muted); }
label input, label select, label textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* Safari paa iPhone centrerer indholdet i et datofelt og giver det sin egen
   hoejde. Ved siden af et almindeligt felt ser det ud som en fejl: "22. sep.
   2026" stod midt i kassen, mens alt andet stod til venstre. Datoen skal se ud
   som enhver anden vaerdi -- og et TOMT datofelt skal have samme hoejde som et
   udfyldt, ellers ligner "Stoppet den" en død grå kasse. */
label input[type='date'],
label input[type='time'],
label input[type='datetime-local'] {
  text-align: left;
  min-height: 40px;
  -webkit-appearance: none;
  appearance: none;
}
/* iOS tegner selve teksten i en indre knude, som text-align ikke naar. */
label input[type='date']::-webkit-date-and-time-value,
label input[type='time']::-webkit-date-and-time-value,
label input[type='datetime-local']::-webkit-date-and-time-value {
  text-align: left;
}

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

button.primary, button.ghost, button.danger {
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border: 1px solid transparent;
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.ghost { background: var(--surface-2); border-color: var(--line); }
button.danger { background: transparent; border-color: var(--danger); color: var(--danger-text); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Links inside the content, not the menu: the browser's own blue is unreadable
   on the dark background. */
.view a, .modal-card a { color: var(--accent-text); }

.error { color: var(--danger-text); min-height: 20px; font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------------------------------------------------------------- shifts */

.daygroup { margin-bottom: 22px; }
.dayhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.dayhead .d { font-weight: 600; }
.dayhead .w { color: var(--muted); font-size: 13px; margin-left: auto; }
/* --accent-text rather than --accent: the flat accent is a background colour and
   only just clears the contrast bar as text. */
.dayhead.today .d { color: var(--accent-text); }

.shift {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.shift:hover { background: var(--surface-2); }
.shift .time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 96px; }
.shift .time .dt { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.shift .main { flex: 1; min-width: 0; }
.shift .who { font-size: 13px; color: var(--muted); }
.shift .cust { font-weight: 600; }
.shift .meta { font-size: 13px; color: var(--muted); }
.shift .right { text-align: right; font-size: 12px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}
.badge.open { border-color: var(--accent); color: var(--accent-text); }
.badge.assigned { border-color: var(--ok); color: var(--ok-text); }
.badge.draft { border-color: var(--muted); color: var(--muted); }
.badge.cancelled { border-color: var(--danger); color: var(--danger-text); text-decoration: line-through; }
.badge.completed { border-color: var(--ok); color: var(--muted); }
.badge.warn { border-color: var(--warn); color: var(--warn-text); }

.issue { font-size: 13px; padding: 6px 10px; border-radius: 8px; margin: 4px 0; }
.issue.block { background: var(--block-bg); color: var(--danger-text); }
.issue.warn { background: var(--warn-bg); color: var(--warn-text); }

/* En knap der ser ud som et link: den hører til midt i en sætning, ikke i en
   knaprække, og skal derfor ikke fylde som en knap. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  width: auto;
}

/* Mailen som den bliver sendt: fast bredde, egne linjeskift, og den bryder
   hellere end at skubbe siden ud i siden på en telefon. */
.mailbody {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--text);
}

/* ---------------------------------------------------------------- faces */

.avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  /* Three letters, so no extra air between them. */
  letter-spacing: 0;
  vertical-align: middle;
}
/* The hue comes from the name, the lightness from the theme — so initials stay
   readable whether the screen is dark or light. */
.avatar.initials {
  background: hsl(var(--h, 214) var(--avatar-bg-s) var(--avatar-bg-l));
  color: hsl(var(--h, 214) var(--avatar-fg-s) var(--avatar-fg-l));
}
.avatar.xs { width: 22px; height: 22px; font-size: 8px; }
.avatar.md { width: 42px; height: 42px; font-size: 13px; }
.avatar.lg { width: 84px; height: 84px; font-size: 24px; }

/* Faces in a shift row overlap slightly, so four people still leave room for
   the customer name on a phone. */
.faces { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.faces .avatar + .avatar { margin-left: -8px; }

.person { display: flex; align-items: center; gap: 12px; }
.photo-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.candidate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.candidate .name { flex: 1; }
/* A row that takes you somewhere else. */
.candidate.linkrow {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  gap: 10px;
}
.candidate.linkrow:hover { background: var(--surface-2); }
/* Where you just came from, so the line you clicked is the line you find. */
.card.pointed { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.candidate.blocked .name { color: var(--muted); }

.warn-text { color: var(--warn); }
.offline-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  color: var(--warn-text);
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 14px;
  font-size: 13px;
}
/* The clock is the one button a guard uses in the dark, with gloves on. */
button.big { width: 100%; padding: 16px; font-size: 17px; font-weight: 600; }
.onshift { padding: 13px 16px; }
.onshift .candidate:last-child { border-bottom: 0; padding-bottom: 0; }
.onshift .who-big { font-size: 17px; font-weight: 600; margin-top: 2px; }
.onshift a { color: var(--accent-text); }

.blocked-list { margin-top: 16px; }
.blocked-list summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  padding: 8px 0;
  list-style: none;
}
.blocked-list summary::before { content: '▸ '; }
.blocked-list[open] summary::before { content: '▾ '; }
.blocked-list summary::-webkit-details-marker { display: none; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 50;
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 18px;
  box-shadow: var(--shadow);
  z-index: 60;
  max-width: 90vw;
}
.toast[hidden] { display: none; }
.toast.bad { border-color: var(--danger); }

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

.weekbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.weekbar .label { font-weight: 600; white-space: nowrap; }
.weekbar .nav-week { padding: 10px 14px; line-height: 1; }
.weekbar .range { white-space: nowrap; margin-left: auto; }
.weekbar #newShift { white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13px;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip.small { padding: 4px 9px; font-size: 12px; }
/* The function ticks sit under the name, so they read as belonging to that
   person and not to the shift. */
.chips.func { margin-top: 6px; }
/* What the function is worth, small enough to be a footnote on the button. */
.chip .extra { margin-left: 5px; opacity: 0.75; font-size: 11px; font-variant-numeric: tabular-nums; }

/* A rate sheet: the name takes the room it needs, the amount stays narrow and
   right-aligned so the column can be read down. */
/* iPhone zoomer ind, når man trykker i et felt med skrift under 16 px, og
   bliver stående forstørret bagefter. På berøringsskærme får alle felter
   derfor mindst 16 px. !important, fordi enkelte skærme sætter mindre skrift
   på deres egne felter, og de skal også være med. Brugeren kan stadig zoome
   selv -- det er kun den automatiske zoom, der forsvinder. */
@media (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea {
    font-size: 16px !important;
  }
}