/* ==========================================================================
   SUN Liner - DevExpress control layer.

   Shared by every screen. Nothing page-specific belongs here: if a rule only
   makes sense on one screen, it goes in app.css or that page.

   HOW THIS RELATES TO THE DEVEXPRESS THEME
   The Fluent theme (linked first in App.razor) supplies the structure of each
   control - padding, focus handling, disabled semantics, grid layout. This file
   takes over only colour, elevation, motion and iconography, so the controls
   match the SUN Liner palette without re-implementing DevExpress.

   Every value is a theme.css token, so the dark palette needs no second set of
   rules: theme.css redefines the tokens and these follow.

   CLASS NAMING
     .sl-btn + .sl-btn--<variant>   buttons, applied via DxButton CssClass
     .sl-i   + .sl-i--<name>        icons, applied via DxButton IconCssClass
     .sl-input                      editors (DxTextBox, DxComboBox, ...)
     .sl-grid                       DxGrid
     .sl-badge--<state>             status pills
     .sl-chip                       counts beside a page title
   ========================================================================== */

/* ==========================================================================
   Icons

   The glyphs are the DevExpress Fluent 16px icons, taken from their own sprite
   (_content/DevExpress.Blazor/dx-blazor.svg) and inlined here as masks.

   Why inlined rather than referencing the sprite: DxButton.IconCssClass wants a
   CSS CLASS, and a CSS background or mask cannot reliably address one symbol
   inside an SVG sprite by fragment - browsers render the whole file or nothing.
   Masking an inlined path is the approach that works everywhere.

   Masking rather than background-image also means the icon is painted with
   background-color: currentColor, so it inherits the button text colour and
   changes with it on hover, on press and when disabled - with no per-variant
   icon rules at all.
   ========================================================================== */

.sl-i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--sl-i-url) center / contain no-repeat;
  mask: var(--sl-i-url) center / contain no-repeat;
  transition: transform 160ms ease;
}

/* dx-search-fluent-16 */
.sl-i--search {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.309 10.016a4.5 4.5 0 1 1 .707-.707l3.838 3.837a.5.5 0 0 1-.708.708L9.31 10.016ZM10 6.5a3.5 3.5 0 1 0-7 0 3.5 3.5 0 0 0 7 0Z'/%3E%3C/svg%3E");
}

/* dx-uc-reload-fluent-16 */
.sl-i--refresh {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8a5 5 0 0 1 9-3h-2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.531a6 6 0 1 0 1.476 4.513.5.5 0 0 0-.996-.089A5 5 0 0 1 3 8Z'/%3E%3C/svg%3E");
}

/* dx-plus-fluent-16 */
.sl-i--add {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.545 2.545a.545.545 0 1 0-1.09 0v4.91h-4.91a.545.545 0 1 0 0 1.09h4.91v4.91a.545.545 0 1 0 1.09 0v-4.91h4.91a.545.545 0 1 0 0-1.09h-4.91v-4.91Z'/%3E%3C/svg%3E");
}

/* dx-dismiss-fluent-16 */
.sl-i--clear {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.589 2.716.057-.07a.5.5 0 0 1 .638-.057l.07.057L8 7.293l4.646-4.647a.5.5 0 0 1 .708.708L8.707 8l4.647 4.646a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L8 8.707l-4.646 4.647a.5.5 0 0 1-.708-.708L7.293 8 2.646 3.354a.5.5 0 0 1-.057-.638Z'/%3E%3C/svg%3E");
}

/* dx-sc-save-fluent-16 */
.sl-i--save {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h7.172a2 2 0 0 1 1.414.586l1.828 1.828A2 2 0 0 1 15 5.828V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1v-3.5A1.5 1.5 0 0 1 5.5 8h5A1.5 1.5 0 0 1 12 9.5V13a1 1 0 0 0 1-1V5.828a1 1 0 0 0-.293-.707l-1.828-1.828A1 1 0 0 0 10.172 3H10v2.5A1.5 1.5 0 0 1 8.5 7h-2A1.5 1.5 0 0 1 5 5.5V3H4Zm2 0v2.5a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5V3H6Zm5 10V9.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0-.5.5V13h6Z'/%3E%3C/svg%3E");
}

/* dx-error-circle, reused at 16px as a "blocked" marker for the banned list. */
.sl-i--banned {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 1.94.666 3.724 1.782 5.137L17.137 6.551A8.297 8.297 0 0 0 12 3.667Zm0 16.666c4.595 0 8.333-3.738 8.333-8.333a8.297 8.297 0 0 0-1.782-5.137L6.863 17.449A8.297 8.297 0 0 0 12 20.333Z'/%3E%3C/svg%3E");
}

/* dx-chevron-right-fluent-16 */
.sl-i--view {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.646 3.146a.5.5 0 0 0 0 .708L9.793 8l-4.147 4.146a.5.5 0 0 0 .708.708l4.5-4.5a.5.5 0 0 0 0-.708l-4.5-4.5a.5.5 0 0 0-.708 0Z'/%3E%3C/svg%3E");
}

/* dx-funnel-fluent-16 */
.sl-i--filter {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M3.293 5.471l2.414 2.545c.188.198.293.466.293.746v3.128c0 .4.214.765.553.943l2 1.054c.665.35 1.447-.159 1.447-.943V8.762c0-.28.105-.548.293-.746l2.414-2.545c.188-.197.293-.466.293-.745V3.054C13 2.472 12.552 2 12 2H4c-.552 0-1 .472-1 1.054v1.672c0 .28.105.548.293.745Z'/%3E%3C/svg%3E");
}

/* dx-arrow-left-fluent-16 */
.sl-i--back {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.854 3.146a.5.5 0 0 1 0 .708L4.207 7.5H13.5a.5.5 0 0 1 0 1H4.207l3.647 3.646a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0Z'/%3E%3C/svg%3E");
}

/* dx-arrow-download-fluent-16 */
.sl-i--download {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a.5.5 0 0 1 .5.5v7.293l2.646-2.647a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L7.5 9.793V2.5A.5.5 0 0 1 8 2ZM3 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
}

/* dx-error-circle-fluent-24 */
.sl-i--error {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm-.001 10.835a.999.999 0 1 1 0 1.998.999.999 0 0 1 0-1.998ZM11.994 7a.75.75 0 0 1 .744.648l.007.101.004 4.502a.75.75 0 0 1-1.493.103l-.007-.102-.004-4.501a.75.75 0 0 1 .75-.751Z'/%3E%3C/svg%3E");
}

/* ---- Interactive icon behaviour ---------------------------------------- *
 * The icon reacts to the state of the button containing it, which is what
 * makes these feel like controls rather than decoration. Each is small and
 * tied to the meaning of the action: reload turns, add opens, a chevron
 * advances.                                                                */

.sl-btn.dxbl-btn:not(:disabled):hover .sl-i--refresh {
  transform: rotate(-90deg);
}

.sl-btn.dxbl-btn:not(:disabled):hover .sl-i--add {
  transform: rotate(90deg);
}

.sl-btn.dxbl-btn:not(:disabled):hover .sl-i--view {
  transform: translateX(2px);
}

.sl-btn.dxbl-btn:not(:disabled):hover .sl-i--clear {
  transform: rotate(90deg);
}

/* Applied while an action is in flight. Over a Server circuit the work happens
   a round trip away, so the spin is the only signal the click was received. */
.sl-i.is-busy {
  animation: sl-spin 0.8s linear infinite;
  transform: none;
}

@keyframes sl-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sl-i { transition: none; }
  .sl-i.is-busy { animation-duration: 2.4s; }
  .sl-btn.dxbl-btn:not(:disabled):hover .sl-i--refresh,
  .sl-btn.dxbl-btn:not(:disabled):hover .sl-i--add,
  .sl-btn.dxbl-btn:not(:disabled):hover .sl-i--view,
  .sl-btn.dxbl-btn:not(:disabled):hover .sl-i--clear {
    transform: none;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.sl-btn.dxbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 16px;
  /* Curved: a full pill. Reads as a button at a glance, next to square grids
     and editors, which is the point. */
  border-radius: var(--sl-radius-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 80ms ease;
}

/* A pressed button moves 1px. Small enough to read as a control rather than an
   animation, and the cheapest way to acknowledge a click on a Server circuit. */
.sl-btn.dxbl-btn:not(:disabled):active {
  transform: translateY(1px);
}

/* ---- Primary: the one affirmative action on a screen ------------------- */

.sl-btn--primary.dxbl-btn {
  border-color: transparent;
  background-image: linear-gradient(180deg, var(--sl-blue-600) 0%, var(--sl-blue-700) 100%);
  background-color: var(--sl-blue-700);
  color: var(--sl-ink-on-accent);
  box-shadow: 0 1px 2px rgb(11 41 66 / 18%);
}

.sl-btn--primary.dxbl-btn:not(:disabled):hover {
  background-image: linear-gradient(180deg, var(--sl-blue-500) 0%, var(--sl-blue-600) 100%);
  box-shadow: 0 2px 8px rgb(11 41 66 / 24%);
}

.sl-btn--primary.dxbl-btn:not(:disabled):active {
  background-image: none;
  background-color: var(--sl-blue-800);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 22%);
}

/* ---- Accent: the brand orange, for the single most important action on a
        page (sign in, open a module). Used sparingly or it stops meaning
        anything. ------------------------------------------------------- */

.sl-btn--accent.dxbl-btn {
  border-color: transparent;
  background-image: linear-gradient(180deg, var(--sl-orange-400) 0%, var(--sl-orange-500) 55%, var(--sl-orange-600) 100%);
  background-color: var(--sl-orange-500);
  color: var(--sl-ink-on-accent);
  box-shadow: var(--sl-shadow-accent);
}

.sl-btn--accent.dxbl-btn:not(:disabled):hover {
  background-image: linear-gradient(180deg, var(--sl-orange-300) 0%, var(--sl-orange-400) 55%, var(--sl-orange-500) 100%);
  box-shadow: 0 8px 22px rgb(224 118 27 / 36%);
}

.sl-btn--accent.dxbl-btn:not(:disabled):active {
  background-image: none;
  background-color: var(--sl-orange-600);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 22%);
}

/* ---- Outline: neutral, repeatable actions such as Refresh ------------- */

.sl-btn--outline.dxbl-btn {
  border-color: var(--sl-line);
  background: var(--sl-surface);
  color: var(--sl-ink-muted);
}

.sl-btn--outline.dxbl-btn:not(:disabled):hover {
  border-color: var(--sl-blue-300);
  background: var(--sl-blue-050);
  color: var(--sl-blue-700);
}

.sl-btn--outline.dxbl-btn:not(:disabled):active {
  background: var(--sl-blue-050);
  box-shadow: inset 0 1px 3px rgb(11 41 66 / 14%);
}

/* ---- Ghost: present only while it applies, so it must not shout ------- */

.sl-btn--ghost.dxbl-btn {
  border-color: transparent;
  background: transparent;
  color: var(--sl-ink-subtle);
}

.sl-btn--ghost.dxbl-btn:not(:disabled):hover {
  background: var(--sl-surface-raised);
  color: var(--sl-ink);
}

/* ---- Link: a per-row action, sized not to bulk out the row ----------- */

.sl-btn--link.dxbl-btn {
  padding-inline: 6px;
  border-color: transparent;
  background: transparent;
  color: var(--sl-blue-600);
  font-weight: 600;
  text-decoration: none;
}

.sl-btn--link.dxbl-btn:not(:disabled):hover {
  background: var(--sl-blue-050);
  color: var(--sl-blue-700);
}

/* ---- Danger: destructive actions ------------------------------------- */

.sl-btn--danger.dxbl-btn {
  border-color: transparent;
  background: var(--sl-stop);
  color: var(--sl-ink-on-accent);
  box-shadow: 0 1px 2px rgb(11 41 66 / 18%);
}

.sl-btn--danger.dxbl-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--sl-stop) 85%, black);
  box-shadow: 0 2px 8px rgb(163 50 36 / 28%);
}

/* ---- Disabled: readable, and clearly not available ------------------- */

.sl-btn.dxbl-btn:disabled,
.sl-btn.dxbl-btn.dxbl-disabled {
  border-color: var(--sl-line-soft);
  background-image: none;
  background-color: var(--sl-surface-raised);
  color: var(--sl-ink-subtle);
  box-shadow: none;
  opacity: 1;              /* the muted colours carry it; opacity blurs the text */
  cursor: not-allowed;
}

/* Keyboard focus stays visible on every variant. A focus ring is not
   decoration. */
.sl-btn.dxbl-btn:focus-visible {
  outline: 2px solid var(--sl-blue-500);
  outline-offset: 2px;
}

/* ==========================================================================
   Editors
   ========================================================================== */

.sl-input.dxbl-edit,
.sl-input .dxbl-edit {
  border-radius: var(--sl-radius-sm);
  font-size: 13px;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.sl-grid.dxbl-grid {
  border: 0;
  font-size: 13px;
}

.sl-grid .dxbl-grid-header {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Identifier columns read as codes, so they are set in the mono face and will
   not shift width as the digits change. Opt in per column with this class. */
.sl-grid .sl-col-code,
.sl-grid td.sl-col-code {
  font-family: var(--sl-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/*
  Row de-emphasis. The badge in the row already states the status precisely, so
  this is emphasis and not the only signal - colour alone is not accessible.
*/
.sl-row--cancelled > td {
  color: var(--sl-ink-subtle);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--sl-stop) 60%, transparent);
}

.sl-row--rejected > td {
  background: color-mix(in srgb, var(--sl-stop-soft) 55%, transparent);
}

/* A struck-through row must not strike through its own badge. */
.sl-row--cancelled > td .sl-badge,
.sl-row--rejected > td .sl-badge {
  text-decoration: none;
}

/* ==========================================================================
   Status badges
   ========================================================================== */

.sl-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sl-badge--approved {
  border-color: color-mix(in srgb, var(--sl-ok) 30%, transparent);
  background: var(--sl-ok-soft);
  color: var(--sl-ok);
}

.sl-badge--temporary {
  border-color: color-mix(in srgb, var(--sl-blue-600) 30%, transparent);
  background: var(--sl-blue-050);
  color: var(--sl-blue-700);
}

.sl-badge--onhold {
  border-color: color-mix(in srgb, var(--sl-warn) 30%, transparent);
  background: var(--sl-warn-soft);
  color: var(--sl-warn);
}

.sl-badge--rejected,
.sl-badge--cancelled {
  border-color: color-mix(in srgb, var(--sl-stop) 30%, transparent);
  background: var(--sl-stop-soft);
  color: var(--sl-stop);
}

.sl-badge--unknown {
  border-color: var(--sl-line);
  background: var(--sl-surface-raised);
  color: var(--sl-ink-subtle);
}

/* ==========================================================================
   Cards, chips, toolbars and load states
   ========================================================================== */

.sl-card {
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-lg);
  background: var(--sl-surface);
  box-shadow: var(--sl-shadow-1);
}

.sl-card--toolbar {
  padding: 12px 14px;
  margin-bottom: 14px;
}

.sl-card--grid {
  padding: 4px;
  overflow: hidden;
}

.sl-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--sl-line);
  border-radius: 11px;
  background: var(--sl-surface-raised);
  color: var(--sl-ink-muted);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sl-chip--accent {
  border-color: var(--sl-blue-300);
  background: var(--sl-blue-050);
  color: var(--sl-blue-700);
}

.sl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sl-toolbar__spacer {
  flex: 1 1 auto;
}

.sl-state {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
}

.sl-state--error {
  flex-wrap: wrap;
}

.sl-state__icon {
  font-size: 20px;
  color: var(--sl-stop);
}

.sl-state__text {
  margin: 0;
  color: var(--sl-ink-muted);
  font-size: 13.5px;
}

.sl-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sl-line);
  border-top-color: var(--sl-blue-500);
  border-radius: 50%;
  animation: sl-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sl-spinner { animation-duration: 3s; }
}

/* ==========================================================================
   Report viewer

   The report is a PDF shown in the browser's own viewer, so there is very
   little to style: a card, and a frame tall enough to read a page in without
   the frame scrolling inside the page scrolling.

   The height is viewport-relative rather than fixed. A fixed height that suits
   a laptop leaves two thirds of a desk monitor empty, and this is a report
   people read rather than glance at.
   ========================================================================== */

.sl-report {
  padding: 0;
  overflow: hidden;
}

.sl-report__frame {
  display: block;
  width: 100%;
  height: clamp(420px, calc(100vh - 220px), 1200px);
  border: 0;
  background: var(--sl-surface-sunken, #f3f4f6);
}

/* ==========================================================================
   Forms

   A two-column header form, matching the shape of the legacy Web Forms screens
   so the layout is familiar. Collapses to one column on a narrow viewport.
   ========================================================================== */

.sl-card--form {
  padding: 18px 18px 0;
}

.sl-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
}

@media (max-width: 1100px) {
  .sl-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sl-form__col {
  min-width: 0;
}

.sl-form__row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
}

.sl-form__label {
  padding-top: 7px;
  color: var(--sl-ink-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* A mandatory field is marked, rather than leaving the user to discover it from
   a refusal after pressing Save. These three are the ones PROC_SAVE_PARTNER
   rejects outright. */
.sl-form__label--required::after {
  content: " *";
  color: var(--sl-stop);
  font-weight: 700;
}

.sl-form__field {
  min-width: 0;
}

/* The three address lines. */
.sl-form__field--stack {
  display: grid;
  gap: 6px;
}

/* City and pin code share a row, as they do on the legacy screen. */
.sl-form__field--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 8px;
}

.sl-form__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  margin-top: 6px;
  border-top: 1px solid var(--sl-line-soft);
}

.sl-form__audit {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--sl-ink-subtle);
  font-size: 12px;
}

.sl-form__actions {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}

.sl-form__pending {
  margin-top: 14px;
  padding: 10px 13px;
  border: 1px dashed var(--sl-line);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-surface-raised);
}

/* ==========================================================================
   Notices

   A message about what just happened, above the thing it happened to. Distinct
   from .sl-message, which reports that a screen could not load at all.
   ========================================================================== */

.sl-notice {
  padding: 10px 13px;
  margin-bottom: 14px;
  border: 1px solid var(--sl-line);
  border-left-width: 3px;
  border-radius: var(--sl-radius-sm);
  font-size: 13px;
}

.sl-notice--ok {
  border-left-color: var(--sl-ok);
  background: var(--sl-ok-soft);
  color: var(--sl-ink);
}

.sl-notice--warn {
  border-left-color: var(--sl-warn);
  background: var(--sl-warn-soft);
  color: var(--sl-ink);
}

.sl-notice--stop {
  border-left-color: var(--sl-stop);
  background: var(--sl-stop-soft);
  color: var(--sl-ink);
}

/* ==========================================================================
   Lookup picker

   The chosen value plus a magnifier, and an inline panel of candidates. Inline
   rather than a modal: the user is comparing a candidate against the form they
   are filling in, and a modal hides exactly that.
   ========================================================================== */

.sl-picker {
  position: relative;
  min-width: 0;
}

.sl-picker__value {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sl-picker__value > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.sl-picker__btn.dxbl-btn {
  flex: none;
}

.sl-picker__panel {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 4px);
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  background: var(--sl-surface);
  box-shadow: var(--sl-shadow-2);
}

.sl-picker__search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.sl-picker__search > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.sl-picker__state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  color: var(--sl-ink-subtle);
  font-size: 12.5px;
}

.sl-picker__state--error {
  color: var(--sl-stop);
}

.sl-picker__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-picker__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title meta"
    "sub   meta";
  align-items: center;
  gap: 0 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--sl-radius-sm);
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 110ms ease;
}

.sl-picker__option:hover,
.sl-picker__option:focus-visible {
  background: var(--sl-blue-050);
}

.sl-picker__option:focus-visible {
  outline: 2px solid var(--sl-blue-500);
  outline-offset: -2px;
}

.sl-picker__option-title {
  grid-area: title;
  overflow: hidden;
  color: var(--sl-ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-picker__option-sub {
  grid-area: sub;
  overflow: hidden;
  color: var(--sl-ink-subtle);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-picker__option-meta {
  grid-area: meta;
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--sl-line);
  border-radius: 9px;
  background: var(--sl-surface-raised);
  color: var(--sl-ink-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sl-picker__note {
  margin: 8px 2px 0;
  color: var(--sl-ink-subtle);
  font-size: 11.5px;
}

/* A read-only editor should look stated rather than merely switched off. */
.sl-input--readonly.dxbl-edit,
.sl-input--readonly .dxbl-edit {
  background: var(--sl-surface-raised);
  color: var(--sl-ink-muted);
}

/* ==========================================================================
   Detail tabs

   A tab strip under a master record, each tab holding a grid and often a row of
   inputs above it. Shared, because every master-detail screen in the migration
   has the same shape.
   ========================================================================== */

.sl-card--tabs {
  margin-top: 14px;
  padding: 4px 4px 8px;
  overflow: hidden;
}

.sl-tabs .dxbl-tabs-nav {
  font-size: 13px;
  font-weight: 600;
}

.sl-tab {
  padding: 14px 12px 8px;
}

/* ---- The row of inputs above a detail grid ----------------------------- */

.sl-subform {
  padding: 12px 12px 10px;
  margin-bottom: 14px;
  border: 1px solid var(--sl-line-soft);
  border-radius: var(--sl-radius);
  background: var(--sl-surface-raised);
}

/*
  Auto-fit rather than a fixed column count: the Contact Details tab has nine
  inputs and the Documents tab two, and both should fill the width without a
  per-tab rule.
*/
.sl-subform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
}

.sl-subform__field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sl-subform__field--wide {
  grid-column: span 2;
}

.sl-subform__field--narrow {
  align-content: start;
}

@media (max-width: 900px) {
  .sl-subform__field--wide {
    grid-column: span 1;
  }
}

.sl-subform__label {
  color: var(--sl-ink-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.sl-subform__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.sl-subform__hint {
  margin: 8px 0 0;
}

/* ---- Small print ------------------------------------------------------- */

.sl-hint {
  color: var(--sl-ink-subtle);
  font-size: 11.5px;
}

/* A destructive row action. Text style, so it does not compete with the row. */
.sl-btn--link-stop.dxbl-btn {
  color: var(--sl-stop);
}

.sl-btn--link-stop.dxbl-btn:not(:disabled):hover {
  background: var(--sl-stop-soft);
  color: var(--sl-stop);
}

/* Checkbox sitting in a sub-form row, aligned with the inputs beside it. */
.sl-check {
  padding-top: 5px;
  font-size: 13px;
}

/* ---- A tab with a side panel ------------------------------------------- *
 * Partner Type puts the type list beside the haulier codes, as the legacy tab
 * did. The side panel drops below the main column on a narrow viewport.     */

.sl-tab__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1000px) {
  .sl-tab__split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sl-tab__main,
.sl-tab__side {
  min-width: 0;
}

/* A sub-form whose fields stack rather than sitting in an auto-fit grid. */
.sl-subform--stacked {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
}

.sl-subform__title {
  margin: 0;
  color: var(--sl-ink-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A stacked sub-form used as a standalone panel rather than a toolbar row.
   Capped, because credit fields are short and a full-width text box beside a
   checkbox reads as an error. */
.sl-subform--panel {
  max-width: 420px;
}

/* ==========================================================================
   Anchor styled as a button

   For a control that NAVIGATES rather than acts - a link into the legacy
   application, for instance. An anchor, not a button, so middle-click, copy
   link and the status bar all behave: it goes somewhere.

   Matches .sl-btn--outline, but cannot reuse it: those rules are scoped to
   .dxbl-btn, which DevExpress puts on its own buttons and this does not have.
   ========================================================================== */

.sl-btn-a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-surface);
  color: var(--sl-ink-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 80ms ease;
}

.sl-btn-a:hover {
  border-color: var(--sl-blue-300);
  background: var(--sl-blue-050);
  color: var(--sl-blue-700);
  text-decoration: none;
}

.sl-btn-a:active {
  transform: translateY(1px);
}

.sl-btn-a:focus-visible {
  outline: 2px solid var(--sl-blue-500);
  outline-offset: 2px;
}

/* ==========================================================================
   Icons added for the portal shell (header, menu, landing, sign-in).

   Same mask technique as the icons above. Where DevExpress ships the glyph,
   it is the DevExpress Fluent 16px icon from dx-blazor.svg. DevExpress has no
   person, sign-in/out, home, folder or moon/sun glyph, so those are drawn in
   the same 16px Fluent outline style and marked "custom" below.
   ========================================================================== */

/* custom (Fluent 16 style) - DevExpress ships no person glyph */
.sl-i--user {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 1a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM4.5 9A2.5 2.5 0 0 0 2 11.5v.5c0 1.7 1.9 3 6 3s6-1.3 6-3v-.5A2.5 2.5 0 0 0 11.5 9h-7Zm0 1h7a1.5 1.5 0 0 1 1.5 1.5v.5c0 .9-1.3 2-5 2s-5-1.1-5-2v-.5A1.5 1.5 0 0 1 4.5 10Z'/%3E%3C/svg%3E");
}

/* custom (Fluent 16 style) - DevExpress ships no sign-out glyph */
.sl-i--signout {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3 3.5A1.5 1.5 0 0 1 4.5 2h4A1.5 1.5 0 0 1 10 3.5V5H9V3.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V11h1v1.5A1.5 1.5 0 0 1 8.5 14h-4A1.5 1.5 0 0 1 3 12.5v-9Zm8.146 1.646a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L12.793 8.5H6.5a.5.5 0 0 1 0-1h6.293l-1.647-1.646a.5.5 0 0 1 0-.708Z'/%3E%3C/svg%3E");
}

/* custom (Fluent 16 style) */
.sl-i--signin {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.5 2h4A1.5 1.5 0 0 1 13 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-4A1.5 1.5 0 0 1 6 12.5V11h1v1.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0-.5.5V5H6V3.5A1.5 1.5 0 0 1 7.5 2ZM5.146 5.146a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L6.793 8.5H1.5a.5.5 0 0 1 0-1h5.293L5.146 5.854a.5.5 0 0 1 0-.708Z'/%3E%3C/svg%3E");
}

/* custom (Fluent 16 style) - DevExpress ships no home glyph */
.sl-i--home {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.314 1.83a1 1 0 0 1 1.372 0l5.5 5.2a1 1 0 0 1 .314.73V13a1.5 1.5 0 0 1-1.5 1.5h-2.5a1 1 0 0 1-1-1V10.5h-3v3a1 1 0 0 1-1 1H3A1.5 1.5 0 0 1 1.5 13V7.76a1 1 0 0 1 .314-.73l5.5-5.2ZM8 2.557 2.5 7.76V13a.5.5 0 0 0 .5.5h2.5v-3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v3H13a.5.5 0 0 0 .5-.5V7.76L8 2.557Z'/%3E%3C/svg%3E");
}

/* custom (Fluent 16 style) */
.sl-i--moon {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.2 2.1a.5.5 0 0 1 .1.56 5 5 0 0 0 6.99 6.54.5.5 0 0 1 .68.62A6.5 6.5 0 1 1 5.64 2.02a.5.5 0 0 1 .56.08ZM5.1 3.3a5.5 5.5 0 1 0 7.4 7.4A6 6 0 0 1 5.1 3.3Z'/%3E%3C/svg%3E");
}

/* custom (Fluent 16 style) */
.sl-i--sun {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 1a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM8 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 8 1Zm0 12a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 8 13ZM1 8a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1A.5.5 0 0 1 1 8Zm12 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1A.5.5 0 0 1 13 8ZM3.05 3.05a.5.5 0 0 1 .707 0l.708.707a.5.5 0 1 1-.708.708l-.707-.708a.5.5 0 0 1 0-.707Zm8.485 8.485a.5.5 0 0 1 .707 0l.708.708a.5.5 0 0 1-.708.707l-.707-.707a.5.5 0 0 1 0-.708ZM3.05 12.95a.5.5 0 0 1 0-.707l.707-.708a.5.5 0 1 1 .708.708l-.708.707a.5.5 0 0 1-.707 0Zm8.485-8.485a.5.5 0 0 1 0-.708l.708-.707a.5.5 0 1 1 .707.707l-.707.708a.5.5 0 0 1-.708 0Z'/%3E%3C/svg%3E");
}

/* custom (Fluent 16 style) */
.sl-i--folder {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.5 4.5A1.5 1.5 0 0 1 3 3h3.086a1.5 1.5 0 0 1 1.06.44L8.207 4.5H13A1.5 1.5 0 0 1 14.5 6v6.5A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5v-8ZM3 4a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5H8a.5.5 0 0 1-.354-.146L6.44 4.146A.5.5 0 0 0 6.086 4H3Z'/%3E%3C/svg%3E");
}

/* dx-he-close-lock-fluent-16 */
.sl-i--lock {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM5 4h-.5A2.5 2.5 0 0 0 2 6.5v5A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5v-5A2.5 2.5 0 0 0 11.5 4H11v-.5a3 3 0 0 0-6 0V4Zm1-.5a2 2 0 1 1 4 0V4H6v-.5ZM11.5 5A1.5 1.5 0 0 1 13 6.5v5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5v-5A1.5 1.5 0 0 1 4.5 5h7Z'/%3E%3C/svg%3E");
}

/* dx-sc-settings-fluent-16 */
.sl-i--settings {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM7 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm3.618-3.602a.708.708 0 0 1-.824-.567l-.26-1.416a.354.354 0 0 0-.275-.282 6.072 6.072 0 0 0-2.519 0 .354.354 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.355.355 0 0 0-.382.095c-.569.627-1 1.367-1.262 2.173a.352.352 0 0 0 .108.378l1.102.931a.704.704 0 0 1 0 1.076l-1.102.931a.352.352 0 0 0-.108.378A5.986 5.986 0 0 0 3.53 12.02a.355.355 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.075 6.075 0 0 0 2.52 0 .353.353 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095.569-.627 1-1.367 1.262-2.173a.352.352 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.352.352 0 0 0 .108-.378A5.985 5.985 0 0 0 12.47 3.98a.355.355 0 0 0-.382-.095l-1.36.484a.71.71 0 0 1-.111.03Zm-6.62.58.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5.105 5.105 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977c.255.334.467.698.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a4.99 4.99 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5.099 5.099 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a4.987 4.987 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637c.164-.386.376-.75.63-1.084Z'/%3E%3C/svg%3E");
}

/* dx-sc-status-fluent-16 */
.sl-i--group {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4.5a2.5 2.5 0 1 1 4.889.74 5.506 5.506 0 0 0-2.623 1.75A2.5 2.5 0 0 1 4 4.5ZM6.5 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm4 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm2.354-6.354a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1-1a.5.5 0 0 1 .708-.708l.646.647 2.646-2.647a.5.5 0 0 1 .708 0ZM5.6 8H3.5C2.672 8 2 8.955 2 9.75V10c0 1.73 1.554 3.64 4.22 3.955a5.5 5.5 0 0 1-.72-1.162C3.815 12.29 3 10.978 3 10v-.25c0-.14.07-.361.22-.547.15-.188.264-.203.28-.203h1.707c.099-.349.23-.683.393-1Z'/%3E%3C/svg%3E");
}

/* dx-sc-location-fluent-16 */
.sl-i--location {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 7a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0ZM14 7c0 2.874-3.097 6.016-4.841 7.558-.668.59-1.65.59-2.318 0C5.097 13.016 2 9.874 2 7a6 6 0 1 1 12 0Zm-1 0A5 5 0 0 0 3 7c0 1.108.615 2.395 1.57 3.683.934 1.258 2.087 2.377 2.933 3.126.29.256.703.256.994 0 .846-.749 2-1.867 2.933-3.126C12.385 9.395 13 8.108 13 7Z'/%3E%3C/svg%3E");
}

/* dx-calendar-fluent-16 */
.sl-i--calendar {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.248 8.997a.748.748 0 1 0 0-1.497.748.748 0 0 0 0 1.497Zm.749 1.752a.748.748 0 1 1-1.497 0 .748.748 0 0 1 1.497 0ZM8 8.996A.748.748 0 1 0 8 7.5a.748.748 0 0 0 0 1.497Zm.749 1.752a.748.748 0 1 1-1.497 0 .748.748 0 0 1 1.497 0Zm2-1.752a.748.748 0 1 0 0-1.497.748.748 0 0 0 0 1.497ZM14 4.5A2.5 2.5 0 0 0 11.5 2h-7A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5v-7ZM3 6h10v5.5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5V6Zm1.5-3h7A1.5 1.5 0 0 1 13 4.5V5H3v-.5A1.5 1.5 0 0 1 4.5 3Z'/%3E%3C/svg%3E");
}

/* dx-sc-today-fluent-16 */
.sl-i--today {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 4.5A2.5 2.5 0 0 0 11.5 2h-7A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h2v-1h-2A1.5 1.5 0 0 1 3 11.5V6h10v5.5a1.5 1.5 0 0 1-1.5 1.5h-2v1h2a2.5 2.5 0 0 0 2.5-2.5v-7ZM4.5 3h7A1.5 1.5 0 0 1 13 4.5V5H3v-.5A1.5 1.5 0 0 1 4.5 3Zm3.781 11.914A.5.5 0 0 0 8.5 14.5v-3.432l.68.566a.5.5 0 0 0 .64-.768l-1.5-1.25a.5.5 0 0 0-.64 0l-1.5 1.25a.5.5 0 1 0 .64.768l.68-.566V14.5a.5.5 0 0 0 .496.5h.008a.497.497 0 0 0 .277-.086ZM8.75 7.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E");
}

/* dx-hamburger-fluent-16 */
.sl-i--menu {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.75A.75.75 0 0 1 2.75 3h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75Zm0 4A.75.75 0 0 1 2.75 7h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 7.75Zm0 4a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z'/%3E%3C/svg%3E");
}

/* dx-info-fluent-16 */
.sl-i--info {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1Zm0 5.25A.749.749 0 1 0 8 4.75a.749.749 0 0 0 0 1.498Zm.5 1.25a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0v-3Z'/%3E%3C/svg%3E");
}

/* dx-clock-fluent-16 */
.sl-i--clock {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2Zm0 1a5 5 0 1 0 0 10A5 5 0 0 0 8 3Zm-.498 2a.5.5 0 0 1 .491.41l.009.09V8H9.5a.5.5 0 0 1 .09.992L9.5 9H7.502a.5.5 0 0 1-.492-.41l-.008-.09v-3a.5.5 0 0 1 .5-.5Z'/%3E%3C/svg%3E");
}

/* dx-uc-file-fluent-16 */
.sl-i--screen {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1H5ZM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3Zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207L11.793 5Z'/%3E%3C/svg%3E");
}

/* dx-sc-description-fluent-16 */
.sl-i--list {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1h-13Zm0 3a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1h-13ZM1 9.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm.5 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9Z'/%3E%3C/svg%3E");
}

/* dx-apply-fluent-16 */
.sl-i--check {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.864 3.656a.5.5 0 0 1-.021.707l-7.93 7.474a.6.6 0 0 1-.839-.016l-2.68-2.72a.5.5 0 0 1 .712-.702l2.406 2.442 7.645-7.206a.5.5 0 0 1 .707.021Z'/%3E%3C/svg%3E");
}

/* dx-close-fluent-16 */
.sl-i--close {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m2.589 2.716.057-.07a.5.5 0 0 1 .638-.057l.07.057L8 7.293l4.646-4.647a.5.5 0 0 1 .708.708L8.707 8l4.647 4.646a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L8 8.707l-4.646 4.647a.5.5 0 0 1-.708-.708L7.293 8 2.646 3.354a.5.5 0 0 1-.057-.638Z'/%3E%3C/svg%3E");
}

/* dx-chevron-right-fluent-16 */
.sl-i--chevron {
  --sl-i-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.646 3.146a.5.5 0 0 0 0 .708L9.793 8l-4.147 4.146a.5.5 0 0 0 .708.708l4.5-4.5a.5.5 0 0 0 0-.708l-4.5-4.5a.5.5 0 0 0-.708 0Z'/%3E%3C/svg%3E");
}