/* =====================================================================
   OrderSprinter UI · jQuery-Mobile-Grundgestaltung (alle Seiten)
   ---------------------------------------------------------------------
   Gemeinsame Optik für Seiten, Kopf-/Fußzeilen, Hauptmenü-Panel,
   Dialoge, Buttons, Eingabefelder und Listen. Benutzt die Tokens aus
   css/os-ui.css. Aktiv nur mit <html class="os-ui"> (setzt os-ui.js).
   Seitenspezifisches: os-waiter.css (Bestellung), os-paydesk.css (Kasse).
   ===================================================================== */

/* ---------- Seiten ---------- */
html.os-ui,
html.os-ui body,
html.os-ui .ui-page,
html.os-ui .ui-page-theme-c,
html.os-ui .ui-overlay-c { background: var(--os-bg); }
html.os-ui .ui-page {
  color: var(--os-text);
  font-family: var(--os-font);
  -webkit-tap-highlight-color: transparent;
}
html.os-ui .ui-page *,
html.os-ui .ui-page *::before,
html.os-ui .ui-page *::after { box-sizing: border-box; }
html.os-ui .ui-page,
html.os-ui .ui-page .ui-btn,
html.os-ui .ui-page input,
html.os-ui .ui-page select,
html.os-ui .ui-page textarea,
html.os-ui .ui-page h1, html.os-ui .ui-page h2, html.os-ui .ui-page h3 { font-family: var(--os-font); text-shadow: none; }
html.os-ui .ui-page :focus-visible { outline: 3px solid var(--os-focus); outline-offset: 2px; }
html.os-ui .ui-page .ui-content { padding: var(--os-sp-4); }

/* Theme-Schatten (getmobilecss) überall entfernen */
html.os-ui .ui-page *, html.os-ui .ui-page, html.os-ui .ui-dialog *, html.os-ui .ui-panel * { text-shadow: none !important; }

/* ---------- Kopfzeile ---------- */
html.os-ui .ui-page > .ui-header {
  background: var(--os-bar) !important;
  border: 0;
  min-height: var(--os-bar-h);
  display: flex; align-items: center;
  box-shadow: none;
}
html.os-ui .ui-page > .ui-header .ui-title {
  flex: 1; min-width: 0;
  margin: 0 136px 0 68px; padding: 0;
  font-size: var(--os-fs-xl); font-weight: 800; letter-spacing: -.01em;
  color: var(--os-on-bar); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.os-ui .ui-page > .ui-header .ui-title img { height: 22px; vertical-align: -4px; }
html.os-ui .ui-page > .ui-header .ui-btn {
  min-width: var(--os-hit); height: var(--os-hit); line-height: var(--os-hit);
  margin: 0; padding-top: 0; padding-bottom: 0;
  border: 0; border-radius: var(--os-r-md);
  background: var(--os-bar-2) !important; color: var(--os-on-bar) !important;
  font-weight: 700; box-shadow: none;
}
html.os-ui .ui-page > .ui-header > .ui-btn-left,
html.os-ui .ui-page > .ui-header > a.ui-btn:first-child { top: 8px; left: 8px; }
html.os-ui .ui-page > .ui-header .ui-btn-right { top: 8px !important; right: 8px; }
html.os-ui .ui-page > .ui-header .ui-btn-left .ui-btn { margin: 0; }

/* ---------- Fußzeile ---------- */
html.os-ui .ui-page > .ui-footer {
  background: var(--os-bg) !important; border: 0; color: var(--os-text-3);
  font-size: var(--os-fs-xs); box-shadow: none;
}
html.os-ui .ui-page > .ui-footer .userinfo,
html.os-ui .ui-page > .ui-footer .grid_right { color: var(--os-text-3) !important; padding: var(--os-sp-3) var(--os-sp-4); font-style: normal; }

/* ---------- Listen (jQM inset listview) ---------- */
html.os-ui .ui-page .ui-listview.ui-listview-inset {
  margin: 0 0 var(--os-sp-4); border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
html.os-ui .ui-page .ui-listview > li { border: 0; }
html.os-ui .ui-page .ui-listview > li.ui-li-divider {
  margin: 0 0 var(--os-sp-2); padding: 0 2px;
  background: transparent !important; color: var(--os-text-2) !important; border: 0;
  font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  white-space: normal; overflow: visible;
}
html.os-ui .ui-page .ui-listview > li > a.ui-btn,
html.os-ui .ui-page .ui-listview > li.ui-li-static {
  min-height: 52px; margin-bottom: 6px;
  display: flex; align-items: center;
  padding: 10px 44px 10px var(--os-sp-4);
  background: var(--os-surface) !important; color: var(--os-text) !important;
  border: 1px solid var(--os-border) !important; border-radius: var(--os-r-md) !important;
  font-size: var(--os-fs-md); font-weight: 650; white-space: normal; text-align: left; box-shadow: none;
}

/* ---------- Buttons allgemein ---------- */
html.os-ui .ui-page .ui-btn:not(.ui-li-divider),
html.os-ui .ui-dialog .ui-btn,
html.os-ui .ui-panel .ui-btn {
  border-radius: var(--os-r-md); box-shadow: none; text-shadow: none; font-weight: 750;
}
html.os-ui .ui-content > .ui-btn,
html.os-ui .ui-content a.ui-btn[data-role="button"],
html.os-ui .ui-content .ui-btn.ui-input-btn,
html.os-ui .ui-dialog-contain .ui-btn {
  min-height: var(--os-hit); line-height: 1.2;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--os-border-strong) !important;
  background: var(--os-surface) !important; color: var(--os-text) !important;
}
/* Theme b = Hauptaktion (Ja, Bezahlen …) */
html.os-ui .ui-dialog-contain .ui-btn.ui-btn-b,
html.os-ui .ui-content .ui-btn.ui-btn-b:not(.ui-li-divider) {
  background: var(--os-primary) !important; color: var(--os-on-primary) !important; border-color: var(--os-primary) !important;
}
html.os-ui .ui-btn:active { transform: scale(.98); }
html.os-ui .ui-btn-icon-left::after,
html.os-ui .ui-btn-icon-right::after { background-color: rgba(0, 0, 0, .25); }

/* Kontrollgruppen (Button-Leisten) */
html.os-ui .ui-controlgroup-horizontal .ui-controlgroup-controls { display: flex; flex-wrap: wrap; gap: var(--os-sp-2); }
html.os-ui .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
html.os-ui .ui-controlgroup-horizontal .ui-controlgroup-controls > a.ui-btn {
  float: none; margin: 0 !important; border-radius: var(--os-r-md) !important;
  min-height: var(--os-hit-lg); display: inline-flex; align-items: center;
}

/* ---------- Eingabefelder ---------- */
html.os-ui .ui-input-text,
html.os-ui .ui-input-search {
  margin: 0 0 var(--os-sp-3);
  border: 1.5px solid var(--os-border-strong) !important; border-radius: var(--os-r-md) !important;
  background: var(--os-surface) !important; box-shadow: none !important;
}
html.os-ui .ui-input-text input,
html.os-ui .ui-input-search input,
html.os-ui .ui-input-text textarea { min-height: var(--os-hit); font-size: var(--os-fs-md); color: var(--os-text); }
html.os-ui .ui-select .ui-btn {
  min-height: var(--os-hit); display: flex; align-items: center;
  background: var(--os-surface) !important; color: var(--os-text) !important;
  border: 1.5px solid var(--os-border-strong) !important;
}
html.os-ui .ui-checkbox .ui-btn,
html.os-ui .ui-radio .ui-btn {
  min-height: var(--os-hit); display: flex; align-items: center;
  background: var(--os-surface) !important; color: var(--os-text) !important;
  border: 1px solid var(--os-border) !important;
}
html.os-ui .ui-collapsible-heading .ui-btn {
  min-height: 52px; display: flex; align-items: center;
  border: 1px solid var(--os-border) !important; border-radius: var(--os-r-lg) !important;
  background: var(--os-surface) !important; color: var(--os-text) !important; font-weight: 800;
}
html.os-ui .ui-collapsible-content { background: var(--os-surface) !important; border-color: var(--os-border) !important; }

/* ---------- Hauptmenü (Panel) wie Bottom-Sheet-Liste ---------- */
html.os-ui .ui-panel {
  background: var(--os-surface) !important;
  width: 18em;
}
/* jQM-Abdunkelung exakt neben dem Panel */
html.os-ui .ui-panel-dismiss-open.ui-panel-dismiss-position-right { right: 18em; }
html.os-ui .ui-panel-open.ui-panel-position-right.ui-panel-display-reveal,
html.os-ui .ui-panel-page-content-position-right.ui-panel-page-content-open { right: 18em; }
html.os-ui .ui-panel.ui-panel-position-right.ui-panel-display-overlay { box-shadow: var(--os-shadow-2); }
html.os-ui .ui-panel .ui-panel-inner { padding: var(--os-sp-4); }
html.os-ui .ui-panel .ui-listview.ui-listview-inset { margin: 0; border: 0; box-shadow: none; background: transparent; }
html.os-ui .ui-panel .ui-listview > li.ui-li-divider {
  margin: 0 0 var(--os-sp-3); padding: 0 2px; border: 0;
  background: transparent !important; color: var(--os-text) !important;
  font-size: var(--os-fs-xl); font-weight: 800; letter-spacing: 0; text-transform: none;
}
html.os-ui .ui-panel .ui-listview > li > a.ui-btn {
  min-height: var(--os-hit-lg); margin-bottom: 6px;
  display: flex; align-items: center; padding: 0 var(--os-sp-4);
  background: var(--os-surface) !important; color: var(--os-text) !important;
  border: 1px solid var(--os-border) !important; border-radius: var(--os-r-md) !important;
  font-size: var(--os-fs-lg); font-weight: 700; white-space: normal;
}
html.os-ui .ui-panel-dismiss-open,
html.os-ui .ui-panel-dismiss { background: var(--os-scrim); }

/* ---------- Dialoge wie Bottom-Sheet ---------- */
html.os-ui .ui-dialog,
html.os-ui .ui-dialog.ui-page { background: var(--os-scrim) !important; }
html.os-ui .ui-dialog-contain {
  width: 100%; max-width: 560px; margin: 0 auto;
  border-radius: var(--os-r-xl); overflow: hidden;
  background: var(--os-surface); box-shadow: var(--os-shadow-2); border: 0;
}
@media (max-width: 759px) {
  html.os-ui .ui-dialog .ui-dialog-contain { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; border-radius: var(--os-r-xl) var(--os-r-xl) 0 0; max-height: 92vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  html.os-ui .ui-dialog .ui-dialog-contain::before {
    content: ""; display: block; width: 44px; height: 5px; margin: 8px auto 0;
    border-radius: 3px; background: var(--os-border-strong);
  }
}
html.os-ui .ui-dialog-contain > .ui-header {
  background: var(--os-surface) !important; color: var(--os-text) !important; border: 0;
  min-height: 56px; display: flex; align-items: center;
}
html.os-ui .ui-dialog-contain > .ui-header .ui-title {
  margin: 0 56px 0 var(--os-sp-4); padding: 0; text-align: left;
  font-size: var(--os-fs-xl); font-weight: 800; color: var(--os-text);
}
html.os-ui .ui-dialog-contain > .ui-header .ui-btn {
  background: transparent !important; border: 0 !important; color: var(--os-text) !important;
  width: var(--os-hit); height: var(--os-hit); top: 4px; left: auto; right: 4px;
}
html.os-ui .ui-dialog-contain > .ui-content { background: var(--os-surface) !important; padding: var(--os-sp-2) var(--os-sp-4) var(--os-sp-4); display: flex; flex-direction: column; gap: var(--os-sp-2); }
html.os-ui .ui-dialog-contain > .ui-content > .ui-btn,
html.os-ui .ui-dialog-contain > .ui-content a.ui-btn { margin: 0; min-height: var(--os-hit-lg); font-size: var(--os-fs-lg); }

/* ---------- Numerisches Tastenfeld (Direkteingabe Tisch, Login) ---------- */
html.os-ui table.numfield { border-collapse: separate; border-spacing: var(--os-sp-2); width: 100%; margin-left: 0; padding: 0; background: transparent; border: 0; }
html.os-ui table.numfield td {
  height: var(--os-hit-lg); text-align: center; vertical-align: middle;
  background: var(--os-surface); border: 1px solid var(--os-border); border-radius: var(--os-r-md);
  font-size: var(--os-fs-xl); font-weight: 800; color: var(--os-text); cursor: pointer;
}
html.os-ui table.numfield td.numnav { background: var(--os-surface-2); }
html.os-ui table.numfield td:active { transform: scale(.96); background: var(--os-primary-soft); }

/* ---------- Toast-artige Hinweise von OrderSprinter ---------- */
html.os-ui .ui-loader .ui-icon-loading { background-color: var(--os-bar); }
html.os-ui .ui-loader-verbose { background: var(--os-bar) !important; color: var(--os-on-bar) !important; border-radius: var(--os-r-lg); }

/* =====================================================================
   Räume & Tische (Seiten #info-page, #tables-page)
   ===================================================================== */
html.os-ui .ui-page ul.os-tilelist {
  display: grid; gap: var(--os-sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.os-ui .ui-page ul.os-tilelist.os-tilelist--tables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) {
  html.os-ui .ui-page ul.os-tilelist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.os-ui .ui-page ul.os-tilelist.os-tilelist--tables { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  html.os-ui .ui-page ul.os-tilelist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.os-ui .ui-page ul.os-tilelist.os-tilelist--tables { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { html.os-ui .ui-page ul.os-tilelist.os-tilelist--rooms { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
html.os-ui .ui-page ul.os-tilelist > li { margin: 0; }
html.os-ui .ui-page ul.os-tilelist > li:not(.os-li-tile) { grid-column: 1 / -1; }

/* Kachel */
html.os-ui .ui-page ul.os-tilelist > li > a.os-t.ui-btn {
  position: relative; overflow: hidden; width: 100%; height: 100% !important; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
  padding: var(--os-sp-4) var(--os-sp-3) var(--os-sp-3) var(--os-sp-4);
  text-align: left; white-space: normal;
  background: var(--os-surface) !important; color: var(--os-text) !important;
  border: 1px solid var(--os-border) !important; border-radius: var(--os-r-lg) !important;
  box-shadow: var(--os-shadow-1); transition: transform .08s ease;
}
html.os-ui .ui-page ul.os-tilelist > li > a.os-t.ui-btn:active { transform: scale(.97); }
html.os-ui .ui-page ul.os-tilelist > li > a.os-t.ui-btn::after { display: none; } /* jQM-Pfeil */
html.os-ui .os-t__name { font-size: var(--os-fs-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; }
html.os-ui .os-t__status { font-size: 13px; font-weight: 600; color: var(--os-text-3); }
html.os-ui .os-t__amount { font-size: var(--os-fs-lg); font-weight: 800; color: var(--os-warning-ink); font-variant-numeric: tabular-nums; }

/* Raum-Kachel: Farbbalken oben */
html.os-ui .ui-page ul.os-tilelist > li > a.os-t--room.ui-btn {
  min-height: 104px;
  background: color-mix(in oklab, var(--os-accent-room) var(--os-tint-tile), var(--os-surface)) !important;
}
html.os-ui .ui-page ul.os-tilelist > li > a.os-t--room.ui-btn::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--os-accent-room); filter: saturate(1.4) brightness(.8);
}
html.os-ui .ui-page ul.os-tilelist > li > a.os-t--room.is-open .os-t__amount { margin-top: 4px; font-size: 13px; }

/* Tisch-Kachel */
html.os-ui .ui-page ul.os-tilelist > li > a.os-t--table.ui-btn { min-height: 92px; padding: var(--os-sp-3); }
html.os-ui .ui-page ul.os-tilelist > li > a.os-t--table .os-t__name { font-size: 24px; }
html.os-ui .ui-page ul.os-tilelist > li > a.os-t.is-open.ui-btn {
  background: var(--os-warning-soft) !important; border: 2px solid var(--os-warning) !important;
}
html.os-ui .ui-page ul.os-tilelist > li > a.os-t.is-open .os-t__status { color: var(--os-warning-ink); }
/* Serviert-Anzeige (OrderSprinter: prodreadycount / prodreadyicon) oben rechts */
html.os-ui .ui-page ul.os-tilelist > li > a.os-t .prodreadycount { position: absolute; top: 8px; right: 40px; font-size: 13px; font-weight: 800; }
html.os-ui .ui-page ul.os-tilelist > li > a.os-t .prodreadyicon { position: absolute; top: 4px; right: 6px; }
html.os-ui .ui-page ul.os-tilelist > li > a.os-t .prodreadyicon img { width: 28px; height: 28px; }

/* Legende über den Tischen */
html.os-ui #os-tablelegend { margin: 0 0 var(--os-sp-3); }
html.os-ui .os-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-sp-2) var(--os-sp-4); font-size: 13px; color: var(--os-text-2); }
html.os-ui .os-legend__item { display: inline-flex; align-items: center; gap: 6px; }
html.os-ui .os-legend__dot { width: 14px; height: 14px; border-radius: 4px; background: var(--os-surface); border: 1px solid var(--os-border-strong); }
html.os-ui .os-legend__dot--open { background: var(--os-warning-soft); border: 2px solid var(--os-warning); }
html.os-ui .os-legend__sum { margin-left: auto; font-weight: 800; color: var(--os-text); }

/* Tischplan-Ansicht (Grundriss): nur Rahmen anpassen */
html.os-ui #tablemapcontent { border-radius: var(--os-r-lg); overflow: hidden; border: 1px solid var(--os-border); }

/* Direkteingabe Tischnummer */
html.os-ui #directtable { margin-bottom: var(--os-sp-4); }

/* Hinweis-Listen (Kellner-Nachricht) */
html.os-ui #waitermessage > li,
html.os-ui #waitermessagetableview > li { border-radius: var(--os-r-md) !important; }

/* Tageslosung */
html.os-ui .daycodeareamobile { margin: 0 var(--os-sp-4) var(--os-sp-3); padding: var(--os-sp-3) var(--os-sp-4); border-radius: var(--os-r-md); background: var(--os-surface-2); font-weight: 700; }

/* =====================================================================
   Verbindungs-Banner (unter der Kopfzeile)
   ===================================================================== */
html.os-ui #os-netbanner {
  position: fixed; top: var(--os-bar-h); left: 0; right: 0; z-index: 1100;
  display: flex; align-items: flex-start; gap: var(--os-sp-3);
  padding: var(--os-sp-3) var(--os-sp-4); font-family: var(--os-font); font-size: var(--os-fs-sm); line-height: 1.4;
  background: var(--os-danger-soft); color: var(--os-danger-ink); box-shadow: var(--os-shadow-1);
}
html.os-ui #os-netbanner[hidden] { display: none; }
html.os-ui .ui-page > .ui-header .ui-title .connectionstatus { display: none !important; } /* ersetzt durch Banner */


/* Listen in Dialogen linksbündig */
html.os-ui .ui-dialog-contain .ui-listview > li > a.ui-btn { justify-content: flex-start; text-align: left; }

/* Eingabefelder: Hintergrund aus Tokens (auch Dunkelmodus; Original setzt teils weiß) */
html.os-ui .ui-input-text input, html.os-ui .ui-input-search input, html.os-ui .ui-input-text textarea,
html.os-ui input.genConfigEl[type=text], html.os-ui input.genConfigEl[type=password], html.os-ui input.genConfigEl[type=number],
html.os-ui #passwordfield {
  background: transparent !important; color: var(--os-text) !important; font-family: var(--os-font) !important;
}
html.os-ui .ui-input-text input::placeholder, html.os-ui .ui-input-search input::placeholder { color: var(--os-text-3); }

/* =====================================================================
   Icons: jQuery-Mobile-Symbole (graue Kreise) durch Linien-Icons im
   Design-Stil ersetzen – per CSS-Maske, Farbe = Textfarbe.
   ===================================================================== */
html.os-ui .ui-btn-icon-left::after, html.os-ui .ui-btn-icon-right::after, html.os-ui .ui-btn-icon-top::after,
html.os-ui .ui-btn-icon-bottom::after, html.os-ui .ui-btn-icon-notext::after {
  background-color: currentColor !important; background-image: none !important; border-radius: 0 !important;
  width: 22px !important; height: 22px !important; margin-top: -11px !important; opacity: .75;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
}
html.os-ui .ui-btn-icon-left::after { left: 12px; }
html.os-ui .ui-btn-icon-right::after { right: 12px; }
html.os-ui .ui-btn-icon-notext::after { left: 50% !important; margin-left: -11px !important; }
html.os-ui .ui-btn-icon-left { padding-left: 44px !important; }
html.os-ui .ui-icon-carat-r::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-carat-l::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-carat-d::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-carat-u::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-arrow-r::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-arrow-l::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-arrow-d::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-arrow-u::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-delete::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-plus::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-minus::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-check::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-grid::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-bars::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-search::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14M20 20l-3.5-3.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-home::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7M5 10v10h14V10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7M5 10v10h14V10'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-info::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 11v6M12 7.5h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 11v6M12 7.5h.01'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-alert::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v5M12 18h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v5M12 18h.01'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-edit::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13 7l4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13 7l4 4'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-back::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-refresh::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-clock::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 7v5l3 2'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-user::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a4 4 0 1 0 0 8a4 4 0 1 0 0-8M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a4 4 0 1 0 0 8a4 4 0 1 0 0-8M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-gear::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6M19 12l2-1-1-3-2 .2-1.4-1.4.2-2-3-1-1 2h-1.6l-1-2-3 1 .2 2L6 7.8l-2-.2-1 3 2 1v1.6l-2 1 1 3 2-.2L7.4 17l-.2 2 3 1 1-2h1.6l1 2 3-1-.2-2 1.4-1.4 2 .2 1-3-2-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6M19 12l2-1-1-3-2 .2-1.4-1.4.2-2-3-1-1 2h-1.6l-1-2-3 1 .2 2L6 7.8l-2-.2-1 3 2 1v1.6l-2 1 1 3 2-.2L7.4 17l-.2 2 3 1 1-2h1.6l1 2 3-1-.2-2 1.4-1.4 2 .2 1-3-2-1z'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-star::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-shop::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.5 12h-13zM9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.5 12h-13zM9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-mail::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-forbidden::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-action::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 9l5-5 5 5M5 14v6h14v-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 9l5-5 5 5M5 14v6h14v-6'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-heart::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-location::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-6-6-11a6 6 0 0 1 12 0c0 5-6 11-6 11zM12 8a2 2 0 1 0 0 4a2 2 0 1 0 0-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-6-6-11a6 6 0 0 1 12 0c0 5-6 11-6 11zM12 8a2 2 0 1 0 0 4a2 2 0 1 0 0-4'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-cloud::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11.6 1.5A3.5 3.5 0 0 0 7 18z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11.6 1.5A3.5 3.5 0 0 0 7 18z'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-phone::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-calendar::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v14H4zM4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-comment::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-lock::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9H6zM8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9H6zM8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-tag::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z M7.5 8.5h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z M7.5 8.5h.01'/%3E%3C/svg%3E"); }
html.os-ui .ui-icon-eye::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6'/%3E%3C/svg%3E"); }