/* docara-shell-source: runtime/component/icons/css/icons.css */
/*

*/
.sf-icon--rotate-45 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-135 {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-225 {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-315 {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

/* fallback */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/_docara/vendor/simai-framework/runtime/25beeb814ae87b1e8e7bb5831b70a23b7cf36f96/distr/component/icons/a5f1f832a64baed42867.woff2") format("woff2");
}
.sf-icon {
  --sf-icon--fill: 0;
  --sf-icon--weight: var(--sf-weight--regular);
  --sf-icon--grade: 0;
  --sf-icon--optical-size: 24;
  --sf-icon--line-height: 1;
  font-variation-settings: "FILL" var(--sf-icon--fill), "wght" var(--sf-icon--weight), "GRAD" var(--sf-icon--grade), "opsz" var(--sf-icon--optical-size);
  font-family: "Material Symbols Outlined";
  font-family: var(--sf-icon--font-family, "Material Symbols Outlined");
  font-weight: var(--sf-icon--weight);
  font-style: normal;
  font-size: var(--sf-icon-size-3);
  font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
  line-height: 1;
  line-height: var(--sf-icon--line-height, 1);
  letter-spacing: normal;
  text-transform: none;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex: none;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: bottom;
  height: var(--sf-icon-size-3);
  height: var(--sf-icon--height, var(--sf-icon-size-3));
  width: var(--sf-icon-size-3);
  width: var(--sf-icon--width, var(--sf-icon-size-3));
}
.sf-icon:not(.hidden) {
  display: inline-flex;
}
:root[data-sf-icons=subset-pending] .sf-icon {
  --sf-icon--font-family: "Material Symbols Outlined Subset";
  -webkit-text-fill-color: transparent;
  overflow: hidden;
}
.sf-icon--size-1\/4 {
  --sf-icon--font-size: var(--sf-icon-size-1\/4);
  --sf-icon--width: var(--sf-icon-size-1\/4);
  --sf-icon--height: var(--sf-icon-size-1\/4);
}
.sf-icon--size-1\/3 {
  --sf-icon--font-size: var(--sf-icon-size-1\/3);
  --sf-icon--width: var(--sf-icon-size-1\/3);
  --sf-icon--height: var(--sf-icon-size-1\/3);
}
.sf-icon--size-1\/2 {
  --sf-icon--font-size: var(--sf-icon-size-1\/2);
  --sf-icon--width: var(--sf-icon-size-1\/2);
  --sf-icon--height: var(--sf-icon-size-1\/2);
}
.sf-icon--size-1 {
  --sf-icon--font-size: var(--sf-icon-size-1);
  --sf-icon--width: var(--sf-icon-size-1);
  --sf-icon--height: var(--sf-icon-size-1);
}
.sf-icon--size-2 {
  --sf-icon--font-size: var(--sf-icon-size-2);
  --sf-icon--width: var(--sf-icon-size-2);
  --sf-icon--height: var(--sf-icon-size-2);
}
.sf-icon--size-3 {
  --sf-icon--font-size: var(--sf-icon-size-3);
  --sf-icon--width: var(--sf-icon-size-3);
  --sf-icon--height: var(--sf-icon-size-3);
}
.sf-icon--size-4 {
  --sf-icon--font-size: var(--sf-icon-size-4);
  --sf-icon--width: var(--sf-icon-size-4);
  --sf-icon--height: var(--sf-icon-size-4);
}
.sf-icon--size-5 {
  --sf-icon--font-size: var(--sf-icon-size-5);
  --sf-icon--width: var(--sf-icon-size-5);
  --sf-icon--height: var(--sf-icon-size-5);
}
.sf-icon--size-6 {
  --sf-icon--font-size: var(--sf-icon-size-6);
  --sf-icon--width: var(--sf-icon-size-6);
  --sf-icon--height: var(--sf-icon-size-6);
}
.sf-icon--size-7 {
  --sf-icon--font-size: var(--sf-icon-size-7);
  --sf-icon--width: var(--sf-icon-size-7);
  --sf-icon--height: var(--sf-icon-size-7);
}

.sf-icon--weight-thin,
.sf-icon-thin {
  --sf-icon--weight: var(--sf-weight--thin);
}

.sf-icon--weight-extra-light,
.sf-icon-extra-light {
  --sf-icon--weight: var(--sf-weight--extra-light);
}

.sf-icon--weight-light,
.sf-icon-light {
  --sf-icon--weight: var(--sf-weight--light);
}

.sf-icon--weight-regular,
.sf-icon-regular {
  --sf-icon--weight: var(--sf-weight--regular);
}

.sf-icon--weight-medium,
.sf-icon-medium {
  --sf-icon--weight: var(--sf-weight--medium);
}

.sf-icon--weight-semi-bold,
.sf-icon-semi-bold {
  --sf-icon--weight: var(--sf-weight--semi-bold);
}

.sf-icon--weight-bold,
.sf-icon-bold {
  --sf-icon--weight: var(--sf-weight--bold);
}

/* The colour of a glyph, and the only part of this file that is layered. The
   rest of `.sf-icon` is unlayered, which puts it above every layer -- so the
   colour was above them too, and a colour utility on a glyph did nothing at
   all: `color-on-surface-variant` read as applied and the glyph drew in
   currentColor regardless. In the base layer the token still answers wherever
   nothing else speaks, and a utility or a component's own rule now wins over
   it, which is the order the rest of the Framework is written in. */
@layer sf.base {
  .sf-icon {
    color: currentColor;
    color: var(--sf-icon--color, currentColor);
  }
}
.sf-icon--filled,
.sf-icon-filled,
.sf-icon-solid {
  --sf-icon--fill: 1;
}

.sf-icon--rounded,
.sf-icon-rounded {
  --sf-icon--font-family: "Material Symbols Rounded";
}

.sf-icon--sharp,
.sf-icon-shape {
  --sf-icon--font-family: "Material Symbols Sharp";
}

/*
 * Reserve the final icon geometry before the Smart Component is registered.
 * The light-DOM host is intentionally empty until JavaScript renders the
 * internal `.sf-icon`, so without this contract controls grow after first
 * paint. The same variables are used by the rendered icon above.
 */
sf-icon:not(:defined) {
  display: inline-flex;
  flex: none;
  width: var(--sf-icon-size-3);
  width: var(--sf-icon--width, var(--sf-icon-size-3));
  height: var(--sf-icon-size-3);
  height: var(--sf-icon--height, var(--sf-icon-size-3));
  vertical-align: bottom;
}

sf-icon[size="1/4"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/4);
  --sf-icon--height: var(--sf-icon-size-1\/4);
}

sf-icon[size="1/3"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/3);
  --sf-icon--height: var(--sf-icon-size-1\/3);
}

sf-icon[size="1/2"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/2);
  --sf-icon--height: var(--sf-icon-size-1\/2);
}

sf-icon[size="1"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1);
  --sf-icon--height: var(--sf-icon-size-1);
}

sf-icon[size="2"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-2);
  --sf-icon--height: var(--sf-icon-size-2);
}

sf-icon[size="3"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-3);
  --sf-icon--height: var(--sf-icon-size-3);
}

sf-icon[size="4"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-4);
  --sf-icon--height: var(--sf-icon-size-4);
}

sf-icon[size="5"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-5);
  --sf-icon--height: var(--sf-icon-size-5);
}

sf-icon[size="6"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-6);
  --sf-icon--height: var(--sf-icon-size-6);
}

sf-icon[size="7"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-7);
  --sf-icon--height: var(--sf-icon-size-7);
}

/* docara-shell-source: runtime/component/icon-buttons/css/icon-buttons.css */
/* A button's border is inside its control height: the padding gives each side's
   border back. The side widths are registered as lengths, so a unitless 0
   written by a group, a tab row or a host still subtracts; unregistered, it
   would invalidate the padding. Measured before: outline, surface and every
   segmented button stood 2px taller than its size. */
@property --sf-icon-button--border-top-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-bottom-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-inline-start-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-inline-end-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  .sf-icon-button {
    /* Public variables (core/contracts/public-variables.v1.json): names with a
       single dash after the block, never set by the Framework, read where a
       resting look is defined -- base, size, spacing, appearance, scheme -- and
       not by hover, focus, pressed, disabled, loading or a group's segments, so
       states and joined groups still show. */
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));
    --sf-icon-button--radius: var(--sf-icon-button-radius, var(--sf-radius--ui));
    border-end-end-radius: var(--sf-icon-button--radius);
    border-end-end-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    border-end-start-radius: var(--sf-icon-button--radius);
    border-end-start-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    border-start-end-radius: var(--sf-icon-button--radius);
    border-start-end-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    border-start-start-radius: var(--sf-icon-button--radius);
    border-start-start-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    -webkit-padding-start: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
            padding-inline-start: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    padding-top: calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));
    -webkit-padding-end: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
            padding-inline-end: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    padding-bottom: calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));
    /* The public border reaches every appearance, as on sf-button: the side
       widths are registered lengths inside the control height. Outline,
       surface and a group's segments set them after this, and win. */
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, 0);
    background-color: var(--sf-icon-button--background-color);
    border-color: transparent;
    border-color: var(--sf-icon-button--border-color, var(--sf-icon-button-border-color, transparent));
    border-width: 0;
    border-width: var(--sf-icon-button--border-width, 0);
    border-top-width: 0;
    border-top-width: var(--sf-icon-button--border-top-width, 0);
    border-inline-end-width: 0;
    border-inline-end-width: var(--sf-icon-button--border-inline-end-width, 0);
    border-bottom-width: 0;
    border-bottom-width: var(--sf-icon-button--border-bottom-width, 0);
    border-inline-start-width: 0;
    border-inline-start-width: var(--sf-icon-button--border-inline-start-width, 0);
    border-style: solid;
    border-style: var(--sf-icon-button--border-style, solid);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0);
    box-shadow: var(--sf-icon-button--focus-inset, 0 0 rgba(0, 0, 0, 0)), var(--sf-icon-button--box-shadow, 0 0 rgba(0, 0, 0, 0));
  }
  .sf-icon-button .sf-close-icon {
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
  }
  .sf-icon-button .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-surface-container));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface-inverse));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface-inverse));
  }
  .sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-icon-button--size-1 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
  }
  .sf-icon-button--size-1.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-icon-button--size-1.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-icon-button--size-1.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-icon-button--size-1.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-icon-button--size-1.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-icon-button--size-1.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-icon-button--size-2 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
  }
  .sf-icon-button--size-2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-icon-button--size-2.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-icon-button--size-2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-icon-button--size-2.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-icon-button--size-2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-icon-button--size-2.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-icon-button--size-3 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
  }
  .sf-icon-button--size-3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-icon-button--size-3.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-icon-button--size-3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-icon-button--size-3.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-icon-button--size-3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-icon-button--size-3.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/2 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
  }
  .sf-icon-button--size-1\/2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/2.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/2.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/2.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/3 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
  }
  .sf-icon-button--size-1\/3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/3.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/3.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/3.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-icon-button--outline {
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-style: solid;
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px));
  }
  .sf-icon-button.radius-default {
    border-radius: var(--sf-radius-default);
  }
  .sf-icon-button.radius-square {
    border-radius: var(--sf-radius-square);
  }
  .sf-icon-button.radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .sf-icon-button.segment-start {
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  .sf-icon-button.segment-middle {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button.segment-end {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  /* Surface, built on the neutral alpha ramp. Same reading as on the button: not
     a colour of its own but a degree of contrast against whatever is behind it,
     so one declaration is right in both themes. The icon keeps the role colour,
     because the fill is too faint to carry one. `--ghost` reads as `--link`, as
     on the button. */
  .sf-icon-button.sf-icon-button--surface {
    --sf-icon-button--background-color: transparent;
  }
  .sf-icon-button.sf-icon-button--surface {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-alpha-4));
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-alpha-8));
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-style: solid;
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--primary {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary));
  }
}
@layer sf.states {
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--border-color: var(--sf-outline-variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-secondary-container-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-secondary-container-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-on-surface-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-on-surface-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* The same second line the button draws: on a filled control the ring
       colour can sit next to the fill on one ramp and disappear into it, so the
       control's own ink separates them. Transparent where there is no fill to
       separate from. */
    --sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent);
  }
  .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* The same second line the button draws: on a filled control the ring
       colour can sit next to the fill on one ramp and disappear into it, so the
       control's own ink separates them. Transparent where there is no fill to
       separate from. */
    --sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary {
    --sf-icon-button--focus-ink: var(--sf-on-primary);
  }
  /* Flush against its neighbours, so the ring turns inwards. Same colour, same
     width, only the offset changes sign. */
  .sf-icon-button.segment-start:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled).focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-icon-button.segment-start:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled):focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  @media (forced-colors: active) {
    .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
    .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
  }
  /* The states of the two ramp appearances: one step up on hover, another when
     pressed, and surface raises its border alongside. */
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-alpha-8);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover {
    --sf-icon-button--border-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active {
    --sf-icon-button--border-color: var(--sf-alpha-16);
  }
  .sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled) {
    --sf-icon-button--border-color: var(--sf-alpha-16);
  }
  .sf-icon-button.sf-icon-button--surface:disabled,
  .sf-icon-button.sf-icon-button--surface.disabled {
    --sf-icon-button--background-color: transparent;
    --sf-icon-button--border-color: var(--sf-alpha-4);
  }
  .sf-icon-button.sf-icon-button--surface:disabled,
  .sf-icon-button.sf-icon-button--surface.disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--surface:disabled > .sf-close > .sf-close-icon,
  .sf-icon-button.sf-icon-button--surface.disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
}
/* The destructive scheme. Every role it paints with is the error family's twin
   of the primary one -- fill, text, hover, active, disabled and the focus ink --
   so a destructive control behaves exactly like a primary one and only its
   colour says what it does. Added because the Framework had error roles and no
   way for a control to use them: a product that wanted a red delete had to
   reach past the component and set its colour by hand, and the next one would
   have done it again. The outline's border stays the neutral control outline,
   as it does for every other scheme. */
@layer sf.components {
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active));
  }
}
@layer sf.states {
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled {
    --sf-icon-button--border-color: var(--sf-outline-variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error {
    --sf-icon-button--focus-ink: var(--sf-on-error);
  }
}
@layer sf.override {
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-icon-button.sf-icon-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
}
/* An icon button sets .loading as a button does (sf-icon-button loading) and
   had no rule for it: it went disabled with no sign of work. The same stripes
   as .sf-button.loading, defined here so the icon-button sheet alone draws them. */
@layer sf.components {
  .sf-icon-button {
    --sf-icon-button-loading-stripe: var(--sf-alpha-8);
  }
  .sf-icon-button > * {
    position: relative;
    z-index: 1;
  }
  .sf-icon-button.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }
  .sf-icon-button.loading::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    inset: -50%;
    background-image: repeating-linear-gradient(135deg, var(--sf-icon-button-loading-stripe) 0, var(--sf-icon-button-loading-stripe) var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));
    -webkit-animation: sf-icon-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
            animation: sf-icon-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
    will-change: transform;
    pointer-events: none;
  }
  @-webkit-keyframes sf-icon-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @keyframes sf-icon-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-icon-button.loading::after {
      -webkit-animation: none;
              animation: none;
    }
  }
}

/* docara-shell-source: runtime/component/close/css/close.css */
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-close {
    padding-left: var(--sf-close--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-close {
    padding-left: var(--sf-close--padding-inline-start);
    }
  }
  .sf-close:where(:dir(ltr)) {
    padding-left: var(--sf-close--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-close {
    padding-right: var(--sf-close--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-close {
    padding-right: var(--sf-close--padding-inline-start);
    }
  }
  .sf-close:where(:dir(rtl)) {
    padding-right: var(--sf-close--padding-inline-start);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-close {
    padding-right: var(--sf-close--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-close {
    padding-right: var(--sf-close--padding-inline-end);
    }
  }
  .sf-close:where(:dir(ltr)) {
    padding-right: var(--sf-close--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-close {
    padding-left: var(--sf-close--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-close {
    padding-left: var(--sf-close--padding-inline-end);
    }
  }
  .sf-close:where(:dir(rtl)) {
    padding-left: var(--sf-close--padding-inline-end);
  }
  .sf-close {
    background-color: transparent;
    background-color: var(--sf-close--background-color, transparent);
    -webkit-padding-start: var(--sf-close--padding-inline-start);
            padding-inline-start: var(--sf-close--padding-inline-start);
    padding-top: var(--sf-close--padding-top);
    -webkit-padding-end: var(--sf-close--padding-inline-end);
            padding-inline-end: var(--sf-close--padding-inline-end);
    padding-bottom: var(--sf-close--padding-bottom);
  }
  .sf-close .sf-close-icon {
    --sf-close-icon---webkit-mask-repeat: no-repeat;
    --sf-close-icon---webkit-mask-size: contain;
    /* The cross is a glyph, read like any other: --sf-outline is the role of a
       boundary, 4.47:1, and a theme retuning its borders would have moved it.
       The paler of the two roles for what stands on a surface is 6.47:1 light
       and 5.95:1 dark (owner, 2026-10-08). */
    --sf-close-icon--background-color: var(--sf-on-surface-variant);
    --sf-close-icon--mask-repeat: no-repeat;
    --sf-close-icon--mask-size: contain;
    -webkit-mask-image: var(--sf-close-icon---webkit-mask-image);
    -webkit-mask-repeat: var(--sf-close-icon---webkit-mask-repeat);
    -webkit-mask-size: var(--sf-close-icon---webkit-mask-size);
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
    font-size: var(--sf-close-icon--font-size);
    height: var(--sf-close-icon--height);
    -webkit-mask-image: var(--sf-close-icon--mask-image);
            mask-image: var(--sf-close-icon--mask-image);
    -webkit-mask-repeat: var(--sf-close-icon--mask-repeat);
            mask-repeat: var(--sf-close-icon--mask-repeat);
    -webkit-mask-size: var(--sf-close-icon--mask-size);
            mask-size: var(--sf-close-icon--mask-size);
    width: var(--sf-close-icon--width);
  }
  .sf-close.sf-close--size-1 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.998%201.41504L9.41309%208L15.998%2014.5859L14.584%2016.001L7.99902%209.41504L1.41406%2016.001L0%2014.5859L6.58398%208L0%201.41504L1.41406%200.000976562L7.99805%206.58594L14.584%200L15.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1);
    --sf-close-icon--height: var(--sf-text-size-1);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.998%201.41504L9.41309%208L15.998%2014.5859L14.584%2016.001L7.99902%209.41504L1.41406%2016.001L0%2014.5859L6.58398%208L0%201.41504L1.41406%200.000976562L7.99805%206.58594L14.584%200L15.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1);
  }
  .sf-close.sf-close--size-2 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20%201.41406L11.4141%2010L19.999%2018.5859L18.585%2020L10%2011.4141L1.41504%2020L0.000976562%2018.5859L8.58594%2010L0%201.41406L1.41504%200L10%208.58594L18.5859%200L20%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-2);
    --sf-close-icon--height: var(--sf-text-size-2);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M20%201.41406L11.4141%2010L19.999%2018.5859L18.585%2020L10%2011.4141L1.41504%2020L0.000976562%2018.5859L8.58594%2010L0%201.41406L1.41504%200L10%208.58594L18.5859%200L20%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-2);
  }
  .sf-close.sf-close--size-3 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M24%201.41406L13.4141%2012L23.998%2022.584L22.584%2023.999L12%2013.4141L1.41602%2023.999L0.00195312%2022.584L10.585%2012L0%201.41406L1.41504%200L12%2010.585L22.585%200L24%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-3);
    --sf-close-icon--height: var(--sf-text-size-3);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M24%201.41406L13.4141%2012L23.998%2022.584L22.584%2023.999L12%2013.4141L1.41602%2023.999L0.00195312%2022.584L10.585%2012L0%201.41406L1.41504%200L12%2010.585L22.585%200L24%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-3);
  }
  .sf-close.sf-close--size-4 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M28%201.41406L15.4131%2014L27.998%2026.585L26.584%2028L13.999%2015.4141L1.41504%2028L0.000976562%2026.5859L12.585%2014L0%201.41406L1.41406%200L13.999%2012.5859L26.585%200L28%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-4);
    --sf-close-icon--height: var(--sf-text-size-4);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M28%201.41406L15.4131%2014L27.998%2026.585L26.584%2028L13.999%2015.4141L1.41504%2028L0.000976562%2026.5859L12.585%2014L0%201.41406L1.41406%200L13.999%2012.5859L26.585%200L28%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-4);
  }
  .sf-close.sf-close--size-5 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M32%201.41406L17.4141%2016L31.999%2030.585L30.585%2032L16%2017.4141L1.41504%2032L0.000976562%2030.5859L14.5859%2016L0%201.41406L1.41504%200L16%2014.585L30.5859%200L32%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-5);
    --sf-close-icon--height: var(--sf-text-size-5);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M32%201.41406L17.4141%2016L31.999%2030.585L30.585%2032L16%2017.4141L1.41504%2032L0.000976562%2030.5859L14.5859%2016L0%201.41406L1.41504%200L16%2014.585L30.5859%200L32%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-5);
  }
  .sf-close.sf-close--size-6 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M36%201.41406L19.4131%2018.001L35.998%2034.5859L34.584%2036L18%2019.415L1.41602%2036L0.00195312%2034.5859L16.5859%2018.001L0%201.41406L1.41406%200L18%2016.5859L34.5859%200L36%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-6);
    --sf-close-icon--height: var(--sf-text-size-6);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M36%201.41406L19.4131%2018.001L35.998%2034.5859L34.584%2036L18%2019.415L1.41602%2036L0.00195312%2034.5859L16.5859%2018.001L0%201.41406L1.41406%200L18%2016.5859L34.5859%200L36%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-6);
  }
  .sf-close.sf-close--size-7 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M39.998%201.41504L21.4131%2020L39.998%2038.5859L38.584%2040L19.999%2021.415L1.41504%2040L0.000976562%2038.5859L18.584%2020L0%201.41602L1.41406%200.000976562L19.998%2018.5859L38.584%200L39.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-7);
    --sf-close-icon--height: var(--sf-text-size-7);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M39.998%201.41504L21.4131%2020L39.998%2038.5859L38.584%2040L19.999%2021.415L1.41504%2040L0.000976562%2038.5859L18.584%2020L0%201.41602L1.41406%200.000976562L19.998%2018.5859L38.584%200L39.998%201.41504Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-7);
  }
  .sf-close.sf-close--size-1\/4 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10%201.41406L6.41406%205L10%208.58594L8.58594%2010L5%206.41406L1.41406%2010L0%208.58594L3.58594%205L0%201.41406L1.41406%200L5%203.58594L8.58594%200L10%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1\/4);
    --sf-close-icon--height: var(--sf-text-size-1\/4);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10%201.41406L6.41406%205L10%208.58594L8.58594%2010L5%206.41406L1.41406%2010L0%208.58594L3.58594%205L0%201.41406L1.41406%200L5%203.58594L8.58594%200L10%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1\/4);
  }
  .sf-close.sf-close--size-1\/3 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.999%201.41406L7.41406%205.99805L12%2010.584L10.5859%2011.998L6%207.41211L1.41406%2011.998L0%2010.584L4.58496%205.99805L0.000976562%201.41406L1.41504%200L6%204.58398L10.585%200L11.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1\/3);
    --sf-close-icon--height: var(--sf-text-size-1\/3);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.999%201.41406L7.41406%205.99805L12%2010.584L10.5859%2011.998L6%207.41211L1.41406%2011.998L0%2010.584L4.58496%205.99805L0.000976562%201.41406L1.41504%200L6%204.58398L10.585%200L11.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1\/3);
  }
  .sf-close.sf-close--size-1\/2 .sf-close-icon {
    --sf-close-icon---webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13.999%201.41406L8.41309%206.99902L14%2012.5859L12.5859%2014L6.99902%208.41309L1.41406%2014L0%2012.585L5.58496%206.99902L0.000976562%201.41504L1.41504%200L6.99902%205.58496L12.585%200L13.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--font-size: var(--sf-text-size-1\/2);
    --sf-close-icon--height: var(--sf-text-size-1\/2);
    --sf-close-icon--mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13.999%201.41406L8.41309%206.99902L14%2012.5859L12.5859%2014L6.99902%208.41309L1.41406%2014L0%2012.585L5.58496%206.99902L0.000976562%201.41504L1.41504%200L6.99902%205.58496L12.585%200L13.999%201.41406Z%22%20fill%3D%22%2376777C%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    --sf-close-icon--width: var(--sf-text-size-1\/2);
  }
  .sf-close--size-1, .sf-close--size-2 {
    --sf-close--padding-bottom: var(--sf-a4);
    --sf-close--padding-inline-end: var(--sf-a4);
    --sf-close--padding-inline-start: var(--sf-a4);
    --sf-close--padding-top: var(--sf-a4);
  }
  .sf-close--size-3, .sf-close--size-4 {
    --sf-close--padding-bottom: var(--sf-a6);
    --sf-close--padding-inline-end: var(--sf-a6);
    --sf-close--padding-inline-start: var(--sf-a6);
    --sf-close--padding-top: var(--sf-a6);
  }
  .sf-close--size-5, .sf-close--size-6 {
    --sf-close--padding-bottom: var(--sf-a8);
    --sf-close--padding-inline-end: var(--sf-a8);
    --sf-close--padding-inline-start: var(--sf-a8);
    --sf-close--padding-top: var(--sf-a8);
  }
  .sf-close--size-7 {
    --sf-close--padding-bottom: var(--sf-b0);
    --sf-close--padding-inline-end: var(--sf-b0);
    --sf-close--padding-inline-start: var(--sf-b0);
    --sf-close--padding-top: var(--sf-b0);
  }
  .sf-close--size-1\/4 {
    --sf-close--padding-bottom: var(--sf-a1);
    --sf-close--padding-inline-end: var(--sf-a1);
    --sf-close--padding-inline-start: var(--sf-a1);
    --sf-close--padding-top: var(--sf-a1);
  }
  .sf-close--size-1\/3 {
    --sf-close--padding-bottom: var(--sf-a2);
    --sf-close--padding-inline-end: var(--sf-a2);
    --sf-close--padding-inline-start: var(--sf-a2);
    --sf-close--padding-top: var(--sf-a2);
  }
  .sf-close--size-1\/2 {
    --sf-close--padding-bottom: var(--sf-a3);
    --sf-close--padding-inline-end: var(--sf-a3);
    --sf-close--padding-inline-start: var(--sf-a3);
    --sf-close--padding-top: var(--sf-a3);
  }
  @media (forced-colors: active) {
    .sf-close .sf-close-icon,
    .sf-icon-button .sf-close .sf-close-icon {
      forced-color-adjust: none;
      background-color: CanvasText;
    }
    :disabled .sf-close .sf-close-icon,
    [aria-disabled=true] .sf-close .sf-close-icon,
    .sf-close:disabled .sf-close-icon {
      background-color: GrayText;
    }
  }
}

/* docara-shell-source: runtime/component/modal/css/modal.css */
@layer sf.components {
  .sf-modal-focus-guard {
    position: fixed;
    width: 0;
    inline-size: 0;
    height: 0;
    block-size: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .sf-modal {
    --sf-modal-overlay-background: var(--sf-black, #000);
    --sf-modal-overlay-opacity: var(--sf-opacity-60, 0.6);
    --sf-modal-iframe-min-height: var(--sf-g2);
  }
  .sf-modal[data-sf-modal-position=left],
  .sf-modal[data-sf-modal-position=right],
  .sf-modal[data-sf-modal-position=inline-start],
  .sf-modal[data-sf-modal-position=inline-end] {
    align-items: stretch;
    padding: 0;
  }
  .sf-modal[data-sf-modal-position=left] {
    justify-content: flex-start;
  }
  .sf-modal[data-sf-modal-position=right] {
    justify-content: flex-end;
  }
  .sf-modal[data-sf-modal-position=inline-start] {
    justify-content: flex-start;
  }
  .sf-modal[data-sf-modal-position=inline-end] {
    justify-content: flex-end;
  }
  .sf-modal[data-sf-modal-position=top],
  .sf-modal[data-sf-modal-position=bottom] {
    justify-content: stretch;
    padding: 0;
  }
  .sf-modal[data-sf-modal-position=top] {
    align-items: flex-start;
  }
  .sf-modal[data-sf-modal-position=bottom] {
    align-items: flex-end;
  }
  .sf-modal[data-sf-modal-position=left] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=right] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel] {
    display: flex;
    max-width: min(100%, auto);
    max-width: min(100%, var(--sf-modal-drawer-width, auto));
    min-height: 100%;
    width: auto;
    width: var(--sf-modal-drawer-width, auto);
  }
  .sf-modal[data-sf-modal-position=top] [data-sf-modal-panel],
  .sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel] {
    display: flex;
    max-height: min(100%, 100vh);
    max-height: min(100%, var(--sf-modal-drawer-height, 100vh));
    min-width: 100%;
  }
  .sf-modal[data-sf-modal-position=left] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=right] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=top] [data-sf-modal-surface],
  .sf-modal[data-sf-modal-position=bottom] [data-sf-modal-surface] {
    flex: 1;
  }
  .sf-modal-header {
    --sf-modal-header-gap: var(--sf-space-1);
    gap: var(--sf-modal-header-gap);
  }
  .sf-modal-surface {
    --sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-surface-1, #fff));
    --sf-modal-surface-border-color: var(--sf-modal-border-color, var(--sf-outline-variant, transparent));
    --sf-modal-surface-border-style: solid;
    --sf-modal-surface-border-width: var(--sf-modal-border-width, var(--sf-border-width, var(--sf-px)));
    --sf-modal-surface-gap: var(--sf-modal-gap, var(--sf-space-1));
    --sf-modal-surface-padding: var(--sf-modal-padding-block, var(--sf-space-2)) var(--sf-modal-padding-inline, var(--sf-space-2));
    --sf-modal-surface-radius: var(--sf-modal-radius, var(--sf-radius--surface));
    --sf-modal-surface-shadow: none;
    background-color: var(--sf-modal-surface-bg);
    border: var(--sf-modal-surface-border-width) var(--sf-modal-surface-border-style) var(--sf-modal-surface-border-color);
    border-radius: var(--sf-modal-surface-radius);
    box-shadow: var(--sf-modal-surface-shadow);
    gap: var(--sf-modal-surface-gap);
    min-width: 0;
    padding: var(--sf-modal-surface-padding);
  }
  .sf-modal-surface--elevated {
    /* Elevated is a step, not a shadow alone: surface and shadow of step 3. */
    --sf-modal-surface-bg: var(--sf-modal-background-color, var(--sf-elevation-3--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    --sf-modal-surface-shadow: var(--sf-elevation-3--shadow);
  }
  .sf-modal [data-sf-modal-overlay] {
    background-color: var(--sf-modal-overlay-background);
    opacity: var(--sf-modal-overlay-opacity);
    transition: opacity var(--sf-duration-normal) var(--sf-animation);
  }
  .sf-modal[data-sf-modal-state=opening] [data-sf-modal-overlay] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-state=closing] [data-sf-modal-overlay] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-hidden=true] {
    pointer-events: none;
  }
  .sf-modal[data-sf-modal-hidden=true] [data-sf-modal-overlay] {
    opacity: 0;
    pointer-events: none;
  }
  .sf-modal [data-sf-modal-panel] {
    opacity: 0;
  }
  .sf-modal.animate [data-sf-modal-panel] {
    transition: opacity var(--sf-duration-normal) var(--sf-animation), -webkit-transform var(--sf-duration-normal) var(--sf-animation);
    transition: transform var(--sf-duration-normal) var(--sf-animation), opacity var(--sf-duration-normal) var(--sf-animation);
    transition: transform var(--sf-duration-normal) var(--sf-animation), opacity var(--sf-duration-normal) var(--sf-animation), -webkit-transform var(--sf-duration-normal) var(--sf-animation);
    will-change: transform, opacity;
  }
  .sf-modal[data-sf-modal-position=left] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-position=right] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-position=inline-start] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-position=inline-end] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-position=top] [data-sf-modal-panel] {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .sf-modal[data-sf-modal-position=bottom] [data-sf-modal-panel] {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  .sf-modal[data-sf-modal-position=center] [data-sf-modal-panel] {
    -webkit-transform: translateY(var(--sf-space-1\/2)) scale(0.98);
            transform: translateY(var(--sf-space-1\/2)) scale(0.98);
  }
  .sf-modal[data-sf-modal-state=opening] [data-sf-modal-panel] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-state=open] [data-sf-modal-panel] {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  .sf-modal[data-sf-modal-state=closing] [data-sf-modal-panel] {
    opacity: 0;
  }
  .sf-modal[data-sf-modal-state=inline] [data-sf-modal-panel] {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
            transform: translate(0, 0) scale(1);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=left] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=right] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start] [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end] [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-start]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=inline-end]:dir(rtl) [data-sf-modal-panel] {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=top] [data-sf-modal-panel] {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=bottom] [data-sf-modal-panel] {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  .sf-modal[data-sf-modal-state=closing][data-sf-modal-position=center] [data-sf-modal-panel] {
    -webkit-transform: translateY(var(--sf-space-1\/2)) scale(0.98);
            transform: translateY(var(--sf-space-1\/2)) scale(0.98);
  }
  .sf-modal[data-sf-modal-state][data-sf-modal-hidden=true] [data-sf-modal-panel] {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(var(--sf-space-1\/2)) scale(0.98);
            transform: translateY(var(--sf-space-1\/2)) scale(0.98);
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-width] {
    max-width: min(100%, var(--sf-modal-width));
    width: var(--sf-modal-width);
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] {
    display: flex;
    height: var(--sf-modal-height);
    max-height: min(100%, var(--sf-modal-height));
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-surface] {
    flex: 1;
    min-height: 0;
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body],
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-viewport] {
    flex: 1;
    min-height: 0;
  }
  .sf-modal [data-sf-modal-panel][data-sf-modal-has-height] [data-sf-modal-body-scroll] {
    flex: 1;
    max-height: none;
  }
  .sf-modal[data-sf-modal-fullscreen=true] {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-panel] {
    display: flex;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-surface] {
    border-radius: 0;
    flex: 1;
    min-height: 0;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body],
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-viewport] {
    flex: 1;
    min-height: 0;
  }
  .sf-modal[data-sf-modal-fullscreen=true] [data-sf-modal-body-scroll] {
    flex: 1;
    max-height: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-modal.animate [data-sf-modal-panel],
    .sf-modal [data-sf-modal-overlay] {
      transition: none;
      will-change: auto;
    }
  }
}
@layer sf.components {
  .sf-modal-header-content {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: anywhere;
  }
  .sf-modal-header-action {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: var(--sf-ui-1\/3--control-height);
    min-block-size: var(--sf-ui-1\/3--control-height);
    min-width: var(--sf-ui-1\/3--control-height);
    min-inline-size: var(--sf-ui-1\/3--control-height);
  }
  .sf-modal-close-button {
    --sf-modal-close-right: var(--sf-space-1\/3);
    --sf-modal-close-top: var(--sf-space-1\/3);
    right: var(--sf-modal-close-right);
    top: var(--sf-modal-close-top);
    left: var(--sf-modal-close-left);
    bottom: var(--sf-modal-close-bottom);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-close-button--inline-end {
    right: var(--sf-modal-close-right);
    right: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-modal-close-button--inline-end {
    right: var(--sf-modal-close-right);
    right: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
    }
  }
  .sf-modal-close-button--inline-end:where(:dir(ltr)) {
    right: var(--sf-modal-close-right);
    right: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-modal-close-button--inline-end {
    left: var(--sf-modal-close-right);
    left: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-modal-close-button--inline-end {
    left: var(--sf-modal-close-right);
    left: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
    }
  }
  .sf-modal-close-button--inline-end:where(:dir(rtl)) {
    left: var(--sf-modal-close-right);
    left: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  .sf-modal-close-button--inline-end {
    left: auto;
    right: auto;
    inset-inline-end: var(--sf-modal-close-right);
    inset-inline-end: var(--sf-modal-close-inline-end, var(--sf-modal-close-right));
  }
  .sf-modal-hide-button {
    --sf-modal-hide-right: var(--sf-space-2);
    --sf-modal-hide-top: var(--sf-space-1\/3);
    right: var(--sf-modal-hide-right);
    top: var(--sf-modal-hide-top);
    left: var(--sf-modal-hide-left);
    bottom: var(--sf-modal-hide-bottom);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-modal-hide-button--inline-end {
    right: var(--sf-modal-hide-right);
    right: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-modal-hide-button--inline-end {
    right: var(--sf-modal-hide-right);
    right: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
    }
  }
  .sf-modal-hide-button--inline-end:where(:dir(ltr)) {
    right: var(--sf-modal-hide-right);
    right: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-modal-hide-button--inline-end {
    left: var(--sf-modal-hide-right);
    left: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-modal-hide-button--inline-end {
    left: var(--sf-modal-hide-right);
    left: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
    }
  }
  .sf-modal-hide-button--inline-end:where(:dir(rtl)) {
    left: var(--sf-modal-hide-right);
    left: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  .sf-modal-hide-button--inline-end {
    left: auto;
    right: auto;
    inset-inline-end: var(--sf-modal-hide-right);
    inset-inline-end: var(--sf-modal-hide-inline-end, var(--sf-modal-hide-right));
  }
  .sf-modal-hide-icon {
    background-color: currentColor;
    display: block;
    height: 2px;
    height: var(--sf-border-width-2, 2px);
    width: var(--sf-space-1);
  }
}

/* docara-shell-source: runtime/utility/container/default/css/default.css */
@layer sf.utilities {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .container {
    padding-left: var(--sf-space-1);
    }
  }
  .container:where(:dir(ltr)) {
    padding-left: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .container {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .container {
    padding-right: var(--sf-space-1);
    }
  }
  .container:where(:dir(rtl)) {
    padding-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .container {
    padding-right: var(--sf-space-1);
    }
  }
  .container:where(:dir(ltr)) {
    padding-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .container {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .container {
    padding-left: var(--sf-space-1);
    }
  }
  .container:where(:dir(rtl)) {
    padding-left: var(--sf-space-1);
  }
  .container {
    width: 100%;
    -webkit-padding-start: var(--sf-space-1);
            padding-inline-start: var(--sf-space-1);
    -webkit-padding-end: var(--sf-space-1);
            padding-inline-end: var(--sf-space-1);
  }
  @media (min-width: 32rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-2);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-2);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-2);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-2);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-2);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-2);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-2);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-2);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-2);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-2);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-2);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-2);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-sm);
      -webkit-padding-start: var(--sf-space-2);
              padding-inline-start: var(--sf-space-2);
      -webkit-padding-end: var(--sf-space-2);
              padding-inline-end: var(--sf-space-2);
    }
  }
  @media (min-width: 44rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-3);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-3);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-3);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-3);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-3);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-3);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-3);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-3);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-3);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-3);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-3);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-3);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-md);
      -webkit-padding-start: var(--sf-space-3);
              padding-inline-start: var(--sf-space-3);
      -webkit-padding-end: var(--sf-space-3);
              padding-inline-end: var(--sf-space-3);
    }
  }
  @media (min-width: 60rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-4);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-4);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-4);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-4);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-4);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-4);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-4);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-4);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-4);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-4);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-4);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-4);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-lg);
      -webkit-padding-start: var(--sf-space-4);
              padding-inline-start: var(--sf-space-4);
      -webkit-padding-end: var(--sf-space-4);
              padding-inline-end: var(--sf-space-4);
    }
  }
  @media (min-width: 72rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-5);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-5);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-5);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-5);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-5);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-5);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-5);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-5);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-5);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-5);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-5);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-5);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-xl);
      -webkit-padding-start: var(--sf-space-5);
              padding-inline-start: var(--sf-space-5);
      -webkit-padding-end: var(--sf-space-5);
              padding-inline-end: var(--sf-space-5);
    }
  }
  @media (min-width: 80rem) {
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-6);
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .container {
      padding-left: var(--sf-space-6);
      }
    }
    .container:where(:dir(ltr)) {
      padding-left: var(--sf-space-6);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-right: var(--sf-space-6);
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .container {
      padding-right: var(--sf-space-6);
      }
    }
    .container:where(:dir(rtl)) {
      padding-right: var(--sf-space-6);
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-6);
    }
    @supports not (padding-inline-end: initial) {
    html:not([dir="rtl"]) .container {
      padding-right: var(--sf-space-6);
      }
    }
    .container:where(:dir(ltr)) {
      padding-right: var(--sf-space-6);
    }
    _:-ms-input-placeholder, [dir="rtl"] .container {
      padding-left: var(--sf-space-6);
    }
    @supports not (padding-inline-end: initial) {
    [dir="rtl"] .container {
      padding-left: var(--sf-space-6);
      }
    }
    .container:where(:dir(rtl)) {
      padding-left: var(--sf-space-6);
    }
    .container {
      width: 100%;
      max-width: var(--sf-breakpoint-xxl);
      -webkit-padding-start: var(--sf-space-6);
              padding-inline-start: var(--sf-space-6);
      -webkit-padding-end: var(--sf-space-6);
              padding-inline-end: var(--sf-space-6);
    }
  }
}

/* docara-shell-source: runtime/utility/cursor/default/css/default.css */
@layer sf.utilities {
  .cursor-auto {
    cursor: auto;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-wait {
    cursor: wait;
  }
  .cursor-text {
    cursor: text;
  }
  .cursor-move {
    cursor: move;
  }
  .cursor-help {
    cursor: help;
  }
  .cursor-grab {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .cursor-grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-no-drop {
    cursor: no-drop;
  }
  .cursor-context-menu {
    cursor: context-menu;
  }
  .cursor-progress {
    cursor: progress;
  }
  .cursor-crosshair {
    cursor: crosshair;
  }
  .cursor-cell {
    cursor: cell;
  }
  .cursor-alias {
    cursor: alias;
  }
  .cursor-copy {
    cursor: copy;
  }
  .cursor-zoom-in {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }
  .cursor-zoom-out {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
  }
  .cursor-all-scroll {
    cursor: all-scroll;
  }
  .cursor-w-resize {
    cursor: w-resize;
  }
  .cursor-e-resize {
    cursor: e-resize;
  }
  .cursor-n-resize {
    cursor: n-resize;
  }
  .cursor-s-resize {
    cursor: s-resize;
  }
  .cursor-ew-resize {
    cursor: ew-resize;
  }
  .cursor-ns-resize {
    cursor: ns-resize;
  }
  .cursor-ne-resize {
    cursor: ne-resize;
  }
  .cursor-nw-resize {
    cursor: nw-resize;
  }
  .cursor-se-resize {
    cursor: se-resize;
  }
  .cursor-sw-resize {
    cursor: sw-resize;
  }
  .cursor-nesw-resize {
    cursor: nesw-resize;
  }
  .cursor-nwse-resize {
    cursor: nwse-resize;
  }
  .cursor-col-resize {
    cursor: col-resize;
  }
  .cursor-row-resize {
    cursor: row-resize;
  }
  .cursor-vertical-text {
    cursor: vertical-text;
  }
}

/* docara-shell-source: runtime/utility/display/default/css/default.css */
@layer sf.utilities {
  .block {
    display: block;
  }
  .inline-block {
    display: inline-block;
  }
  .inline {
    display: inline;
  }
  .flex {
    display: flex;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .display-table {
    display: table;
  }
  .inline-table {
    display: inline-table;
  }
  .table-caption {
    display: table-caption;
  }
  .table-cell {
    display: table-cell;
  }
  .table-column {
    display: table-column;
  }
  .table-column-group {
    display: table-column-group;
  }
  .table-footer-group {
    display: table-footer-group;
  }
  .table-header-group {
    display: table-header-group;
  }
  .table-row-group {
    display: table-row-group;
  }
  .table-row {
    display: table-row;
  }
  .flow-root {
    display: flow-root;
  }
  .grid {
    display: grid;
  }
  .inline-grid {
    display: inline-grid;
  }
  .content {
    display: contents;
  }
  .list-item {
    display: list-item;
  }
  .hidden {
    display: none;
  }
}

/* docara-shell-source: runtime/utility/element-position/default/css/default.css */
@layer sf.utilities {
  .top-0 {
    top: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-0 {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-0 {
    right: 0;
    }
  }
  .inline-end-0:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-0 {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-0 {
    left: 0;
    }
  }
  .inline-end-0:where(:dir(rtl)) {
    left: 0;
  }
  .inline-end-0 {
    inset-inline-end: 0;
  }
  .bottom-0 {
    bottom: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-0 {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-0 {
    left: 0;
    }
  }
  .inline-start-0:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-0 {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-0 {
    right: 0;
    }
  }
  .inline-start-0:where(:dir(rtl)) {
    right: 0;
  }
  .inline-start-0 {
    inset-inline-start: 0;
  }
  .top-auto {
    top: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-auto {
    right: auto;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-auto {
    right: auto;
    }
  }
  .inline-end-auto:where(:dir(ltr)) {
    right: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-auto {
    left: auto;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-auto {
    left: auto;
    }
  }
  .inline-end-auto:where(:dir(rtl)) {
    left: auto;
  }
  .inline-end-auto {
    inset-inline-end: auto;
  }
  .bottom-auto {
    bottom: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-auto {
    left: auto;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-auto {
    left: auto;
    }
  }
  .inline-start-auto:where(:dir(ltr)) {
    left: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-auto {
    right: auto;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-auto {
    right: auto;
    }
  }
  .inline-start-auto:where(:dir(rtl)) {
    right: auto;
  }
  .inline-start-auto {
    inset-inline-start: auto;
  }
  .top-1\/2 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/2 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/2 {
    right: 50%;
    }
  }
  .inline-end-1\/2:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/2 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/2 {
    left: 50%;
    }
  }
  .inline-end-1\/2:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-1\/2 {
    inset-inline-end: 50%;
  }
  .bottom-1\/2 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/2 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/2 {
    left: 50%;
    }
  }
  .inline-start-1\/2:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/2 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/2 {
    right: 50%;
    }
  }
  .inline-start-1\/2:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-1\/2 {
    inset-inline-start: 50%;
  }
  .top-1\/3 {
    top: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/3 {
    right: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/3 {
    right: 33.333333%;
    }
  }
  .inline-end-1\/3:where(:dir(ltr)) {
    right: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/3 {
    left: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/3 {
    left: 33.333333%;
    }
  }
  .inline-end-1\/3:where(:dir(rtl)) {
    left: 33.333333%;
  }
  .inline-end-1\/3 {
    inset-inline-end: 33.333333%;
  }
  .bottom-1\/3 {
    bottom: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/3 {
    left: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/3 {
    left: 33.333333%;
    }
  }
  .inline-start-1\/3:where(:dir(ltr)) {
    left: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/3 {
    right: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/3 {
    right: 33.333333%;
    }
  }
  .inline-start-1\/3:where(:dir(rtl)) {
    right: 33.333333%;
  }
  .inline-start-1\/3 {
    inset-inline-start: 33.333333%;
  }
  .top-2\/3 {
    top: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/3 {
    right: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/3 {
    right: 66.666667%;
    }
  }
  .inline-end-2\/3:where(:dir(ltr)) {
    right: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/3 {
    left: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/3 {
    left: 66.666667%;
    }
  }
  .inline-end-2\/3:where(:dir(rtl)) {
    left: 66.666667%;
  }
  .inline-end-2\/3 {
    inset-inline-end: 66.666667%;
  }
  .bottom-2\/3 {
    bottom: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/3 {
    left: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/3 {
    left: 66.666667%;
    }
  }
  .inline-start-2\/3:where(:dir(ltr)) {
    left: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/3 {
    right: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/3 {
    right: 66.666667%;
    }
  }
  .inline-start-2\/3:where(:dir(rtl)) {
    right: 66.666667%;
  }
  .inline-start-2\/3 {
    inset-inline-start: 66.666667%;
  }
  .top-1\/4 {
    top: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/4 {
    right: 25%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/4 {
    right: 25%;
    }
  }
  .inline-end-1\/4:where(:dir(ltr)) {
    right: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/4 {
    left: 25%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/4 {
    left: 25%;
    }
  }
  .inline-end-1\/4:where(:dir(rtl)) {
    left: 25%;
  }
  .inline-end-1\/4 {
    inset-inline-end: 25%;
  }
  .bottom-1\/4 {
    bottom: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/4 {
    left: 25%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/4 {
    left: 25%;
    }
  }
  .inline-start-1\/4:where(:dir(ltr)) {
    left: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/4 {
    right: 25%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/4 {
    right: 25%;
    }
  }
  .inline-start-1\/4:where(:dir(rtl)) {
    right: 25%;
  }
  .inline-start-1\/4 {
    inset-inline-start: 25%;
  }
  .top-2\/4 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/4 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/4 {
    right: 50%;
    }
  }
  .inline-end-2\/4:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/4 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/4 {
    left: 50%;
    }
  }
  .inline-end-2\/4:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-2\/4 {
    inset-inline-end: 50%;
  }
  .bottom-2\/4 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/4 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/4 {
    left: 50%;
    }
  }
  .inline-start-2\/4:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/4 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/4 {
    right: 50%;
    }
  }
  .inline-start-2\/4:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-2\/4 {
    inset-inline-start: 50%;
  }
  .top-3\/4 {
    top: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/4 {
    right: 75%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/4 {
    right: 75%;
    }
  }
  .inline-end-3\/4:where(:dir(ltr)) {
    right: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/4 {
    left: 75%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/4 {
    left: 75%;
    }
  }
  .inline-end-3\/4:where(:dir(rtl)) {
    left: 75%;
  }
  .inline-end-3\/4 {
    inset-inline-end: 75%;
  }
  .bottom-3\/4 {
    bottom: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/4 {
    left: 75%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/4 {
    left: 75%;
    }
  }
  .inline-start-3\/4:where(:dir(ltr)) {
    left: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/4 {
    right: 75%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/4 {
    right: 75%;
    }
  }
  .inline-start-3\/4:where(:dir(rtl)) {
    right: 75%;
  }
  .inline-start-3\/4 {
    inset-inline-start: 75%;
  }
  .top-1\/5 {
    top: 20%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/5 {
    right: 20%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/5 {
    right: 20%;
    }
  }
  .inline-end-1\/5:where(:dir(ltr)) {
    right: 20%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/5 {
    left: 20%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/5 {
    left: 20%;
    }
  }
  .inline-end-1\/5:where(:dir(rtl)) {
    left: 20%;
  }
  .inline-end-1\/5 {
    inset-inline-end: 20%;
  }
  .bottom-1\/5 {
    bottom: 20%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/5 {
    left: 20%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/5 {
    left: 20%;
    }
  }
  .inline-start-1\/5:where(:dir(ltr)) {
    left: 20%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/5 {
    right: 20%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/5 {
    right: 20%;
    }
  }
  .inline-start-1\/5:where(:dir(rtl)) {
    right: 20%;
  }
  .inline-start-1\/5 {
    inset-inline-start: 20%;
  }
  .top-2\/5 {
    top: 40%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/5 {
    right: 40%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/5 {
    right: 40%;
    }
  }
  .inline-end-2\/5:where(:dir(ltr)) {
    right: 40%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/5 {
    left: 40%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/5 {
    left: 40%;
    }
  }
  .inline-end-2\/5:where(:dir(rtl)) {
    left: 40%;
  }
  .inline-end-2\/5 {
    inset-inline-end: 40%;
  }
  .bottom-2\/5 {
    bottom: 40%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/5 {
    left: 40%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/5 {
    left: 40%;
    }
  }
  .inline-start-2\/5:where(:dir(ltr)) {
    left: 40%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/5 {
    right: 40%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/5 {
    right: 40%;
    }
  }
  .inline-start-2\/5:where(:dir(rtl)) {
    right: 40%;
  }
  .inline-start-2\/5 {
    inset-inline-start: 40%;
  }
  .top-3\/5 {
    top: 60%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/5 {
    right: 60%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/5 {
    right: 60%;
    }
  }
  .inline-end-3\/5:where(:dir(ltr)) {
    right: 60%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/5 {
    left: 60%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/5 {
    left: 60%;
    }
  }
  .inline-end-3\/5:where(:dir(rtl)) {
    left: 60%;
  }
  .inline-end-3\/5 {
    inset-inline-end: 60%;
  }
  .bottom-3\/5 {
    bottom: 60%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/5 {
    left: 60%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/5 {
    left: 60%;
    }
  }
  .inline-start-3\/5:where(:dir(ltr)) {
    left: 60%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/5 {
    right: 60%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/5 {
    right: 60%;
    }
  }
  .inline-start-3\/5:where(:dir(rtl)) {
    right: 60%;
  }
  .inline-start-3\/5 {
    inset-inline-start: 60%;
  }
  .top-4\/5 {
    top: 80%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-4\/5 {
    right: 80%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-4\/5 {
    right: 80%;
    }
  }
  .inline-end-4\/5:where(:dir(ltr)) {
    right: 80%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-4\/5 {
    left: 80%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-4\/5 {
    left: 80%;
    }
  }
  .inline-end-4\/5:where(:dir(rtl)) {
    left: 80%;
  }
  .inline-end-4\/5 {
    inset-inline-end: 80%;
  }
  .bottom-4\/5 {
    bottom: 80%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-4\/5 {
    left: 80%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-4\/5 {
    left: 80%;
    }
  }
  .inline-start-4\/5:where(:dir(ltr)) {
    left: 80%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-4\/5 {
    right: 80%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-4\/5 {
    right: 80%;
    }
  }
  .inline-start-4\/5:where(:dir(rtl)) {
    right: 80%;
  }
  .inline-start-4\/5 {
    inset-inline-start: 80%;
  }
  .top-1\/6 {
    top: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/6 {
    right: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/6 {
    right: 16.666667%;
    }
  }
  .inline-end-1\/6:where(:dir(ltr)) {
    right: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/6 {
    left: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/6 {
    left: 16.666667%;
    }
  }
  .inline-end-1\/6:where(:dir(rtl)) {
    left: 16.666667%;
  }
  .inline-end-1\/6 {
    inset-inline-end: 16.666667%;
  }
  .bottom-1\/6 {
    bottom: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/6 {
    left: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/6 {
    left: 16.666667%;
    }
  }
  .inline-start-1\/6:where(:dir(ltr)) {
    left: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/6 {
    right: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/6 {
    right: 16.666667%;
    }
  }
  .inline-start-1\/6:where(:dir(rtl)) {
    right: 16.666667%;
  }
  .inline-start-1\/6 {
    inset-inline-start: 16.666667%;
  }
  .top-2\/6 {
    top: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/6 {
    right: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/6 {
    right: 33.333333%;
    }
  }
  .inline-end-2\/6:where(:dir(ltr)) {
    right: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/6 {
    left: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/6 {
    left: 33.333333%;
    }
  }
  .inline-end-2\/6:where(:dir(rtl)) {
    left: 33.333333%;
  }
  .inline-end-2\/6 {
    inset-inline-end: 33.333333%;
  }
  .bottom-2\/6 {
    bottom: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/6 {
    left: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/6 {
    left: 33.333333%;
    }
  }
  .inline-start-2\/6:where(:dir(ltr)) {
    left: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/6 {
    right: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/6 {
    right: 33.333333%;
    }
  }
  .inline-start-2\/6:where(:dir(rtl)) {
    right: 33.333333%;
  }
  .inline-start-2\/6 {
    inset-inline-start: 33.333333%;
  }
  .top-3\/6 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/6 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/6 {
    right: 50%;
    }
  }
  .inline-end-3\/6:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/6 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/6 {
    left: 50%;
    }
  }
  .inline-end-3\/6:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-3\/6 {
    inset-inline-end: 50%;
  }
  .bottom-3\/6 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/6 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/6 {
    left: 50%;
    }
  }
  .inline-start-3\/6:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/6 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/6 {
    right: 50%;
    }
  }
  .inline-start-3\/6:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-3\/6 {
    inset-inline-start: 50%;
  }
  .top-4\/6 {
    top: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-4\/6 {
    right: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-4\/6 {
    right: 66.666667%;
    }
  }
  .inline-end-4\/6:where(:dir(ltr)) {
    right: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-4\/6 {
    left: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-4\/6 {
    left: 66.666667%;
    }
  }
  .inline-end-4\/6:where(:dir(rtl)) {
    left: 66.666667%;
  }
  .inline-end-4\/6 {
    inset-inline-end: 66.666667%;
  }
  .bottom-4\/6 {
    bottom: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-4\/6 {
    left: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-4\/6 {
    left: 66.666667%;
    }
  }
  .inline-start-4\/6:where(:dir(ltr)) {
    left: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-4\/6 {
    right: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-4\/6 {
    right: 66.666667%;
    }
  }
  .inline-start-4\/6:where(:dir(rtl)) {
    right: 66.666667%;
  }
  .inline-start-4\/6 {
    inset-inline-start: 66.666667%;
  }
  .top-5\/6 {
    top: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-5\/6 {
    right: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-5\/6 {
    right: 83.333333%;
    }
  }
  .inline-end-5\/6:where(:dir(ltr)) {
    right: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-5\/6 {
    left: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-5\/6 {
    left: 83.333333%;
    }
  }
  .inline-end-5\/6:where(:dir(rtl)) {
    left: 83.333333%;
  }
  .inline-end-5\/6 {
    inset-inline-end: 83.333333%;
  }
  .bottom-5\/6 {
    bottom: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-5\/6 {
    left: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-5\/6 {
    left: 83.333333%;
    }
  }
  .inline-start-5\/6:where(:dir(ltr)) {
    left: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-5\/6 {
    right: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-5\/6 {
    right: 83.333333%;
    }
  }
  .inline-start-5\/6:where(:dir(rtl)) {
    right: 83.333333%;
  }
  .inline-start-5\/6 {
    inset-inline-start: 83.333333%;
  }
  .top-1\/12 {
    top: 8.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-1\/12 {
    right: 8.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-1\/12 {
    right: 8.333333%;
    }
  }
  .inline-end-1\/12:where(:dir(ltr)) {
    right: 8.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-1\/12 {
    left: 8.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-1\/12 {
    left: 8.333333%;
    }
  }
  .inline-end-1\/12:where(:dir(rtl)) {
    left: 8.333333%;
  }
  .inline-end-1\/12 {
    inset-inline-end: 8.333333%;
  }
  .bottom-1\/12 {
    bottom: 8.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-1\/12 {
    left: 8.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-1\/12 {
    left: 8.333333%;
    }
  }
  .inline-start-1\/12:where(:dir(ltr)) {
    left: 8.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-1\/12 {
    right: 8.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-1\/12 {
    right: 8.333333%;
    }
  }
  .inline-start-1\/12:where(:dir(rtl)) {
    right: 8.333333%;
  }
  .inline-start-1\/12 {
    inset-inline-start: 8.333333%;
  }
  .top-2\/12 {
    top: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-2\/12 {
    right: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-2\/12 {
    right: 16.666667%;
    }
  }
  .inline-end-2\/12:where(:dir(ltr)) {
    right: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-2\/12 {
    left: 16.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-2\/12 {
    left: 16.666667%;
    }
  }
  .inline-end-2\/12:where(:dir(rtl)) {
    left: 16.666667%;
  }
  .inline-end-2\/12 {
    inset-inline-end: 16.666667%;
  }
  .bottom-2\/12 {
    bottom: 16.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-2\/12 {
    left: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-2\/12 {
    left: 16.666667%;
    }
  }
  .inline-start-2\/12:where(:dir(ltr)) {
    left: 16.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-2\/12 {
    right: 16.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-2\/12 {
    right: 16.666667%;
    }
  }
  .inline-start-2\/12:where(:dir(rtl)) {
    right: 16.666667%;
  }
  .inline-start-2\/12 {
    inset-inline-start: 16.666667%;
  }
  .top-3\/12 {
    top: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-3\/12 {
    right: 25%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-3\/12 {
    right: 25%;
    }
  }
  .inline-end-3\/12:where(:dir(ltr)) {
    right: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-3\/12 {
    left: 25%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-3\/12 {
    left: 25%;
    }
  }
  .inline-end-3\/12:where(:dir(rtl)) {
    left: 25%;
  }
  .inline-end-3\/12 {
    inset-inline-end: 25%;
  }
  .bottom-3\/12 {
    bottom: 25%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-3\/12 {
    left: 25%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-3\/12 {
    left: 25%;
    }
  }
  .inline-start-3\/12:where(:dir(ltr)) {
    left: 25%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-3\/12 {
    right: 25%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-3\/12 {
    right: 25%;
    }
  }
  .inline-start-3\/12:where(:dir(rtl)) {
    right: 25%;
  }
  .inline-start-3\/12 {
    inset-inline-start: 25%;
  }
  .top-4\/12 {
    top: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-4\/12 {
    right: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-4\/12 {
    right: 33.333333%;
    }
  }
  .inline-end-4\/12:where(:dir(ltr)) {
    right: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-4\/12 {
    left: 33.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-4\/12 {
    left: 33.333333%;
    }
  }
  .inline-end-4\/12:where(:dir(rtl)) {
    left: 33.333333%;
  }
  .inline-end-4\/12 {
    inset-inline-end: 33.333333%;
  }
  .bottom-4\/12 {
    bottom: 33.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-4\/12 {
    left: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-4\/12 {
    left: 33.333333%;
    }
  }
  .inline-start-4\/12:where(:dir(ltr)) {
    left: 33.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-4\/12 {
    right: 33.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-4\/12 {
    right: 33.333333%;
    }
  }
  .inline-start-4\/12:where(:dir(rtl)) {
    right: 33.333333%;
  }
  .inline-start-4\/12 {
    inset-inline-start: 33.333333%;
  }
  .top-5\/12 {
    top: 41.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-5\/12 {
    right: 41.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-5\/12 {
    right: 41.666667%;
    }
  }
  .inline-end-5\/12:where(:dir(ltr)) {
    right: 41.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-5\/12 {
    left: 41.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-5\/12 {
    left: 41.666667%;
    }
  }
  .inline-end-5\/12:where(:dir(rtl)) {
    left: 41.666667%;
  }
  .inline-end-5\/12 {
    inset-inline-end: 41.666667%;
  }
  .bottom-5\/12 {
    bottom: 41.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-5\/12 {
    left: 41.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-5\/12 {
    left: 41.666667%;
    }
  }
  .inline-start-5\/12:where(:dir(ltr)) {
    left: 41.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-5\/12 {
    right: 41.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-5\/12 {
    right: 41.666667%;
    }
  }
  .inline-start-5\/12:where(:dir(rtl)) {
    right: 41.666667%;
  }
  .inline-start-5\/12 {
    inset-inline-start: 41.666667%;
  }
  .top-6\/12 {
    top: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-6\/12 {
    right: 50%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-6\/12 {
    right: 50%;
    }
  }
  .inline-end-6\/12:where(:dir(ltr)) {
    right: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-6\/12 {
    left: 50%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-6\/12 {
    left: 50%;
    }
  }
  .inline-end-6\/12:where(:dir(rtl)) {
    left: 50%;
  }
  .inline-end-6\/12 {
    inset-inline-end: 50%;
  }
  .bottom-6\/12 {
    bottom: 50%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-6\/12 {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-6\/12 {
    left: 50%;
    }
  }
  .inline-start-6\/12:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-6\/12 {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-6\/12 {
    right: 50%;
    }
  }
  .inline-start-6\/12:where(:dir(rtl)) {
    right: 50%;
  }
  .inline-start-6\/12 {
    inset-inline-start: 50%;
  }
  .top-7\/12 {
    top: 58.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-7\/12 {
    right: 58.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-7\/12 {
    right: 58.333333%;
    }
  }
  .inline-end-7\/12:where(:dir(ltr)) {
    right: 58.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-7\/12 {
    left: 58.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-7\/12 {
    left: 58.333333%;
    }
  }
  .inline-end-7\/12:where(:dir(rtl)) {
    left: 58.333333%;
  }
  .inline-end-7\/12 {
    inset-inline-end: 58.333333%;
  }
  .bottom-7\/12 {
    bottom: 58.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-7\/12 {
    left: 58.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-7\/12 {
    left: 58.333333%;
    }
  }
  .inline-start-7\/12:where(:dir(ltr)) {
    left: 58.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-7\/12 {
    right: 58.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-7\/12 {
    right: 58.333333%;
    }
  }
  .inline-start-7\/12:where(:dir(rtl)) {
    right: 58.333333%;
  }
  .inline-start-7\/12 {
    inset-inline-start: 58.333333%;
  }
  .top-8\/12 {
    top: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-8\/12 {
    right: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-8\/12 {
    right: 66.666667%;
    }
  }
  .inline-end-8\/12:where(:dir(ltr)) {
    right: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-8\/12 {
    left: 66.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-8\/12 {
    left: 66.666667%;
    }
  }
  .inline-end-8\/12:where(:dir(rtl)) {
    left: 66.666667%;
  }
  .inline-end-8\/12 {
    inset-inline-end: 66.666667%;
  }
  .bottom-8\/12 {
    bottom: 66.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-8\/12 {
    left: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-8\/12 {
    left: 66.666667%;
    }
  }
  .inline-start-8\/12:where(:dir(ltr)) {
    left: 66.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-8\/12 {
    right: 66.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-8\/12 {
    right: 66.666667%;
    }
  }
  .inline-start-8\/12:where(:dir(rtl)) {
    right: 66.666667%;
  }
  .inline-start-8\/12 {
    inset-inline-start: 66.666667%;
  }
  .top-9\/12 {
    top: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-9\/12 {
    right: 75%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-9\/12 {
    right: 75%;
    }
  }
  .inline-end-9\/12:where(:dir(ltr)) {
    right: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-9\/12 {
    left: 75%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-9\/12 {
    left: 75%;
    }
  }
  .inline-end-9\/12:where(:dir(rtl)) {
    left: 75%;
  }
  .inline-end-9\/12 {
    inset-inline-end: 75%;
  }
  .bottom-9\/12 {
    bottom: 75%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-9\/12 {
    left: 75%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-9\/12 {
    left: 75%;
    }
  }
  .inline-start-9\/12:where(:dir(ltr)) {
    left: 75%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-9\/12 {
    right: 75%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-9\/12 {
    right: 75%;
    }
  }
  .inline-start-9\/12:where(:dir(rtl)) {
    right: 75%;
  }
  .inline-start-9\/12 {
    inset-inline-start: 75%;
  }
  .top-10\/12 {
    top: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-10\/12 {
    right: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-10\/12 {
    right: 83.333333%;
    }
  }
  .inline-end-10\/12:where(:dir(ltr)) {
    right: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-10\/12 {
    left: 83.333333%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-10\/12 {
    left: 83.333333%;
    }
  }
  .inline-end-10\/12:where(:dir(rtl)) {
    left: 83.333333%;
  }
  .inline-end-10\/12 {
    inset-inline-end: 83.333333%;
  }
  .bottom-10\/12 {
    bottom: 83.333333%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-10\/12 {
    left: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-10\/12 {
    left: 83.333333%;
    }
  }
  .inline-start-10\/12:where(:dir(ltr)) {
    left: 83.333333%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-10\/12 {
    right: 83.333333%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-10\/12 {
    right: 83.333333%;
    }
  }
  .inline-start-10\/12:where(:dir(rtl)) {
    right: 83.333333%;
  }
  .inline-start-10\/12 {
    inset-inline-start: 83.333333%;
  }
  .top-11\/12 {
    top: 91.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-11\/12 {
    right: 91.666667%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-11\/12 {
    right: 91.666667%;
    }
  }
  .inline-end-11\/12:where(:dir(ltr)) {
    right: 91.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-11\/12 {
    left: 91.666667%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-11\/12 {
    left: 91.666667%;
    }
  }
  .inline-end-11\/12:where(:dir(rtl)) {
    left: 91.666667%;
  }
  .inline-end-11\/12 {
    inset-inline-end: 91.666667%;
  }
  .bottom-11\/12 {
    bottom: 91.666667%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-11\/12 {
    left: 91.666667%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-11\/12 {
    left: 91.666667%;
    }
  }
  .inline-start-11\/12:where(:dir(ltr)) {
    left: 91.666667%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-11\/12 {
    right: 91.666667%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-11\/12 {
    right: 91.666667%;
    }
  }
  .inline-start-11\/12:where(:dir(rtl)) {
    right: 91.666667%;
  }
  .inline-start-11\/12 {
    inset-inline-start: 91.666667%;
  }
  .top-full {
    top: 100%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-end-full {
    right: 100%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inline-end-full {
    right: 100%;
    }
  }
  .inline-end-full:where(:dir(ltr)) {
    right: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-end-full {
    left: 100%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inline-end-full {
    left: 100%;
    }
  }
  .inline-end-full:where(:dir(rtl)) {
    left: 100%;
  }
  .inline-end-full {
    inset-inline-end: 100%;
  }
  .bottom-full {
    bottom: 100%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inline-start-full {
    left: 100%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inline-start-full {
    left: 100%;
    }
  }
  .inline-start-full:where(:dir(ltr)) {
    left: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inline-start-full {
    right: 100%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inline-start-full {
    right: 100%;
    }
  }
  .inline-start-full:where(:dir(rtl)) {
    right: 100%;
  }
  .inline-start-full {
    inset-inline-start: 100%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-0 {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inset-0 {
    right: 0;
    }
  }
  .inset-0:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-0 {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inset-0 {
    left: 0;
    }
  }
  .inset-0:where(:dir(rtl)) {
    left: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-0 {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inset-0 {
    left: 0;
    }
  }
  .inset-0:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-0 {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inset-0 {
    right: 0;
    }
  }
  .inset-0:where(:dir(rtl)) {
    right: 0;
  }
  .inset-0 {
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-x-0 {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .inset-x-0 {
    right: 0;
    }
  }
  .inset-x-0:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-x-0 {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .inset-x-0 {
    left: 0;
    }
  }
  .inset-x-0:where(:dir(rtl)) {
    left: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-x-0 {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inset-x-0 {
    left: 0;
    }
  }
  .inset-x-0:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-x-0 {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inset-x-0 {
    right: 0;
    }
  }
  .inset-x-0:where(:dir(rtl)) {
    right: 0;
  }
  .inset-x-0 {
    inset-inline-end: 0;
    inset-inline-start: 0;
  }
  .inset-y-0 {
    top: 0;
    bottom: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .inset-center {
    left: 50%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .inset-center {
    left: 50%;
    }
  }
  .inset-center:where(:dir(ltr)) {
    left: 50%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .inset-center {
    right: 50%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .inset-center {
    right: 50%;
    }
  }
  .inset-center:where(:dir(rtl)) {
    right: 50%;
  }
  .inset-center {
    inset-inline-start: 50%;
    top: 50%;
  }
}

/* docara-shell-source: runtime/utility/flex-direction/default/css/default.css */
@layer sf.utilities {
  .flex-row {
    flex-direction: row;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
}

/* docara-shell-source: runtime/utility/flex-wrap/default/css/default.css */
@layer sf.utilities {
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
}

/* docara-shell-source: runtime/utility/flex/default/css/default.css */
@layer sf.utilities {
  .flex-1 {
    flex: 1 1 0%;
  }
  .flex-auto {
    flex: 1 1 auto;
  }
  .flex-content {
    flex: 1 0 auto;
  }
  .flex-initial {
    flex: 0 1 auto;
  }
  .flex-none {
    flex: none;
  }
}

/* docara-shell-source: runtime/utility/font-weight/default/css/default.css */
@layer sf.utilities {
  .regular {
    font-weight: normal;
  }
  .bold {
    font-weight: bold;
  }
  .lighter {
    font-weight: lighter;
  }
  .bolder {
    font-weight: bolder;
  }
  .weight-1 {
    font-weight: 100;
  }
  .weight-2 {
    font-weight: 200;
  }
  .weight-3 {
    font-weight: 300;
  }
  .weight-4 {
    font-weight: 400;
  }
  .weight-5 {
    font-weight: 500;
  }
  .weight-6 {
    font-weight: 600;
  }
  .weight-7 {
    font-weight: 700;
  }
  .weight-8 {
    font-weight: 800;
  }
  .weight-9 {
    font-weight: 900;
  }
}

/* docara-shell-source: runtime/utility/gap/default/css/default.css */
@layer sf.utilities {
  .gap-0,
  .g-0 {
    gap: var(--sf-space-0);
  }
  .gap-1\/4,
  .g-1\/4 {
    gap: var(--sf-space-1\/4);
  }
  .gap-1\/3,
  .g-1\/3 {
    gap: var(--sf-space-1\/3);
  }
  .gap-1\/2,
  .g-1\/2 {
    gap: var(--sf-space-1\/2);
  }
  .gap-1,
  .g-1 {
    gap: var(--sf-space-1);
  }
  .gap-2,
  .g-2 {
    gap: var(--sf-space-2);
  }
  .gap-3,
  .g-3 {
    gap: var(--sf-space-3);
  }
  .gap-4,
  .g-4 {
    gap: var(--sf-space-4);
  }
  .gap-5,
  .g-5 {
    gap: var(--sf-space-5);
  }
  .gap-6,
  .g-6 {
    gap: var(--sf-space-6);
  }
  .gap-7,
  .g-7 {
    gap: var(--sf-space-7);
  }
  .gap-8,
  .g-8 {
    gap: var(--sf-space-8);
  }
  .col-gap-0,
  .gap-x-0,
  .g-x-0 {
    -webkit-column-gap: var(--sf-space-0);
       -moz-column-gap: var(--sf-space-0);
            column-gap: var(--sf-space-0);
  }
  .row-gap-0,
  .gap-y-0,
  .g-y-0 {
    row-gap: var(--sf-space-0);
  }
  .col-gap-1\/4,
  .gap-x-1\/4,
  .g-x-1\/4 {
    -webkit-column-gap: var(--sf-space-1\/4);
       -moz-column-gap: var(--sf-space-1\/4);
            column-gap: var(--sf-space-1\/4);
  }
  .row-gap-1\/4,
  .gap-y-1\/4,
  .g-y-1\/4 {
    row-gap: var(--sf-space-1\/4);
  }
  .col-gap-1\/3,
  .gap-x-1\/3,
  .g-x-1\/3 {
    -webkit-column-gap: var(--sf-space-1\/3);
       -moz-column-gap: var(--sf-space-1\/3);
            column-gap: var(--sf-space-1\/3);
  }
  .row-gap-1\/3,
  .gap-y-1\/3,
  .g-y-1\/3 {
    row-gap: var(--sf-space-1\/3);
  }
  .col-gap-1\/2,
  .gap-x-1\/2,
  .g-x-1\/2 {
    -webkit-column-gap: var(--sf-space-1\/2);
       -moz-column-gap: var(--sf-space-1\/2);
            column-gap: var(--sf-space-1\/2);
  }
  .row-gap-1\/2,
  .gap-y-1\/2,
  .g-y-1\/2 {
    row-gap: var(--sf-space-1\/2);
  }
  .col-gap-1,
  .gap-x-1,
  .g-x-1 {
    -webkit-column-gap: var(--sf-space-1);
       -moz-column-gap: var(--sf-space-1);
            column-gap: var(--sf-space-1);
  }
  .row-gap-1,
  .gap-y-1,
  .g-y-1 {
    row-gap: var(--sf-space-1);
  }
  .col-gap-2,
  .gap-x-2,
  .g-x-2 {
    -webkit-column-gap: var(--sf-space-2);
       -moz-column-gap: var(--sf-space-2);
            column-gap: var(--sf-space-2);
  }
  .row-gap-2,
  .gap-y-2,
  .g-y-2 {
    row-gap: var(--sf-space-2);
  }
  .col-gap-3,
  .gap-x-3,
  .g-x-3 {
    -webkit-column-gap: var(--sf-space-3);
       -moz-column-gap: var(--sf-space-3);
            column-gap: var(--sf-space-3);
  }
  .row-gap-3,
  .gap-y-3,
  .g-y-3 {
    row-gap: var(--sf-space-3);
  }
  .col-gap-4,
  .gap-x-4,
  .g-x-4 {
    -webkit-column-gap: var(--sf-space-4);
       -moz-column-gap: var(--sf-space-4);
            column-gap: var(--sf-space-4);
  }
  .row-gap-4,
  .gap-y-4,
  .g-y-4 {
    row-gap: var(--sf-space-4);
  }
  .col-gap-5,
  .gap-x-5,
  .g-x-5 {
    -webkit-column-gap: var(--sf-space-5);
       -moz-column-gap: var(--sf-space-5);
            column-gap: var(--sf-space-5);
  }
  .row-gap-5,
  .gap-y-5,
  .g-y-5 {
    row-gap: var(--sf-space-5);
  }
  .col-gap-6,
  .gap-x-6,
  .g-x-6 {
    -webkit-column-gap: var(--sf-space-6);
       -moz-column-gap: var(--sf-space-6);
            column-gap: var(--sf-space-6);
  }
  .row-gap-6,
  .gap-y-6,
  .g-y-6 {
    row-gap: var(--sf-space-6);
  }
  .col-gap-7,
  .gap-x-7,
  .g-x-7 {
    -webkit-column-gap: var(--sf-space-7);
       -moz-column-gap: var(--sf-space-7);
            column-gap: var(--sf-space-7);
  }
  .row-gap-7,
  .gap-y-7,
  .g-y-7 {
    row-gap: var(--sf-space-7);
  }
  .col-gap-8,
  .gap-x-8,
  .g-x-8 {
    -webkit-column-gap: var(--sf-space-8);
       -moz-column-gap: var(--sf-space-8);
            column-gap: var(--sf-space-8);
  }
  .row-gap-8,
  .gap-y-8,
  .g-y-8 {
    row-gap: var(--sf-space-8);
  }
}

/* docara-shell-source: runtime/utility/font-size/default/css/default.css */
@layer sf.utilities {
  .text-1\/4 {
    font-size: var(--sf-text--size-1\/4);
    line-height: var(--sf-text--height-1\/4);
  }
  .text-1\/3 {
    font-size: var(--sf-text--size-1\/3);
    line-height: var(--sf-text--height-1\/3);
  }
  .text-1\/2 {
    font-size: var(--sf-text--size-1\/2);
    line-height: var(--sf-text--height-1\/2);
  }
  .text-1 {
    font-size: var(--sf-text--size-1);
    line-height: var(--sf-text--height-1);
  }
  .text-2 {
    font-size: var(--sf-text--size-2);
    line-height: var(--sf-text--height-2);
  }
  .text-3 {
    font-size: var(--sf-text--size-3);
    line-height: var(--sf-text--height-3);
  }
  .text-4 {
    font-size: var(--sf-text--size-4);
    line-height: var(--sf-text--height-4);
  }
  .text-5 {
    font-size: var(--sf-text--size-5);
    line-height: var(--sf-text--height-5);
  }
  .text-6 {
    font-size: var(--sf-text--size-6);
    line-height: var(--sf-text--height-6);
  }
  .text-7 {
    font-size: var(--sf-text--size-7);
    line-height: var(--sf-text--height-7);
  }
  .text-8 {
    font-size: var(--sf-text--size-8);
    line-height: var(--sf-text--height-8);
  }
  .text-9 {
    font-size: var(--sf-text--size-9);
    line-height: var(--sf-text--height-9);
  }
  .text-10 {
    font-size: var(--sf-text--size-10);
    line-height: var(--sf-text--height-10);
  }
  .text-11 {
    font-size: var(--sf-text--size-11);
    line-height: var(--sf-text--height-11);
  }
  .text-12 {
    font-size: var(--sf-text--size-12);
    line-height: var(--sf-text--height-12);
  }
  .text-1.heading {
    line-height: var(--sf-title--height-1);
  }
  .text-2.heading {
    line-height: var(--sf-title--height-2);
  }
  .text-3.heading {
    line-height: var(--sf-title--height-3);
  }
  .text-4.heading {
    line-height: var(--sf-title--height-4);
  }
  .text-5.heading {
    line-height: var(--sf-title--height-5);
  }
  .text-6.heading {
    line-height: var(--sf-title--height-6);
  }
  .text-7.heading {
    line-height: var(--sf-title--height-7);
  }
  .text-8.heading {
    line-height: var(--sf-title--height-8);
  }
  .text-9.heading {
    line-height: var(--sf-title--height-9);
  }
  .text-10.heading {
    line-height: var(--sf-title--height-10);
  }
  .text-11.heading {
    line-height: var(--sf-title--height-11);
  }
  .text-12.heading {
    line-height: var(--sf-title--height-12);
  }
}

/* docara-shell-source: runtime/utility/headers/default/css/default.css */
@layer sf.base {
  .bg-surface-overlay {
    background-color: var(--sf-surface-overlay);
    -webkit-backdrop-filter: blur(var(--sf-surface-overlay--blur));
            backdrop-filter: blur(var(--sf-surface-overlay--blur));
  }
}
@layer sf.utilities {
  h1 {
    font-size: var(--sf-heading-1--size);
    line-height: var(--sf-heading-1--height);
  }
  h2 {
    font-size: var(--sf-heading-2--size);
    line-height: var(--sf-heading-2--height);
  }
  h3 {
    font-size: var(--sf-heading-3--size);
    line-height: var(--sf-heading-3--height);
  }
  h4 {
    font-size: var(--sf-heading-4--size);
    line-height: var(--sf-heading-4--height);
  }
  h5 {
    font-size: var(--sf-heading-5--size);
    line-height: var(--sf-heading-5--height);
  }
  h6 {
    font-size: var(--sf-heading-6--size);
    line-height: var(--sf-heading-6--height);
  }
}

/* docara-shell-source: runtime/utility/height-ext/default/css/default.css */
@layer sf.utilities {
  .h-a0 {
    height: var(--sf-a0);
  }
  .h-a1 {
    height: var(--sf-a1);
  }
  .h-a2 {
    height: var(--sf-a2);
  }
  .h-a3 {
    height: var(--sf-a3);
  }
  .h-a4 {
    height: var(--sf-a4);
  }
  .h-a5 {
    height: var(--sf-a5);
  }
  .h-a6 {
    height: var(--sf-a6);
  }
  .h-a7 {
    height: var(--sf-a7);
  }
  .h-a8 {
    height: var(--sf-a8);
  }
  .h-a9 {
    height: var(--sf-a9);
  }
  .h-b0 {
    height: var(--sf-b0);
  }
  .h-b1 {
    height: var(--sf-b1);
  }
  .h-b2 {
    height: var(--sf-b2);
  }
  .h-b3 {
    height: var(--sf-b3);
  }
  .h-b4 {
    height: var(--sf-b4);
  }
  .h-b5 {
    height: var(--sf-b5);
  }
  .h-b6 {
    height: var(--sf-b6);
  }
  .h-b7 {
    height: var(--sf-b7);
  }
  .h-b8 {
    height: var(--sf-b8);
  }
  .h-b9 {
    height: var(--sf-b9);
  }
  .h-c0 {
    height: var(--sf-c0);
  }
  .h-c1 {
    height: var(--sf-c1);
  }
  .h-c2 {
    height: var(--sf-c2);
  }
  .h-c3 {
    height: var(--sf-c3);
  }
  .h-c4 {
    height: var(--sf-c4);
  }
  .h-c5 {
    height: var(--sf-c5);
  }
  .h-c6 {
    height: var(--sf-c6);
  }
  .h-c7 {
    height: var(--sf-c7);
  }
  .h-c8 {
    height: var(--sf-c8);
  }
  .h-c9 {
    height: var(--sf-c9);
  }
  .h-d0 {
    height: var(--sf-d0);
  }
  .h-d1 {
    height: var(--sf-d1);
  }
  .h-d2 {
    height: var(--sf-d2);
  }
  .h-d3 {
    height: var(--sf-d3);
  }
  .h-d4 {
    height: var(--sf-d4);
  }
  .h-d5 {
    height: var(--sf-d5);
  }
  .h-d6 {
    height: var(--sf-d6);
  }
  .h-d7 {
    height: var(--sf-d7);
  }
  .h-d8 {
    height: var(--sf-d8);
  }
  .h-d9 {
    height: var(--sf-d9);
  }
  .h-e0 {
    height: var(--sf-e0);
  }
  .h-e1 {
    height: var(--sf-e1);
  }
  .h-e2 {
    height: var(--sf-e2);
  }
  .h-e3 {
    height: var(--sf-e3);
  }
  .h-e4 {
    height: var(--sf-e4);
  }
  .h-e5 {
    height: var(--sf-e5);
  }
  .h-e6 {
    height: var(--sf-e6);
  }
  .h-e7 {
    height: var(--sf-e7);
  }
  .h-e8 {
    height: var(--sf-e8);
  }
  .h-e9 {
    height: var(--sf-e9);
  }
  .h-f0 {
    height: var(--sf-f0);
  }
  .h-f1 {
    height: var(--sf-f1);
  }
  .h-f2 {
    height: var(--sf-f2);
  }
  .h-f3 {
    height: var(--sf-f3);
  }
  .h-f4 {
    height: var(--sf-f4);
  }
  .h-f5 {
    height: var(--sf-f5);
  }
  .h-f6 {
    height: var(--sf-f6);
  }
  .h-f7 {
    height: var(--sf-f7);
  }
  .h-f8 {
    height: var(--sf-f8);
  }
  .h-f9 {
    height: var(--sf-f9);
  }
  .h-g0 {
    height: var(--sf-g0);
  }
  .h-g1 {
    height: var(--sf-g1);
  }
  .h-g2 {
    height: var(--sf-g2);
  }
  .h-g3 {
    height: var(--sf-g3);
  }
  .h-g4 {
    height: var(--sf-g4);
  }
  .h-g5 {
    height: var(--sf-g5);
  }
  .h-g6 {
    height: var(--sf-g6);
  }
  .h-g7 {
    height: var(--sf-g7);
  }
  .h-g8 {
    height: var(--sf-g8);
  }
  .h-g9 {
    height: var(--sf-g9);
  }
  .h-h0 {
    height: var(--sf-h0);
  }
  .h-h1 {
    height: var(--sf-h1);
  }
  .h-h2 {
    height: var(--sf-h2);
  }
  .h-h3 {
    height: var(--sf-h3);
  }
  .h-h4 {
    height: var(--sf-h4);
  }
  .h-h5 {
    height: var(--sf-h5);
  }
  .h-h6 {
    height: var(--sf-h6);
  }
  .h-h7 {
    height: var(--sf-h7);
  }
  .h-h8 {
    height: var(--sf-h8);
  }
  .h-h9 {
    height: var(--sf-h9);
  }
  .h-i0 {
    height: var(--sf-i0);
  }
  .h-i1 {
    height: var(--sf-i1);
  }
  .h-i2 {
    height: var(--sf-i2);
  }
  .h-i3 {
    height: var(--sf-i3);
  }
  .h-i4 {
    height: var(--sf-i4);
  }
  .h-i5 {
    height: var(--sf-i5);
  }
  .h-i6 {
    height: var(--sf-i6);
  }
  .h-i7 {
    height: var(--sf-i7);
  }
  .h-i8 {
    height: var(--sf-i8);
  }
  .h-i9 {
    height: var(--sf-i9);
  }
}

/* docara-shell-source: runtime/utility/height/default/css/default.css */
@layer sf.utilities {
  .h-auto {
    height: auto;
  }
  .h-1\/2 {
    height: 50%;
  }
  .h-1\/3 {
    height: 33.333333%;
  }
  .h-2\/3 {
    height: 66.666667%;
  }
  .h-1\/4 {
    height: 25%;
  }
  .h-2\/4 {
    height: 50%;
  }
  .h-3\/4 {
    height: 75%;
  }
  .h-1\/5 {
    height: 20%;
  }
  .h-2\/5 {
    height: 40%;
  }
  .h-3\/5 {
    height: 60%;
  }
  .h-4\/5 {
    height: 80%;
  }
  .h-1\/6 {
    height: 16.666667%;
  }
  .h-2\/6 {
    height: 33.333333%;
  }
  .h-3\/6 {
    height: 50%;
  }
  .h-4\/6 {
    height: 66.666667%;
  }
  .h-5\/6 {
    height: 83.333333%;
  }
  .h-full {
    height: 100%;
  }
  .h-screen {
    height: 100vh;
  }
  .h-screen-small {
    height: var(--sf-viewport-height-small);
  }
  .h-screen-large {
    height: var(--sf-viewport-height-large);
  }
  .h-screen-dynamic {
    height: var(--sf-viewport-height-dynamic);
  }
  .h-screen-1\/2 {
    height: 50vh;
  }
  .h-screen-1\/3 {
    height: 33.333333vh;
  }
  .h-screen-2\/3 {
    height: 66.666667vh;
  }
  .h-screen-1\/4 {
    height: 25vh;
  }
  .h-screen-2\/4 {
    height: 50vh;
  }
  .h-screen-3\/4 {
    height: 75vh;
  }
  .h-min {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }
  .h-max {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
  }
  .h-content-min {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }
  .h-content-max {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
  }
  .h-fit {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .h-px {
    height: 1px;
  }
  .h-0 {
    height: 0;
  }
}

/* docara-shell-source: runtime/utility/justify-content/default/css/default.css */
@layer sf.utilities {
  .justify-start,
  .content-main-start {
    justify-content: flex-start;
  }
  .justify-end,
  .content-main-end {
    justify-content: flex-end;
  }
  .justify-center,
  .content-main-center {
    justify-content: center;
  }
  .justify-between,
  .content-main-between {
    justify-content: space-between;
  }
  .justify-around,
  .content-main-around {
    justify-content: space-around;
  }
  .justify-evenly,
  .content-main-evenly {
    justify-content: space-evenly;
  }
}

/* docara-shell-source: runtime/utility/margin/default/css/default.css */
@layer sf.utilities {
  .m-auto {
    margin: var(--sf-space-auto);
  }
  .-m-auto {
    margin: calc(0rem - var(--sf-space-auto));
  }
  .m-top-auto {
    margin-top: var(--sf-space-auto);
  }
  .-m-top-auto {
    margin-top: calc(0rem - var(--sf-space-auto));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-auto {
    margin-right: var(--sf-space-auto);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-auto {
    margin-right: var(--sf-space-auto);
    }
  }
  .m-inline-end-auto:where(:dir(ltr)) {
    margin-right: var(--sf-space-auto);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-auto {
    margin-left: var(--sf-space-auto);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-auto {
    margin-left: var(--sf-space-auto);
    }
  }
  .m-inline-end-auto:where(:dir(rtl)) {
    margin-left: var(--sf-space-auto);
  }
  .m-inline-end-auto {
    -webkit-margin-end: var(--sf-space-auto);
            margin-inline-end: var(--sf-space-auto);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-auto {
    margin-right: calc(0rem - var(--sf-space-auto));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-auto {
    margin-right: calc(0rem - var(--sf-space-auto));
    }
  }
  .-m-inline-end-auto:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-auto));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-auto {
    margin-left: calc(0rem - var(--sf-space-auto));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-auto {
    margin-left: calc(0rem - var(--sf-space-auto));
    }
  }
  .-m-inline-end-auto:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-auto));
  }
  .-m-inline-end-auto {
    -webkit-margin-end: calc(0rem - var(--sf-space-auto));
            margin-inline-end: calc(0rem - var(--sf-space-auto));
  }
  .m-bottom-auto {
    margin-bottom: var(--sf-space-auto);
  }
  .-m-bottom-auto {
    margin-bottom: calc(0rem - var(--sf-space-auto));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-auto {
    margin-left: var(--sf-space-auto);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-auto {
    margin-left: var(--sf-space-auto);
    }
  }
  .m-inline-start-auto:where(:dir(ltr)) {
    margin-left: var(--sf-space-auto);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-auto {
    margin-right: var(--sf-space-auto);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-auto {
    margin-right: var(--sf-space-auto);
    }
  }
  .m-inline-start-auto:where(:dir(rtl)) {
    margin-right: var(--sf-space-auto);
  }
  .m-inline-start-auto {
    -webkit-margin-start: var(--sf-space-auto);
            margin-inline-start: var(--sf-space-auto);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-auto {
    margin-left: calc(0rem - var(--sf-space-auto));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-auto {
    margin-left: calc(0rem - var(--sf-space-auto));
    }
  }
  .-m-inline-start-auto:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-auto));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-auto {
    margin-right: calc(0rem - var(--sf-space-auto));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-auto {
    margin-right: calc(0rem - var(--sf-space-auto));
    }
  }
  .-m-inline-start-auto:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-auto));
  }
  .-m-inline-start-auto {
    -webkit-margin-start: calc(0rem - var(--sf-space-auto));
            margin-inline-start: calc(0rem - var(--sf-space-auto));
  }
  .m-inline-auto {
    margin-left: var(--sf-space-auto);
    margin-right: var(--sf-space-auto);
    margin-inline: var(--sf-space-auto);
  }
  .-m-inline-auto {
    margin-left: calc(0rem - var(--sf-space-auto));
    margin-right: calc(0rem - var(--sf-space-auto));
    margin-inline: calc(0rem - var(--sf-space-auto));
  }
  .m-block-auto {
    margin-top: var(--sf-space-auto);
    margin-bottom: var(--sf-space-auto);
    margin-block: var(--sf-space-auto);
  }
  .-m-block-auto {
    margin-top: calc(0rem - var(--sf-space-auto));
    margin-bottom: calc(0rem - var(--sf-space-auto));
    margin-block: calc(0rem - var(--sf-space-auto));
  }
  .m-0 {
    margin: var(--sf-space-0);
  }
  .-m-0 {
    margin: calc(0rem - var(--sf-space-0));
  }
  .m-top-0 {
    margin-top: var(--sf-space-0);
  }
  .-m-top-0 {
    margin-top: calc(0rem - var(--sf-space-0));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-0 {
    margin-right: var(--sf-space-0);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-0 {
    margin-right: var(--sf-space-0);
    }
  }
  .m-inline-end-0:where(:dir(ltr)) {
    margin-right: var(--sf-space-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-0 {
    margin-left: var(--sf-space-0);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-0 {
    margin-left: var(--sf-space-0);
    }
  }
  .m-inline-end-0:where(:dir(rtl)) {
    margin-left: var(--sf-space-0);
  }
  .m-inline-end-0 {
    -webkit-margin-end: var(--sf-space-0);
            margin-inline-end: var(--sf-space-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-0 {
    margin-right: calc(0rem - var(--sf-space-0));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-0 {
    margin-right: calc(0rem - var(--sf-space-0));
    }
  }
  .-m-inline-end-0:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-0));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-0 {
    margin-left: calc(0rem - var(--sf-space-0));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-0 {
    margin-left: calc(0rem - var(--sf-space-0));
    }
  }
  .-m-inline-end-0:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-0));
  }
  .-m-inline-end-0 {
    -webkit-margin-end: calc(0rem - var(--sf-space-0));
            margin-inline-end: calc(0rem - var(--sf-space-0));
  }
  .m-bottom-0 {
    margin-bottom: var(--sf-space-0);
  }
  .-m-bottom-0 {
    margin-bottom: calc(0rem - var(--sf-space-0));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-0 {
    margin-left: var(--sf-space-0);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-0 {
    margin-left: var(--sf-space-0);
    }
  }
  .m-inline-start-0:where(:dir(ltr)) {
    margin-left: var(--sf-space-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-0 {
    margin-right: var(--sf-space-0);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-0 {
    margin-right: var(--sf-space-0);
    }
  }
  .m-inline-start-0:where(:dir(rtl)) {
    margin-right: var(--sf-space-0);
  }
  .m-inline-start-0 {
    -webkit-margin-start: var(--sf-space-0);
            margin-inline-start: var(--sf-space-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-0 {
    margin-left: calc(0rem - var(--sf-space-0));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-0 {
    margin-left: calc(0rem - var(--sf-space-0));
    }
  }
  .-m-inline-start-0:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-0));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-0 {
    margin-right: calc(0rem - var(--sf-space-0));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-0 {
    margin-right: calc(0rem - var(--sf-space-0));
    }
  }
  .-m-inline-start-0:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-0));
  }
  .-m-inline-start-0 {
    -webkit-margin-start: calc(0rem - var(--sf-space-0));
            margin-inline-start: calc(0rem - var(--sf-space-0));
  }
  .m-inline-0 {
    margin-left: var(--sf-space-0);
    margin-right: var(--sf-space-0);
    margin-inline: var(--sf-space-0);
  }
  .-m-inline-0 {
    margin-left: calc(0rem - var(--sf-space-0));
    margin-right: calc(0rem - var(--sf-space-0));
    margin-inline: calc(0rem - var(--sf-space-0));
  }
  .m-block-0 {
    margin-top: var(--sf-space-0);
    margin-bottom: var(--sf-space-0);
    margin-block: var(--sf-space-0);
  }
  .-m-block-0 {
    margin-top: calc(0rem - var(--sf-space-0));
    margin-bottom: calc(0rem - var(--sf-space-0));
    margin-block: calc(0rem - var(--sf-space-0));
  }
  .m-1\/4 {
    margin: var(--sf-space-1\/4);
  }
  .-m-1\/4 {
    margin: calc(0rem - var(--sf-space-1\/4));
  }
  .m-top-1\/4 {
    margin-top: var(--sf-space-1\/4);
  }
  .-m-top-1\/4 {
    margin-top: calc(0rem - var(--sf-space-1\/4));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-1\/4 {
    margin-right: var(--sf-space-1\/4);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-1\/4 {
    margin-right: var(--sf-space-1\/4);
    }
  }
  .m-inline-end-1\/4:where(:dir(ltr)) {
    margin-right: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-1\/4 {
    margin-left: var(--sf-space-1\/4);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-1\/4 {
    margin-left: var(--sf-space-1\/4);
    }
  }
  .m-inline-end-1\/4:where(:dir(rtl)) {
    margin-left: var(--sf-space-1\/4);
  }
  .m-inline-end-1\/4 {
    -webkit-margin-end: var(--sf-space-1\/4);
            margin-inline-end: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-1\/4 {
    margin-right: calc(0rem - var(--sf-space-1\/4));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-1\/4 {
    margin-right: calc(0rem - var(--sf-space-1\/4));
    }
  }
  .-m-inline-end-1\/4:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-1\/4));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-1\/4 {
    margin-left: calc(0rem - var(--sf-space-1\/4));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-1\/4 {
    margin-left: calc(0rem - var(--sf-space-1\/4));
    }
  }
  .-m-inline-end-1\/4:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-1\/4));
  }
  .-m-inline-end-1\/4 {
    -webkit-margin-end: calc(0rem - var(--sf-space-1\/4));
            margin-inline-end: calc(0rem - var(--sf-space-1\/4));
  }
  .m-bottom-1\/4 {
    margin-bottom: var(--sf-space-1\/4);
  }
  .-m-bottom-1\/4 {
    margin-bottom: calc(0rem - var(--sf-space-1\/4));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-1\/4 {
    margin-left: var(--sf-space-1\/4);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-1\/4 {
    margin-left: var(--sf-space-1\/4);
    }
  }
  .m-inline-start-1\/4:where(:dir(ltr)) {
    margin-left: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-1\/4 {
    margin-right: var(--sf-space-1\/4);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-1\/4 {
    margin-right: var(--sf-space-1\/4);
    }
  }
  .m-inline-start-1\/4:where(:dir(rtl)) {
    margin-right: var(--sf-space-1\/4);
  }
  .m-inline-start-1\/4 {
    -webkit-margin-start: var(--sf-space-1\/4);
            margin-inline-start: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-1\/4 {
    margin-left: calc(0rem - var(--sf-space-1\/4));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-1\/4 {
    margin-left: calc(0rem - var(--sf-space-1\/4));
    }
  }
  .-m-inline-start-1\/4:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-1\/4));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-1\/4 {
    margin-right: calc(0rem - var(--sf-space-1\/4));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-1\/4 {
    margin-right: calc(0rem - var(--sf-space-1\/4));
    }
  }
  .-m-inline-start-1\/4:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-1\/4));
  }
  .-m-inline-start-1\/4 {
    -webkit-margin-start: calc(0rem - var(--sf-space-1\/4));
            margin-inline-start: calc(0rem - var(--sf-space-1\/4));
  }
  .m-inline-1\/4 {
    margin-left: var(--sf-space-1\/4);
    margin-right: var(--sf-space-1\/4);
    margin-inline: var(--sf-space-1\/4);
  }
  .-m-inline-1\/4 {
    margin-left: calc(0rem - var(--sf-space-1\/4));
    margin-right: calc(0rem - var(--sf-space-1\/4));
    margin-inline: calc(0rem - var(--sf-space-1\/4));
  }
  .m-block-1\/4 {
    margin-top: var(--sf-space-1\/4);
    margin-bottom: var(--sf-space-1\/4);
    margin-block: var(--sf-space-1\/4);
  }
  .-m-block-1\/4 {
    margin-top: calc(0rem - var(--sf-space-1\/4));
    margin-bottom: calc(0rem - var(--sf-space-1\/4));
    margin-block: calc(0rem - var(--sf-space-1\/4));
  }
  .m-1\/3 {
    margin: var(--sf-space-1\/3);
  }
  .-m-1\/3 {
    margin: calc(0rem - var(--sf-space-1\/3));
  }
  .m-top-1\/3 {
    margin-top: var(--sf-space-1\/3);
  }
  .-m-top-1\/3 {
    margin-top: calc(0rem - var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-1\/3 {
    margin-right: var(--sf-space-1\/3);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-1\/3 {
    margin-right: var(--sf-space-1\/3);
    }
  }
  .m-inline-end-1\/3:where(:dir(ltr)) {
    margin-right: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-1\/3 {
    margin-left: var(--sf-space-1\/3);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-1\/3 {
    margin-left: var(--sf-space-1\/3);
    }
  }
  .m-inline-end-1\/3:where(:dir(rtl)) {
    margin-left: var(--sf-space-1\/3);
  }
  .m-inline-end-1\/3 {
    -webkit-margin-end: var(--sf-space-1\/3);
            margin-inline-end: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-1\/3 {
    margin-right: calc(0rem - var(--sf-space-1\/3));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-1\/3 {
    margin-right: calc(0rem - var(--sf-space-1\/3));
    }
  }
  .-m-inline-end-1\/3:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-1\/3 {
    margin-left: calc(0rem - var(--sf-space-1\/3));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-1\/3 {
    margin-left: calc(0rem - var(--sf-space-1\/3));
    }
  }
  .-m-inline-end-1\/3:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-1\/3));
  }
  .-m-inline-end-1\/3 {
    -webkit-margin-end: calc(0rem - var(--sf-space-1\/3));
            margin-inline-end: calc(0rem - var(--sf-space-1\/3));
  }
  .m-bottom-1\/3 {
    margin-bottom: var(--sf-space-1\/3);
  }
  .-m-bottom-1\/3 {
    margin-bottom: calc(0rem - var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-1\/3 {
    margin-left: var(--sf-space-1\/3);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-1\/3 {
    margin-left: var(--sf-space-1\/3);
    }
  }
  .m-inline-start-1\/3:where(:dir(ltr)) {
    margin-left: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-1\/3 {
    margin-right: var(--sf-space-1\/3);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-1\/3 {
    margin-right: var(--sf-space-1\/3);
    }
  }
  .m-inline-start-1\/3:where(:dir(rtl)) {
    margin-right: var(--sf-space-1\/3);
  }
  .m-inline-start-1\/3 {
    -webkit-margin-start: var(--sf-space-1\/3);
            margin-inline-start: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-1\/3 {
    margin-left: calc(0rem - var(--sf-space-1\/3));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-1\/3 {
    margin-left: calc(0rem - var(--sf-space-1\/3));
    }
  }
  .-m-inline-start-1\/3:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-1\/3 {
    margin-right: calc(0rem - var(--sf-space-1\/3));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-1\/3 {
    margin-right: calc(0rem - var(--sf-space-1\/3));
    }
  }
  .-m-inline-start-1\/3:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-1\/3));
  }
  .-m-inline-start-1\/3 {
    -webkit-margin-start: calc(0rem - var(--sf-space-1\/3));
            margin-inline-start: calc(0rem - var(--sf-space-1\/3));
  }
  .m-inline-1\/3 {
    margin-left: var(--sf-space-1\/3);
    margin-right: var(--sf-space-1\/3);
    margin-inline: var(--sf-space-1\/3);
  }
  .-m-inline-1\/3 {
    margin-left: calc(0rem - var(--sf-space-1\/3));
    margin-right: calc(0rem - var(--sf-space-1\/3));
    margin-inline: calc(0rem - var(--sf-space-1\/3));
  }
  .m-block-1\/3 {
    margin-top: var(--sf-space-1\/3);
    margin-bottom: var(--sf-space-1\/3);
    margin-block: var(--sf-space-1\/3);
  }
  .-m-block-1\/3 {
    margin-top: calc(0rem - var(--sf-space-1\/3));
    margin-bottom: calc(0rem - var(--sf-space-1\/3));
    margin-block: calc(0rem - var(--sf-space-1\/3));
  }
  .m-1\/2 {
    margin: var(--sf-space-1\/2);
  }
  .-m-1\/2 {
    margin: calc(0rem - var(--sf-space-1\/2));
  }
  .m-top-1\/2 {
    margin-top: var(--sf-space-1\/2);
  }
  .-m-top-1\/2 {
    margin-top: calc(0rem - var(--sf-space-1\/2));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-1\/2 {
    margin-right: var(--sf-space-1\/2);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-1\/2 {
    margin-right: var(--sf-space-1\/2);
    }
  }
  .m-inline-end-1\/2:where(:dir(ltr)) {
    margin-right: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-1\/2 {
    margin-left: var(--sf-space-1\/2);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-1\/2 {
    margin-left: var(--sf-space-1\/2);
    }
  }
  .m-inline-end-1\/2:where(:dir(rtl)) {
    margin-left: var(--sf-space-1\/2);
  }
  .m-inline-end-1\/2 {
    -webkit-margin-end: var(--sf-space-1\/2);
            margin-inline-end: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-1\/2 {
    margin-right: calc(0rem - var(--sf-space-1\/2));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-1\/2 {
    margin-right: calc(0rem - var(--sf-space-1\/2));
    }
  }
  .-m-inline-end-1\/2:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-1\/2));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-1\/2 {
    margin-left: calc(0rem - var(--sf-space-1\/2));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-1\/2 {
    margin-left: calc(0rem - var(--sf-space-1\/2));
    }
  }
  .-m-inline-end-1\/2:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-1\/2));
  }
  .-m-inline-end-1\/2 {
    -webkit-margin-end: calc(0rem - var(--sf-space-1\/2));
            margin-inline-end: calc(0rem - var(--sf-space-1\/2));
  }
  .m-bottom-1\/2 {
    margin-bottom: var(--sf-space-1\/2);
  }
  .-m-bottom-1\/2 {
    margin-bottom: calc(0rem - var(--sf-space-1\/2));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-1\/2 {
    margin-left: var(--sf-space-1\/2);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-1\/2 {
    margin-left: var(--sf-space-1\/2);
    }
  }
  .m-inline-start-1\/2:where(:dir(ltr)) {
    margin-left: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-1\/2 {
    margin-right: var(--sf-space-1\/2);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-1\/2 {
    margin-right: var(--sf-space-1\/2);
    }
  }
  .m-inline-start-1\/2:where(:dir(rtl)) {
    margin-right: var(--sf-space-1\/2);
  }
  .m-inline-start-1\/2 {
    -webkit-margin-start: var(--sf-space-1\/2);
            margin-inline-start: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-1\/2 {
    margin-left: calc(0rem - var(--sf-space-1\/2));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-1\/2 {
    margin-left: calc(0rem - var(--sf-space-1\/2));
    }
  }
  .-m-inline-start-1\/2:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-1\/2));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-1\/2 {
    margin-right: calc(0rem - var(--sf-space-1\/2));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-1\/2 {
    margin-right: calc(0rem - var(--sf-space-1\/2));
    }
  }
  .-m-inline-start-1\/2:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-1\/2));
  }
  .-m-inline-start-1\/2 {
    -webkit-margin-start: calc(0rem - var(--sf-space-1\/2));
            margin-inline-start: calc(0rem - var(--sf-space-1\/2));
  }
  .m-inline-1\/2 {
    margin-left: var(--sf-space-1\/2);
    margin-right: var(--sf-space-1\/2);
    margin-inline: var(--sf-space-1\/2);
  }
  .-m-inline-1\/2 {
    margin-left: calc(0rem - var(--sf-space-1\/2));
    margin-right: calc(0rem - var(--sf-space-1\/2));
    margin-inline: calc(0rem - var(--sf-space-1\/2));
  }
  .m-block-1\/2 {
    margin-top: var(--sf-space-1\/2);
    margin-bottom: var(--sf-space-1\/2);
    margin-block: var(--sf-space-1\/2);
  }
  .-m-block-1\/2 {
    margin-top: calc(0rem - var(--sf-space-1\/2));
    margin-bottom: calc(0rem - var(--sf-space-1\/2));
    margin-block: calc(0rem - var(--sf-space-1\/2));
  }
  .m-1 {
    margin: var(--sf-space-1);
  }
  .-m-1 {
    margin: calc(0rem - var(--sf-space-1));
  }
  .m-top-1 {
    margin-top: var(--sf-space-1);
  }
  .-m-top-1 {
    margin-top: calc(0rem - var(--sf-space-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-1 {
    margin-right: var(--sf-space-1);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-1 {
    margin-right: var(--sf-space-1);
    }
  }
  .m-inline-end-1:where(:dir(ltr)) {
    margin-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-1 {
    margin-left: var(--sf-space-1);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-1 {
    margin-left: var(--sf-space-1);
    }
  }
  .m-inline-end-1:where(:dir(rtl)) {
    margin-left: var(--sf-space-1);
  }
  .m-inline-end-1 {
    -webkit-margin-end: var(--sf-space-1);
            margin-inline-end: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-1 {
    margin-right: calc(0rem - var(--sf-space-1));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-1 {
    margin-right: calc(0rem - var(--sf-space-1));
    }
  }
  .-m-inline-end-1:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-1 {
    margin-left: calc(0rem - var(--sf-space-1));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-1 {
    margin-left: calc(0rem - var(--sf-space-1));
    }
  }
  .-m-inline-end-1:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-1));
  }
  .-m-inline-end-1 {
    -webkit-margin-end: calc(0rem - var(--sf-space-1));
            margin-inline-end: calc(0rem - var(--sf-space-1));
  }
  .m-bottom-1 {
    margin-bottom: var(--sf-space-1);
  }
  .-m-bottom-1 {
    margin-bottom: calc(0rem - var(--sf-space-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-1 {
    margin-left: var(--sf-space-1);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-1 {
    margin-left: var(--sf-space-1);
    }
  }
  .m-inline-start-1:where(:dir(ltr)) {
    margin-left: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-1 {
    margin-right: var(--sf-space-1);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-1 {
    margin-right: var(--sf-space-1);
    }
  }
  .m-inline-start-1:where(:dir(rtl)) {
    margin-right: var(--sf-space-1);
  }
  .m-inline-start-1 {
    -webkit-margin-start: var(--sf-space-1);
            margin-inline-start: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-1 {
    margin-left: calc(0rem - var(--sf-space-1));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-1 {
    margin-left: calc(0rem - var(--sf-space-1));
    }
  }
  .-m-inline-start-1:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-1 {
    margin-right: calc(0rem - var(--sf-space-1));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-1 {
    margin-right: calc(0rem - var(--sf-space-1));
    }
  }
  .-m-inline-start-1:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-1));
  }
  .-m-inline-start-1 {
    -webkit-margin-start: calc(0rem - var(--sf-space-1));
            margin-inline-start: calc(0rem - var(--sf-space-1));
  }
  .m-inline-1 {
    margin-left: var(--sf-space-1);
    margin-right: var(--sf-space-1);
    margin-inline: var(--sf-space-1);
  }
  .-m-inline-1 {
    margin-left: calc(0rem - var(--sf-space-1));
    margin-right: calc(0rem - var(--sf-space-1));
    margin-inline: calc(0rem - var(--sf-space-1));
  }
  .m-block-1 {
    margin-top: var(--sf-space-1);
    margin-bottom: var(--sf-space-1);
    margin-block: var(--sf-space-1);
  }
  .-m-block-1 {
    margin-top: calc(0rem - var(--sf-space-1));
    margin-bottom: calc(0rem - var(--sf-space-1));
    margin-block: calc(0rem - var(--sf-space-1));
  }
  .m-2 {
    margin: var(--sf-space-2);
  }
  .-m-2 {
    margin: calc(0rem - var(--sf-space-2));
  }
  .m-top-2 {
    margin-top: var(--sf-space-2);
  }
  .-m-top-2 {
    margin-top: calc(0rem - var(--sf-space-2));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-2 {
    margin-right: var(--sf-space-2);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-2 {
    margin-right: var(--sf-space-2);
    }
  }
  .m-inline-end-2:where(:dir(ltr)) {
    margin-right: var(--sf-space-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-2 {
    margin-left: var(--sf-space-2);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-2 {
    margin-left: var(--sf-space-2);
    }
  }
  .m-inline-end-2:where(:dir(rtl)) {
    margin-left: var(--sf-space-2);
  }
  .m-inline-end-2 {
    -webkit-margin-end: var(--sf-space-2);
            margin-inline-end: var(--sf-space-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-2 {
    margin-right: calc(0rem - var(--sf-space-2));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-2 {
    margin-right: calc(0rem - var(--sf-space-2));
    }
  }
  .-m-inline-end-2:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-2));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-2 {
    margin-left: calc(0rem - var(--sf-space-2));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-2 {
    margin-left: calc(0rem - var(--sf-space-2));
    }
  }
  .-m-inline-end-2:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-2));
  }
  .-m-inline-end-2 {
    -webkit-margin-end: calc(0rem - var(--sf-space-2));
            margin-inline-end: calc(0rem - var(--sf-space-2));
  }
  .m-bottom-2 {
    margin-bottom: var(--sf-space-2);
  }
  .-m-bottom-2 {
    margin-bottom: calc(0rem - var(--sf-space-2));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-2 {
    margin-left: var(--sf-space-2);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-2 {
    margin-left: var(--sf-space-2);
    }
  }
  .m-inline-start-2:where(:dir(ltr)) {
    margin-left: var(--sf-space-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-2 {
    margin-right: var(--sf-space-2);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-2 {
    margin-right: var(--sf-space-2);
    }
  }
  .m-inline-start-2:where(:dir(rtl)) {
    margin-right: var(--sf-space-2);
  }
  .m-inline-start-2 {
    -webkit-margin-start: var(--sf-space-2);
            margin-inline-start: var(--sf-space-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-2 {
    margin-left: calc(0rem - var(--sf-space-2));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-2 {
    margin-left: calc(0rem - var(--sf-space-2));
    }
  }
  .-m-inline-start-2:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-2));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-2 {
    margin-right: calc(0rem - var(--sf-space-2));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-2 {
    margin-right: calc(0rem - var(--sf-space-2));
    }
  }
  .-m-inline-start-2:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-2));
  }
  .-m-inline-start-2 {
    -webkit-margin-start: calc(0rem - var(--sf-space-2));
            margin-inline-start: calc(0rem - var(--sf-space-2));
  }
  .m-inline-2 {
    margin-left: var(--sf-space-2);
    margin-right: var(--sf-space-2);
    margin-inline: var(--sf-space-2);
  }
  .-m-inline-2 {
    margin-left: calc(0rem - var(--sf-space-2));
    margin-right: calc(0rem - var(--sf-space-2));
    margin-inline: calc(0rem - var(--sf-space-2));
  }
  .m-block-2 {
    margin-top: var(--sf-space-2);
    margin-bottom: var(--sf-space-2);
    margin-block: var(--sf-space-2);
  }
  .-m-block-2 {
    margin-top: calc(0rem - var(--sf-space-2));
    margin-bottom: calc(0rem - var(--sf-space-2));
    margin-block: calc(0rem - var(--sf-space-2));
  }
  .m-3 {
    margin: var(--sf-space-3);
  }
  .-m-3 {
    margin: calc(0rem - var(--sf-space-3));
  }
  .m-top-3 {
    margin-top: var(--sf-space-3);
  }
  .-m-top-3 {
    margin-top: calc(0rem - var(--sf-space-3));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-3 {
    margin-right: var(--sf-space-3);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-3 {
    margin-right: var(--sf-space-3);
    }
  }
  .m-inline-end-3:where(:dir(ltr)) {
    margin-right: var(--sf-space-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-3 {
    margin-left: var(--sf-space-3);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-3 {
    margin-left: var(--sf-space-3);
    }
  }
  .m-inline-end-3:where(:dir(rtl)) {
    margin-left: var(--sf-space-3);
  }
  .m-inline-end-3 {
    -webkit-margin-end: var(--sf-space-3);
            margin-inline-end: var(--sf-space-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-3 {
    margin-right: calc(0rem - var(--sf-space-3));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-3 {
    margin-right: calc(0rem - var(--sf-space-3));
    }
  }
  .-m-inline-end-3:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-3 {
    margin-left: calc(0rem - var(--sf-space-3));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-3 {
    margin-left: calc(0rem - var(--sf-space-3));
    }
  }
  .-m-inline-end-3:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-3));
  }
  .-m-inline-end-3 {
    -webkit-margin-end: calc(0rem - var(--sf-space-3));
            margin-inline-end: calc(0rem - var(--sf-space-3));
  }
  .m-bottom-3 {
    margin-bottom: var(--sf-space-3);
  }
  .-m-bottom-3 {
    margin-bottom: calc(0rem - var(--sf-space-3));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-3 {
    margin-left: var(--sf-space-3);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-3 {
    margin-left: var(--sf-space-3);
    }
  }
  .m-inline-start-3:where(:dir(ltr)) {
    margin-left: var(--sf-space-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-3 {
    margin-right: var(--sf-space-3);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-3 {
    margin-right: var(--sf-space-3);
    }
  }
  .m-inline-start-3:where(:dir(rtl)) {
    margin-right: var(--sf-space-3);
  }
  .m-inline-start-3 {
    -webkit-margin-start: var(--sf-space-3);
            margin-inline-start: var(--sf-space-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-3 {
    margin-left: calc(0rem - var(--sf-space-3));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-3 {
    margin-left: calc(0rem - var(--sf-space-3));
    }
  }
  .-m-inline-start-3:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-3 {
    margin-right: calc(0rem - var(--sf-space-3));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-3 {
    margin-right: calc(0rem - var(--sf-space-3));
    }
  }
  .-m-inline-start-3:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-3));
  }
  .-m-inline-start-3 {
    -webkit-margin-start: calc(0rem - var(--sf-space-3));
            margin-inline-start: calc(0rem - var(--sf-space-3));
  }
  .m-inline-3 {
    margin-left: var(--sf-space-3);
    margin-right: var(--sf-space-3);
    margin-inline: var(--sf-space-3);
  }
  .-m-inline-3 {
    margin-left: calc(0rem - var(--sf-space-3));
    margin-right: calc(0rem - var(--sf-space-3));
    margin-inline: calc(0rem - var(--sf-space-3));
  }
  .m-block-3 {
    margin-top: var(--sf-space-3);
    margin-bottom: var(--sf-space-3);
    margin-block: var(--sf-space-3);
  }
  .-m-block-3 {
    margin-top: calc(0rem - var(--sf-space-3));
    margin-bottom: calc(0rem - var(--sf-space-3));
    margin-block: calc(0rem - var(--sf-space-3));
  }
  .m-4 {
    margin: var(--sf-space-4);
  }
  .-m-4 {
    margin: calc(0rem - var(--sf-space-4));
  }
  .m-top-4 {
    margin-top: var(--sf-space-4);
  }
  .-m-top-4 {
    margin-top: calc(0rem - var(--sf-space-4));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-4 {
    margin-right: var(--sf-space-4);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-4 {
    margin-right: var(--sf-space-4);
    }
  }
  .m-inline-end-4:where(:dir(ltr)) {
    margin-right: var(--sf-space-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-4 {
    margin-left: var(--sf-space-4);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-4 {
    margin-left: var(--sf-space-4);
    }
  }
  .m-inline-end-4:where(:dir(rtl)) {
    margin-left: var(--sf-space-4);
  }
  .m-inline-end-4 {
    -webkit-margin-end: var(--sf-space-4);
            margin-inline-end: var(--sf-space-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-4 {
    margin-right: calc(0rem - var(--sf-space-4));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-4 {
    margin-right: calc(0rem - var(--sf-space-4));
    }
  }
  .-m-inline-end-4:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-4));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-4 {
    margin-left: calc(0rem - var(--sf-space-4));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-4 {
    margin-left: calc(0rem - var(--sf-space-4));
    }
  }
  .-m-inline-end-4:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-4));
  }
  .-m-inline-end-4 {
    -webkit-margin-end: calc(0rem - var(--sf-space-4));
            margin-inline-end: calc(0rem - var(--sf-space-4));
  }
  .m-bottom-4 {
    margin-bottom: var(--sf-space-4);
  }
  .-m-bottom-4 {
    margin-bottom: calc(0rem - var(--sf-space-4));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-4 {
    margin-left: var(--sf-space-4);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-4 {
    margin-left: var(--sf-space-4);
    }
  }
  .m-inline-start-4:where(:dir(ltr)) {
    margin-left: var(--sf-space-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-4 {
    margin-right: var(--sf-space-4);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-4 {
    margin-right: var(--sf-space-4);
    }
  }
  .m-inline-start-4:where(:dir(rtl)) {
    margin-right: var(--sf-space-4);
  }
  .m-inline-start-4 {
    -webkit-margin-start: var(--sf-space-4);
            margin-inline-start: var(--sf-space-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-4 {
    margin-left: calc(0rem - var(--sf-space-4));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-4 {
    margin-left: calc(0rem - var(--sf-space-4));
    }
  }
  .-m-inline-start-4:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-4));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-4 {
    margin-right: calc(0rem - var(--sf-space-4));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-4 {
    margin-right: calc(0rem - var(--sf-space-4));
    }
  }
  .-m-inline-start-4:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-4));
  }
  .-m-inline-start-4 {
    -webkit-margin-start: calc(0rem - var(--sf-space-4));
            margin-inline-start: calc(0rem - var(--sf-space-4));
  }
  .m-inline-4 {
    margin-left: var(--sf-space-4);
    margin-right: var(--sf-space-4);
    margin-inline: var(--sf-space-4);
  }
  .-m-inline-4 {
    margin-left: calc(0rem - var(--sf-space-4));
    margin-right: calc(0rem - var(--sf-space-4));
    margin-inline: calc(0rem - var(--sf-space-4));
  }
  .m-block-4 {
    margin-top: var(--sf-space-4);
    margin-bottom: var(--sf-space-4);
    margin-block: var(--sf-space-4);
  }
  .-m-block-4 {
    margin-top: calc(0rem - var(--sf-space-4));
    margin-bottom: calc(0rem - var(--sf-space-4));
    margin-block: calc(0rem - var(--sf-space-4));
  }
  .m-5 {
    margin: var(--sf-space-5);
  }
  .-m-5 {
    margin: calc(0rem - var(--sf-space-5));
  }
  .m-top-5 {
    margin-top: var(--sf-space-5);
  }
  .-m-top-5 {
    margin-top: calc(0rem - var(--sf-space-5));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-5 {
    margin-right: var(--sf-space-5);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-5 {
    margin-right: var(--sf-space-5);
    }
  }
  .m-inline-end-5:where(:dir(ltr)) {
    margin-right: var(--sf-space-5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-5 {
    margin-left: var(--sf-space-5);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-5 {
    margin-left: var(--sf-space-5);
    }
  }
  .m-inline-end-5:where(:dir(rtl)) {
    margin-left: var(--sf-space-5);
  }
  .m-inline-end-5 {
    -webkit-margin-end: var(--sf-space-5);
            margin-inline-end: var(--sf-space-5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-5 {
    margin-right: calc(0rem - var(--sf-space-5));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-5 {
    margin-right: calc(0rem - var(--sf-space-5));
    }
  }
  .-m-inline-end-5:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-5));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-5 {
    margin-left: calc(0rem - var(--sf-space-5));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-5 {
    margin-left: calc(0rem - var(--sf-space-5));
    }
  }
  .-m-inline-end-5:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-5));
  }
  .-m-inline-end-5 {
    -webkit-margin-end: calc(0rem - var(--sf-space-5));
            margin-inline-end: calc(0rem - var(--sf-space-5));
  }
  .m-bottom-5 {
    margin-bottom: var(--sf-space-5);
  }
  .-m-bottom-5 {
    margin-bottom: calc(0rem - var(--sf-space-5));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-5 {
    margin-left: var(--sf-space-5);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-5 {
    margin-left: var(--sf-space-5);
    }
  }
  .m-inline-start-5:where(:dir(ltr)) {
    margin-left: var(--sf-space-5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-5 {
    margin-right: var(--sf-space-5);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-5 {
    margin-right: var(--sf-space-5);
    }
  }
  .m-inline-start-5:where(:dir(rtl)) {
    margin-right: var(--sf-space-5);
  }
  .m-inline-start-5 {
    -webkit-margin-start: var(--sf-space-5);
            margin-inline-start: var(--sf-space-5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-5 {
    margin-left: calc(0rem - var(--sf-space-5));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-5 {
    margin-left: calc(0rem - var(--sf-space-5));
    }
  }
  .-m-inline-start-5:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-5));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-5 {
    margin-right: calc(0rem - var(--sf-space-5));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-5 {
    margin-right: calc(0rem - var(--sf-space-5));
    }
  }
  .-m-inline-start-5:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-5));
  }
  .-m-inline-start-5 {
    -webkit-margin-start: calc(0rem - var(--sf-space-5));
            margin-inline-start: calc(0rem - var(--sf-space-5));
  }
  .m-inline-5 {
    margin-left: var(--sf-space-5);
    margin-right: var(--sf-space-5);
    margin-inline: var(--sf-space-5);
  }
  .-m-inline-5 {
    margin-left: calc(0rem - var(--sf-space-5));
    margin-right: calc(0rem - var(--sf-space-5));
    margin-inline: calc(0rem - var(--sf-space-5));
  }
  .m-block-5 {
    margin-top: var(--sf-space-5);
    margin-bottom: var(--sf-space-5);
    margin-block: var(--sf-space-5);
  }
  .-m-block-5 {
    margin-top: calc(0rem - var(--sf-space-5));
    margin-bottom: calc(0rem - var(--sf-space-5));
    margin-block: calc(0rem - var(--sf-space-5));
  }
  .m-6 {
    margin: var(--sf-space-6);
  }
  .-m-6 {
    margin: calc(0rem - var(--sf-space-6));
  }
  .m-top-6 {
    margin-top: var(--sf-space-6);
  }
  .-m-top-6 {
    margin-top: calc(0rem - var(--sf-space-6));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-6 {
    margin-right: var(--sf-space-6);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-6 {
    margin-right: var(--sf-space-6);
    }
  }
  .m-inline-end-6:where(:dir(ltr)) {
    margin-right: var(--sf-space-6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-6 {
    margin-left: var(--sf-space-6);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-6 {
    margin-left: var(--sf-space-6);
    }
  }
  .m-inline-end-6:where(:dir(rtl)) {
    margin-left: var(--sf-space-6);
  }
  .m-inline-end-6 {
    -webkit-margin-end: var(--sf-space-6);
            margin-inline-end: var(--sf-space-6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-6 {
    margin-right: calc(0rem - var(--sf-space-6));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-6 {
    margin-right: calc(0rem - var(--sf-space-6));
    }
  }
  .-m-inline-end-6:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-6));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-6 {
    margin-left: calc(0rem - var(--sf-space-6));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-6 {
    margin-left: calc(0rem - var(--sf-space-6));
    }
  }
  .-m-inline-end-6:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-6));
  }
  .-m-inline-end-6 {
    -webkit-margin-end: calc(0rem - var(--sf-space-6));
            margin-inline-end: calc(0rem - var(--sf-space-6));
  }
  .m-bottom-6 {
    margin-bottom: var(--sf-space-6);
  }
  .-m-bottom-6 {
    margin-bottom: calc(0rem - var(--sf-space-6));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-6 {
    margin-left: var(--sf-space-6);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-6 {
    margin-left: var(--sf-space-6);
    }
  }
  .m-inline-start-6:where(:dir(ltr)) {
    margin-left: var(--sf-space-6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-6 {
    margin-right: var(--sf-space-6);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-6 {
    margin-right: var(--sf-space-6);
    }
  }
  .m-inline-start-6:where(:dir(rtl)) {
    margin-right: var(--sf-space-6);
  }
  .m-inline-start-6 {
    -webkit-margin-start: var(--sf-space-6);
            margin-inline-start: var(--sf-space-6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-6 {
    margin-left: calc(0rem - var(--sf-space-6));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-6 {
    margin-left: calc(0rem - var(--sf-space-6));
    }
  }
  .-m-inline-start-6:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-6));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-6 {
    margin-right: calc(0rem - var(--sf-space-6));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-6 {
    margin-right: calc(0rem - var(--sf-space-6));
    }
  }
  .-m-inline-start-6:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-6));
  }
  .-m-inline-start-6 {
    -webkit-margin-start: calc(0rem - var(--sf-space-6));
            margin-inline-start: calc(0rem - var(--sf-space-6));
  }
  .m-inline-6 {
    margin-left: var(--sf-space-6);
    margin-right: var(--sf-space-6);
    margin-inline: var(--sf-space-6);
  }
  .-m-inline-6 {
    margin-left: calc(0rem - var(--sf-space-6));
    margin-right: calc(0rem - var(--sf-space-6));
    margin-inline: calc(0rem - var(--sf-space-6));
  }
  .m-block-6 {
    margin-top: var(--sf-space-6);
    margin-bottom: var(--sf-space-6);
    margin-block: var(--sf-space-6);
  }
  .-m-block-6 {
    margin-top: calc(0rem - var(--sf-space-6));
    margin-bottom: calc(0rem - var(--sf-space-6));
    margin-block: calc(0rem - var(--sf-space-6));
  }
  .m-7 {
    margin: var(--sf-space-7);
  }
  .-m-7 {
    margin: calc(0rem - var(--sf-space-7));
  }
  .m-top-7 {
    margin-top: var(--sf-space-7);
  }
  .-m-top-7 {
    margin-top: calc(0rem - var(--sf-space-7));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-7 {
    margin-right: var(--sf-space-7);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-7 {
    margin-right: var(--sf-space-7);
    }
  }
  .m-inline-end-7:where(:dir(ltr)) {
    margin-right: var(--sf-space-7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-7 {
    margin-left: var(--sf-space-7);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-7 {
    margin-left: var(--sf-space-7);
    }
  }
  .m-inline-end-7:where(:dir(rtl)) {
    margin-left: var(--sf-space-7);
  }
  .m-inline-end-7 {
    -webkit-margin-end: var(--sf-space-7);
            margin-inline-end: var(--sf-space-7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-7 {
    margin-right: calc(0rem - var(--sf-space-7));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-7 {
    margin-right: calc(0rem - var(--sf-space-7));
    }
  }
  .-m-inline-end-7:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-7));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-7 {
    margin-left: calc(0rem - var(--sf-space-7));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-7 {
    margin-left: calc(0rem - var(--sf-space-7));
    }
  }
  .-m-inline-end-7:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-7));
  }
  .-m-inline-end-7 {
    -webkit-margin-end: calc(0rem - var(--sf-space-7));
            margin-inline-end: calc(0rem - var(--sf-space-7));
  }
  .m-bottom-7 {
    margin-bottom: var(--sf-space-7);
  }
  .-m-bottom-7 {
    margin-bottom: calc(0rem - var(--sf-space-7));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-7 {
    margin-left: var(--sf-space-7);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-7 {
    margin-left: var(--sf-space-7);
    }
  }
  .m-inline-start-7:where(:dir(ltr)) {
    margin-left: var(--sf-space-7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-7 {
    margin-right: var(--sf-space-7);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-7 {
    margin-right: var(--sf-space-7);
    }
  }
  .m-inline-start-7:where(:dir(rtl)) {
    margin-right: var(--sf-space-7);
  }
  .m-inline-start-7 {
    -webkit-margin-start: var(--sf-space-7);
            margin-inline-start: var(--sf-space-7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-7 {
    margin-left: calc(0rem - var(--sf-space-7));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-7 {
    margin-left: calc(0rem - var(--sf-space-7));
    }
  }
  .-m-inline-start-7:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-7));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-7 {
    margin-right: calc(0rem - var(--sf-space-7));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-7 {
    margin-right: calc(0rem - var(--sf-space-7));
    }
  }
  .-m-inline-start-7:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-7));
  }
  .-m-inline-start-7 {
    -webkit-margin-start: calc(0rem - var(--sf-space-7));
            margin-inline-start: calc(0rem - var(--sf-space-7));
  }
  .m-inline-7 {
    margin-left: var(--sf-space-7);
    margin-right: var(--sf-space-7);
    margin-inline: var(--sf-space-7);
  }
  .-m-inline-7 {
    margin-left: calc(0rem - var(--sf-space-7));
    margin-right: calc(0rem - var(--sf-space-7));
    margin-inline: calc(0rem - var(--sf-space-7));
  }
  .m-block-7 {
    margin-top: var(--sf-space-7);
    margin-bottom: var(--sf-space-7);
    margin-block: var(--sf-space-7);
  }
  .-m-block-7 {
    margin-top: calc(0rem - var(--sf-space-7));
    margin-bottom: calc(0rem - var(--sf-space-7));
    margin-block: calc(0rem - var(--sf-space-7));
  }
  .m-8 {
    margin: var(--sf-space-8);
  }
  .-m-8 {
    margin: calc(0rem - var(--sf-space-8));
  }
  .m-top-8 {
    margin-top: var(--sf-space-8);
  }
  .-m-top-8 {
    margin-top: calc(0rem - var(--sf-space-8));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-end-8 {
    margin-right: var(--sf-space-8);
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .m-inline-end-8 {
    margin-right: var(--sf-space-8);
    }
  }
  .m-inline-end-8:where(:dir(ltr)) {
    margin-right: var(--sf-space-8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-end-8 {
    margin-left: var(--sf-space-8);
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .m-inline-end-8 {
    margin-left: var(--sf-space-8);
    }
  }
  .m-inline-end-8:where(:dir(rtl)) {
    margin-left: var(--sf-space-8);
  }
  .m-inline-end-8 {
    -webkit-margin-end: var(--sf-space-8);
            margin-inline-end: var(--sf-space-8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-end-8 {
    margin-right: calc(0rem - var(--sf-space-8));
  }
  @supports not (margin-inline-end: initial) {
  html:not([dir="rtl"]) .-m-inline-end-8 {
    margin-right: calc(0rem - var(--sf-space-8));
    }
  }
  .-m-inline-end-8:where(:dir(ltr)) {
    margin-right: calc(0rem - var(--sf-space-8));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-end-8 {
    margin-left: calc(0rem - var(--sf-space-8));
  }
  @supports not (margin-inline-end: initial) {
  [dir="rtl"] .-m-inline-end-8 {
    margin-left: calc(0rem - var(--sf-space-8));
    }
  }
  .-m-inline-end-8:where(:dir(rtl)) {
    margin-left: calc(0rem - var(--sf-space-8));
  }
  .-m-inline-end-8 {
    -webkit-margin-end: calc(0rem - var(--sf-space-8));
            margin-inline-end: calc(0rem - var(--sf-space-8));
  }
  .m-bottom-8 {
    margin-bottom: var(--sf-space-8);
  }
  .-m-bottom-8 {
    margin-bottom: calc(0rem - var(--sf-space-8));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .m-inline-start-8 {
    margin-left: var(--sf-space-8);
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .m-inline-start-8 {
    margin-left: var(--sf-space-8);
    }
  }
  .m-inline-start-8:where(:dir(ltr)) {
    margin-left: var(--sf-space-8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .m-inline-start-8 {
    margin-right: var(--sf-space-8);
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .m-inline-start-8 {
    margin-right: var(--sf-space-8);
    }
  }
  .m-inline-start-8:where(:dir(rtl)) {
    margin-right: var(--sf-space-8);
  }
  .m-inline-start-8 {
    -webkit-margin-start: var(--sf-space-8);
            margin-inline-start: var(--sf-space-8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .-m-inline-start-8 {
    margin-left: calc(0rem - var(--sf-space-8));
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .-m-inline-start-8 {
    margin-left: calc(0rem - var(--sf-space-8));
    }
  }
  .-m-inline-start-8:where(:dir(ltr)) {
    margin-left: calc(0rem - var(--sf-space-8));
  }
  _:-ms-input-placeholder, [dir="rtl"] .-m-inline-start-8 {
    margin-right: calc(0rem - var(--sf-space-8));
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .-m-inline-start-8 {
    margin-right: calc(0rem - var(--sf-space-8));
    }
  }
  .-m-inline-start-8:where(:dir(rtl)) {
    margin-right: calc(0rem - var(--sf-space-8));
  }
  .-m-inline-start-8 {
    -webkit-margin-start: calc(0rem - var(--sf-space-8));
            margin-inline-start: calc(0rem - var(--sf-space-8));
  }
  .m-inline-8 {
    margin-left: var(--sf-space-8);
    margin-right: var(--sf-space-8);
    margin-inline: var(--sf-space-8);
  }
  .-m-inline-8 {
    margin-left: calc(0rem - var(--sf-space-8));
    margin-right: calc(0rem - var(--sf-space-8));
    margin-inline: calc(0rem - var(--sf-space-8));
  }
  .m-block-8 {
    margin-top: var(--sf-space-8);
    margin-bottom: var(--sf-space-8);
    margin-block: var(--sf-space-8);
  }
  .-m-block-8 {
    margin-top: calc(0rem - var(--sf-space-8));
    margin-bottom: calc(0rem - var(--sf-space-8));
    margin-block: calc(0rem - var(--sf-space-8));
  }
}

/* docara-shell-source: runtime/utility/max-container/default/css/default.css */
@layer sf.utilities {
  .max-container-1 .container {
    width: 100%;
  }
  .max-container-2 .container {
    width: 100%;
  }
  .max-container-3 .container {
    width: 100%;
  }
  .max-container-4 .container {
    width: 100%;
  }
  .max-container-5 .container {
    width: 100%;
  }
  .max-container-6 .container {
    width: 100%;
  }
  .max-container-7 .container {
    width: 100%;
  }
  .max-container-8 .container {
    width: 100%;
  }
  @media (min-width: 60rem) {
    .max-container-1 .container {
      max-width: var(--sf-container-1--size-max);
    }
    .max-container-2 .container {
      max-width: var(--sf-container-2--size-max);
    }
    .max-container-3 .container {
      max-width: var(--sf-container-3--size-max);
    }
    .max-container-4 .container {
      max-width: var(--sf-container-4--size-max);
    }
    .max-container-5 .container {
      max-width: var(--sf-container-5--size-max);
    }
    .max-container-6 .container {
      max-width: var(--sf-container-6--size-max);
    }
    .max-container-7 .container {
      max-width: var(--sf-container-7--size-max);
    }
    .max-container-8 .container {
      max-width: var(--sf-container-8--size-max);
    }
  }
}