/* ============================================================================
   AURORA DESIGN SYSTEM — TOKENS
   ----------------------------------------------------------------------------
   Single portable token layer. One file, zero build step, zero dependencies.
   Works in two places from the same source:
     1) The product (dev team) — link/inline this file, use var(--*).
     2) Claude Design / artifacts — paste this <style> inline (CSP-safe, no CDN).

   Every value here was derived from the real prototype's styles.css
   (originally 7,904 lines) by usage frequency, then normalized onto
   scales. Comments show the real-world provenance so nothing is invented.

   ONE BRAND — AURORA+
     There is a single brand. Aurora blue is the accent; no multi-brand switching.
     Light theme only (matches the product — it has no dark mode).

   Version: 0.1.0   ·   Owner: Aurora design system   ·   Base: 2px grid
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. PRIMITIVES — raw, brand-agnostic values. Never reference these in product
   code directly; consume the SEMANTIC tokens (section 3+) instead.
---------------------------------------------------------------------------- */
:root {
  /* — Aurora blue ramp (#1c5dc7 is the brand anchor) — */
  --blue-050: #eaf1fc;
  --blue-100: #d8e6fa;
  --blue-200: #c4dbf8;
  --blue-300: #9cc0f2;
  --blue-400: #5a8ee0;
  --blue-500: #1c5dc7;   /* Aurora brand anchor — real --brand */
  --blue-600: #1851ad;   /* real --brand-600 */
  --blue-700: #143f88;   /* real --brand-700 */
  --blue-800: #0f2f66;

  /* — Neutral ramp (real --ink … --card) — */
  --neutral-900: #1c2531;  /* real --ink   */
  --neutral-700: #4a5667;  /* real --ink-2 */
  --neutral-500: #616c7f;  /* AA-safe muted (added — see contrast note §3) */
  --neutral-400: #788397;  /* real --muted  (large/UI text only, ~3.7:1)   */
  --neutral-300: #9aa4b4;  /* real --faint  (decorative only, ~2.5:1)      */
  --neutral-200: #e4e8ef;  /* real --line   */
  --neutral-150: #eef1f6;  /* real --line-2 / --bg-2 */
  --neutral-100: #f3f5f9;  /* real --bg */
  --neutral-000: #ffffff;  /* real --card */

  /* — Status ramps (real values, kept exactly — the prototype's calm palette) — */
  --green-500: #1f9254; --green-100: #e7f5ec; --green-200: #bfe3cd;
  --amber-500: #c47d12; --amber-100: #fdf3e2; --amber-200: #f3dcad;
  --red-500:   #c5392f; --red-100:   #fbeceb; --red-200:   #f3c9c5;
  --indigo-500:#5a6acb; --indigo-100:#ecedfb;

  /* — Type scale — base 12.5px (peak: 316 uses). Dense clinical UI, so the
       scale keeps the real half-steps that carry >200 uses each. — */
  --text-2xs:  10px;    /* 102+99 uses */
  --text-xs:   11px;    /* 218 uses */
  --text-sm:   11.5px;  /* 198 uses */
  --text-base: 12px;    /* 257 uses — default body/UI */
  --text-md:   12.5px;  /* 316 uses — dense tables/rows */
  --text-lg:   13px;    /* 292 uses */
  --text-xl:   13.5px;  /* 101 uses */
  --text-2xl:  15px;    /* section headers */
  --text-3xl:  17px;    /* card titles */
  --text-4xl:  20px;    /* page titles */
  --text-5xl:  24px;    /* hero */
  --text-6xl:  30px;    /* display */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;

  /* — Weight scale (real: 800 is the PEAK — Aurora runs bold/confident) — */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;   /* most-used weight in the system */

  /* — Spacing — 2px grid. Off-grid legacy px (7/9/11/13) snap to nearest step. — */
  --sp-0:   0;
  --sp-px:  1px;
  --sp-1:   2px;
  --sp-2:   4px;
  --sp-3:   6px;
  --sp-4:   8px;    /* peak: 616 uses */
  --sp-5:   10px;   /* 533 uses */
  --sp-6:   12px;   /* 545 uses */
  --sp-7:   14px;   /* 328 uses */
  --sp-8:   16px;   /* 203 uses */
  --sp-10:  20px;
  --sp-12:  24px;
  --sp-14:  28px;
  --sp-16:  32px;
  --sp-20:  40px;
  --sp-24:  48px;

  /* — Radius (real --radius* kept) — */
  --radius-sm:   7px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* — Elevation (real --shadow* kept, semantic names) — */
  --shadow-sm: 0 1px 2px rgba(20,34,58,.06), 0 1px 1px rgba(20,34,58,.04);
  --shadow-md: 0 2px 8px rgba(20,34,58,.08), 0 1px 2px rgba(20,34,58,.05);
  --shadow-lg: 0 8px 28px rgba(20,34,58,.14);

  /* — Z-index — replaces the prototype's 1…9999 free-for-all with a scale — */
  --z-base:      1;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    200;
  --z-dropdown:  500;
  --z-overlay:   1000;
  --z-modal:     2000;
  --z-popover:   3000;
  --z-toast:     4000;
  --z-max:       9999;

  /* — Motion (real dominant micro-duration = .12s) — */
  --dur-fast: .12s;
  --dur-base: .18s;
  --dur-slow: .28s;
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-out:      cubic-bezier(0,0,.2,1);
  --ease-in:       cubic-bezier(.4,0,1,1);

  /* — Breakpoints — reference constants (CSS can't read var() inside @media;
       these feed JS / the build layer; canonical query values documented in
       CLAUDE-DESIGN.md). Desktop-first, matching the prototype. — */
  --bp-xl: 1600px;
  --bp-lg: 1280px;
  --bp-md: 1100px;
  --bp-sm: 900px;
  --bp-xs: 640px;

  --font-sans: "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-doc:  "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;   /* printed documents: invoices, выписки, акты — loaded via aurora-fonts.css */
}

/* ----------------------------------------------------------------------------
   2. SEMANTIC — Aurora+ (the single brand). Product code uses ONLY these.
      Changing theme re-points them without touching code.
---------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:      var(--blue-500);
  --brand-600:  var(--blue-600);
  --brand-700:  var(--blue-700);
  --brand-050:  var(--blue-050);
  --brand-100:  var(--blue-100);
  --brand-contrast: #ffffff;      /* text on --brand */

  /* Top chrome (real --chrome-top*) */
  --chrome-top:   #1f5fd0;
  --chrome-top-2: #1a52b8;
  --nav-bg:       var(--neutral-000);

  /* Surfaces */
  --bg:    var(--neutral-100);
  --bg-2:  var(--neutral-150);
  --bg-1:  var(--neutral-100);   /* FIX: was used 23× but never defined (live bug) */
  --card:  var(--neutral-000);
  --line:  var(--neutral-200);
  --line-2:var(--neutral-150);

  /* Text — each labelled with the smallest text tier it passes for AA (4.5:1) */
  --ink:         var(--neutral-900);  /* AA: all sizes */
  --ink-2:       var(--neutral-700);  /* AA: all sizes */
  --text-muted:  var(--neutral-500);  /* AA: small text (NEW default for muted body) */
  --muted:       var(--neutral-400);  /* AA: large/UI text only (~3.7:1) — legacy */
  --faint:       var(--neutral-300);  /* decorative / borders only — never body text */

  /* Status semantics (real) */
  --ok:     var(--green-500);  --ok-bg:    var(--green-100);  --ok-bd:    var(--green-200);
  --queue:  var(--blue-500);   --queue-bg: var(--blue-050);   --queue-bd: var(--blue-200);
  --warn:   var(--amber-500);  --warn-bg:  var(--amber-100);  --warn-bd:  var(--amber-200);
  --danger: var(--red-500);    --danger-bg:var(--red-100);    --danger-bd:var(--red-200);
  --info:   var(--indigo-500); --info-bg:  var(--indigo-100);

  /* Overlay scrim (modal backdrop) — shares the shadow base color */
  --scrim: rgba(20, 34, 58, .45);

  /* Scrollbar — thin/soft/inset (real prototype values, styles.css:191-196) */
  --scrollbar-size:        9px;
  --scrollbar-thumb:       #dde2ec;
  --scrollbar-thumb-hover: #c6cedb;

  /* Aliases kept for drop-in compatibility with the existing prototype */
  --radius:   var(--radius-md);
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --shadow-3: var(--shadow-lg);
  --font:     var(--font-sans);
}

/* ----------------------------------------------------------------------------
   3. CONTRAST NOTE (WCAG 2.1)
      --ink / --ink-2 / --text-muted pass AA (4.5:1) for normal text on --card.
      --muted (#788397) ≈ 3.7:1 — reserve for large text (≥18.66px/700) & UI.
      --faint (#9aa4b4) ≈ 2.5:1 — decorative & borders only, never for text.
      Migration: replace muted body copy with var(--text-muted).
---------------------------------------------------------------------------- */
/* ===== aurora-fonts (Inter, self-host) ===== */
button, input, select, textarea, optgroup { font-family: inherit; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/inter/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/inter/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/inter/Inter-ExtraBold.woff2") format("woff2"); }

/* ===== aurora-components.css ===== */
/* ============================================================================
   AURORA DESIGN SYSTEM — COMPONENTS
   ----------------------------------------------------------------------------
   The canonical, token-only version of Aurora's recurring UI parts. Built ON
   aurora-tokens.css (load that first). Class names match the prototype exactly
   (.btn, .seg, .chip, .tag, .ptag, .card, .stat, .tbl, .field, .cn-modal), so
   the product can eventually DROP its hand-written component CSS from styles.css
   and just link this file — one source for these classes.

   Extracted from the real prototype, then cleaned: raw hex → tokens, off-grid px
   → 2px grid, hardcoded hover colors → color-mix on the token. Values may differ
   from the legacy CSS by ≤1px where snapped to the grid — intentional convergence.

   Version: 0.1.0   ·   Requires: aurora-tokens.css
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Base — global element treatments. Thin, soft, inset scrollbar (from the
   prototype). Applies wherever this file is loaded.
---------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-sm);
  border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); border-width: 2px; }
::-webkit-scrollbar-corner { background: transparent; }

/* Selection + keyboard focus — design-system defaults (brand-derived; the
   prototype set neither). Components define their own focus ring; this is the
   global fallback so nothing keyboard-focusable is left with only the UA ring. */
::selection { background: var(--brand-100); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ----------------------------------------------------------------------------
   Buttons — .btn + variant. Real base: inline-flex, gap 8, radius 9→md,
   padding 9/16, 13.5px/600, 1px transparent border, line-height 1.
---------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-8); border-radius: var(--radius-md);
  font: var(--fw-semibold) var(--text-xl)/1 var(--font-sans);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: var(--brand-contrast); }
.btn-primary:hover:not(:disabled) { background: var(--brand-600); }

.btn-green { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-green:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ok) 90%, #000);
  border-color: color-mix(in srgb, var(--ok) 90%, #000);
}

.btn-ghost { background: var(--card); color: var(--ink-2); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover:not(:disabled) { border-color: color-mix(in srgb, var(--line) 60%, var(--ink-2)); color: var(--ink); }

.btn-soft { background: var(--brand-050); color: var(--brand-700); }
.btn-soft:hover:not(:disabled) { background: var(--brand-100); }

.btn-danger { background: var(--card); color: var(--danger); border-color: var(--danger-bd); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }

/* Calculator button — a distinct TEAL action. #0d9aa8 is OFF-PALETTE (no token
   yet — see color-audit.md; pending an owner decision on a teal token). */
/* stylelint-disable declaration-property-value-disallowed-list */
.btn-calc { background: #0d9aa8; color: #fff; border-color: #0d9aa8; box-shadow: 0 2px 8px rgba(13,154,168,.32); }
.btn-calc:hover:not(:disabled) { background: #0b8794; border-color: #0b8794; }
/* stylelint-enable declaration-property-value-disallowed-list */

.btn-sm { padding: var(--sp-3) var(--sp-6); font-size: var(--text-md); border-radius: var(--radius-sm); }
.btn-lg { padding: var(--sp-6) var(--sp-12); font-size: var(--text-2xl); }

/* ----------------------------------------------------------------------------
   Segmented control — .seg wraps buttons; active = .on.
---------------------------------------------------------------------------- */
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-1); gap: var(--sp-1); box-shadow: var(--shadow-sm); }
.seg button {
  border: 0; background: transparent; color: var(--ink-2);
  font: var(--fw-semibold) var(--text-lg)/1 var(--font-sans);
  padding: var(--sp-3) var(--sp-7); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.seg button:hover { color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.seg button.on { background: var(--brand); color: var(--brand-contrast); }
.seg.ghost button.on { background: var(--brand-050); color: var(--brand-700); }

/* ----------------------------------------------------------------------------
   Chip — status token: dot + tint. Base is neutral; add .ok/.queue/.warn/
   .danger/.info/.brand. Solid & soft variants for emphasis.
---------------------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-full);
  font: var(--fw-semibold) var(--text-base)/1 var(--font-sans);
  border: 1px solid transparent; white-space: nowrap;
  color: var(--ink-2); background: var(--bg-2); border-color: var(--line); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.chip.ok     { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok-bd); }
.chip.queue  { color: var(--queue);  background: var(--queue-bg);  border-color: var(--queue-bd); }
.chip.warn   { color: var(--warn);   background: var(--warn-bg);   border-color: var(--warn-bd); }
.chip.danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); }
.chip.info   { color: var(--info);   background: var(--info-bg);   border-color: color-mix(in srgb, var(--info) 30%, #fff); }
.chip.brand  { color: var(--brand-700); background: var(--brand-050); border-color: var(--brand-100); }

/* solid = filled accent, for the one status that must shout */
.chip.ok-solid     { color: #fff; background: var(--ok);     border-color: var(--ok); }
.chip.danger-solid { color: #fff; background: var(--danger); border-color: var(--danger); }
.chip.ok-solid .dot, .chip.danger-solid .dot { background: #fff; }

/* ----------------------------------------------------------------------------
   Tag — neutral inline label (no status meaning).
---------------------------------------------------------------------------- */
.tag { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap;
  font: var(--fw-semibold) var(--text-base)/1 var(--font-sans); color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-4); }

/* ----------------------------------------------------------------------------
   Ptag — bordered pill, always colored. .ok/.warn/.danger/.info/.brand/.muted.
---------------------------------------------------------------------------- */
.ptag { display: inline-flex; align-items: center; gap: var(--sp-3);
  font: var(--fw-bold) var(--text-base)/1 var(--font-sans);
  padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-full); border: 1px solid; }
.ptag.ok     { color: var(--ok);        background: var(--ok-bg);     border-color: var(--ok-bd); }
.ptag.warn   { color: var(--warn);      background: var(--warn-bg);   border-color: var(--warn-bd); }
.ptag.danger { color: var(--danger);    background: var(--danger-bg); border-color: var(--danger-bd); }
.ptag.info   { color: var(--info);      background: var(--info-bg);   border-color: color-mix(in srgb, var(--info) 30%, #fff); }
.ptag.brand  { color: var(--brand-700); background: var(--brand-050);  border-color: var(--brand-100); }
.ptag.muted  { color: var(--ink-2);     background: var(--bg-2);      border-color: var(--line); }

/* ----------------------------------------------------------------------------
   Card + Stat — surfaces. Stat = summary tile with accent stripe + icon.
   Override the accent per instance: style="--accent:var(--ok);--accent-bg:var(--ok-bg)".
---------------------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: var(--sp-8); }

.stat { position: relative; display: flex; align-items: center; gap: var(--sp-6);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-10); box-shadow: var(--shadow-sm); overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--brand)); }
.stat.clickable { cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard),
  box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.stat.clickable:hover { border-color: var(--accent, var(--brand)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat.clickable:focus-visible { outline: 2px solid var(--accent, var(--brand)); outline-offset: 2px; }
.stat.clickable.on { border-color: var(--accent, var(--brand)); box-shadow: 0 0 0 2px var(--accent, var(--brand)) inset; }
.stat-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--accent-bg, var(--brand-050)); color: var(--accent, var(--brand)); }
.stat-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.stat-val { font-size: var(--text-5xl); font-weight: var(--fw-heavy); letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.stat-val small { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text-muted); margin-left: var(--sp-2); }
.stat-label { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-muted); line-height: 1.25; }
.stat-trend { position: absolute; top: var(--sp-6); right: var(--sp-7); display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-base); font-weight: var(--fw-bold); color: color-mix(in srgb, var(--ok) 85%, #000); } /* darkened → AA 5.2:1 at 12px */
.stat-trend.flat { color: var(--text-muted); }

/* ----------------------------------------------------------------------------
   Table (.tbl-wrap > .tbl) — ported from styles.css. Headers CENTER by default
   (.th-left / .th-center override); in-header sort (.th-sort/.sort-ic) and two
   filter patterns: a .filter-row of inputs, or an inline .th-filter per header.
---------------------------------------------------------------------------- */
.tbl-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-lg); }

.tbl thead th { text-align: center; padding: var(--sp-3) var(--sp-5); background: var(--bg);
  color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--text-xs);   /* a11y: was --muted */
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.25; }
.tbl thead th.th-left { text-align: left; }
.tbl thead th.th-center { text-align: center; }
.tbl thead th.sortable { cursor: pointer; }
.tbl thead th .th-in { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.tbl thead th.th-left .th-in { justify-content: flex-start; }

/* in-header sort control */
.th-sort { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 18px; cursor: pointer; user-select: none; }
th.th-left .th-sort { justify-content: flex-start; }
th.t-right .th-sort { justify-content: flex-end; }
.th-sort:hover { color: var(--ink-2); }
.sort-ic { font-size: 9px; opacity: .35; }
.sort-ic.on { opacity: 1; color: var(--brand); }

/* inline per-header filter (sits under the label inside the th) */
.th-filter { display: block; width: 100%; margin-top: 3px; height: 23px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--sp-3);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--ink); background: #fff;
  text-transform: none; letter-spacing: 0; }
.th-filter:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.th-filter::placeholder { color: var(--muted); font-weight: var(--fw-medium); }   /* a11y: was --faint */

/* separate filter row of inputs/selects, one cell per column */
.tbl .filter-row th { padding: var(--sp-3) var(--sp-5); background: #fff; border-bottom: 1px solid var(--line); }
.tbl .filter-row input, .tbl .filter-row select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); font-size: var(--text-base); color: var(--ink); background: #fff; }
.tbl .filter-row input:focus, .tbl .filter-row select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.tbl .filter-row input::placeholder { color: var(--muted); }   /* a11y: was default/--faint */
.tbl .filter-row input.in-center { text-align: center; }
.tbl .filter-row select.sel-arrow { padding: var(--sp-3) var(--sp-1); text-align: center; text-align-last: center; }

/* body */
.tbl tbody td { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-2); color: var(--ink); vertical-align: middle; }
.tbl tbody tr { transition: background var(--dur-fast); }
.tbl tbody tr:hover { background: var(--bg); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.row-click { cursor: pointer; }
.tbl tbody tr.is-done td { color: var(--muted); }
.tbl tr.row-sel > td { background: var(--brand-050); }

/* cell helpers */
.tbl .pname { font-weight: var(--fw-bold); color: var(--ink); }
.tbl .pid { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: var(--fw-semibold); }
.tbl .num { color: var(--muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }   /* a11y: was --faint */
.tbl .sub { color: var(--muted); font-size: var(--text-base); }

/* totals footer */
.tbl tfoot .total-row.grand td { font-size: var(--text-2xl); color: var(--ink); border-top: 2px solid var(--ink); }
.tbl tfoot .total-row.grand td:last-child { color: var(--brand-700); font-size: var(--text-3xl); }

/* cell alignment utilities */
.t-right { text-align: right; }
.t-center { text-align: center; }

/* list-cell helpers (patient list & friends) */
.cell-name { display: flex; align-items: center; gap: var(--sp-6); }
.pid-inline { margin-right: var(--sp-1); color: var(--ink); font-weight: var(--fw-bold); font-size: var(--text-lg); }
.reg-inpat-tag { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-4); vertical-align: middle;
  padding: var(--sp-px) var(--sp-4); border-radius: var(--radius-full); background: var(--warn-bg); color: var(--warn); font-size: var(--text-2xs); font-weight: var(--fw-heavy); }
.tg-off { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }  /* a11y: was --faint */
.dms-yes { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); }
.dms-no { color: var(--text-muted); }   /* a11y: was --faint */
.reg-by { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; color: var(--ink-2); font-weight: var(--fw-semibold); }
.reg-by svg { color: var(--faint); flex-shrink: 0; }
.start-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--radius-sm); background: var(--brand); color: #fff;
  font-size: var(--text-base); font-weight: var(--fw-bold); cursor: pointer; }
.start-btn:hover { background: var(--brand-600); }
.start-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.start-btn.done { background: #fff; color: var(--ok); border: 1px solid var(--ok-bd); }
/* Telegram-active status — #1c83d4 is OFF-PALETTE (telegram blue; no token yet). */
/* stylelint-disable declaration-property-value-disallowed-list */
.tg-on { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--fw-bold); color: #1c83d4; white-space: nowrap; }
/* stylelint-enable declaration-property-value-disallowed-list */

/* ----------------------------------------------------------------------------
   Field — text input / select / date field. Consistent bordered control.
---------------------------------------------------------------------------- */
.field { display: inline-flex; align-items: center; gap: var(--sp-4); width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6); font-size: var(--text-lg); color: var(--ink);
  box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease-standard),
  box-shadow var(--dur-fast) var(--ease-standard); }
.field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.field svg { color: var(--muted); flex-shrink: 0; }
.field input, .field select { border: 0; background: transparent; outline: 0; width: 100%;
  font: inherit; color: inherit; }
.field input::placeholder { color: var(--text-muted); }
/* bare input variant, when you don't need an icon wrapper */
.inp { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6); font-size: var(--text-lg); color: var(--ink); font-family: var(--font-sans); }
.inp:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }

/* ----------------------------------------------------------------------------
   Switch (toggle) — .switch + .on; knob is .switch-k; .sm for compact.
---------------------------------------------------------------------------- */
.switch { width: 40px; height: 23px; flex-shrink: 0; border: 0; border-radius: var(--radius-full);
  background: var(--line); position: relative; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard); }
.switch.on { background: var(--brand); }
.switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch-k { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left var(--dur-fast) var(--ease-standard); }
.switch.on .switch-k { left: 19px; }
.switch.sm { width: 34px; height: 20px; }
.switch.sm .switch-k { width: 16px; height: 16px; }
.switch.sm.on .switch-k { left: 16px; }

/* ----------------------------------------------------------------------------
   Modal — .cn-modal-bg (overlay) centers .cn-modal (panel).
---------------------------------------------------------------------------- */
.cn-modal-bg { position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--scrim); display: grid; place-items: center; padding: var(--sp-8); }
.cn-modal { width: min(560px, 95vw); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.cn-modal-head { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-7) var(--sp-8);
  border-bottom: 1px solid var(--line); }
.cn-modal-title { font-size: var(--text-3xl); font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -.01em; }
.cn-modal-body { padding: var(--sp-8); overflow-y: auto; }
.cn-modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--line); background: var(--bg-2); }

/* NOTE: class names below are kept AS IN THE PROTOTYPE (drop-in). Ported from
   styles.css; a11y color fixes noted inline. --------------------------------- */

/* Pill tabs (.tabs / .tab) — distinct from .seg. .tab.active + optional .cnt. */
.tabs { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.tab { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-8); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2); font: var(--fw-semibold) var(--text-xl)/1 var(--font-sans); white-space: nowrap; cursor: pointer; }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tab.active { background: var(--card); color: var(--brand-700); box-shadow: var(--shadow-sm); }
.tab .cnt { padding: var(--sp-px) var(--sp-4); border-radius: var(--radius-full); background: var(--brand-050); color: var(--brand-700); font-size: var(--text-sm); }
.tab.active .cnt { background: var(--brand-100); }

/* List-screen toolbar (.toolbar) — the flex row of controls above a table/list.
   Normalizes control heights to 38px so tabs/seg/dropdowns/search/buttons align;
   .spacer pushes trailing items right; .tb-div is a vertical divider. */
.toolbar { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-1) 0 var(--sp-8); }
.toolbar .spacer { flex: 1; }
.toolbar .tabs, .toolbar .seg, .toolbar .btn, .toolbar .btn-refresh, .toolbar .cc-fbtn,
.toolbar .inph-dd-btn, .toolbar select, .toolbar .search-box, .toolbar .field-date { height: 38px; }
.tb-div { width: 1px; align-self: stretch; margin: var(--sp-1) var(--sp-2); background: var(--line); }

/* Soft refresh button (toolbar action). */
.btn-refresh { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-7); cursor: pointer;
  background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-100); border-radius: var(--radius-md);
  font-size: var(--text-lg); font-weight: var(--fw-bold); white-space: nowrap; }
.btn-refresh:hover { background: var(--brand-100); }
.btn-refresh:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Date filter field (toolbar). */
.field-date { display: inline-flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  font-size: var(--text-lg); color: var(--ink-2); white-space: nowrap; }
.field-date svg { color: var(--muted); }

/* ----------------------------------------------------------------------------
   Greet banner (.gbar) — the page header strip on list screens: a colored id
   block + icon + greeting message + (screen-specific right-side controls).
   .gbar-daynav is the optional day-stepper variant.
---------------------------------------------------------------------------- */
.gbar { display: flex; align-items: center; margin-bottom: var(--sp-8); overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.gbar-id { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1);
  padding: var(--sp-7) var(--sp-12); min-width: 220px; flex-shrink: 0; align-self: stretch; }
.gbar-title { font-size: var(--text-3xl); font-weight: var(--fw-heavy); color: #fff; letter-spacing: -.02em; }
.gbar-name { font-size: var(--text-md); font-weight: var(--fw-medium); color: rgba(255,255,255,.85); }
.gbar-ic { width: 44px; height: 44px; flex-shrink: 0; margin: 0 var(--sp-8); border-radius: var(--radius-lg);
  display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(28,93,199,.3); }
.gbar-msg { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); padding: var(--sp-7) 0; }
.gbar-t { font-size: var(--text-2xl); font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -.01em; }
.gbar-s { font-size: var(--text-lg); color: var(--ink-2); }
.gbar-s b { color: var(--brand-700); font-weight: var(--fw-heavy); }
/* Off-palette gradient blues (bespoke greet-banner ramp; no token yet). */
/* stylelint-disable declaration-property-value-disallowed-list */
.gbar-id { background: linear-gradient(150deg, #4f86e0, #2f66c9); }
.gbar-ic { background: linear-gradient(150deg, #2f74e0, var(--brand) 60%, var(--brand-700)); }
/* stylelint-enable declaration-property-value-disallowed-list */
/* day-stepper variant */
.gbar-daynav { display: inline-flex; align-items: center; gap: var(--sp-3); align-self: center; flex-shrink: 0; margin: 0 var(--sp-8); }
.gbar-arrow { width: 32px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-md);
  border: 1px solid var(--brand-100); background: var(--brand-050); color: var(--brand-700); cursor: pointer; }
.gbar-arrow:hover { background: var(--brand-100); }
.gbar-day { display: inline-flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; white-space: nowrap; cursor: pointer;
  padding: var(--sp-4) var(--sp-7); border-radius: var(--radius-md); border: 1px solid var(--brand-100);
  background: var(--brand-050); color: var(--brand-700); font-size: var(--text-md); font-weight: var(--fw-bold); }
.gbar-day:hover, .gbar-day.on { background: var(--brand-100); }

/* Registration greeting head-control (.reg-headctrl) — live date+time chip
   (.reg-now / .reg-now-date / .reg-now-time) + view tabs (.reg-viewtabs).
   Verbatim from prototype styles.css:1784-1797. The .reg-now-time half carries a
   live clock (HH:MM:SS) — the consumer ticks it via setInterval, as RegGreet does. */
.reg-viewtabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: var(--sp-2); gap: var(--sp-2); margin-bottom: var(--sp-8); box-shadow: var(--shadow-1); }
.reg-viewtabs button { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; color: var(--ink-2); font-weight: 700; font-size: 13.5px; padding: var(--sp-4) var(--sp-8); border-radius: 8px; transition: background .12s, color .12s; }
.reg-viewtabs button:hover { color: var(--ink); }
.reg-viewtabs button.on { background: var(--brand); color: #fff; }
.reg-headctrl { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); align-self: center; margin: 0 18px; flex-shrink: 0; }
.reg-headctrl .gbar-daynav { margin: 0; }
.reg-now { display: inline-flex; align-items: center; gap: 0; background: var(--brand-050); border: 1px solid var(--brand-100); border-radius: 11px; font-size: 13px; font-weight: 700; color: var(--brand-700); white-space: nowrap; overflow: hidden; }
.reg-now-date { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); }
.reg-now-time { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-left: 1px solid var(--brand-100); background: #fff; }
.reg-now svg { opacity: .85; }
.reg-now .ico { opacity: .85; }   /* icon-set variant of the line above */
.reg-headctrl .reg-viewtabs { margin-bottom: 0; padding: 3px; }
.reg-headctrl .reg-viewtabs button { padding: var(--sp-3) var(--sp-6); font-size: 12.5px; gap: var(--sp-3); }

/* ----------------------------------------------------------------------------
   Settings side-nav (.set-shell = sidebar + content). Grouped, icon'd nav items
   with an .on active state; .set-nav-soon is the "СКОРО" badge.
---------------------------------------------------------------------------- */
.set-shell { display: flex; height: 100%; min-height: 0; }
.set-nav { flex: 0 0 256px; display: flex; flex-direction: column; min-height: 0; background: var(--card); border-right: 1px solid var(--line); }
.set-nav-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-8);
  font-size: var(--text-xl); font-weight: var(--fw-heavy); color: var(--ink); border-bottom: 1px solid var(--line); }
.set-nav-head-ic { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-050); color: var(--brand); }
.set-nav-scroll { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-10); }
.set-nav-group { margin-top: var(--sp-2); }
.set-nav-gt { padding: var(--sp-5) var(--sp-5) var(--sp-2); font-size: var(--text-2xs); font-weight: var(--fw-heavy);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }   /* a11y: was --faint */
.set-nav-item { display: flex; align-items: center; gap: var(--sp-5); width: 100%; text-align: left;
  padding: var(--sp-4) var(--sp-5); border: 0; border-radius: var(--radius-md); background: transparent;
  font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; }
.set-nav-item:hover { background: var(--bg-2); }
.set-nav-item.on { background: var(--brand-050); color: var(--brand-700); font-weight: var(--fw-bold); }
.set-nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.set-nav-ic { display: grid; place-items: center; flex-shrink: 0; color: var(--muted); }
.set-nav-item.on .set-nav-ic { color: var(--brand); }
.set-nav-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-nav-soon { flex-shrink: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); background: var(--bg-2);
  font-size: var(--text-2xs); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }   /* a11y: was --faint */

/* Avatar (.av) — initials; set background per-user inline. .sm/.lg, .av-link. */
.av { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: var(--text-base); font-weight: var(--fw-bold); }  /* bg default; usually set inline */
.av.sm { width: 26px; height: 26px; font-size: var(--text-2xs); }
.av.lg { width: 46px; height: 46px; border-radius: var(--radius-lg); font-size: var(--text-2xl); }
.av-link { cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast); }
.av-link:hover { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); }
.av-link:active { transform: scale(.96); }

/* Back link (.cn-back). */
.cn-back { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-2);
  font: var(--fw-semibold) var(--text-lg)/1 var(--font-sans); cursor: pointer; }
.cn-back:hover { background: var(--bg-2); }
.cn-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Progress / meter bar (.bar-track > .bar-fill). */
.bar-track { height: 9px; border-radius: var(--radius-sm); background: var(--bg-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-sm); background: var(--brand); }
.bar-track.sm { height: 7px; }

/* Legend / status dot (.dot-leg; standalone — for chips use .chip .dot). */
.dot-leg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot-ok { background: var(--ok); } .dot-queue { background: var(--queue); } .dot-warn { background: var(--warn); }

/* Empty state (.empty-state — new generic; prototype had .cal-empty/.chk-empty/…). */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
  min-height: 200px; padding: var(--sp-10); text-align: center; color: var(--text-muted); font-size: var(--text-lg);  /* a11y: was --muted */
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.empty-state.inline { min-height: 0; flex-direction: row; padding: var(--sp-8); font-size: var(--text-md); }

/* Tooltip — any [data-tip] element shows a label on hover/focus (generic form
   of the prototype's .fmt-b[data-tip]). */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; top: calc(100% + var(--sp-4)); left: 50%; transform: translateX(-50%);
  z-index: var(--z-popover); pointer-events: none; white-space: nowrap;
  background: var(--ink); color: #fff; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1.3;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
[data-tip]:hover::before, [data-tip]:focus-visible::before { content: ""; position: absolute; top: calc(100% + var(--sp-px)); left: 50%; transform: translateX(-50%);
  z-index: var(--z-popover); pointer-events: none; border: 5px solid transparent; border-bottom-color: var(--ink); }

/* Dropdown menu (.dd-wrap > .dd-menu, rich .dd-item). */
.dd-wrap { position: relative; display: inline-flex; min-width: 0; }
.dd-menu { position: absolute; top: calc(100% + var(--sp-3)); left: 0; z-index: var(--z-dropdown);
  padding: var(--sp-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.dd-menu.wide { width: 420px; }
.dd-menu.tpl { width: 460px; }
.dd-menu-head { padding: var(--sp-3) var(--sp-5) var(--sp-4); font-size: var(--text-2xs); font-weight: var(--fw-heavy);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }   /* a11y: was --muted */
.dd-item { display: flex; align-items: flex-start; gap: var(--sp-5); width: 100%; padding: var(--sp-4) var(--sp-5);
  border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; }
.dd-item:hover { background: var(--bg); }
.dd-item.on { background: var(--brand-050); }
.dd-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.dd-item-ic { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--bg-2); color: var(--brand); }
.dd-item.on .dd-item-ic { background: var(--card); }
.dd-item-t { display: block; font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--ink); }
.dd-item-d { display: block; margin-top: var(--sp-px); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; }   /* a11y: was --muted */
.dd-caret { display: grid; place-items: center; width: 28px; height: 30px; flex-shrink: 0; margin-left: auto; border-radius: var(--radius-sm); }
.dd-caret:hover { background: var(--brand-050); }
.dd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* PRIMARY button-dropdown (.inph-dd) — a value trigger + menu. .inph-dd-btn is
   a brand button by default; .field makes it a white select-like control; .hero
   is the transparent headline dropdown used inside the colored chrome. */
.inph-dd { position: relative; }
.inph-dd-btn { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; cursor: pointer;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6); border-radius: var(--radius-md);
  background: var(--brand); border: 1px solid var(--brand); color: #fff; font-size: var(--text-md); font-weight: var(--fw-bold);
  box-shadow: 0 1px 2px rgba(28,93,199,.35); }
.inph-dd-btn:hover { background: var(--brand-600); }
.inph-dd-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.inph-dd-btn > svg:last-child { opacity: .85; }
.inph-dd-btn.field { width: 100%; min-width: 0; justify-content: space-between; padding: var(--sp-4) var(--sp-5);
  background: #fff; color: var(--ink); border-color: var(--line); box-shadow: none; font-weight: var(--fw-semibold); }
.inph-dd-btn.field:hover { background: #fff; border-color: color-mix(in srgb, var(--line), var(--ink-2) 22%); }
.inph-dd.field { display: block; width: 100%; }
.inph-dd-menu { position: absolute; top: calc(100% + var(--sp-3)); left: 0; z-index: var(--z-dropdown); min-width: 210px;
  padding: var(--sp-3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: inph-dd-pop var(--dur-fast) cubic-bezier(.2,.8,.2,1); }
.inph-dd-menu.right { left: auto; right: 0; }
.inph-dd-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); width: 100%; text-align: left;
  padding: var(--sp-4) var(--sp-5); border: 0; background: transparent; border-radius: var(--radius-md);
  font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink-2); cursor: pointer; }
.inph-dd-item:hover, .inph-dd-item.on { background: var(--brand-050); color: var(--brand-700); }
.inph-dd-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.inph-dd-item svg { color: var(--brand); flex-shrink: 0; }
.inph-dd.hero { display: inline-block; }
.inph-dd.hero .inph-dd-btn { padding: var(--sp-px) 0; gap: var(--sp-4); background: transparent; border: 0; box-shadow: none; color: #fff; }
.inph-dd.hero .inph-dd-btn:hover { opacity: .9; }
.inph-dd.hero .inph-dd-val { font-size: var(--text-3xl); font-weight: var(--fw-heavy); color: #fff; letter-spacing: -.02em; }
@keyframes inph-dd-pop { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }

/* FILTER-button dropdown (.cc-pop) — .cc-fbtn trigger (.on when active) + menu
   with optional .cc-pop-grp group labels. */
.cc-pop { position: relative; }
.cc-fbtn { display: inline-flex; align-items: center; gap: var(--sp-3); height: 38px; padding: 0 var(--sp-6);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; cursor: pointer; }
.cc-fbtn:hover { border-color: var(--brand-100); }
.cc-fbtn.on { border-color: var(--brand); color: var(--brand-700); background: var(--brand-050); }
.cc-fbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.cc-fbtn svg { color: var(--muted); flex-shrink: 0; }
.cc-fbtn.on svg { color: var(--brand); }
.cc-pop-menu { position: absolute; top: calc(100% + var(--sp-3)); left: 0; z-index: var(--z-dropdown); min-width: 220px;
  padding: var(--sp-3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cc-pop-menu.right { left: auto; right: 0; }
.cc-pop-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; text-align: left;
  padding: var(--sp-4) var(--sp-5); border: 0; background: transparent; border-radius: var(--radius-sm); font: inherit; font-size: var(--text-lg); color: var(--ink); cursor: pointer; }
.cc-pop-item:hover { background: var(--brand-050); }
.cc-pop-item.on { color: var(--brand-700); font-weight: var(--fw-bold); }
.cc-pop-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cc-pop-item svg { color: var(--brand); }
.cc-pop-grp { padding: var(--sp-4) var(--sp-5) var(--sp-2); font-size: var(--text-2xs); font-weight: var(--fw-heavy);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }   /* a11y: was --faint */

/* Drawer — slide-over side panel (.set-drawer-bg(.on) + .set-drawer(.on)). */
.set-drawer-bg { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(20,34,58,0); pointer-events: none; transition: background var(--dur-base) ease; }
.set-drawer-bg.on { background: var(--scrim); pointer-events: auto; }
.set-drawer { position: fixed; top: 0; right: 0; z-index: calc(var(--z-overlay) + 1); height: 100%; width: 560px; max-width: 96vw;
  display: flex; flex-direction: column; background: var(--bg); box-shadow: -12px 0 40px rgba(20,34,58,.18);
  transform: translateX(100%); transition: transform var(--dur-slow) cubic-bezier(.4,0,.2,1); }
.set-drawer.on { transform: translateX(0); }
.set-drawer.wide { width: 640px; }
.set-drawer-head { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-10); background: var(--card); border-bottom: 1px solid var(--line); }
.set-drawer-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--brand-050); color: var(--brand); }
.set-drawer-t { flex: 1; font-size: var(--text-2xl); font-weight: var(--fw-heavy); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-8) var(--sp-10); }
.set-drawer-foot { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-7) var(--sp-10); background: var(--card); border-top: 1px solid var(--line); }

/* Toast — transient notification (.toast-wrap centers a stack; tone modifier).
   Tones = status tokens darkened via color-mix so white text passes WCAG AA
   (owner choice over the prototype's brighter, AA-failing gradients). */
.toast-wrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); width: max-content; max-width: 92vw; pointer-events: none; }
.toast { position: relative; pointer-events: auto; display: flex; align-items: center; gap: var(--sp-7);
  min-width: 340px; max-width: min(560px, 92vw); padding: var(--sp-8) 18px; color: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: toast-pop var(--dur-base) cubic-bezier(.2,.85,.3,1); }
.toast-ic { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-md); background: rgba(255,255,255,.22); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: var(--text-2xl); font-weight: var(--fw-heavy); line-height: 1.25; }
.toast-msg { margin-top: 3px; font-size: var(--text-lg); font-weight: var(--fw-medium); color: rgba(255,255,255,.96); line-height: 1.4; }
.toast-x { flex-shrink: 0; display: grid; place-items: center; padding: var(--sp-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: rgba(255,255,255,.85); cursor: pointer; }
.toast-x:hover { background: rgba(255,255,255,.2); color: #fff; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: rgba(255,255,255,.7); animation: toast-bar 3.6s linear forwards; }
.toast.ok   { background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 91%, #000),     color-mix(in srgb, var(--ok) 71%, #000)); }     /* white 4.7:1 */
.toast.warn { background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 83%, #000),   color-mix(in srgb, var(--warn) 63%, #000)); }   /* white 4.6:1 */
.toast.bad  { background: linear-gradient(135deg, var(--danger),                               color-mix(in srgb, var(--danger) 80%, #000)); } /* white 5.3:1 */
.toast.info { background: linear-gradient(135deg, var(--brand),                                color-mix(in srgb, var(--brand) 80%, #000)); }  /* white 6.1:1 */
@keyframes toast-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ----------------------------------------------------------------------------
   Inpatient lobby (.inp-lobby-*) — role-picker grid ("Стационар — рабочие места").
   Verbatim from prototype styles.css:5119-5131. Each card sets --accent / --accent-bg
   inline per role (off-palette role hues live in the JSX data, not here). Bespoke
   card geometry (16px radius, 18px pad, 48px icon tile, 22/16.5/13/12.8px type,
   lift shadow) kept raw as in source — R3: values-verbatim, no token remap.
---------------------------------------------------------------------------- */
.inp-lobby-page { max-width: 1180px; margin: 0 auto; padding: var(--sp-14) var(--sp-12) var(--sp-20); }
.inp-lobby-head { margin-bottom: var(--sp-10); }
.inp-lobby-h1 { font-size: 22px; font-weight: 800; color: var(--ink); }
.inp-lobby-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.inp-lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-8); }
.inp-lobby-card { position: relative; text-align: left; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-10) 18px var(--sp-8); background: #fff; border: 1px solid var(--line); border-radius: 16px;
  cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.inp-lobby-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 40, 80, .10); border-color: var(--accent); }
.inp-lobby-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--accent-bg); color: var(--accent); margin-bottom: var(--sp-3); }
.inp-lobby-ic svg { width: 26px; height: 26px; }
.inp-lobby-t { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.inp-lobby-who { font-size: 12px; font-weight: 600; color: var(--accent); }
.inp-lobby-d { font-size: 12.8px; color: var(--ink-2); line-height: 1.5; margin-top: var(--sp-1); }
.inp-lobby-go { margin-top: var(--sp-5); display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: 13px; font-weight: 700; color: var(--accent); }

/* ----------------------------------------------------------------------------
   Cashier home (.ck-home-*) — action-picker grid ("Рабочее место кассира").
   Verbatim from prototype styles.css:6304-6328. The primary card carries a
   nested .ck-home-acts sub-action list (.ck-home-act .brand/.warn). Bespoke card
   geometry (16px radius, 26px pad, 56px icon tile, 22/18/13px type) kept raw as
   in source — R3: values-verbatim.
---------------------------------------------------------------------------- */
.ck-home-head { margin: var(--sp-4) 0 var(--sp-2); }
.ck-home-h1 { font-size: 22px; font-weight: 800; color: var(--ink); }
.ck-home-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ck-home { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; max-width: 1280px; }
@media (max-width: 1100px) { .ck-home { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .ck-home { grid-template-columns: 1fr; } }
.ck-home-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 26px 22px;
  cursor: pointer; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--sp-5);
  transition: border-color .15s, box-shadow .15s, transform .05s; }
.ck-home-card:hover { border-color: var(--brand-100); box-shadow: var(--shadow-2); }
.ck-home-card:active { transform: translateY(1px); }
.ck-home-ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: var(--bg); color: var(--ink-2); margin-bottom: var(--sp-2); }
.ck-home-ic.brand { background: var(--brand-050); color: var(--brand); }
.ck-home-t { font-size: 18px; font-weight: 800; color: var(--ink); }
.ck-home-d { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ck-home-go { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); font-size: 13px; font-weight: 700; color: var(--brand-700); }
.ck-home-acts { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.ck-home-act { width: 100%; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--sp-4); padding: var(--sp-5) 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 13px; font-weight: 700; color: var(--ink-2);
  cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.ck-home-act:hover { border-color: var(--brand-100); background: var(--brand-050); color: var(--brand-700); }
.ck-home-act.brand { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }
.ck-home-act.brand:hover { background: var(--brand-100); border-color: var(--brand); color: var(--brand-700); }
.ck-home-act.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
/* stylelint-disable-next-line declaration-property-value-disallowed-list -- off-palette bespoke warm hover, verbatim from prototype */
.ck-home-act.warn:hover { background: #fbe9cf; border-color: var(--warn); color: var(--warn); }
@media (max-width: 900px) { .ck-home { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------
   Doctor workspace / list-screen extras (Рабочее место врача).
   Verbatim from prototype styles.css. The greeting banner (.gbar*), toolbar
   (.toolbar/.tabs/.tab/.cnt), stat cards (.stat/.stat-trend), table (.tbl/
   .filter-row) and .btn-refresh already live above — these fill the remaining
   gaps: the .stats grid + its compact stat overrides, the queue table's
   sex/sched cells, status stripe, sort arrows, cabinet badge, quick-filter bar.
---------------------------------------------------------------------------- */
/* stats grid + compact stat overrides (styles.css:343, 775-778) */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); margin-bottom: 18px; }
.stats .stat { padding: var(--sp-5) var(--sp-8) var(--sp-5) 18px; min-height: 0; gap: 11px; }
.stats .stat-ic { width: 34px; height: 34px; border-radius: 10px; }
.stats .stat-val { font-size: 22px; letter-spacing: -.6px; }
.stats .stat-trend { top: 10px; }
@media (max-width: 1100px) { .stats { grid-template-columns: 1fr 1fr; } }

/* queue-table cells (styles.css:506, 543-544, 566-567, 570-572, 596-597) */
.tbl td.cell-center { text-align: center; }
.queue-stripe { box-shadow: inset 3px 0 0 var(--queue); }
.warn-stripe { box-shadow: inset 3px 0 0 var(--warn); }
.sort-ar { font-size: 9px; color: var(--faint); margin-left: var(--sp-1); letter-spacing: -1px; }   /* a11y ok: decorative glyph */
.sort-ar.on { color: var(--brand); }
.sex-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; font-weight: 800; }
.sex-chip.m { background: var(--brand-050); color: var(--brand-700); }
/* stylelint-disable-next-line declaration-property-value-disallowed-list -- off-palette bespoke pink, verbatim from prototype */
.sex-chip.f { background: #fbe9f1; color: #c2487e; }
.sched-time { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.25; font-variant-numeric: tabular-nums; }
.sched-date { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: var(--sp-px); font-variant-numeric: tabular-nums; }

/* cabinet badge under status (styles.css:245-246) */
.row-cab { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.row-cab svg { color: var(--muted); }

/* quick-filter banner — shown above table when a stat-card quick filter is active (styles.css:474-476) */
.quick-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin: var(--sp-6) 0 -2px;
  padding: 9px var(--sp-7); background: var(--brand-050); border: 1px solid var(--brand-100); border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--brand-700); }
.quick-filter button { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--brand-100);
  color: var(--brand-700); border-radius: 7px; padding: 5px var(--sp-5); font-size: 12px; font-weight: 700; }
.quick-filter button:hover { background: var(--brand-100); }

/* cabinet selector (.doc-cab) — labelled wrapper around a .inph-dd field dropdown (styles.css:239-243) */
.toolbar .doc-cab { height: 38px; }
.doc-cab { display: inline-flex; align-items: center; gap: var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 0 var(--sp-5) 0 var(--sp-6); box-shadow: var(--shadow-1); }
.doc-cab-l { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.doc-cab-l svg { color: var(--brand); }
.doc-cab .inph-dd-btn.field { border: none; box-shadow: none; background: transparent; padding: var(--sp-2) var(--sp-1); font-weight: 700; }
.doc-cab .inph-dd-btn.field:hover { background: transparent; border-color: transparent; }

/* ----------------------------------------------------------------------------
   Commerce dashboard (.com-* / .rd-* / .cn-card / .metric-row / .com-tbl).
   Verbatim from prototype styles.css. Shell = headbar + underline .com-tabs +
   pill .com-subs + .com-filterbar (seg.ghost + branch dropdown). Dashboard body =
   .stats KPI grid (reuses .stat) + .rd-grid card pairs (.cn-card.card-pad with a
   .sec-title bar), metric bar-rows (.metric-row + .bar-track/.bar-fill), and the
   compact .com-tbl. KPI accents stay inline JSX data (off-palette).
---------------------------------------------------------------------------- */
/* card + section title (styles.css:958, 585-586) */
.cn-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-1); padding: 11px var(--sp-6); }
.sec-title { font-size: 15px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.sec-title .bar { width: 4px; height: 16px; border-radius: 3px; background: var(--brand); }

/* metric bar-row + dashboard grid (styles.css:922-923, 1801-1803) */
.metric-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-2); }
.metric-row:last-child { border-bottom: none; }
.rd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: stretch; }
.rd-eff { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 900px) { .rd-grid { grid-template-columns: 1fr; } }

/* commerce shell: headbar / tabs / subs / filterbar (styles.css:1819-1901) */
.com-headbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-7); }
.com-title { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
/* stylelint-disable-next-line declaration-property-value-disallowed-list -- off-palette bespoke brand gradient, verbatim from prototype */
.com-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #2f74e0, var(--brand) 60%, var(--brand-700)); box-shadow: 0 3px 10px rgba(28, 93, 199, .3); }
.com-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-7); }
.com-tab { border: none; background: transparent; padding: var(--sp-5) var(--sp-7); font-size: 13.5px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.com-tab:hover { color: var(--ink); }
.com-tab.on { color: var(--brand-700); border-bottom-color: var(--brand); }
.com-subs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.com-sub { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: var(--sp-3) 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.com-sub:hover { border-color: var(--brand-100); background: var(--brand-050); color: var(--brand-700); }
.com-sub.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.com-src-sum { margin-left: var(--sp-4); font-weight: 700; color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.com-filterbar { display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: nowrap; white-space: nowrap; background: transparent; border: none; padding: 0; box-shadow: none; }
.com-filterbar .seg.ghost { flex-shrink: 0; }
.com-filterbar .seg.ghost button { padding: 5px 11px; font-size: 12.5px; }
.cfb-div { width: 1px; align-self: stretch; background: var(--line); margin: 3px var(--sp-px); flex-shrink: 0; }

/* compact dashboard table (styles.css:1831-1836) */
.com-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.com-tbl th { text-align: left; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--sp-4) var(--sp-5); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.com-tbl td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; }
.com-tbl tr:last-child td { border-bottom: none; }
.com-tbl td b { color: var(--ink); font-weight: 700; }
.com-tbl .t-r { text-align: right; }

/* ----------------------------------------------------------------------------
   Utilities — small helpers used across the prototype.
---------------------------------------------------------------------------- */
.row        { display: flex; align-items: center; gap: var(--sp-5); }  /* generic flex row */
.between    { justify-content: space-between; }
.grow       { flex: 1; }
.muted      { color: var(--muted); }       /* de-emphasized UI text (large/UI tier) */
.text-muted { color: var(--text-muted); }  /* AA-safe muted for small body copy */
.tnum       { font-variant-numeric: tabular-nums; } /* line digits up in columns */

@media (prefers-reduced-motion: reduce) { .btn, .seg button, .stat, .field { transition: none; } }

/* ===== aurora-shell.css ===== */
/* ============================================================================
   AURORA DESIGN SYSTEM — APP SHELL
   ----------------------------------------------------------------------------
   The frame every HIS screen sits in: the top chrome (brand/logo + workspace
   tabs) and the module nav bar (menu + language + actions + user). Extracted
   from the prototype's chrome.jsx + styles.css, tokenized, same class names, so
   the product can drop its hand-written shell CSS and link this.

   Structure (from chrome.jsx):
     .app > .chrome-top ( .brand · .ws-tabs > .ws-tab[.active] )
          > .chrome-nav ( .nav-mod · .nav-scroll > .nav-item · .nav-right > … )
          > (page content)

   Requires: aurora-tokens.css   ·   Version: 0.1.0
   ========================================================================== */

/* ---- App scaffold ---------------------------------------------------------
   .app stacks the two chrome bars over the page. .app.fill pins height to the
   viewport (via --app-h, set by the product's zoom script) so only inner
   columns scroll and the chrome stays put. --app-h is a RUNTIME value, not a
   design token; the 100vh fallback is fine on its own. -------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* overflow-x = backstop so chrome never leaks to page scroll */
.app.fill { height: var(--app-h, 100vh); min-height: 0; overflow: hidden; }

/* ---- Top chrome: brand + workspace tabs ---------------------------------- */
.chrome-top {
  display: flex; align-items: center; gap: var(--sp-5);
  height: 42px; padding: 0 26px; flex-shrink: 0; overflow: hidden;   /* 42px/26px = chrome geometry (bespoke, off the type/space scale) */
  background: linear-gradient(180deg, var(--chrome-top), var(--chrome-top-2));
}
/* Logo / wordmark — sits top-left in the colored chrome. 18px is a bespoke
   logo size (not a type-scale token). Scoped under .chrome-top: `brand` also
   appears as a variant modifier on other components (.ptag.brand, .chip.brand,
   .ck-home-ic.brand, .ck-home-act.brand), so the bare class must not carry
   logo styling by itself. */
.chrome-top .brand {
  display: flex; align-items: baseline; gap: var(--sp-px); margin-right: var(--sp-4);
  font-weight: var(--fw-heavy); font-size: 18px; letter-spacing: .01em;
  color: #fff; user-select: none;
}
.chrome-top .brand sup { font-size: var(--text-xs); opacity: .85; }

/* Multi-tab strip — one .ws-tab per open workspace; current = .active. */
.ws-tabs { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; overflow: hidden; }
.ws-tab {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: 200px; padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-sm);
  font-size: var(--text-md); white-space: nowrap; color: #fff;   /* white for AA on the chrome (was --queue-bg ≈3.9:1, failed) */
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
}
.ws-tab > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.ws-tab.active { background: #fff; color: var(--brand-700); border-color: #fff; font-weight: var(--fw-semibold); }
a.ws-tab { text-decoration: none; cursor: pointer; }
a.ws-tab:hover { background: rgba(255,255,255,.12); }   /* stays ≤ .12 so white text keeps AA (4.6:1) */
.ws-tab:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ws-tab .grip { font-size: var(--text-2xs); letter-spacing: -2px; opacity: .5; cursor: grab; }
.ws-tab .x { font-size: var(--text-lg); opacity: .55; cursor: pointer; }
.ws-tab .x:hover { opacity: 1; }

/* ---- Module nav bar: menu + language + actions + user -------------------- */
.chrome-nav {
  display: flex; align-items: center; gap: var(--sp-1);
  height: 44px; padding: 0 26px; flex-shrink: 0; overflow: hidden;   /* 44px/26px = chrome geometry, matches .chrome-top */
  background: var(--nav-bg); border-bottom: 1px solid var(--line);
}
.nav-mod { flex-shrink: 0; padding: 0 var(--sp-6) 0 0; font-weight: var(--fw-heavy); font-size: var(--text-xl); color: var(--brand-700); }

/* menu items shrink/hide before the right block, which is always kept whole */
.nav-scroll { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; overflow: hidden; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-sm);
  font-size: var(--text-lg); color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
.nav-item:hover { background: var(--bg-2); }
.nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.nav-item .chev { font-size: 9px; opacity: .5; }
.nav-spacer { flex: 1; }

.nav-right { display: flex; align-items: center; gap: var(--sp-7); flex-shrink: 0; color: var(--ink-2); font-size: var(--text-lg); }
.nav-pill { display: flex; align-items: center; gap: var(--sp-3); }
.nav-badge { padding: var(--sp-1) var(--sp-4); border-radius: var(--radius-full);
  background: var(--brand-050); color: var(--brand-700); font-size: var(--text-xs); font-weight: var(--fw-bold); }

/* icon button — used across the nav and toolbars */
.icon-btn { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.icon-btn.sm { width: 26px; height: 26px; border-radius: 6px; }
.icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }

.nav-user { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; font-weight: var(--fw-semibold); color: var(--ink); }
.nav-user > span:not(.nav-ava) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-ava { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700); font-size: var(--text-base); font-weight: var(--fw-bold); }

/* ===== aurora-forms.css ===== */
/* ============================================================================
   AURORA DESIGN SYSTEM — FORM CONTROLS
   ----------------------------------------------------------------------------
   Inputs the prototype re-declared per-feature, unified here on tokens. Class
   names are kept AS IN THE PROTOTYPE (drop-in). Ported verbatim from styles.css;
   colors/spacing tokenized only where value-identical, a11y fixes noted.
   Requires aurora-tokens.css (+ aurora-components.css for .inp).
   ============================================================================ */

/* Native <select> — styled globally (chevron + soft border + focus ring). */
select {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23788397' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-5) center; background-size: 13px;
  padding: var(--sp-4) 30px var(--sp-4) var(--sp-5);
  font: inherit; font-size: var(--text-lg); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
select::-ms-expand { display: none; }
select:hover { border-color: color-mix(in srgb, var(--line), var(--ink-2) 22%); }
select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }

/* Checkbox & radio — native, brand accent (unifies ~19 copy-pasted recipes;
   the prototype has no single class, so this is a documented base). */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; margin: 0; vertical-align: middle;
  accent-color: var(--brand); cursor: pointer;
}

/* Textarea — new generic (prototype had .comm-textarea / .rv-textarea / …). */
.textarea {
  width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6); font: inherit; font-size: var(--text-xl); color: var(--ink);
}
.textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }

/* Search box — icon + inline input (.search-box; .search-box.sm compact). */
.search-box {
  display: flex; align-items: center; gap: var(--sp-6); height: 44px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 0 var(--sp-8); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-050); }
.search-box svg { color: var(--brand); flex-shrink: 0; }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--text-2xl); color: var(--ink); }
.search-box.sm { height: 32px; gap: var(--sp-3); padding: 0 var(--sp-5); border-width: 1px; box-shadow: none; }
.search-box.sm input { font-size: var(--text-lg); }
/* search "hero" row: big search-box + trailing action buttons (.btn-lg). */
.search-hero { display: flex; align-items: stretch; gap: var(--sp-7); }
.search-hero .search-box { flex: 1; }
.sb-clear { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--bg-2); color: var(--muted); cursor: pointer; }
.sb-clear:hover { background: var(--line); color: var(--ink); }

/* Number stepper — − input + (.mat-stepper / .mat-step / .mat-in). */
.mat-stepper { display: inline-flex; align-items: stretch; vertical-align: middle; }
.mat-step {
  width: 32px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--brand-100); background: var(--bg); color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.mat-step.minus { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.mat-step.plus  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mat-step:hover { background: var(--brand-050); color: var(--brand); }
.mat-step:active { background: var(--brand-100); }
.mat-step:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }   /* a11y: prototype had none */
.mat-in {
  box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--text-lg); color: var(--ink); background: #fff;
}
.mat-in.qty { width: 60px; text-align: right; }
.mat-in.fact { border-color: var(--brand-100); font-weight: var(--fw-bold); }
.mat-stepper .mat-in.qty.fact { width: 42px; text-align: center; border-radius: 0; border-left: none; border-right: none; }
.mat-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }

/* File-upload dropzone (.upl-drop; .upl-picked once a file is chosen). */
.upl-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-14) var(--sp-8); text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.upl-drop:hover, .upl-drop.drag { border-color: var(--brand); background: var(--brand-050); color: var(--brand); }
.upl-drop-t { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--ink-2); }
.upl-drop:hover .upl-drop-t, .upl-drop.drag .upl-drop-t { color: var(--brand-700); }
.upl-picked { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--ok-bd); background: var(--ok-bg); border-radius: var(--radius-md); }

/* Date field — text entry + calendar popover (.set-date; calendar populated by
   JS, styled here). Uses .set-in (Settings text input) as the field. */
.set-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5); font: inherit; font-size: var(--text-lg); color: var(--ink); background: #fff; }
.set-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.set-date { position: relative; }
.set-date-anchor { position: relative; }
.set-date-field { display: flex; align-items: stretch; }
.set-date-field .set-in { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.set-date-btn { display: grid; place-items: center; width: 38px; cursor: pointer;
  border: 1px solid var(--line); border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-2); color: var(--muted); }
.set-date-btn:hover { color: var(--brand-700); background: var(--brand-050); }
.set-date-btn:disabled { color: var(--faint); cursor: not-allowed; }
.set-date.need .set-in { background: var(--warn-bg); border-color: var(--warn-bd); }   /* was #fff8ec/#f0dca8 */
.set-date-pop { position: absolute; z-index: var(--z-header); top: calc(100% + var(--sp-2)); left: 0; width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); }
.set-date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.set-date-head b { font-size: var(--text-xl); font-weight: var(--fw-heavy); color: var(--ink); }
.set-date-head button { display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink-2); }
.set-date-head button:hover { border-color: var(--brand-100); color: var(--brand-700); }
.set-date-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); margin-bottom: var(--sp-1); }
.set-date-dow span { text-align: center; font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--text-muted); text-transform: uppercase; }  /* a11y: was --faint (2.5:1) */
.set-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.set-date-day { height: 30px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: var(--text-md); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.set-date-day:hover { background: var(--bg-2); }
.set-date-day.on { background: var(--brand); color: #fff; font-weight: var(--fw-heavy); }
.set-date-quick { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.set-date-quick button { border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--ink-2); cursor: pointer; }
.set-date-quick button:hover { border-color: var(--brand-100); color: var(--brand-700); background: var(--brand-050); }

/* ===== aurora-icons.css ===== */
/* ============================================================================
   aurora-icons.css — Aurora icon set as CSS masks (90 icons).
   GENERATED by build-icons.mjs from _handout/src/icons.jsx — do not hand-edit.

   Self-contained + CSP-safe (data-URI masks, no external requests) — the
   artifact/Claude-Design consumer. Colour follows `currentColor`; size follows
   `font-size` (1em box). Usage:  <i class="ico ico-heart"></i>
   with e.g.  .ico-heart { color: var(--danger); font-size: 20px; }
============================================================================ */
.ico { display: inline-block; width: 1.25em; height: 1.25em; flex-shrink: 0; background: currentColor; vertical-align: -.18em;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }
.ico-grid { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7v7H4z%22%2F%3E%3Cpath%20d%3D%22M13%204h7v7h-7z%22%2F%3E%3Cpath%20d%3D%22M4%2013h7v7H4z%22%2F%3E%3Cpath%20d%3D%22M13%2013h7v7h-7z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7v7H4z%22%2F%3E%3Cpath%20d%3D%22M13%204h7v7h-7z%22%2F%3E%3Cpath%20d%3D%22M4%2013h7v7H4z%22%2F%3E%3Cpath%20d%3D%22M13%2013h7v7h-7z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-chev { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E"); }
.ico-chevUp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2015l6-6%206%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2015l6-6%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.ico-chevR { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E"); }
.ico-chevL { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%206l-6%206%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.ico-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206L6%2018%22%2F%3E%3C%2Fsvg%3E"); }
.ico-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2011m-7%200a7%207%200%201%200%2014%200a7%207%200%201%200-14%200%22%2F%3E%3Cpath%20d%3D%22M21%2021l-4.3-4.3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2011m-7%200a7%207%200%201%200%2014%200a7%207%200%201%200-14%200%22%2F%3E%3Cpath%20d%3D%22M21%2021l-4.3-4.3%22%2F%3E%3C%2Fsvg%3E"); }
.ico-bell { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%201%200-12%200c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.7%2021a2%202%200%200%201-3.4%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%208a6%206%200%201%200-12%200c0%207-3%209-3%209h18s-3-2-3-9%22%2F%3E%3Cpath%20d%3D%22M13.7%2021a2%202%200%200%201-3.4%200%22%2F%3E%3C%2Fsvg%3E"); }
.ico-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200-18%200%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200-18%200%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.ico-calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v13a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M4%209h16%22%2F%3E%3Cpath%20d%3D%22M8%203v3%22%2F%3E%3Cpath%20d%3D%22M16%203v3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v13a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M4%209h16%22%2F%3E%3Cpath%20d%3D%22M8%203v3%22%2F%3E%3Cpath%20d%3D%22M16%203v3%22%2F%3E%3C%2Fsvg%3E"); }
.ico-list { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13%22%2F%3E%3Cpath%20d%3D%22M8%2012h13%22%2F%3E%3Cpath%20d%3D%22M8%2018h13%22%2F%3E%3Cpath%20d%3D%22M3%206h.01%22%2F%3E%3Cpath%20d%3D%22M3%2012h.01%22%2F%3E%3Cpath%20d%3D%22M3%2018h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13%22%2F%3E%3Cpath%20d%3D%22M8%2012h13%22%2F%3E%3Cpath%20d%3D%22M8%2018h13%22%2F%3E%3Cpath%20d%3D%22M3%206h.01%22%2F%3E%3Cpath%20d%3D%22M3%2012h.01%22%2F%3E%3Cpath%20d%3D%22M3%2018h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico-users { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2019v-1a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v1%22%2F%3E%3Cpath%20d%3D%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208%22%2F%3E%3Cpath%20d%3D%22M22%2019v-1a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13A4%204%200%200%201%2016%2011%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2019v-1a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v1%22%2F%3E%3Cpath%20d%3D%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208%22%2F%3E%3Cpath%20d%3D%22M22%2019v-1a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13A4%204%200%200%201%2016%2011%22%2F%3E%3C%2Fsvg%3E"); }
.ico-heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.29%201.5%204.04%203%205.5l7%207Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.29%201.5%204.04%203%205.5l7%207Z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-utensils { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h0a2%202%200%200%200%202-2V2%22%2F%3E%3Cpath%20d%3D%22M7%202v20%22%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h0a2%202%200%200%200%202-2V2%22%2F%3E%3Cpath%20d%3D%22M7%202v20%22%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%2F%3E%3C%2Fsvg%3E"); }
.ico-baby { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2012h.01%22%2F%3E%3Cpath%20d%3D%22M15%2012h.01%22%2F%3E%3Cpath%20d%3D%22M10%2016c.5.3%201.2.5%202%20.5s1.5-.2%202-.5%22%2F%3E%3Cpath%20d%3D%22M19%206.3a9%209%200%200%201%201.8%203.9%202%202%200%200%201%200%203.6%209%209%200%200%201-17.6%200%202%202%200%200%201%200-3.6A9%209%200%200%201%2012%203c2%200%203.5%201.1%203.5%202.5s-.9%202.5-2%202.5c-.8%200-1.5-.4-1.5-1%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2012h.01%22%2F%3E%3Cpath%20d%3D%22M15%2012h.01%22%2F%3E%3Cpath%20d%3D%22M10%2016c.5.3%201.2.5%202%20.5s1.5-.2%202-.5%22%2F%3E%3Cpath%20d%3D%22M19%206.3a9%209%200%200%201%201.8%203.9%202%202%200%200%201%200%203.6%209%209%200%200%201-17.6%200%202%202%200%200%201%200-3.6A9%209%200%200%201%2012%203c2%200%203.5%201.1%203.5%202.5s-.9%202.5-2%202.5c-.8%200-1.5-.4-1.5-1%22%2F%3E%3C%2Fsvg%3E"); }
.ico-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); }
.ico-checkCircle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200-18%200%22%2F%3E%3Cpath%20d%3D%22M8.5%2012.5l2.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200-18%200%22%2F%3E%3Cpath%20d%3D%22M8.5%2012.5l2.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E"); }
.ico-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.6%205.3%205.9.9-4.3%204.1%201%205.8L12%2016.9%206.8%2019.2l1-5.8L3.5%209.2l5.9-.9z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l2.6%205.3%205.9.9-4.3%204.1%201%205.8L12%2016.9%206.8%2019.2l1-5.8L3.5%209.2l5.9-.9z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-trending { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017l6-6%204%204%208-8%22%2F%3E%3Cpath%20d%3D%22M15%207h6v6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017l6-6%204%204%208-8%22%2F%3E%3Cpath%20d%3D%22M15%207h6v6%22%2F%3E%3C%2Fsvg%3E"); }
.ico-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
.ico-minus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E"); }
.ico-pill { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%2020.5a4%204%200%200%201-5.66-5.66l7-7a4%204%200%201%201%205.66%205.66z%22%2F%3E%3Cpath%20d%3D%22M8.5%208.5l7%207%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%2020.5a4%204%200%200%201-5.66-5.66l7-7a4%204%200%201%201%205.66%205.66z%22%2F%3E%3Cpath%20d%3D%22M8.5%208.5l7%207%22%2F%3E%3C%2Fsvg%3E"); }
.ico-box { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208l-9-5-9%205%209%205%209-5z%22%2F%3E%3Cpath%20d%3D%22M3%208v8l9%205%209-5V8%22%2F%3E%3Cpath%20d%3D%22M12%2013v8%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208l-9-5-9%205%209%205%209-5z%22%2F%3E%3Cpath%20d%3D%22M3%208v8l9%205%209-5V8%22%2F%3E%3Cpath%20d%3D%22M12%2013v8%22%2F%3E%3C%2Fsvg%3E"); }
.ico-stetho { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203v6a5%205%200%200%200%2010%200V3%22%2F%3E%3Cpath%20d%3D%22M4%203H2%22%2F%3E%3Cpath%20d%3D%22M14%203h-2%22%2F%3E%3Cpath%20d%3D%22M9%2014v2a5%205%200%200%200%2010%200v-1%22%2F%3E%3Cpath%20d%3D%22M19%2012m-2%200a2%202%200%201%200%204%200a2%202%200%201%200-4%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203v6a5%205%200%200%200%2010%200V3%22%2F%3E%3Cpath%20d%3D%22M4%203H2%22%2F%3E%3Cpath%20d%3D%22M14%203h-2%22%2F%3E%3Cpath%20d%3D%22M9%2014v2a5%205%200%200%200%2010%200v-1%22%2F%3E%3Cpath%20d%3D%22M19%2012m-2%200a2%202%200%201%200%204%200a2%202%200%201%200-4%200%22%2F%3E%3C%2Fsvg%3E"); }
.ico-bed { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207v11%22%2F%3E%3Cpath%20d%3D%22M3%2012h18a0%200%200%200%201%200%200v6H3%22%2F%3E%3Cpath%20d%3D%22M21%2018v-4a3%203%200%200%200-3-3H9v3%22%2F%3E%3Cpath%20d%3D%22M7%2011m-1.5%200a1.5%201.5%200%201%200%203%200a1.5%201.5%200%201%200-3%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207v11%22%2F%3E%3Cpath%20d%3D%22M3%2012h18a0%200%200%200%201%200%200v6H3%22%2F%3E%3Cpath%20d%3D%22M21%2018v-4a3%203%200%200%200-3-3H9v3%22%2F%3E%3Cpath%20d%3D%22M7%2011m-1.5%200a1.5%201.5%200%201%200%203%200a1.5%201.5%200%201%200-3%200%22%2F%3E%3C%2Fsvg%3E"); }
.ico-repeat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%202l4%204-4%204%22%2F%3E%3Cpath%20d%3D%22M3%2011V9a4%204%200%200%201%204-4h14%22%2F%3E%3Cpath%20d%3D%22M7%2022l-4-4%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2013v2a4%204%200%200%201-4%204H3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%202l4%204-4%204%22%2F%3E%3Cpath%20d%3D%22M3%2011V9a4%204%200%200%201%204-4h14%22%2F%3E%3Cpath%20d%3D%22M7%2022l-4-4%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2013v2a4%204%200%200%201-4%204H3%22%2F%3E%3C%2Fsvg%3E"); }
.ico-doc { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%2F%3E%3Cpath%20d%3D%22M14%203v6h6%22%2F%3E%3Cpath%20d%3D%22M9%2013h6%22%2F%3E%3Cpath%20d%3D%22M9%2017h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%2F%3E%3Cpath%20d%3D%22M14%203v6h6%22%2F%3E%3Cpath%20d%3D%22M9%2013h6%22%2F%3E%3Cpath%20d%3D%22M9%2017h6%22%2F%3E%3C%2Fsvg%3E"); }
.ico-layout { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22%2F%3E%3Cpath%20d%3D%22M4%209h16%22%2F%3E%3Cpath%20d%3D%22M9%209v11%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22%2F%3E%3Cpath%20d%3D%22M4%209h16%22%2F%3E%3Cpath%20d%3D%22M9%209v11%22%2F%3E%3C%2Fsvg%3E"); }
.ico-history { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%203-6.7L3%208%22%2F%3E%3Cpath%20d%3D%22M3%203v5h5%22%2F%3E%3Cpath%20d%3D%22M12%208v4l3%202%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%203-6.7L3%208%22%2F%3E%3Cpath%20d%3D%22M3%203v5h5%22%2F%3E%3Cpath%20d%3D%22M12%208v4l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.ico-flask { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6%22%2F%3E%3Cpath%20d%3D%22M10%203v6l-5%209a2%202%200%200%200%202%203h10a2%202%200%200%200%202-3l-5-9V3%22%2F%3E%3Cpath%20d%3D%22M7.5%2015h9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6%22%2F%3E%3Cpath%20d%3D%22M10%203v6l-5%209a2%202%200%200%200%202%203h10a2%202%200%200%200%202-3l-5-9V3%22%2F%3E%3Cpath%20d%3D%22M7.5%2015h9%22%2F%3E%3C%2Fsvg%3E"); }
.ico-alert { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.8%201.8%2018a2%202%200%200%200%201.7%203h16.9a2%202%200%200%200%201.7-3L13.7%203.8a2%202%200%200%200-3.4%200z%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.8%201.8%2018a2%202%200%200%200%201.7%203h16.9a2%202%200%200%200%201.7-3L13.7%203.8a2%202%200%200%200-3.4%200z%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3%2019.5%2019.5%200%200%201-6-6%2019.8%2019.8%200%200%201-3-8.6A2%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.6a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.5-1.2a2%202%200%200%201%202.1-.5c.8.3%201.7.6%202.6.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3%2019.5%2019.5%200%200%201-6-6%2019.8%2019.8%200%200%201-3-8.6A2%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.6a2%202%200%200%201-.5%202.1L8.1%209.9a16%2016%200%200%200%206%206l1.5-1.2a2%202%200%200%201%202.1-.5c.8.3%201.7.6%202.6.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012a4%204%200%201%200%200-8%204%204%200%200%200%200%208%22%2F%3E%3Cpath%20d%3D%22M6%2021v-1a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v1%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012a4%204%200%201%200%200-8%204%204%200%200%200%200%208%22%2F%3E%3Cpath%20d%3D%22M6%2021v-1a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v1%22%2F%3E%3C%2Fsvg%3E"); }
.ico-card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M7%2015h4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M3%2010h18%22%2F%3E%3Cpath%20d%3D%22M7%2015h4%22%2F%3E%3C%2Fsvg%3E"); }
.ico-calc { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1z%22%2F%3E%3Cpath%20d%3D%22M9%207h6%22%2F%3E%3Cpath%20d%3D%22M9%2011h.01%22%2F%3E%3Cpath%20d%3D%22M12%2011h.01%22%2F%3E%3Cpath%20d%3D%22M15%2011h.01%22%2F%3E%3Cpath%20d%3D%22M9%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M15%2014h.01%22%2F%3E%3Cpath%20d%3D%22M9%2017h.01%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3Cpath%20d%3D%22M15%2017h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H7a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1z%22%2F%3E%3Cpath%20d%3D%22M9%207h6%22%2F%3E%3Cpath%20d%3D%22M9%2011h.01%22%2F%3E%3Cpath%20d%3D%22M12%2011h.01%22%2F%3E%3Cpath%20d%3D%22M15%2011h.01%22%2F%3E%3Cpath%20d%3D%22M9%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M15%2014h.01%22%2F%3E%3Cpath%20d%3D%22M9%2017h.01%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3Cpath%20d%3D%22M15%2017h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico-filter { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h18l-7%208v6l-4%202v-8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h18l-7%208v6l-4%202v-8z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-download { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%22%2F%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5%22%2F%3E%3Cpath%20d%3D%22M5%2021h14%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%22%2F%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5%22%2F%3E%3Cpath%20d%3D%22M5%2021h14%22%2F%3E%3C%2Fsvg%3E"); }
.ico-discharge { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3Cpath%20d%3D%22M16%2017l5-5-5-5%22%2F%3E%3Cpath%20d%3D%22M21%2012H9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3Cpath%20d%3D%22M16%2017l5-5-5-5%22%2F%3E%3Cpath%20d%3D%22M21%2012H9%22%2F%3E%3C%2Fsvg%3E"); }
.ico-print { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V3h12v6%22%2F%3E%3Cpath%20d%3D%22M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M6%2014h12v7H6z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V3h12v6%22%2F%3E%3Cpath%20d%3D%22M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M6%2014h12v7H6z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-save { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202z%22%2F%3E%3Cpath%20d%3D%22M17%2021v-8H7v8%22%2F%3E%3Cpath%20d%3D%22M7%203v5h8%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202z%22%2F%3E%3Cpath%20d%3D%22M17%2021v-8H7v8%22%2F%3E%3Cpath%20d%3D%22M7%203v5h8%22%2F%3E%3C%2Fsvg%3E"); }
.ico-edit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-clip { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.4%2011.05l-8.49%208.49a5%205%200%200%201-7.07-7.07l8.49-8.49a3%203%200%200%201%204.24%204.24l-8.49%208.49a1%201%200%200%201-1.41-1.41l7.78-7.78%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.4%2011.05l-8.49%208.49a5%205%200%200%201-7.07-7.07l8.49-8.49a3%203%200%200%201%204.24%204.24l-8.49%208.49a1%201%200%200%201-1.41-1.41l7.78-7.78%22%2F%3E%3C%2Fsvg%3E"); }
.ico-upload { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015V3%22%2F%3E%3Cpath%20d%3D%22M8%207l4-4%204%204%22%2F%3E%3Cpath%20d%3D%22M20%2017v2a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015V3%22%2F%3E%3Cpath%20d%3D%22M8%207l4-4%204%204%22%2F%3E%3Cpath%20d%3D%22M20%2017v2a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-2%22%2F%3E%3C%2Fsvg%3E"); }
.ico-bookmark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021l-7-5-7%205V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021l-7-5-7%205V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-pause { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%204h4v16H6z%22%2F%3E%3Cpath%20d%3D%22M14%204h4v16h-4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%204h4v16H6z%22%2F%3E%3Cpath%20d%3D%22M14%204h4v16h-4z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%20stroke%3D%22none%22%3E%3Cpath%20d%3D%22M6%204l14%208-14%208z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23fff%22%20stroke%3D%22none%22%3E%3Cpath%20d%3D%22M6%204l14%208-14%208z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-flag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V4%22%2F%3E%3Cpath%20d%3D%22M4%204h13l-2%204%202%204H4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V4%22%2F%3E%3Cpath%20d%3D%22M4%204h13l-2%204%202%204H4%22%2F%3E%3C%2Fsvg%3E"); }
.ico-arrowL { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5%22%2F%3E%3Cpath%20d%3D%22M12%2019l-7-7%207-7%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5%22%2F%3E%3Cpath%20d%3D%22M12%2019l-7-7%207-7%22%2F%3E%3C%2Fsvg%3E"); }
.ico-arrowR { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22M12%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22M12%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E"); }
.ico-dots { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h.01%22%2F%3E%3Cpath%20d%3D%22M12%2012h.01%22%2F%3E%3Cpath%20d%3D%22M19%2012h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h.01%22%2F%3E%3Cpath%20d%3D%22M12%2012h.01%22%2F%3E%3Cpath%20d%3D%22M19%2012h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico-eye { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7z%22%2F%3E%3Cpath%20d%3D%22M12%2012m-3%200a3%203%200%201%200%206%200a3%203%200%201%200-6%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7z%22%2F%3E%3Cpath%20d%3D%22M12%2012m-3%200a3%203%200%201%200%206%200a3%203%200%201%200-6%200%22%2F%3E%3C%2Fsvg%3E"); }
.ico-eyeOff { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.94%2017.94A10.07%2010.07%200%200%201%2012%2020c-7%200-11-8-11-8a18.45%2018.45%200%200%201%205.06-5.94%22%2F%3E%3Cpath%20d%3D%22M9.9%204.24A9.12%209.12%200%200%201%2012%204c7%200%2011%208%2011%208a18.5%2018.5%200%200%201-2.16%203.19%22%2F%3E%3Cpath%20d%3D%22M14.12%2014.12a3%203%200%201%201-4.24-4.24%22%2F%3E%3Cpath%20d%3D%22M1%201l22%2022%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.94%2017.94A10.07%2010.07%200%200%201%2012%2020c-7%200-11-8-11-8a18.45%2018.45%200%200%201%205.06-5.94%22%2F%3E%3Cpath%20d%3D%22M9.9%204.24A9.12%209.12%200%200%201%2012%204c7%200%2011%208%2011%208a18.5%2018.5%200%200%201-2.16%203.19%22%2F%3E%3Cpath%20d%3D%22M14.12%2014.12a3%203%200%201%201-4.24-4.24%22%2F%3E%3Cpath%20d%3D%22M1%201l22%2022%22%2F%3E%3C%2Fsvg%3E"); }
.ico-refresh { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%2015-6.7L21%208%22%2F%3E%3Cpath%20d%3D%22M21%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-15%206.7L3%2016%22%2F%3E%3Cpath%20d%3D%22M3%2021v-5h5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%2015-6.7L21%208%22%2F%3E%3Cpath%20d%3D%22M21%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-15%206.7L3%2016%22%2F%3E%3Cpath%20d%3D%22M3%2021v-5h5%22%2F%3E%3C%2Fsvg%3E"); }
.ico-chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M7%2014v4%22%2F%3E%3Cpath%20d%3D%22M12%209v9%22%2F%3E%3Cpath%20d%3D%22M17%205v13%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M7%2014v4%22%2F%3E%3Cpath%20d%3D%22M12%209v9%22%2F%3E%3Cpath%20d%3D%22M17%205v13%22%2F%3E%3C%2Fsvg%3E"); }
.ico-undo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014L4%209l5-5%22%2F%3E%3Cpath%20d%3D%22M4%209h11a5%205%200%200%201%200%2010h-1%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014L4%209l5-5%22%2F%3E%3Cpath%20d%3D%22M4%209h11a5%205%200%200%201%200%2010h-1%22%2F%3E%3C%2Fsvg%3E"); }
.ico-redo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014l5-5-5-5%22%2F%3E%3Cpath%20d%3D%22M20%209H9a5%205%200%200%200%200%2010h1%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014l5-5-5-5%22%2F%3E%3Cpath%20d%3D%22M20%209H9a5%205%200%200%200%200%2010h1%22%2F%3E%3C%2Fsvg%3E"); }
.ico-quote { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207H4v6h3l-2%204%22%2F%3E%3Cpath%20d%3D%22M17%207h-3v6h3l-2%204%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207H4v6h3l-2%204%22%2F%3E%3Cpath%20d%3D%22M17%207h-3v6h3l-2%204%22%2F%3E%3C%2Fsvg%3E"); }
.ico-image { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M8.5%2010a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203%22%2F%3E%3Cpath%20d%3D%22M21%2016l-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M8.5%2010a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203%22%2F%3E%3Cpath%20d%3D%22M21%2016l-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); }
.ico-camera { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208a2%202%200%200%201%202-2h1.6l1-1.6h4.8l1%201.6H18a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M12%2016.4a3.3%203.3%200%201%200%200-6.6%203.3%203.3%200%200%200%200%206.6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208a2%202%200%200%201%202-2h1.6l1-1.6h4.8l1%201.6H18a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M12%2016.4a3.3%203.3%200%201%200%200-6.6%203.3%203.3%200%200%200%200%206.6%22%2F%3E%3C%2Fsvg%3E"); }
.ico-brackets { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204H4v16h3%22%2F%3E%3Cpath%20d%3D%22M17%204h3v16h-3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%204H4v16h3%22%2F%3E%3Cpath%20d%3D%22M17%204h3v16h-3%22%2F%3E%3C%2Fsvg%3E"); }
.ico-outdent { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%206H11%22%2F%3E%3Cpath%20d%3D%22M21%2012H11%22%2F%3E%3Cpath%20d%3D%22M21%2018H7%22%2F%3E%3Cpath%20d%3D%22M7%208l-4%204%204%204%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%206H11%22%2F%3E%3Cpath%20d%3D%22M21%2012H11%22%2F%3E%3Cpath%20d%3D%22M21%2018H7%22%2F%3E%3Cpath%20d%3D%22M7%208l-4%204%204%204%22%2F%3E%3C%2Fsvg%3E"); }
.ico-indent { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%206H11%22%2F%3E%3Cpath%20d%3D%22M21%2012H11%22%2F%3E%3Cpath%20d%3D%22M21%2018H11%22%2F%3E%3Cpath%20d%3D%22M3%208l4%204-4%204%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%206H11%22%2F%3E%3Cpath%20d%3D%22M21%2012H11%22%2F%3E%3Cpath%20d%3D%22M21%2018H11%22%2F%3E%3Cpath%20d%3D%22M3%208l4%204-4%204%22%2F%3E%3C%2Fsvg%3E"); }
.ico-chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-9%208.4%209%209%200%200%201-3.7-.7L3%2021l1.3-4.3A8.4%208.4%200%200%201%2012%203a8.4%208.4%200%200%201%209%208.5z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-9%208.4%209%209%200%200%201-3.7-.7L3%2021l1.3-4.3A8.4%208.4%200%200%201%2012%203a8.4%208.4%200%200%201%209%208.5z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-sparkles { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%204.6L18%209l-4.2%201.4L12%2015l-1.8-4.6L6%209l4.2-1.4z%22%2F%3E%3Cpath%20d%3D%22M19%2014l.7%201.8L21%2016.5l-1.3.7L19%2019l-.7-1.8L17%2016.5l1.3-.7z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.8%204.6L18%209l-4.2%201.4L12%2015l-1.8-4.6L6%209l4.2-1.4z%22%2F%3E%3Cpath%20d%3D%22M19%2014l.7%201.8L21%2016.5l-1.3.7L19%2019l-.7-1.8L17%2016.5l1.3-.7z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-tag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200l-7.2-7.2a2%202%200%200%201-.6-1.4V4a1%201%200%200%201%201-1h7.6a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%22%2F%3E%3Cpath%20d%3D%22M7.5%207.5h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200l-7.2-7.2a2%202%200%200%201-.6-1.4V4a1%201%200%200%201%201-1h7.6a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%22%2F%3E%3Cpath%20d%3D%22M7.5%207.5h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico-alignLeft { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h10%22%2F%3E%3Cpath%20d%3D%22M4%2018h13%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h10%22%2F%3E%3Cpath%20d%3D%22M4%2018h13%22%2F%3E%3C%2Fsvg%3E"); }
.ico-alignCenter { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M7%2012h10%22%2F%3E%3Cpath%20d%3D%22M5%2018h14%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M7%2012h10%22%2F%3E%3Cpath%20d%3D%22M5%2018h14%22%2F%3E%3C%2Fsvg%3E"); }
.ico-alignRight { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M10%2012h10%22%2F%3E%3Cpath%20d%3D%22M7%2018h13%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M10%2012h10%22%2F%3E%3Cpath%20d%3D%22M7%2018h13%22%2F%3E%3C%2Fsvg%3E"); }
.ico-alignJustify { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); }
.ico-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207%200l3-3a5%205%200%200%200-7-7l-1%201%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7%200l-3%203a5%205%200%200%200%207%207l1-1%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207%200l3-3a5%205%200%200%200-7-7l-1%201%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7%200l-3%203a5%205%200%200%200%207%207l1-1%22%2F%3E%3C%2Fsvg%3E"); }
.ico-eraser { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014l7-7%207%207-5%205H9z%22%2F%3E%3Cpath%20d%3D%22M11%207l6%206%22%2F%3E%3Cpath%20d%3D%22M4%2020h10%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014l7-7%207%207-5%205H9z%22%2F%3E%3Cpath%20d%3D%22M11%207l6%206%22%2F%3E%3Cpath%20d%3D%22M4%2020h10%22%2F%3E%3C%2Fsvg%3E"); }
.ico-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22M9%207V5a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2%22%2F%3E%3Cpath%20d%3D%22M6%207l1%2013a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2l1-13%22%2F%3E%3Cpath%20d%3D%22M10%2011v6%22%2F%3E%3Cpath%20d%3D%22M14%2011v6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16%22%2F%3E%3Cpath%20d%3D%22M9%207V5a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2%22%2F%3E%3Cpath%20d%3D%22M6%207l1%2013a2%202%200%200%200%202%202h6a2%202%200%200%200%202-2l1-13%22%2F%3E%3Cpath%20d%3D%22M10%2011v6%22%2F%3E%3Cpath%20d%3D%22M14%2011v6%22%2F%3E%3C%2Fsvg%3E"); }
.ico-expand { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6%22%2F%3E%3Cpath%20d%3D%22M9%2021H3v-6%22%2F%3E%3Cpath%20d%3D%22M21%203l-7%207%22%2F%3E%3Cpath%20d%3D%22M3%2021l7-7%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6%22%2F%3E%3Cpath%20d%3D%22M9%2021H3v-6%22%2F%3E%3Cpath%20d%3D%22M21%203l-7%207%22%2F%3E%3Cpath%20d%3D%22M3%2021l7-7%22%2F%3E%3C%2Fsvg%3E"); }
.ico-palette { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018c1%200%201.6-.8%201.6-1.6%200-.4-.2-.8-.5-1.1-.3-.3-.5-.7-.5-1.1%200-.9.7-1.6%201.6-1.6H16a5%205%200%200%200%205-5c0-4.4-4-7.6-9-7.6%22%2F%3E%3Cpath%20d%3D%22M7.5%2011.5h.01%22%2F%3E%3Cpath%20d%3D%22M11%207.5h.01%22%2F%3E%3Cpath%20d%3D%22M15%208.5h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018c1%200%201.6-.8%201.6-1.6%200-.4-.2-.8-.5-1.1-.3-.3-.5-.7-.5-1.1%200-.9.7-1.6%201.6-1.6H16a5%205%200%200%200%205-5c0-4.4-4-7.6-9-7.6%22%2F%3E%3Cpath%20d%3D%22M7.5%2011.5h.01%22%2F%3E%3Cpath%20d%3D%22M11%207.5h.01%22%2F%3E%3Cpath%20d%3D%22M15%208.5h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico-highlight { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011l-4%204v3h3l4-4%22%2F%3E%3Cpath%20d%3D%22M13%207l4%204%22%2F%3E%3Cpath%20d%3D%22M11%209l5-5a2%202%200%200%201%203%203l-5%205%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011l-4%204v3h3l4-4%22%2F%3E%3Cpath%20d%3D%22M13%207l4%204%22%2F%3E%3Cpath%20d%3D%22M11%209l5-5a2%202%200%200%201%203%203l-5%205%22%2F%3E%3C%2Fsvg%3E"); }
.ico-send { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%202L11%2013%22%2F%3E%3Cpath%20d%3D%22M22%202l-7%2020-4-9-9-4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%202L11%2013%22%2F%3E%3Cpath%20d%3D%22M22%202l-7%2020-4-9-9-4z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v5c0%204.5-3%208-7%2010-4-2-7-5.5-7-10V6z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v5c0%204.5-3%208-7%2010-4-2-7-5.5-7-10V6z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2011h14a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-6a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2011h14a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-6a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%208%200v4%22%2F%3E%3C%2Fsvg%3E"); }
.ico-unlock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2011h14a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-6a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%207.8-1.3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2011h14a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-6a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M8%2011V7a4%204%200%200%201%207.8-1.3%22%2F%3E%3C%2Fsvg%3E"); }
.ico-compass { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200-18%200%22%2F%3E%3Cpath%20d%3D%22M15%209l-2%204-4%202%202-4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200-18%200%22%2F%3E%3Cpath%20d%3D%22M15%209l-2%204-4%202%202-4z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-gift { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2012v8a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-8%22%2F%3E%3Cpath%20d%3D%22M2%208h20v4H2z%22%2F%3E%3Cpath%20d%3D%22M12%208v13%22%2F%3E%3Cpath%20d%3D%22M12%208C12%206%2010%204%208%205s0%203%204%203%22%2F%3E%3Cpath%20d%3D%22M12%208c0-2%202-4%204-3s0%203-4%203%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2012v8a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-8%22%2F%3E%3Cpath%20d%3D%22M2%208h20v4H2z%22%2F%3E%3Cpath%20d%3D%22M12%208v13%22%2F%3E%3Cpath%20d%3D%22M12%208C12%206%2010%204%208%205s0%203%204%203%22%2F%3E%3Cpath%20d%3D%22M12%208c0-2%202-4%204-3s0%203-4%203%22%2F%3E%3C%2Fsvg%3E"); }
.ico-wallet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208H5a2%202%200%200%200-2%202v8a2%202%200%200%200%202%202h16a1%201%200%200%200%201-1v-3%22%2F%3E%3Cpath%20d%3D%22M21%208V6a1%201%200%200%200-1-1H6a3%203%200%200%200-3%203%22%2F%3E%3Cpath%20d%3D%22M17%2013h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%208H5a2%202%200%200%200-2%202v8a2%202%200%200%200%202%202h16a1%201%200%200%200%201-1v-3%22%2F%3E%3Cpath%20d%3D%22M21%208V6a1%201%200%200%200-1-1H6a3%203%200%200%200-3%203%22%2F%3E%3Cpath%20d%3D%22M17%2013h.01%22%2F%3E%3C%2Fsvg%3E"); }
.ico-building { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v16%22%2F%3E%3Cpath%20d%3D%22M9%207h2%22%2F%3E%3Cpath%20d%3D%22M13%207h2%22%2F%3E%3Cpath%20d%3D%22M9%2011h2%22%2F%3E%3Cpath%20d%3D%22M13%2011h2%22%2F%3E%3Cpath%20d%3D%22M9%2015h2%22%2F%3E%3Cpath%20d%3D%22M13%2015h2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v16%22%2F%3E%3Cpath%20d%3D%22M9%207h2%22%2F%3E%3Cpath%20d%3D%22M13%207h2%22%2F%3E%3Cpath%20d%3D%22M9%2011h2%22%2F%3E%3Cpath%20d%3D%22M13%2011h2%22%2F%3E%3Cpath%20d%3D%22M9%2015h2%22%2F%3E%3Cpath%20d%3D%22M13%2015h2%22%2F%3E%3C%2Fsvg%3E"); }
.ico-bank { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M4%2010h16%22%2F%3E%3Cpath%20d%3D%22M5%2010V8l7-4%207%204v2%22%2F%3E%3Cpath%20d%3D%22M6%2010v8%22%2F%3E%3Cpath%20d%3D%22M10%2010v8%22%2F%3E%3Cpath%20d%3D%22M14%2010v8%22%2F%3E%3Cpath%20d%3D%22M18%2010v8%22%2F%3E%3Cpath%20d%3D%22M4%2021v-3h16v3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M4%2010h16%22%2F%3E%3Cpath%20d%3D%22M5%2010V8l7-4%207%204v2%22%2F%3E%3Cpath%20d%3D%22M6%2010v8%22%2F%3E%3Cpath%20d%3D%22M10%2010v8%22%2F%3E%3Cpath%20d%3D%22M14%2010v8%22%2F%3E%3Cpath%20d%3D%22M18%2010v8%22%2F%3E%3Cpath%20d%3D%22M4%2021v-3h16v3%22%2F%3E%3C%2Fsvg%3E"); }
.ico-activity { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l2.5-7%205%2014%202.5-7H21%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l2.5-7%205%2014%202.5-7H21%22%2F%3E%3C%2Fsvg%3E"); }
.ico-scan { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208V6a2%202%200%200%201%202-2h2%22%2F%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M20%2016v2a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M8%2020H6a2%202%200%200%201-2-2v-2%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208V6a2%202%200%200%201%202-2h2%22%2F%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M20%2016v2a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M8%2020H6a2%202%200%200%201-2-2v-2%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3C%2Fsvg%3E"); }
.ico-magnet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021v-10a5%205%200%200%201%2010%200v10%22%2F%3E%3Cpath%20d%3D%22M4%2021h6%22%2F%3E%3Cpath%20d%3D%22M14%2021h6%22%2F%3E%3Cpath%20d%3D%22M4%2016.5h6%22%2F%3E%3Cpath%20d%3D%22M14%2016.5h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021v-10a5%205%200%200%201%2010%200v10%22%2F%3E%3Cpath%20d%3D%22M4%2021h6%22%2F%3E%3Cpath%20d%3D%22M14%2021h6%22%2F%3E%3Cpath%20d%3D%22M4%2016.5h6%22%2F%3E%3Cpath%20d%3D%22M14%2016.5h6%22%2F%3E%3C%2Fsvg%3E"); }
.ico-thermo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2014.76V5a2%202%200%201%200-4%200v9.76a4%204%200%201%200%204%200z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2014.76V5a2%202%200%201%200-4%200v9.76a4%204%200%201%200%204%200z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-droplet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22%2F%3E%3C%2Fsvg%3E"); }
.ico-wind { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.59%204.59A2%202%200%201%201%2011%208H2%22%2F%3E%3Cpath%20d%3D%22M12.59%2019.41A2%202%200%201%200%2014%2016H2%22%2F%3E%3Cpath%20d%3D%22M17.73%207.73A2.5%202.5%200%201%201%2019.5%2012H2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.59%204.59A2%202%200%201%201%2011%208H2%22%2F%3E%3Cpath%20d%3D%22M12.59%2019.41A2%202%200%201%200%2014%2016H2%22%2F%3E%3Cpath%20d%3D%22M17.73%207.73A2.5%202.5%200%201%201%2019.5%2012H2%22%2F%3E%3C%2Fsvg%3E"); }