/* docara-shell-source: runtime/component/doc/css/doc.css */
@layer sf.components {
  code,
  .sf-doc-code,
  .t-source {
    font-family: var(--sf-mono);
  }
  .sf-doc-lead,
  .t-lead {
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-large--size);
    line-height: var(--sf-text-large--height);
  }
  * + .sf-doc-example {
    margin-top: var(--sf-text--space-bottom);
    -webkit-margin-before: var(--sf-text--space-bottom);
            margin-block-start: var(--sf-text--space-bottom);
  }
  * + .example {
    margin-top: var(--sf-text--space-bottom);
    -webkit-margin-before: var(--sf-text--space-bottom);
            margin-block-start: var(--sf-text--space-bottom);
  }
  .sf-doc-pair {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
  }
  .sf-doc-example,
  .example {
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    padding: var(--sf-space-3);
    word-wrap: anywhere;
    background-color: var(--sf-surface-container);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border-radius: var(--sf-radius--surface);
    color: var(--sf-on-surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-playground + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-playground + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .example + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .example + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-example:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-example:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-playground:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-playground:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .example:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .example:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-source,
  .source {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    margin-bottom: var(--sf-text--space-bottom);
    -webkit-margin-after: var(--sf-text--space-bottom);
            margin-block-end: var(--sf-text--space-bottom);
    overflow: auto;
    background-color: var(--sf-surface-inverse);
    border-radius: var(--sf-radius--surface);
    color: var(--sf-on-surface-inverse);
    -moz-tab-size: 2;
      -o-tab-size: 2;
         tab-size: 2;
  }
  .sf-doc-source code {
    color: inherit;
  }
  .source code {
    color: inherit;
  }
  .sf-doc-stripes,
  .bg-stripes {
    --sf-doc-pattern-color: var(--sf-surface-1);
    background-image: repeating-linear-gradient(-45deg, var(--sf-doc-pattern-color) 0,var(--sf-doc-pattern-color) 25%, var(--sf-transparent) 25%, var(--sf-transparent) 50%);
    background-image: repeating-linear-gradient(-45deg, var(--sf-doc-pattern-color) 0 25%, var(--sf-transparent) 25% 50%);
    background-size: var(--sf-space-2) var(--sf-space-2);
  }
  .bg-stripes-white {
    --sf-doc-pattern-color: var(--sf-surface-0);
  }
  .bg-stripes-blue {
    --sf-doc-pattern-color: var(--sf-info-container);
  }
  .sf-doc-checkerboard,
  .bg-checkered {
    background-color: var(--sf-surface-0);
    background-image: conic-gradient(var(--sf-surface-1) 25%, var(--sf-transparent) 0,var(--sf-transparent) 50%, var(--sf-surface-1) 0,var(--sf-surface-1) 75%, var(--sf-transparent) 0);
    background-image: conic-gradient(var(--sf-surface-1) 25%, var(--sf-transparent) 0 50%, var(--sf-surface-1) 0 75%, var(--sf-transparent) 0);
    background-size: var(--sf-space-2) var(--sf-space-2);
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: bold;
  }
  @media (forced-colors: active) {
    .sf-doc-example,
    .example,
    .sf-doc-source,
    .source {
      border-color: CanvasText;
    }
    .sf-doc-stripes,
    .bg-stripes,
    .sf-doc-checkerboard,
    .bg-checkered {
      background: Canvas;
      border: var(--sf-px) solid CanvasText;
    }
  }
}

/* docara-shell-source: runtime/component/inputs/css/inputs.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  .sf-input .sf-input-field input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .sf-input .sf-input-right,
  .sf-input .sf-input-field > .sf-icon,
  .sf-input .sf-input-field > .sf-icon-hint {
    flex-shrink: 0;
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/4) justify-content/flex-start (.justify-start) */
  .sf-input {
    min-width: 0;
    min-inline-size: 0;
    --sf-input--radius: var(--sf-input-radius, var(--sf-radius--ui));
    background-color: transparent;
    background-color: var(--sf-input--background-color, transparent);
    gap: var(--sf-space-1\/4);
    gap: var(--sf-input--gap, var(--sf-space-1\/4));
  }
  .sf-input .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--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));
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-input-field--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-input-field--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-bottom-left-radius: var(--sf-input-field--border-end-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-input-field--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-bottom-right-radius: var(--sf-input-field--border-end-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-input-field--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-input-field--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-end-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-input-field--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    border-top-left-radius: var(--sf-input-field--border-start-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-input-field--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    border-top-right-radius: var(--sf-input-field--border-start-start-radius);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-input-field--border-start-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-end);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    padding-right: var(--sf-input-field--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-end);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    padding-left: var(--sf-input-field--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field {
    padding-left: var(--sf-input-field--padding-inline-start);
    }
  }
  .sf-input .sf-input-field:where(:dir(ltr)) {
    padding-left: var(--sf-input-field--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-input .sf-input-field {
    padding-right: var(--sf-input-field--padding-inline-start);
    }
  }
  .sf-input .sf-input-field:where(:dir(rtl)) {
    padding-right: var(--sf-input-field--padding-inline-start);
  }
  .sf-input .sf-input-field {
    min-width: 0;
    min-inline-size: 0;
    --sf-input-field--border: var(--sf-px) solid;
    --sf-input-field--border-end-end-radius: var(--sf-input--radius);
    --sf-input-field--border-end-start-radius: var(--sf-input--radius);
    --sf-input-field--border-start-end-radius: var(--sf-input--radius);
    --sf-input-field--border-start-start-radius: var(--sf-input--radius);
    background-color: var(--sf-input-field--background-color);
    border: 0 solid;
    border: var(--sf-input-field--border, 0 solid);
    border-color: transparent;
    border-color: var(--sf-input-field--border-color, transparent);
    border-end-end-radius: var(--sf-input-field--border-end-end-radius);
    border-end-start-radius: var(--sf-input-field--border-end-start-radius);
    border-start-end-radius: var(--sf-input-field--border-start-end-radius);
    border-start-start-radius: var(--sf-input-field--border-start-start-radius);
    box-shadow: var(--sf-input-field--box-shadow);
    padding-bottom: var(--sf-input-field--padding-bottom);
    -webkit-padding-end: var(--sf-input-field--padding-inline-end);
            padding-inline-end: var(--sf-input-field--padding-inline-end);
    -webkit-padding-start: var(--sf-input-field--padding-inline-start);
            padding-inline-start: var(--sf-input-field--padding-inline-start);
    padding-top: var(--sf-input-field--padding-top);
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--sf-animation);
  }
  .sf-input .sf-input-hint {
    --sf-input-hint--background-color: transparent;
    background-color: var(--sf-input-hint--background-color);
  }
  /* utility-hint: flex/1 (.flex-1) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-end);
    }
  }
  .sf-input .sf-input-field input:where(:dir(ltr)) {
    padding-right: var(--sf-input-input--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-end);
    }
  }
  .sf-input .sf-input-field input:where(:dir(rtl)) {
    padding-left: var(--sf-input-input--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-field input {
    padding-left: var(--sf-input-input--padding-inline-start);
    }
  }
  .sf-input .sf-input-field input:where(:dir(ltr)) {
    padding-left: var(--sf-input-input--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-input .sf-input-field input {
    padding-right: var(--sf-input-input--padding-inline-start);
    }
  }
  .sf-input .sf-input-field input:where(:dir(rtl)) {
    padding-right: var(--sf-input-input--padding-inline-start);
  }
  .sf-input .sf-input-field input {
    min-width: 0;
    min-inline-size: 0;
    --sf-input-input--background-color: transparent;
    background-color: var(--sf-input-input--background-color);
    color: var(--sf-input-input--color);
    color: var(--sf-input-color, var(--sf-input-input--color));
    font-family: var(--sf-input-input--font-family);
    font-size: var(--sf-input-input--font-size);
    line-height: var(--sf-input-input--line-height);
    -webkit-padding-end: var(--sf-input-input--padding-inline-end);
            padding-inline-end: var(--sf-input-input--padding-inline-end);
    -webkit-padding-start: var(--sf-input-input--padding-inline-start);
            padding-inline-start: var(--sf-input-input--padding-inline-start);
  }
  .sf-input .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface-variant);
    --sf-input-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-input-placeholder--color);
    font-family: var(--sf-input-placeholder--font-family);
    font-size: var(--sf-input-placeholder--font-size);
    line-height: var(--sf-input-placeholder--line-height);
  }
  .sf-input.sf-input--filled .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--filled .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-surface);
  }
  .sf-input .sf-input-left {
    --sf-input-left--background-color: transparent;
    background-color: var(--sf-input-left--background-color);
  }
  /* 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-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-end);
    }
  }
  .sf-input .sf-input-right:where(:dir(ltr)) {
    padding-right: var(--sf-input-right--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-end);
    }
  }
  .sf-input .sf-input-right:where(:dir(rtl)) {
    padding-left: var(--sf-input-right--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-input .sf-input-right {
    padding-left: var(--sf-input-right--padding-inline-start);
    }
  }
  .sf-input .sf-input-right:where(:dir(ltr)) {
    padding-left: var(--sf-input-right--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-input .sf-input-right {
    padding-right: var(--sf-input-right--padding-inline-start);
    }
  }
  .sf-input .sf-input-right:where(:dir(rtl)) {
    padding-right: var(--sf-input-right--padding-inline-start);
  }
  .sf-input .sf-input-right {
    --sf-input-right--background-color: transparent;
    background-color: var(--sf-input-right--background-color);
    -webkit-padding-end: var(--sf-input-right--padding-inline-end);
            padding-inline-end: var(--sf-input-right--padding-inline-end);
    -webkit-padding-start: var(--sf-input-right--padding-inline-start);
            padding-inline-start: var(--sf-input-right--padding-inline-start);
  }
  .sf-input .sf-input-text {
    --sf-input-text--color: var(--sf-on-surface-variant);
    --sf-input-text--font-family: var(--sf-text--family);
    --sf-input-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-input-text--color);
    font-family: var(--sf-input-text--font-family);
    font-size: var(--sf-input-text--font-size);
    font-weight: var(--sf-input-text--font-weight);
    line-height: var(--sf-input-text--line-height);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-b0) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-input .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--background-color: transparent;
    background-color: var(--sf-input-hint-text-wrap--background-color);
    color: var(--sf-input-hint-text-wrap--color);
    font-family: var(--sf-input-hint-text-wrap--font-family);
    font-size: var(--sf-input-hint-text-wrap--font-size);
    font-weight: var(--sf-input-hint-text-wrap--font-weight);
    gap: var(--sf-b0);
    line-height: var(--sf-input-hint-text-wrap--line-height);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-input-label--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-input .sf-input-label {
    --sf-input-label--background-color: transparent;
    --sf-input-label--gap: var(--sf-space-1\/4);
    background-color: var(--sf-input-label--background-color);
    gap: var(--sf-input-label--gap);
  }
  .sf-input .sf-input-required {
    --sf-input-required--color: var(--sf-error);
    --sf-input-required--font-family: var(--sf-text--family);
    --sf-input-required--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-input-required--color);
    font-family: var(--sf-input-required--font-family);
    font-size: var(--sf-input-required--font-size);
    font-weight: var(--sf-input-required--font-weight);
    line-height: var(--sf-input-required--line-height);
  }
  .sf-input.sf-input--size-1 .sf-input-field .sf-input-right .sf-input-text, .sf-input.sf-input--size-2 .sf-input-label .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-1);
    --sf-input-text--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--bordered > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--filled > .sf-input-field > .sf-input-hint > .sf-icon {
    /* A glyph is non-text graphics, and WCAG 1.4.11 asks 3:1 of it.
     --sf-on-surface-muted is 3.18:1 light and 2.92:1 dark, so it sat on the
     line in one theme and under it in the other. --sf-on-surface-variant is
     the Framework's own paler-than-text role, 6.47 and 5.95, and the one a
     label already reads in (owner, 2026-10-08). */
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-left .sf-icon, .sf-input.sf-input--size-1 > .sf-input-field > .sf-icon {
    --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-input.sf-input--size-1 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-input.sf-input--size-1 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/2);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1 .sf-input-hint-text-wrap, .sf-input.sf-input--size-2 .sf-input-hint-text-wrap, .sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-family: var(--sf-text--family);
    --sf-input-hint-text-wrap--font-weight: var(--sf-font-weight-regular);
  }
  .sf-input.sf-input--bordered .sf-input-hint-text-wrap, .sf-input.sf-input--filled .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--color: var(--sf-on-surface-variant);
  }
  .sf-input.sf-input--size-1 input {
    --sf-input-input--font-size: var(--sf-text-size-1);
    --sf-input-input--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 input, .sf-input.sf-input--size-2 input, .sf-input.sf-input--size-1\/2 input {
    --sf-input-input--font-family: var(--sf-text--family);
  }
  .sf-input.sf-input--bordered input, .sf-input.sf-input--filled input {
    --sf-input-input--color: var(--sf-on-surface);
  }
  .sf-input.sf-input--size-1 .sf-input-label .sf-input-text, .sf-input.sf-input--size-1\/2 .sf-input-field .sf-input-right .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-1\/2);
    --sf-input-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-1\/2);
    --sf-input-required--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-input.error.sf-input--bordered .sf-input-field {
    --sf-input-field--background-color: var(--sf-transparent-for-focus);
    --sf-input-field--border-color: var(--sf-error);
  }
  .sf-input.error.sf-input--bordered .sf-input-hint-text-wrap, .sf-input.error.sf-input--filled .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--color: var(--sf-error);
  }
  .sf-input.error.sf-input--filled .sf-input-field {
    --sf-input-field--background-color: var(--sf-error-container);
  }
  .sf-input.sf-input--size-2 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-input.sf-input--size-2 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-1);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-1);
    --sf-input-required--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-input.sf-input--size-2 .sf-input-field .sf-input-right .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-2);
    --sf-input-text--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-left .sf-icon, .sf-input.sf-input--size-2 > .sf-input-field > .sf-icon {
    --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-input.sf-input--size-2 input {
    --sf-input-input--font-size: var(--sf-text-size-2);
    --sf-input-input--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-label .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-1\/3);
    --sf-input-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-left .sf-icon, .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-icon {
    --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-input.sf-input--size-1\/2 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/3);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/2 input {
    --sf-input-input--font-size: var(--sf-text-size-1\/2);
    --sf-input-input--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-1\/3);
    --sf-input-required--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-input.sf-input--size-1 .sf-input-field {
    height: var(--sf-ui-1--control-height);
    block-size: var(--sf-ui-1--control-height);
    --sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));
    --sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));
    --sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));
    --sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-input.sf-input--size-1 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-1 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1);
    --sf-input-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 .sf-input-field {
    height: var(--sf-ui-2--control-height);
    block-size: var(--sf-ui-2--control-height);
    --sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));
    --sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));
    --sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));
    --sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-input.sf-input--size-2 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-2 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-2);
    --sf-input-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field {
    height: var(--sf-ui-1\/2--control-height);
    block-size: var(--sf-ui-1\/2--control-height);
    --sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));
    --sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));
    --sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.sf-input--size-1\/2 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-input.error > .sf-input-field > .sf-input-hint > .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
}
@layer sf.states {
  .sf-input:not(.error).sf-input--bordered[\:not-has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline));
  }
  .sf-input:not(.error).sf-input--bordered:not(:has(input:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline));
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary);
  }
  .sf-input.sf-input--bordered[\:has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline-disable);
  }
  .sf-input.sf-input--bordered:has(input:disabled) .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline-disable);
  }
  .sf-input.sf-input--bordered[\:has\(input\:disabled\)] input, .sf-input.sf-input--filled[\:has\(input\:disabled\)] input {
    --sf-input-input--color: var(--sf-on-disable);
  }
  .sf-input.sf-input--bordered:has(input:disabled) input, .sf-input.sf-input--filled:has(input:disabled) input {
    --sf-input-input--color: var(--sf-on-disable);
  }
  .sf-input.sf-input--filled[\:has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-disable);
  }
  .sf-input.sf-input--filled:has(input:disabled) .sf-input-field {
    --sf-input-field--background-color: var(--sf-disable);
  }
  .sf-input:not(.error).sf-input--filled[\:not-has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus));
  }
  .sf-input:not(.error).sf-input--filled:not(:has(input:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));
    --sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus));
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container-hover);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-active);
  }
  .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-left .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input:has(input:disabled) > .sf-input-field > .sf-input-left .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-field input::placeholder {
    --sf-input-placeholder--color: var(--sf-on-disable);
  }
  .sf-input[\:has\(input\:disabled\)] .sf-input-text {
    --sf-input-text--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) .sf-input-text {
    --sf-input-text--color: var(--sf-on-disable);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field {
    --sf-input-field--border-color: var(--sf-primary-hover);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  /* The ring belongs to the field the person sees, not to the bare control
     inside it. An outline keeps the field's own shadow free for state. */
  .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-input-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  /* The global :focus-visible rule paints the ring on whatever holds the focus.
     Here the focus lives on the bare control while the ring belongs to the part
     the person sees, so the control gives its own ring up: one component, one
     ring.

     Not only for keyboard focus. A text field matches :focus-visible on a mouse
     click too -- browsers decide that deliberately, because the person is about
     to type -- so gating this on :not(--pointer-focus) did not remove the ring,
     it moved it: off the field, onto the bare input inside, where it drew a
     tight square inside the rounded field. The field's border already turns to
     the focus colour in both cases and is what marks the focus after a click. */
  .sf-input input.focus-visible {
    outline: none;
  }
  .sf-input input:focus-visible {
    outline: none;
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:-moz-read-only\:not\(\:disabled\)\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
  .sf-input:not(.error).sf-input--bordered[\:has\(input\:read-only\:not\(\:disabled\)\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:-moz-read-only:not(:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
  .sf-input:not(.error).sf-input--bordered:has(input:read-only:not(:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-container);
  }
}
@layer sf.states {
  @media (prefers-reduced-motion: reduce) {
    .sf-input .sf-input-field {
      transition-duration: 0s;
    }
  }
}
@layer sf.states {
  @media (forced-colors: active) {
    .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
    .sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled).focus-visible) .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
    .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
    .sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled):focus-visible) .sf-input-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-input-field--box-shadow: none;
    }
  }
}
/* A filled field reads as a field only by its fill, so while someone is typing
   in it -- focus anywhere inside, by pointer or keyboard -- it becomes the
   ordinary field: the surface of a bordered field and a visible boundary. The
   fill comes back when focus leaves. Error, disabled and read-only fields keep
   their own look. */
@layer sf.states {
  /* In sf.states with the filled rest and hover rules it has to follow. */
  /* Focus anywhere within the field changes the fill, not the focus ring,
     which stays keyboard-only (:focus-visible) under the field focus
     contract. */
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\[focus-within\]\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\[focus-within\]\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only)[focus-within]) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only)[focus-within]) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:focus-within\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:focus-within\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):focus-within) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  .sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):focus-within) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
  }
  /* The boundary of the ordinary field. Without it the field was the surface
     with a transparent border: visible while the pointer hovered it, gone as
     soon as the pointer left, with the caret still inside -- and invisible on a
     surface-0 panel such as the dropdown list. Lighter than the hover rule, so
     hover still colours it. */
  .sf-input:not(.error).sf-input--filled[\:has\(input\[focus-within\]\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
  .sf-input:not(.error).sf-input--filled:has(input[focus-within]) .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
  .sf-input:not(.error).sf-input--filled[\:has\(input\:focus-within\)] .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
  .sf-input:not(.error).sf-input--filled:has(input:focus-within) .sf-input-field {
    --sf-input-field--border-color: var(--sf-outline);
  }
}

/* docara-shell-source: runtime/component/kbd/css/kbd.css */
@layer sf.components {
  :where(kbd:not(.sf-kbd--group), .sf-kbd:not(.sf-kbd--group)) {
    --sf-kbd--min-block-size: var(--sf-text-height-1\/3);
    --sf-kbd--min-inline-size: var(--sf-text-height-1\/3);
    --sf-kbd--padding-block: var(--sf-space-1\/4);
    --sf-kbd--padding-inline: var(--sf-space-1\/2);
    --sf-kbd--color: var(--sf-on-surface);
    --sf-kbd--background: var(--sf-surface-container);
    --sf-kbd--border-color: var(--sf-outline-variant);
    --sf-kbd--border-width: var(--sf-px);
    --sf-kbd--radius: var(--sf-radius--ui);
    --sf-kbd--font-family: var(--sf-mono);
    --sf-kbd--font-size: var(--sf-text-size-1\/3);
    --sf-kbd--font-weight: var(--sf-font-weight-medium);
    --sf-kbd--line-height: var(--sf-text-height-1\/3);
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: var(--sf-kbd--min-block-size);
    min-block-size: var(--sf-kbd--min-block-size);
    min-width: var(--sf-kbd--min-inline-size);
    min-inline-size: var(--sf-kbd--min-inline-size);
    padding-top: var(--sf-kbd--padding-block);
    padding-bottom: var(--sf-kbd--padding-block);
    padding-block: var(--sf-kbd--padding-block);
    padding-left: var(--sf-kbd--padding-inline);
    padding-right: var(--sf-kbd--padding-inline);
    padding-inline: var(--sf-kbd--padding-inline);
    color: var(--sf-kbd--color);
    background: var(--sf-kbd--background);
    border: var(--sf-kbd--border-width) solid var(--sf-kbd--border-color);
    border-radius: var(--sf-kbd--radius);
    font-family: var(--sf-kbd--font-family);
    font-size: var(--sf-kbd--font-size);
    font-weight: var(--sf-kbd--font-weight);
    line-height: var(--sf-kbd--line-height);
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd[\:has\(\%3E\%20kbd\)],
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd[\:has\(\%3E\%20kbd\)],
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd:has(> kbd),
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  @media (forced-colors: active) {
    :where(kbd:not(.sf-kbd--group), .sf-kbd:not(.sf-kbd--group)) {
      border-color: CanvasText;
    }
  }
}

/* docara-shell-source: runtime/component/menu/css/menu.css */
@layer sf.components {
  .sf-menu {
    list-style: none;
    margin: var(--sf-0);
    padding: var(--sf-0);
  }
  .sf-menu > .sf-menu-item {
    list-style: none;
    margin: var(--sf-0);
    padding: var(--sf-0);
  }
  .sf-menu > .sf-menu-item:not(.open) > .sf-menu {
    display: none;
  }
}
@layer sf.components {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .sf-menu-element {
    text-align: left;
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .sf-menu-element {
    text-align: right;
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    text-align: right;
  }
  .sf-menu-element {
    --sf-menu-element--background-color: var(--sf-transparent);
    --sf-menu-element--border-color: var(--sf-surface-container);
    --sf-menu-element--border-width: var(--sf-px);
    --sf-menu-element--color: var(--sf-on-surface);
    --sf-menu-element--gap: var(--sf-space-1\/3);
    --sf-menu-element--radius: var(--sf-radius--ui);
    display: flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-menu-element--gap);
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    width: 100%;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    margin: var(--sf-0);
    /* A row is a size 1 control: the padding gives up the border, so the
       row is 40px like a field, not 42. */
    padding-top: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    -webkit-padding-before: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
            padding-block-start: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-top: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-top: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    -webkit-padding-before: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
            padding-block-start: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    padding-bottom: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    -webkit-padding-after: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
            padding-block-end: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-bottom: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-bottom: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    -webkit-padding-after: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
            padding-block-end: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    -webkit-padding-end: var(--sf-space-1);
            padding-inline-end: var(--sf-space-1);
    -webkit-padding-end: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
            padding-inline-end: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
    -webkit-padding-start: var(--sf-space-1);
            padding-inline-start: var(--sf-space-1);
    -webkit-padding-start: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
            padding-inline-start: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
    border-color: var(--sf-menu-element--border-color);
    border-style: solid;
    border-style: var(--sf-menu-element--border-style, solid);
    border-top-width: var(--sf-menu-element--border-width);
    border-block-start-width: var(--sf-menu-element--border-width);
    border-top-width: var(--sf-menu-element--border-width);
    border-top-width: var(--sf-menu-element--border-top-width, var(--sf-menu-element--border-width));
    border-block-start-width: var(--sf-menu-element--border-top-width, var(--sf-menu-element--border-width));
    border-bottom-width: var(--sf-menu-element--border-width);
    border-block-end-width: var(--sf-menu-element--border-width);
    border-bottom-width: var(--sf-menu-element--border-width);
    border-bottom-width: var(--sf-menu-element--border-bottom-width, var(--sf-menu-element--border-width));
    border-block-end-width: var(--sf-menu-element--border-bottom-width, var(--sf-menu-element--border-width));
    border-inline-start-width: var(--sf-menu-element--border-width);
    border-inline-start-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
    border-inline-end-width: var(--sf-menu-element--border-width);
    border-inline-end-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
    border-start-start-radius: var(--sf-menu-element--radius);
    border-start-start-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
    border-start-end-radius: var(--sf-menu-element--radius);
    border-start-end-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
    border-end-start-radius: var(--sf-menu-element--radius);
    border-end-start-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
    border-end-end-radius: var(--sf-menu-element--radius);
    border-end-end-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
    color: var(--sf-menu-element--color);
    background-color: var(--sf-menu-element--background-color);
    font-family: var(--sf-text--family);
    font-family: var(--sf-menu-element--font-family, var(--sf-text--family));
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-menu-element--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-menu-element--font-weight, var(--sf-font-weight-regular));
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-menu-element--line-height, var(--sf-text-height-1));
    text-align: start;
    text-decoration: none;
  }
  button.sf-menu-element,
  a.sf-menu-element,
  .sf-menu-element[role=button] {
    cursor: pointer;
  }
  button.sf-menu-element {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .sf-menu-element .sf-menu-element-wrap {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--sf-space-1\/3);
    gap: var(--sf-menu-element-wrap--gap, var(--sf-space-1\/3));
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    color: inherit;
    font: inherit;
  }
  .sf-menu-element-text {
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    word-wrap: anywhere;
  }
  .sf-menu-element-icon,
  .sf-menu-element > .sf-icon-button {
    flex: none;
  }
  .sf-menu-element.disabled,
  .sf-menu-element:disabled,
  .sf-menu-element[aria-disabled=true] {
    --sf-menu-element--background-color: var(--sf-disable);
    --sf-menu-element--border-color: var(--sf-outline-disable);
    --sf-menu-element--color: var(--sf-on-disable);
    cursor: default;
  }
  .sf-menu-element.disabled .sf-icon,
  .sf-menu-element:disabled .sf-icon,
  .sf-menu-element[aria-disabled=true] .sf-icon {
    --sf-icon--color: currentColor;
  }
  .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]):hover {
    --sf-menu-element--background-color: var(--sf-surface-container-hover);
    --sf-menu-element--border-color: var(--sf-surface-container-hover);
  }
  .sf-menu-element.open,
  .sf-menu-element[aria-expanded=true] {
    --sf-menu-element--background-color: var(--sf-surface-container-active);
    --sf-menu-element--border-color: var(--sf-surface-container-active);
  }
  .sf-menu-element[aria-expanded=false]:dir(rtl) > .sf-icon-button .sf-icon {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
  .sf-menu-element:focus {
    outline: none;
  }
  .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible,
  .sf-menu-element > .sf-icon-button:not(:disabled).focus-visible {
    position: relative;
    z-index: 1;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible,
  .sf-menu-element > .sf-icon-button:not(:disabled):focus-visible {
    position: relative;
    z-index: 1;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-menu-element--level-1 {
    --sf-menu-element--padding-inline-start: var(--sf-space-1);
  }
  .sf-menu-element--level-2 {
    --sf-menu-element--padding-inline-start: var(--sf-space-3);
  }
  .sf-menu-element--level-3 {
    --sf-menu-element--padding-inline-start: var(--sf-space-4);
  }
  .sf-menu-element--level-4 {
    --sf-menu-element--padding-inline-start: var(--sf-space-5);
  }
  @media (forced-colors: active) {
    .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible,
    .sf-menu-element > .sf-icon-button:not(:disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      box-shadow: none;
    }
    .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible,
    .sf-menu-element > .sf-icon-button:not(:disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      box-shadow: none;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/3) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-menu {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    background-color: transparent;
    background-color: var(--sf-menu--background-color, transparent);
    gap: var(--sf-space-1\/3);
    gap: var(--sf-menu--gap, var(--sf-space-1\/3));
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-menu-item--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-menu .sf-menu-item {
    --sf-menu-item--background-color: transparent;
    --sf-menu-item--gap: var(--sf-space-1\/3);
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    background-color: var(--sf-menu-item--background-color);
    gap: var(--sf-menu-item--gap);
  }
  /* The root level becomes a row; every submenu keeps the ordinary vertical menu model. */
  .sf-menu.sf-menu--horizontal {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item {
    position: relative;
    flex: 0 0 auto;
    max-width: none;
    max-inline-size: none;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu-element {
    width: auto;
    inline-size: auto;
    max-width: none;
    max-inline-size: none;
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item {
    position: relative;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu,
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    position: absolute;
    z-index: 3;
    z-index: var(--sf-menu-horizontal-submenu--z-index, 3);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    inline-size: -webkit-max-content;
    inline-size: -moz-max-content;
    inline-size: max-content;
    min-width: 100%;
    min-inline-size: 100%;
    max-width: calc(100vw - var(--sf-space-2));
    max-inline-size: calc(100vw - var(--sf-space-2));
    padding: var(--sf-space-1\/3);
    padding: var(--sf-menu-horizontal-submenu--padding, var(--sf-space-1\/3));
    border: var(--sf-px) solid var(--sf-outline-variant);
    border: var(--sf-px) solid var(--sf-menu-horizontal-submenu--border-color, var(--sf-outline-variant));
    border-radius: var(--sf-radius--ui);
    border-radius: var(--sf-menu-horizontal-submenu--radius, var(--sf-radius--ui));
    background: var(--sf-elevation-2--surface);
    background: var(--sf-menu-horizontal-submenu--background-color, var(--sf-elevation-2--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-2--variant);
    box-shadow: var(--sf-elevation-2--shadow);
    box-shadow: var(--sf-menu-horizontal-submenu--box-shadow, var(--sf-elevation-2--shadow));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    left: 0;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    right: 0;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu:where(:dir(rtl)) {
    right: 0;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    top: 100%;
    inset-block-start: 100%;
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    left: 100%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    left: 100%;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu:where(:dir(ltr)) {
    left: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    right: 100%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    right: 100%;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu:where(:dir(rtl)) {
    right: 100%;
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    top: 0;
    inset-block-start: 0;
    inset-inline-start: 100%;
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-element {
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    --sf-menu-element--padding-inline-start: var(--sf-space-1);
  }
  /* Documentation navigation is a public presentation preset for nested menus. */
  .sf-menu.sf-menu--documentation-tree,
  .sf-menu.sf-menu--documentation-tree .sf-menu {
    --sf-menu--gap: var(--sf-space-1\/4);
    list-style: none;
    margin: var(--sf-0);
    padding: var(--sf-0);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element {
    --sf-menu-element--border-width: var(--sf-0);
    --sf-menu-element--padding-top: var(--sf-0);
    --sf-menu-element--padding-bottom: var(--sf-0);
    --sf-menu-element--padding-right: var(--sf-0);
    min-width: var(--sf-0);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap {
    min-width: var(--sf-0);
    padding-top: var(--sf-space-1\/3);
    padding-bottom: var(--sf-space-1\/3);
    padding-block: var(--sf-space-1\/3);
    padding-left: var(--sf-space-1);
    padding-right: var(--sf-space-1);
    padding-inline: var(--sf-space-1);
    word-wrap: anywhere;
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-1 {
    --sf-menu-element--padding-inline-start: var(--sf-0);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-2 {
    --sf-menu-element--padding-inline-start: var(--sf-space-1);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-3 {
    --sf-menu-element--padding-inline-start: var(--sf-space-2);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-4 {
    --sf-menu-element--padding-inline-start: var(--sf-space-3);
  }
  .sf-menu.sf-menu--documentation-tree [aria-current=page] {
    background: var(--sf-surface-container-active);
    color: var(--sf-on-surface);
    font-weight: var(--sf-font-weight-medium);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
}

/* docara-shell-source: runtime/utility/min-height/default/css/default.css */
@layer sf.utilities {
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .min-h-min {
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
  }
  .min-h-max {
    min-height: -webkit-max-content;
    min-height: -moz-max-content;
    min-height: max-content;
  }
  .min-h-fit {
    min-height: -webkit-fit-content;
    min-height: -moz-fit-content;
    min-height: fit-content;
  }
  .min-h-0 {
    min-height: 0;
  }
}

/* docara-shell-source: runtime/utility/min-width/default/css/default.css */
@layer sf.utilities {
  .min-w-min {
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
  }
  .min-w-max {
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
  }
  .min-w-fit {
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
  .min-w-full {
    min-width: 100%;
  }
  .min-w-0 {
    min-width: 0;
  }
}

/* docara-shell-source: runtime/utility/overflow/default/css/default.css */
@layer sf.utilities {
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-hidden {
    overflow-y: hidden;
  }
  .overflow-x-visible {
    overflow-x: visible;
  }
  .overflow-y-visible {
    overflow-y: visible;
  }
  .overflow-x-scroll {
    overflow-x: scroll;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
}

/* docara-shell-source: runtime/utility/padding/default/css/default.css */
@layer sf.utilities {
  .p-0 {
    padding: var(--sf-space-0);
  }
  .p-top-0 {
    padding-top: var(--sf-space-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-0 {
    padding-right: var(--sf-space-0);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-0 {
    padding-right: var(--sf-space-0);
    }
  }
  .p-inline-end-0:where(:dir(ltr)) {
    padding-right: var(--sf-space-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-0 {
    padding-left: var(--sf-space-0);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-0 {
    padding-left: var(--sf-space-0);
    }
  }
  .p-inline-end-0:where(:dir(rtl)) {
    padding-left: var(--sf-space-0);
  }
  .p-inline-end-0 {
    -webkit-padding-end: var(--sf-space-0);
            padding-inline-end: var(--sf-space-0);
  }
  .p-bottom-0 {
    padding-bottom: var(--sf-space-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-0 {
    padding-left: var(--sf-space-0);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-0 {
    padding-left: var(--sf-space-0);
    }
  }
  .p-x-0:where(:dir(ltr)) {
    padding-left: var(--sf-space-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-0 {
    padding-right: var(--sf-space-0);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-0 {
    padding-right: var(--sf-space-0);
    }
  }
  .p-x-0:where(:dir(rtl)) {
    padding-right: var(--sf-space-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-0 {
    padding-right: var(--sf-space-0);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-0 {
    padding-right: var(--sf-space-0);
    }
  }
  .p-x-0:where(:dir(ltr)) {
    padding-right: var(--sf-space-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-0 {
    padding-left: var(--sf-space-0);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-0 {
    padding-left: var(--sf-space-0);
    }
  }
  .p-x-0:where(:dir(rtl)) {
    padding-left: var(--sf-space-0);
  }
  .p-x-0 {
    -webkit-padding-start: var(--sf-space-0);
            padding-inline-start: var(--sf-space-0);
    -webkit-padding-end: var(--sf-space-0);
            padding-inline-end: var(--sf-space-0);
  }
  .p-y-0 {
    padding-top: var(--sf-space-0);
    padding-bottom: var(--sf-space-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-0 {
    padding-left: var(--sf-space-0);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-0 {
    padding-left: var(--sf-space-0);
    }
  }
  .p-inline-start-0:where(:dir(ltr)) {
    padding-left: var(--sf-space-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-0 {
    padding-right: var(--sf-space-0);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-0 {
    padding-right: var(--sf-space-0);
    }
  }
  .p-inline-start-0:where(:dir(rtl)) {
    padding-right: var(--sf-space-0);
  }
  .p-inline-start-0 {
    -webkit-padding-start: var(--sf-space-0);
            padding-inline-start: var(--sf-space-0);
  }
  .p-1\/4 {
    padding: var(--sf-space-1\/4);
  }
  .p-top-1\/4 {
    padding-top: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-1\/4 {
    padding-right: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-1\/4 {
    padding-right: var(--sf-space-1\/4);
    }
  }
  .p-inline-end-1\/4:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-1\/4 {
    padding-left: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-1\/4 {
    padding-left: var(--sf-space-1\/4);
    }
  }
  .p-inline-end-1\/4:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/4);
  }
  .p-inline-end-1\/4 {
    -webkit-padding-end: var(--sf-space-1\/4);
            padding-inline-end: var(--sf-space-1\/4);
  }
  .p-bottom-1\/4 {
    padding-bottom: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1\/4 {
    padding-left: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-1\/4 {
    padding-left: var(--sf-space-1\/4);
    }
  }
  .p-x-1\/4:where(:dir(ltr)) {
    padding-left: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1\/4 {
    padding-right: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-1\/4 {
    padding-right: var(--sf-space-1\/4);
    }
  }
  .p-x-1\/4:where(:dir(rtl)) {
    padding-right: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1\/4 {
    padding-right: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-1\/4 {
    padding-right: var(--sf-space-1\/4);
    }
  }
  .p-x-1\/4:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1\/4 {
    padding-left: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-1\/4 {
    padding-left: var(--sf-space-1\/4);
    }
  }
  .p-x-1\/4:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/4);
  }
  .p-x-1\/4 {
    -webkit-padding-start: var(--sf-space-1\/4);
            padding-inline-start: var(--sf-space-1\/4);
    -webkit-padding-end: var(--sf-space-1\/4);
            padding-inline-end: var(--sf-space-1\/4);
  }
  .p-y-1\/4 {
    padding-top: var(--sf-space-1\/4);
    padding-bottom: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-1\/4 {
    padding-left: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-1\/4 {
    padding-left: var(--sf-space-1\/4);
    }
  }
  .p-inline-start-1\/4:where(:dir(ltr)) {
    padding-left: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-1\/4 {
    padding-right: var(--sf-space-1\/4);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-1\/4 {
    padding-right: var(--sf-space-1\/4);
    }
  }
  .p-inline-start-1\/4:where(:dir(rtl)) {
    padding-right: var(--sf-space-1\/4);
  }
  .p-inline-start-1\/4 {
    -webkit-padding-start: var(--sf-space-1\/4);
            padding-inline-start: var(--sf-space-1\/4);
  }
  .p-1\/3 {
    padding: var(--sf-space-1\/3);
  }
  .p-top-1\/3 {
    padding-top: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-1\/3 {
    padding-right: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-1\/3 {
    padding-right: var(--sf-space-1\/3);
    }
  }
  .p-inline-end-1\/3:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-1\/3 {
    padding-left: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-1\/3 {
    padding-left: var(--sf-space-1\/3);
    }
  }
  .p-inline-end-1\/3:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/3);
  }
  .p-inline-end-1\/3 {
    -webkit-padding-end: var(--sf-space-1\/3);
            padding-inline-end: var(--sf-space-1\/3);
  }
  .p-bottom-1\/3 {
    padding-bottom: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1\/3 {
    padding-left: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-1\/3 {
    padding-left: var(--sf-space-1\/3);
    }
  }
  .p-x-1\/3:where(:dir(ltr)) {
    padding-left: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1\/3 {
    padding-right: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-1\/3 {
    padding-right: var(--sf-space-1\/3);
    }
  }
  .p-x-1\/3:where(:dir(rtl)) {
    padding-right: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1\/3 {
    padding-right: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-1\/3 {
    padding-right: var(--sf-space-1\/3);
    }
  }
  .p-x-1\/3:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1\/3 {
    padding-left: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-1\/3 {
    padding-left: var(--sf-space-1\/3);
    }
  }
  .p-x-1\/3:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/3);
  }
  .p-x-1\/3 {
    -webkit-padding-start: var(--sf-space-1\/3);
            padding-inline-start: var(--sf-space-1\/3);
    -webkit-padding-end: var(--sf-space-1\/3);
            padding-inline-end: var(--sf-space-1\/3);
  }
  .p-y-1\/3 {
    padding-top: var(--sf-space-1\/3);
    padding-bottom: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-1\/3 {
    padding-left: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-1\/3 {
    padding-left: var(--sf-space-1\/3);
    }
  }
  .p-inline-start-1\/3:where(:dir(ltr)) {
    padding-left: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-1\/3 {
    padding-right: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-1\/3 {
    padding-right: var(--sf-space-1\/3);
    }
  }
  .p-inline-start-1\/3:where(:dir(rtl)) {
    padding-right: var(--sf-space-1\/3);
  }
  .p-inline-start-1\/3 {
    -webkit-padding-start: var(--sf-space-1\/3);
            padding-inline-start: var(--sf-space-1\/3);
  }
  .p-1\/2 {
    padding: var(--sf-space-1\/2);
  }
  .p-top-1\/2 {
    padding-top: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-1\/2 {
    padding-right: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-1\/2 {
    padding-right: var(--sf-space-1\/2);
    }
  }
  .p-inline-end-1\/2:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-1\/2 {
    padding-left: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-1\/2 {
    padding-left: var(--sf-space-1\/2);
    }
  }
  .p-inline-end-1\/2:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/2);
  }
  .p-inline-end-1\/2 {
    -webkit-padding-end: var(--sf-space-1\/2);
            padding-inline-end: var(--sf-space-1\/2);
  }
  .p-bottom-1\/2 {
    padding-bottom: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1\/2 {
    padding-left: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-1\/2 {
    padding-left: var(--sf-space-1\/2);
    }
  }
  .p-x-1\/2:where(:dir(ltr)) {
    padding-left: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1\/2 {
    padding-right: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-1\/2 {
    padding-right: var(--sf-space-1\/2);
    }
  }
  .p-x-1\/2:where(:dir(rtl)) {
    padding-right: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1\/2 {
    padding-right: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-1\/2 {
    padding-right: var(--sf-space-1\/2);
    }
  }
  .p-x-1\/2:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1\/2 {
    padding-left: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-1\/2 {
    padding-left: var(--sf-space-1\/2);
    }
  }
  .p-x-1\/2:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/2);
  }
  .p-x-1\/2 {
    -webkit-padding-start: var(--sf-space-1\/2);
            padding-inline-start: var(--sf-space-1\/2);
    -webkit-padding-end: var(--sf-space-1\/2);
            padding-inline-end: var(--sf-space-1\/2);
  }
  .p-y-1\/2 {
    padding-top: var(--sf-space-1\/2);
    padding-bottom: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-1\/2 {
    padding-left: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-1\/2 {
    padding-left: var(--sf-space-1\/2);
    }
  }
  .p-inline-start-1\/2:where(:dir(ltr)) {
    padding-left: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-1\/2 {
    padding-right: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-1\/2 {
    padding-right: var(--sf-space-1\/2);
    }
  }
  .p-inline-start-1\/2:where(:dir(rtl)) {
    padding-right: var(--sf-space-1\/2);
  }
  .p-inline-start-1\/2 {
    -webkit-padding-start: var(--sf-space-1\/2);
            padding-inline-start: var(--sf-space-1\/2);
  }
  .p-1 {
    padding: var(--sf-space-1);
  }
  .p-top-1 {
    padding-top: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-1 {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-1 {
    padding-right: var(--sf-space-1);
    }
  }
  .p-inline-end-1:where(:dir(ltr)) {
    padding-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-1 {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-1 {
    padding-left: var(--sf-space-1);
    }
  }
  .p-inline-end-1:where(:dir(rtl)) {
    padding-left: var(--sf-space-1);
  }
  .p-inline-end-1 {
    -webkit-padding-end: var(--sf-space-1);
            padding-inline-end: var(--sf-space-1);
  }
  .p-bottom-1 {
    padding-bottom: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1 {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-1 {
    padding-left: var(--sf-space-1);
    }
  }
  .p-x-1:where(:dir(ltr)) {
    padding-left: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1 {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-1 {
    padding-right: var(--sf-space-1);
    }
  }
  .p-x-1:where(:dir(rtl)) {
    padding-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-1 {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-1 {
    padding-right: var(--sf-space-1);
    }
  }
  .p-x-1:where(:dir(ltr)) {
    padding-right: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-1 {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-1 {
    padding-left: var(--sf-space-1);
    }
  }
  .p-x-1:where(:dir(rtl)) {
    padding-left: var(--sf-space-1);
  }
  .p-x-1 {
    -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);
  }
  .p-y-1 {
    padding-top: var(--sf-space-1);
    padding-bottom: var(--sf-space-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-1 {
    padding-left: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-1 {
    padding-left: var(--sf-space-1);
    }
  }
  .p-inline-start-1:where(:dir(ltr)) {
    padding-left: var(--sf-space-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-1 {
    padding-right: var(--sf-space-1);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-1 {
    padding-right: var(--sf-space-1);
    }
  }
  .p-inline-start-1:where(:dir(rtl)) {
    padding-right: var(--sf-space-1);
  }
  .p-inline-start-1 {
    -webkit-padding-start: var(--sf-space-1);
            padding-inline-start: var(--sf-space-1);
  }
  .p-2 {
    padding: var(--sf-space-2);
  }
  .p-top-2 {
    padding-top: var(--sf-space-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-2 {
    padding-right: var(--sf-space-2);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-2 {
    padding-right: var(--sf-space-2);
    }
  }
  .p-inline-end-2:where(:dir(ltr)) {
    padding-right: var(--sf-space-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-2 {
    padding-left: var(--sf-space-2);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-2 {
    padding-left: var(--sf-space-2);
    }
  }
  .p-inline-end-2:where(:dir(rtl)) {
    padding-left: var(--sf-space-2);
  }
  .p-inline-end-2 {
    -webkit-padding-end: var(--sf-space-2);
            padding-inline-end: var(--sf-space-2);
  }
  .p-bottom-2 {
    padding-bottom: var(--sf-space-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-2 {
    padding-left: var(--sf-space-2);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-2 {
    padding-left: var(--sf-space-2);
    }
  }
  .p-x-2:where(:dir(ltr)) {
    padding-left: var(--sf-space-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-2 {
    padding-right: var(--sf-space-2);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-2 {
    padding-right: var(--sf-space-2);
    }
  }
  .p-x-2:where(:dir(rtl)) {
    padding-right: var(--sf-space-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-2 {
    padding-right: var(--sf-space-2);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-2 {
    padding-right: var(--sf-space-2);
    }
  }
  .p-x-2:where(:dir(ltr)) {
    padding-right: var(--sf-space-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-2 {
    padding-left: var(--sf-space-2);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-2 {
    padding-left: var(--sf-space-2);
    }
  }
  .p-x-2:where(:dir(rtl)) {
    padding-left: var(--sf-space-2);
  }
  .p-x-2 {
    -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);
  }
  .p-y-2 {
    padding-top: var(--sf-space-2);
    padding-bottom: var(--sf-space-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-2 {
    padding-left: var(--sf-space-2);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-2 {
    padding-left: var(--sf-space-2);
    }
  }
  .p-inline-start-2:where(:dir(ltr)) {
    padding-left: var(--sf-space-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-2 {
    padding-right: var(--sf-space-2);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-2 {
    padding-right: var(--sf-space-2);
    }
  }
  .p-inline-start-2:where(:dir(rtl)) {
    padding-right: var(--sf-space-2);
  }
  .p-inline-start-2 {
    -webkit-padding-start: var(--sf-space-2);
            padding-inline-start: var(--sf-space-2);
  }
  .p-3 {
    padding: var(--sf-space-3);
  }
  .p-top-3 {
    padding-top: var(--sf-space-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-3 {
    padding-right: var(--sf-space-3);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-3 {
    padding-right: var(--sf-space-3);
    }
  }
  .p-inline-end-3:where(:dir(ltr)) {
    padding-right: var(--sf-space-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-3 {
    padding-left: var(--sf-space-3);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-3 {
    padding-left: var(--sf-space-3);
    }
  }
  .p-inline-end-3:where(:dir(rtl)) {
    padding-left: var(--sf-space-3);
  }
  .p-inline-end-3 {
    -webkit-padding-end: var(--sf-space-3);
            padding-inline-end: var(--sf-space-3);
  }
  .p-bottom-3 {
    padding-bottom: var(--sf-space-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-3 {
    padding-left: var(--sf-space-3);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-3 {
    padding-left: var(--sf-space-3);
    }
  }
  .p-x-3:where(:dir(ltr)) {
    padding-left: var(--sf-space-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-3 {
    padding-right: var(--sf-space-3);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-3 {
    padding-right: var(--sf-space-3);
    }
  }
  .p-x-3:where(:dir(rtl)) {
    padding-right: var(--sf-space-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-3 {
    padding-right: var(--sf-space-3);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-3 {
    padding-right: var(--sf-space-3);
    }
  }
  .p-x-3:where(:dir(ltr)) {
    padding-right: var(--sf-space-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-3 {
    padding-left: var(--sf-space-3);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-3 {
    padding-left: var(--sf-space-3);
    }
  }
  .p-x-3:where(:dir(rtl)) {
    padding-left: var(--sf-space-3);
  }
  .p-x-3 {
    -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);
  }
  .p-y-3 {
    padding-top: var(--sf-space-3);
    padding-bottom: var(--sf-space-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-3 {
    padding-left: var(--sf-space-3);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-3 {
    padding-left: var(--sf-space-3);
    }
  }
  .p-inline-start-3:where(:dir(ltr)) {
    padding-left: var(--sf-space-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-3 {
    padding-right: var(--sf-space-3);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-3 {
    padding-right: var(--sf-space-3);
    }
  }
  .p-inline-start-3:where(:dir(rtl)) {
    padding-right: var(--sf-space-3);
  }
  .p-inline-start-3 {
    -webkit-padding-start: var(--sf-space-3);
            padding-inline-start: var(--sf-space-3);
  }
  .p-4 {
    padding: var(--sf-space-4);
  }
  .p-top-4 {
    padding-top: var(--sf-space-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-4 {
    padding-right: var(--sf-space-4);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-4 {
    padding-right: var(--sf-space-4);
    }
  }
  .p-inline-end-4:where(:dir(ltr)) {
    padding-right: var(--sf-space-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-4 {
    padding-left: var(--sf-space-4);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-4 {
    padding-left: var(--sf-space-4);
    }
  }
  .p-inline-end-4:where(:dir(rtl)) {
    padding-left: var(--sf-space-4);
  }
  .p-inline-end-4 {
    -webkit-padding-end: var(--sf-space-4);
            padding-inline-end: var(--sf-space-4);
  }
  .p-bottom-4 {
    padding-bottom: var(--sf-space-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-4 {
    padding-left: var(--sf-space-4);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-4 {
    padding-left: var(--sf-space-4);
    }
  }
  .p-x-4:where(:dir(ltr)) {
    padding-left: var(--sf-space-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-4 {
    padding-right: var(--sf-space-4);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-4 {
    padding-right: var(--sf-space-4);
    }
  }
  .p-x-4:where(:dir(rtl)) {
    padding-right: var(--sf-space-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-4 {
    padding-right: var(--sf-space-4);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-4 {
    padding-right: var(--sf-space-4);
    }
  }
  .p-x-4:where(:dir(ltr)) {
    padding-right: var(--sf-space-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-4 {
    padding-left: var(--sf-space-4);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-4 {
    padding-left: var(--sf-space-4);
    }
  }
  .p-x-4:where(:dir(rtl)) {
    padding-left: var(--sf-space-4);
  }
  .p-x-4 {
    -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);
  }
  .p-y-4 {
    padding-top: var(--sf-space-4);
    padding-bottom: var(--sf-space-4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-4 {
    padding-left: var(--sf-space-4);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-4 {
    padding-left: var(--sf-space-4);
    }
  }
  .p-inline-start-4:where(:dir(ltr)) {
    padding-left: var(--sf-space-4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-4 {
    padding-right: var(--sf-space-4);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-4 {
    padding-right: var(--sf-space-4);
    }
  }
  .p-inline-start-4:where(:dir(rtl)) {
    padding-right: var(--sf-space-4);
  }
  .p-inline-start-4 {
    -webkit-padding-start: var(--sf-space-4);
            padding-inline-start: var(--sf-space-4);
  }
  .p-5 {
    padding: var(--sf-space-5);
  }
  .p-top-5 {
    padding-top: var(--sf-space-5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-5 {
    padding-right: var(--sf-space-5);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-5 {
    padding-right: var(--sf-space-5);
    }
  }
  .p-inline-end-5:where(:dir(ltr)) {
    padding-right: var(--sf-space-5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-5 {
    padding-left: var(--sf-space-5);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-5 {
    padding-left: var(--sf-space-5);
    }
  }
  .p-inline-end-5:where(:dir(rtl)) {
    padding-left: var(--sf-space-5);
  }
  .p-inline-end-5 {
    -webkit-padding-end: var(--sf-space-5);
            padding-inline-end: var(--sf-space-5);
  }
  .p-bottom-5 {
    padding-bottom: var(--sf-space-5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-5 {
    padding-left: var(--sf-space-5);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-5 {
    padding-left: var(--sf-space-5);
    }
  }
  .p-x-5:where(:dir(ltr)) {
    padding-left: var(--sf-space-5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-5 {
    padding-right: var(--sf-space-5);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-5 {
    padding-right: var(--sf-space-5);
    }
  }
  .p-x-5:where(:dir(rtl)) {
    padding-right: var(--sf-space-5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-5 {
    padding-right: var(--sf-space-5);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-5 {
    padding-right: var(--sf-space-5);
    }
  }
  .p-x-5:where(:dir(ltr)) {
    padding-right: var(--sf-space-5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-5 {
    padding-left: var(--sf-space-5);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-5 {
    padding-left: var(--sf-space-5);
    }
  }
  .p-x-5:where(:dir(rtl)) {
    padding-left: var(--sf-space-5);
  }
  .p-x-5 {
    -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);
  }
  .p-y-5 {
    padding-top: var(--sf-space-5);
    padding-bottom: var(--sf-space-5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-5 {
    padding-left: var(--sf-space-5);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-5 {
    padding-left: var(--sf-space-5);
    }
  }
  .p-inline-start-5:where(:dir(ltr)) {
    padding-left: var(--sf-space-5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-5 {
    padding-right: var(--sf-space-5);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-5 {
    padding-right: var(--sf-space-5);
    }
  }
  .p-inline-start-5:where(:dir(rtl)) {
    padding-right: var(--sf-space-5);
  }
  .p-inline-start-5 {
    -webkit-padding-start: var(--sf-space-5);
            padding-inline-start: var(--sf-space-5);
  }
  .p-6 {
    padding: var(--sf-space-6);
  }
  .p-top-6 {
    padding-top: var(--sf-space-6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-6 {
    padding-right: var(--sf-space-6);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-6 {
    padding-right: var(--sf-space-6);
    }
  }
  .p-inline-end-6:where(:dir(ltr)) {
    padding-right: var(--sf-space-6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-6 {
    padding-left: var(--sf-space-6);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-6 {
    padding-left: var(--sf-space-6);
    }
  }
  .p-inline-end-6:where(:dir(rtl)) {
    padding-left: var(--sf-space-6);
  }
  .p-inline-end-6 {
    -webkit-padding-end: var(--sf-space-6);
            padding-inline-end: var(--sf-space-6);
  }
  .p-bottom-6 {
    padding-bottom: var(--sf-space-6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-6 {
    padding-left: var(--sf-space-6);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-6 {
    padding-left: var(--sf-space-6);
    }
  }
  .p-x-6:where(:dir(ltr)) {
    padding-left: var(--sf-space-6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-6 {
    padding-right: var(--sf-space-6);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-6 {
    padding-right: var(--sf-space-6);
    }
  }
  .p-x-6:where(:dir(rtl)) {
    padding-right: var(--sf-space-6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-6 {
    padding-right: var(--sf-space-6);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-6 {
    padding-right: var(--sf-space-6);
    }
  }
  .p-x-6:where(:dir(ltr)) {
    padding-right: var(--sf-space-6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-6 {
    padding-left: var(--sf-space-6);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-6 {
    padding-left: var(--sf-space-6);
    }
  }
  .p-x-6:where(:dir(rtl)) {
    padding-left: var(--sf-space-6);
  }
  .p-x-6 {
    -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);
  }
  .p-y-6 {
    padding-top: var(--sf-space-6);
    padding-bottom: var(--sf-space-6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-6 {
    padding-left: var(--sf-space-6);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-6 {
    padding-left: var(--sf-space-6);
    }
  }
  .p-inline-start-6:where(:dir(ltr)) {
    padding-left: var(--sf-space-6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-6 {
    padding-right: var(--sf-space-6);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-6 {
    padding-right: var(--sf-space-6);
    }
  }
  .p-inline-start-6:where(:dir(rtl)) {
    padding-right: var(--sf-space-6);
  }
  .p-inline-start-6 {
    -webkit-padding-start: var(--sf-space-6);
            padding-inline-start: var(--sf-space-6);
  }
  .p-7 {
    padding: var(--sf-space-7);
  }
  .p-top-7 {
    padding-top: var(--sf-space-7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-7 {
    padding-right: var(--sf-space-7);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-7 {
    padding-right: var(--sf-space-7);
    }
  }
  .p-inline-end-7:where(:dir(ltr)) {
    padding-right: var(--sf-space-7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-7 {
    padding-left: var(--sf-space-7);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-7 {
    padding-left: var(--sf-space-7);
    }
  }
  .p-inline-end-7:where(:dir(rtl)) {
    padding-left: var(--sf-space-7);
  }
  .p-inline-end-7 {
    -webkit-padding-end: var(--sf-space-7);
            padding-inline-end: var(--sf-space-7);
  }
  .p-bottom-7 {
    padding-bottom: var(--sf-space-7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-7 {
    padding-left: var(--sf-space-7);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-7 {
    padding-left: var(--sf-space-7);
    }
  }
  .p-x-7:where(:dir(ltr)) {
    padding-left: var(--sf-space-7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-7 {
    padding-right: var(--sf-space-7);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-7 {
    padding-right: var(--sf-space-7);
    }
  }
  .p-x-7:where(:dir(rtl)) {
    padding-right: var(--sf-space-7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-7 {
    padding-right: var(--sf-space-7);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-7 {
    padding-right: var(--sf-space-7);
    }
  }
  .p-x-7:where(:dir(ltr)) {
    padding-right: var(--sf-space-7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-7 {
    padding-left: var(--sf-space-7);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-7 {
    padding-left: var(--sf-space-7);
    }
  }
  .p-x-7:where(:dir(rtl)) {
    padding-left: var(--sf-space-7);
  }
  .p-x-7 {
    -webkit-padding-start: var(--sf-space-7);
            padding-inline-start: var(--sf-space-7);
    -webkit-padding-end: var(--sf-space-7);
            padding-inline-end: var(--sf-space-7);
  }
  .p-y-7 {
    padding-top: var(--sf-space-7);
    padding-bottom: var(--sf-space-7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-7 {
    padding-left: var(--sf-space-7);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-7 {
    padding-left: var(--sf-space-7);
    }
  }
  .p-inline-start-7:where(:dir(ltr)) {
    padding-left: var(--sf-space-7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-7 {
    padding-right: var(--sf-space-7);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-7 {
    padding-right: var(--sf-space-7);
    }
  }
  .p-inline-start-7:where(:dir(rtl)) {
    padding-right: var(--sf-space-7);
  }
  .p-inline-start-7 {
    -webkit-padding-start: var(--sf-space-7);
            padding-inline-start: var(--sf-space-7);
  }
  .p-8 {
    padding: var(--sf-space-8);
  }
  .p-top-8 {
    padding-top: var(--sf-space-8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-end-8 {
    padding-right: var(--sf-space-8);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-inline-end-8 {
    padding-right: var(--sf-space-8);
    }
  }
  .p-inline-end-8:where(:dir(ltr)) {
    padding-right: var(--sf-space-8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-end-8 {
    padding-left: var(--sf-space-8);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-inline-end-8 {
    padding-left: var(--sf-space-8);
    }
  }
  .p-inline-end-8:where(:dir(rtl)) {
    padding-left: var(--sf-space-8);
  }
  .p-inline-end-8 {
    -webkit-padding-end: var(--sf-space-8);
            padding-inline-end: var(--sf-space-8);
  }
  .p-bottom-8 {
    padding-bottom: var(--sf-space-8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-8 {
    padding-left: var(--sf-space-8);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-x-8 {
    padding-left: var(--sf-space-8);
    }
  }
  .p-x-8:where(:dir(ltr)) {
    padding-left: var(--sf-space-8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-8 {
    padding-right: var(--sf-space-8);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-x-8 {
    padding-right: var(--sf-space-8);
    }
  }
  .p-x-8:where(:dir(rtl)) {
    padding-right: var(--sf-space-8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-x-8 {
    padding-right: var(--sf-space-8);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .p-x-8 {
    padding-right: var(--sf-space-8);
    }
  }
  .p-x-8:where(:dir(ltr)) {
    padding-right: var(--sf-space-8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-x-8 {
    padding-left: var(--sf-space-8);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .p-x-8 {
    padding-left: var(--sf-space-8);
    }
  }
  .p-x-8:where(:dir(rtl)) {
    padding-left: var(--sf-space-8);
  }
  .p-x-8 {
    -webkit-padding-start: var(--sf-space-8);
            padding-inline-start: var(--sf-space-8);
    -webkit-padding-end: var(--sf-space-8);
            padding-inline-end: var(--sf-space-8);
  }
  .p-y-8 {
    padding-top: var(--sf-space-8);
    padding-bottom: var(--sf-space-8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .p-inline-start-8 {
    padding-left: var(--sf-space-8);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .p-inline-start-8 {
    padding-left: var(--sf-space-8);
    }
  }
  .p-inline-start-8:where(:dir(ltr)) {
    padding-left: var(--sf-space-8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .p-inline-start-8 {
    padding-right: var(--sf-space-8);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .p-inline-start-8 {
    padding-right: var(--sf-space-8);
    }
  }
  .p-inline-start-8:where(:dir(rtl)) {
    padding-right: var(--sf-space-8);
  }
  .p-inline-start-8 {
    -webkit-padding-start: var(--sf-space-8);
            padding-inline-start: var(--sf-space-8);
  }
}

/* docara-shell-source: runtime/utility/position/default/css/default.css */
@layer sf.utilities {
  .static {
    position: static;
  }
  .fixed {
    position: fixed;
  }
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
}

/* docara-shell-source: runtime/utility/sr-only/default/css/default.css */
@layer sf.utilities {
  .sr-only {
    position: absolute;
    width: var(--sf-px);
    height: var(--sf-px);
    padding: 0;
    margin: calc(-1 * var(--sf-px));
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}