/* docara-shell-source: runtime/utility/align-items/default/css/default.css */
@layer sf.utilities {
  .items-cross-start {
    align-items: start;
  }
  .items-cross-end {
    align-items: end;
  }
  .items-cross-center {
    align-items: center;
  }
  .items-cross-baseline {
    align-items: baseline;
  }
  .items-cross-stretch {
    align-items: stretch;
  }
}

/* docara-shell-source: runtime/utility/backdrop-filter-blur/default/css/default.css */
@layer sf.utilities {
  .backdrop-blur-small {
    --sf-backdrop-blur: blur(var(--sf-blur-small));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur {
    --sf-backdrop-blur: blur(var(--sf-blur-medium));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur-medium {
    --sf-backdrop-blur: blur(var(--sf-blur-medium));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur-large {
    --sf-backdrop-blur: blur(var(--sf-blur-large));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
  .backdrop-blur-none {
    --sf-backdrop-blur: blur(var(--sf-blur-none));
    -webkit-backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
            backdrop-filter: var(--sf-backdrop-blur, ) var(--sf-backdrop-brightness, ) var(--sf-backdrop-contrast, ) var(--sf-backdrop-grayscale, ) var(--sf-backdrop-hue-rotate, ) var(--sf-backdrop-invert, ) var(--sf-backdrop-opacity, ) var(--sf-backdrop-saturate, ) var(--sf-backdrop-sepia, );
  }
}

/* docara-shell-source: runtime/utility/background-color/default/css/default.css */
@layer sf.utilities {
  .bg-transparent {
    background-color: var(--sf-transparent);
  }
  .bg-current {
    background-color: var(--sf-current);
  }
  .bg-surface-0 {
    background-color: var(--sf-surface-0);
  }
  .bg-surface-1 {
    background-color: var(--sf-surface-1);
  }
  .bg-surface-2 {
    background-color: var(--sf-surface-2);
  }
  .bg-surface-3 {
    background-color: var(--sf-surface-3);
  }
  .bg-surface-4 {
    background-color: var(--sf-surface-4);
  }
  .bg-surface {
    background-color: var(--sf-surface-1);
  }
  .bg-surface-inverse {
    background-color: var(--sf-surface-inverse);
  }
  .bg-surface-inverse-fixed {
    background-color: var(--sf-surface-inverse-fixed);
  }
  .bg-surface-container {
    background-color: var(--sf-surface-container);
  }
  .bg-on-surface {
    background-color: var(--sf-on-surface);
  }
  .bg-on-surface-variant {
    background-color: var(--sf-on-surface-variant);
  }
  .bg-surface-transparent-select {
    background-color: var(--sf-surface-transparent-select);
  }
  .bg-surface-transparent-overlay {
    background-color: var(--sf-surface-transparent-overlay);
  }
  .bg-disable {
    background-color: var(--sf-disable);
  }
  .bg-primary {
    background-color: var(--sf-primary);
  }
  .bg-primary-container {
    background-color: var(--sf-primary-container);
  }
  .bg-primary-transparent-select {
    background-color: var(--sf-primary-transparent-select);
  }
  .bg-primary-transparent-overlay {
    background-color: var(--sf-primary-transparent-overlay);
  }
  .bg-secondary {
    background-color: var(--sf-secondary);
  }
  .bg-secondary-container {
    background-color: var(--sf-secondary-container);
  }
  .bg-secondary-transparent-select {
    background-color: var(--sf-secondary-transparent-select);
  }
  .bg-secondary-transparent-overlay {
    background-color: var(--sf-secondary-transparent-overlay);
  }
  .bg-tertiary {
    background-color: var(--sf-tertiary);
  }
  .bg-tertiary-container {
    background-color: var(--sf-tertiary-container);
  }
  .bg-tertiary-transparent-select {
    background-color: var(--sf-tertiary-transparent-select);
  }
  .bg-tertiary-transparent-overlay {
    background-color: var(--sf-tertiary-transparent-overlay);
  }
  .bg-error {
    background-color: var(--sf-error);
  }
  .bg-error-container {
    background-color: var(--sf-error-container);
  }
  .bg-error-transparent-select {
    background-color: var(--sf-error-transparent-select);
  }
  .bg-error-transparent-overlay {
    background-color: var(--sf-error-transparent-overlay);
  }
  .bg-warning {
    background-color: var(--sf-warning);
  }
  .bg-warning-container {
    background-color: var(--sf-warning-container);
  }
  .bg-warning-transparent-select {
    background-color: var(--sf-warning-transparent-select);
  }
  .bg-warning-transparent-overlay {
    background-color: var(--sf-warning-transparent-overlay);
  }
  .bg-success {
    background-color: var(--sf-success);
  }
  .bg-success-container {
    background-color: var(--sf-success-container);
  }
  .bg-success-transparent-select {
    background-color: var(--sf-success-transparent-select);
  }
  .bg-success-transparent-overlay {
    background-color: var(--sf-success-transparent-overlay);
  }
  .active\:bg-transparent:active {
    background-color: var(--sf-transparent-active);
  }
  .active\:bg-current:active {
    background-color: var(--sf-current-active);
  }
  .active\:bg-surface-0:active {
    background-color: var(--sf-surface-0-active);
  }
  .active\:bg-surface-1:active {
    background-color: var(--sf-surface-1-active);
  }
  .active\:bg-surface-2:active {
    background-color: var(--sf-surface-2-active);
  }
  .active\:bg-surface-3:active {
    background-color: var(--sf-surface-3-active);
  }
  .active\:bg-surface-4:active {
    background-color: var(--sf-surface-4-active);
  }
  .active\:bg-surface:active {
    background-color: var(--sf-surface-1-active);
  }
  .active\:bg-surface-inverse:active {
    background-color: var(--sf-surface-inverse-active);
  }
  .active\:bg-surface-inverse-fixed:active {
    background-color: var(--sf-surface-inverse-fixed-active);
  }
  .active\:bg-surface-container:active {
    background-color: var(--sf-surface-container-active);
  }
  .active\:bg-on-surface:active {
    background-color: var(--sf-on-surface-active);
  }
  .active\:bg-on-surface-variant:active {
    background-color: var(--sf-on-surface-variant-active);
  }
  .active\:bg-surface-transparent-select:active {
    background-color: var(--sf-surface-transparent-select-active);
  }
  .active\:bg-surface-transparent-overlay:active {
    background-color: var(--sf-surface-transparent-overlay-active);
  }
  .active\:bg-disable:active {
    background-color: var(--sf-disable-active);
  }
  .active\:bg-primary:active {
    background-color: var(--sf-primary-active);
  }
  .active\:bg-primary-container:active {
    background-color: var(--sf-primary-container-active);
  }
  .active\:bg-primary-transparent-select:active {
    background-color: var(--sf-primary-transparent-select-active);
  }
  .active\:bg-primary-transparent-overlay:active {
    background-color: var(--sf-primary-transparent-overlay-active);
  }
  .active\:bg-secondary:active {
    background-color: var(--sf-secondary-active);
  }
  .active\:bg-secondary-container:active {
    background-color: var(--sf-secondary-container-active);
  }
  .active\:bg-secondary-transparent-select:active {
    background-color: var(--sf-secondary-transparent-select-active);
  }
  .active\:bg-secondary-transparent-overlay:active {
    background-color: var(--sf-secondary-transparent-overlay-active);
  }
  .active\:bg-tertiary:active {
    background-color: var(--sf-tertiary-active);
  }
  .active\:bg-tertiary-container:active {
    background-color: var(--sf-tertiary-container-active);
  }
  .active\:bg-tertiary-transparent-select:active {
    background-color: var(--sf-tertiary-transparent-select-active);
  }
  .active\:bg-tertiary-transparent-overlay:active {
    background-color: var(--sf-tertiary-transparent-overlay-active);
  }
  .active\:bg-error:active {
    background-color: var(--sf-error-active);
  }
  .active\:bg-error-container:active {
    background-color: var(--sf-error-container-active);
  }
  .active\:bg-error-transparent-select:active {
    background-color: var(--sf-error-transparent-select-active);
  }
  .active\:bg-error-transparent-overlay:active {
    background-color: var(--sf-error-transparent-overlay-active);
  }
  .active\:bg-warning:active {
    background-color: var(--sf-warning-active);
  }
  .active\:bg-warning-container:active {
    background-color: var(--sf-warning-container-active);
  }
  .active\:bg-warning-transparent-select:active {
    background-color: var(--sf-warning-transparent-select-active);
  }
  .active\:bg-warning-transparent-overlay:active {
    background-color: var(--sf-warning-transparent-overlay-active);
  }
  .active\:bg-success:active {
    background-color: var(--sf-success-active);
  }
  .active\:bg-success-container:active {
    background-color: var(--sf-success-container-active);
  }
  .active\:bg-success-transparent-select:active {
    background-color: var(--sf-success-transparent-select-active);
  }
  .active\:bg-success-transparent-overlay:active {
    background-color: var(--sf-success-transparent-overlay-active);
  }
  .hover\:bg-transparent:hover {
    background-color: var(--sf-transparent-hover);
  }
  .hover\:bg-current:hover {
    background-color: var(--sf-current-hover);
  }
  .hover\:bg-surface-0:hover {
    background-color: var(--sf-surface-0-hover);
  }
  .hover\:bg-surface-1:hover {
    background-color: var(--sf-surface-1-hover);
  }
  .hover\:bg-surface-2:hover {
    background-color: var(--sf-surface-2-hover);
  }
  .hover\:bg-surface-3:hover {
    background-color: var(--sf-surface-3-hover);
  }
  .hover\:bg-surface-4:hover {
    background-color: var(--sf-surface-4-hover);
  }
  .hover\:bg-surface:hover {
    background-color: var(--sf-surface-1-hover);
  }
  .hover\:bg-surface-inverse:hover {
    background-color: var(--sf-surface-inverse-hover);
  }
  .hover\:bg-surface-inverse-fixed:hover {
    background-color: var(--sf-surface-inverse-fixed-hover);
  }
  .hover\:bg-surface-container:hover {
    background-color: var(--sf-surface-container-hover);
  }
  .hover\:bg-on-surface:hover {
    background-color: var(--sf-on-surface-hover);
  }
  .hover\:bg-on-surface-variant:hover {
    background-color: var(--sf-on-surface-variant-hover);
  }
  .hover\:bg-surface-transparent-select:hover {
    background-color: var(--sf-surface-transparent-select-hover);
  }
  .hover\:bg-surface-transparent-overlay:hover {
    background-color: var(--sf-surface-transparent-overlay-hover);
  }
  .hover\:bg-disable:hover {
    background-color: var(--sf-disable-hover);
  }
  .hover\:bg-primary:hover {
    background-color: var(--sf-primary-hover);
  }
  .hover\:bg-primary-container:hover {
    background-color: var(--sf-primary-container-hover);
  }
  .hover\:bg-primary-transparent-select:hover {
    background-color: var(--sf-primary-transparent-select-hover);
  }
  .hover\:bg-primary-transparent-overlay:hover {
    background-color: var(--sf-primary-transparent-overlay-hover);
  }
  .hover\:bg-secondary:hover {
    background-color: var(--sf-secondary-hover);
  }
  .hover\:bg-secondary-container:hover {
    background-color: var(--sf-secondary-container-hover);
  }
  .hover\:bg-secondary-transparent-select:hover {
    background-color: var(--sf-secondary-transparent-select-hover);
  }
  .hover\:bg-secondary-transparent-overlay:hover {
    background-color: var(--sf-secondary-transparent-overlay-hover);
  }
  .hover\:bg-tertiary:hover {
    background-color: var(--sf-tertiary-hover);
  }
  .hover\:bg-tertiary-container:hover {
    background-color: var(--sf-tertiary-container-hover);
  }
  .hover\:bg-tertiary-transparent-select:hover {
    background-color: var(--sf-tertiary-transparent-select-hover);
  }
  .hover\:bg-tertiary-transparent-overlay:hover {
    background-color: var(--sf-tertiary-transparent-overlay-hover);
  }
  .hover\:bg-error:hover {
    background-color: var(--sf-error-hover);
  }
  .hover\:bg-error-container:hover {
    background-color: var(--sf-error-container-hover);
  }
  .hover\:bg-error-transparent-select:hover {
    background-color: var(--sf-error-transparent-select-hover);
  }
  .hover\:bg-error-transparent-overlay:hover {
    background-color: var(--sf-error-transparent-overlay-hover);
  }
  .hover\:bg-warning:hover {
    background-color: var(--sf-warning-hover);
  }
  .hover\:bg-warning-container:hover {
    background-color: var(--sf-warning-container-hover);
  }
  .hover\:bg-warning-transparent-select:hover {
    background-color: var(--sf-warning-transparent-select-hover);
  }
  .hover\:bg-warning-transparent-overlay:hover {
    background-color: var(--sf-warning-transparent-overlay-hover);
  }
  .hover\:bg-success:hover {
    background-color: var(--sf-success-hover);
  }
  .hover\:bg-success-container:hover {
    background-color: var(--sf-success-container-hover);
  }
  .hover\:bg-success-transparent-select:hover {
    background-color: var(--sf-success-transparent-select-hover);
  }
  .hover\:bg-success-transparent-overlay:hover {
    background-color: var(--sf-success-transparent-overlay-hover);
  }
  .bg-white {
    background-color: rgb(255, 255, 255);
  }
  .bg-black {
    background-color: rgb(0, 0, 0);
  }
  .bg-gray {
    background-color: rgb(106, 115, 125);
  }
  .bg-gray-0 {
    background-color: rgb(250, 251, 252);
  }
  .bg-gray-1 {
    background-color: rgb(246, 248, 250);
  }
  .bg-gray-2 {
    background-color: rgb(225, 228, 232);
  }
  .bg-gray-3 {
    background-color: rgb(209, 213, 218);
  }
  .bg-gray-4 {
    background-color: rgb(149, 157, 165);
  }
  .bg-gray-5 {
    background-color: rgb(106, 115, 125);
  }
  .bg-gray-6 {
    background-color: rgb(88, 96, 105);
  }
  .bg-gray-7 {
    background-color: rgb(68, 77, 86);
  }
  .bg-gray-8 {
    background-color: rgb(47, 54, 61);
  }
  .bg-gray-9 {
    background-color: rgb(36, 41, 46);
  }
  .bg-red {
    background-color: rgb(215, 58, 73);
  }
  .bg-red-0 {
    background-color: rgb(255, 238, 240);
  }
  .bg-red-1 {
    background-color: rgb(255, 220, 224);
  }
  .bg-red-2 {
    background-color: rgb(253, 174, 183);
  }
  .bg-red-3 {
    background-color: rgb(249, 117, 131);
  }
  .bg-red-4 {
    background-color: rgb(234, 74, 90);
  }
  .bg-red-5 {
    background-color: rgb(215, 58, 73);
  }
  .bg-red-6 {
    background-color: rgb(203, 36, 49);
  }
  .bg-red-7 {
    background-color: rgb(179, 29, 40);
  }
  .bg-red-8 {
    background-color: rgb(158, 28, 35);
  }
  .bg-red-9 {
    background-color: rgb(134, 24, 29);
  }
  .bg-orange {
    background-color: rgb(246, 106, 10);
  }
  .bg-orange-0 {
    background-color: rgb(255, 248, 242);
  }
  .bg-orange-1 {
    background-color: rgb(255, 235, 218);
  }
  .bg-orange-2 {
    background-color: rgb(255, 209, 172);
  }
  .bg-orange-3 {
    background-color: rgb(255, 171, 112);
  }
  .bg-orange-4 {
    background-color: rgb(251, 133, 50);
  }
  .bg-orange-5 {
    background-color: rgb(246, 106, 10);
  }
  .bg-orange-6 {
    background-color: rgb(227, 98, 9);
  }
  .bg-orange-7 {
    background-color: rgb(209, 87, 4);
  }
  .bg-orange-8 {
    background-color: rgb(194, 78, 0);
  }
  .bg-orange-9 {
    background-color: rgb(160, 65, 0);
  }
  .bg-yellow {
    background-color: rgb(255, 211, 61);
  }
  .bg-yellow-0 {
    background-color: rgb(255, 253, 239);
  }
  .bg-yellow-1 {
    background-color: rgb(255, 251, 221);
  }
  .bg-yellow-2 {
    background-color: rgb(255, 245, 177);
  }
  .bg-yellow-3 {
    background-color: rgb(255, 234, 127);
  }
  .bg-yellow-4 {
    background-color: rgb(255, 223, 93);
  }
  .bg-yellow-5 {
    background-color: rgb(255, 211, 61);
  }
  .bg-yellow-6 {
    background-color: rgb(249, 197, 19);
  }
  .bg-yellow-7 {
    background-color: rgb(219, 171, 9);
  }
  .bg-yellow-8 {
    background-color: rgb(176, 136, 0);
  }
  .bg-yellow-9 {
    background-color: rgb(115, 92, 15);
  }
  .bg-green {
    background-color: rgb(40, 167, 69);
  }
  .bg-green-0 {
    background-color: rgb(240, 255, 244);
  }
  .bg-green-1 {
    background-color: rgb(220, 255, 228);
  }
  .bg-green-2 {
    background-color: rgb(190, 245, 203);
  }
  .bg-green-3 {
    background-color: rgb(133, 232, 157);
  }
  .bg-green-4 {
    background-color: rgb(52, 208, 88);
  }
  .bg-green-5 {
    background-color: rgb(40, 167, 69);
  }
  .bg-green-6 {
    background-color: rgb(34, 134, 58);
  }
  .bg-green-7 {
    background-color: rgb(23, 111, 44);
  }
  .bg-green-8 {
    background-color: rgb(22, 92, 38);
  }
  .bg-green-9 {
    background-color: rgb(20, 70, 32);
  }
  .bg-blue {
    background-color: rgb(3, 102, 214);
  }
  .bg-blue-0 {
    background-color: rgb(241, 248, 255);
  }
  .bg-blue-1 {
    background-color: rgb(219, 237, 255);
  }
  .bg-blue-2 {
    background-color: rgb(200, 225, 255);
  }
  .bg-blue-3 {
    background-color: rgb(121, 184, 255);
  }
  .bg-blue-4 {
    background-color: rgb(33, 136, 255);
  }
  .bg-blue-5 {
    background-color: rgb(3, 102, 214);
  }
  .bg-blue-6 {
    background-color: rgb(0, 92, 197);
  }
  .bg-blue-7 {
    background-color: rgb(4, 66, 137);
  }
  .bg-blue-8 {
    background-color: rgb(3, 47, 98);
  }
  .bg-blue-9 {
    background-color: rgb(5, 38, 76);
  }
  .bg-purple {
    background-color: rgb(111, 66, 193);
  }
  .bg-purple-0 {
    background-color: rgb(245, 240, 255);
  }
  .bg-purple-1 {
    background-color: rgb(230, 220, 253);
  }
  .bg-purple-2 {
    background-color: rgb(209, 188, 249);
  }
  .bg-purple-3 {
    background-color: rgb(179, 146, 240);
  }
  .bg-purple-4 {
    background-color: rgb(138, 99, 210);
  }
  .bg-purple-5 {
    background-color: rgb(111, 66, 193);
  }
  .bg-purple-6 {
    background-color: rgb(90, 50, 163);
  }
  .bg-purple-7 {
    background-color: rgb(76, 40, 136);
  }
  .bg-purple-8 {
    background-color: rgb(58, 29, 110);
  }
  .bg-purple-9 {
    background-color: rgb(41, 19, 78);
  }
  .bg-pink {
    background-color: rgb(234, 74, 170);
  }
  .bg-pink-0 {
    background-color: rgb(255, 238, 248);
  }
  .bg-pink-1 {
    background-color: rgb(254, 219, 240);
  }
  .bg-pink-2 {
    background-color: rgb(249, 179, 221);
  }
  .bg-pink-3 {
    background-color: rgb(246, 146, 206);
  }
  .bg-pink-4 {
    background-color: rgb(236, 108, 185);
  }
  .bg-pink-5 {
    background-color: rgb(234, 74, 170);
  }
  .bg-pink-6 {
    background-color: rgb(208, 53, 146);
  }
  .bg-pink-7 {
    background-color: rgb(185, 58, 134);
  }
  .bg-pink-8 {
    background-color: rgb(153, 48, 111);
  }
  .bg-pink-9 {
    background-color: rgb(109, 34, 79);
  }
}

/* docara-shell-source: runtime/utility/border-color/default/css/default.css */
@layer sf.utilities {
  .border-transparent {
    border-color: var(--sf-transparent);
  }
  .border-current {
    border-color: var(--sf-current);
  }
  .border-outline {
    border-color: var(--sf-outline);
  }
  .border-outline-variant {
    border-color: var(--sf-outline-variant);
  }
  .border-surface {
    border-color: var(--sf-surface-1);
  }
  .border-surface-0 {
    border-color: var(--sf-surface-0);
  }
  .border-surface-1 {
    border-color: var(--sf-surface-1);
  }
  .border-surface-container {
    border-color: var(--sf-surface-container);
  }
  .border-surface-overlay {
    border-color: var(--sf-surface-overlay);
  }
  .border-surface-transparent-overlay {
    border-color: var(--sf-surface-transparent-overlay);
  }
  .border-surface-inverse {
    border-color: var(--sf-surface-inverse);
  }
  .border-on-surface {
    border-color: var(--sf-on-surface);
  }
  .border-on-surface-variant {
    border-color: var(--sf-on-surface-variant);
  }
  .border-primary {
    border-color: var(--sf-outline-primary);
  }
  .border-primary-container {
    border-color: var(--sf-primary-container);
  }
  .border-primary-transparent-overlay {
    border-color: var(--sf-primary-transparent-overlay);
  }
  .border-secondary {
    border-color: var(--sf-outline-secondary);
  }
  .border-secondary-container {
    border-color: var(--sf-secondary-container);
  }
  .border-secondary-transparent-overlay {
    border-color: var(--sf-secondary-transparent-overlay);
  }
  .border-tertiary {
    border-color: var(--sf-outline-tertiary);
  }
  .border-tertiary-container {
    border-color: var(--sf-tertiary-container);
  }
  .border-tertiary-transparent-overlay {
    border-color: var(--sf-tertiary-transparent-overlay);
  }
  .border-error {
    border-color: var(--sf-outline-error);
  }
  .border-error-container {
    border-color: var(--sf-error-container);
  }
  .border-error-transparent-overlay {
    border-color: var(--sf-error-transparent-overlay);
  }
  .border-warning {
    border-color: var(--sf-outline-warning);
  }
  .border-warning-container {
    border-color: var(--sf-warning-container);
  }
  .border-warning-transparent-overlay {
    border-color: var(--sf-warning-transparent-overlay);
  }
  .border-success {
    border-color: var(--sf-outline-success);
  }
  .border-success-container {
    border-color: var(--sf-success-container);
  }
  .border-success-transparent-overlay {
    border-color: var(--sf-success-transparent-overlay);
  }
  .border-info {
    border-color: var(--sf-outline-info);
  }
  .border-info-container {
    border-color: var(--sf-info-container);
  }
  .border-white {
    border-color: rgb(255, 255, 255);
  }
  .border-black {
    border-color: rgb(0, 0, 0);
  }
  .border-gray {
    border-color: rgb(106, 115, 125);
  }
  .border-gray-0 {
    border-color: rgb(250, 251, 252);
  }
  .border-gray-1 {
    border-color: rgb(246, 248, 250);
  }
  .border-gray-2 {
    border-color: rgb(225, 228, 232);
  }
  .border-gray-3 {
    border-color: rgb(209, 213, 218);
  }
  .border-gray-4 {
    border-color: rgb(149, 157, 165);
  }
  .border-gray-5 {
    border-color: rgb(106, 115, 125);
  }
  .border-gray-6 {
    border-color: rgb(88, 96, 105);
  }
  .border-gray-7 {
    border-color: rgb(68, 77, 86);
  }
  .border-gray-8 {
    border-color: rgb(47, 54, 61);
  }
  .border-gray-9 {
    border-color: rgb(36, 41, 46);
  }
  .border-red {
    border-color: rgb(215, 58, 73);
  }
  .border-red-0 {
    border-color: rgb(255, 238, 240);
  }
  .border-red-1 {
    border-color: rgb(255, 220, 224);
  }
  .border-red-2 {
    border-color: rgb(253, 174, 183);
  }
  .border-red-3 {
    border-color: rgb(249, 117, 131);
  }
  .border-red-4 {
    border-color: rgb(234, 74, 90);
  }
  .border-red-5 {
    border-color: rgb(215, 58, 73);
  }
  .border-red-6 {
    border-color: rgb(203, 36, 49);
  }
  .border-red-7 {
    border-color: rgb(179, 29, 40);
  }
  .border-red-8 {
    border-color: rgb(158, 28, 35);
  }
  .border-red-9 {
    border-color: rgb(134, 24, 29);
  }
  .border-orange {
    border-color: rgb(246, 106, 10);
  }
  .border-orange-0 {
    border-color: rgb(255, 248, 242);
  }
  .border-orange-1 {
    border-color: rgb(255, 235, 218);
  }
  .border-orange-2 {
    border-color: rgb(255, 209, 172);
  }
  .border-orange-3 {
    border-color: rgb(255, 171, 112);
  }
  .border-orange-4 {
    border-color: rgb(251, 133, 50);
  }
  .border-orange-5 {
    border-color: rgb(246, 106, 10);
  }
  .border-orange-6 {
    border-color: rgb(227, 98, 9);
  }
  .border-orange-7 {
    border-color: rgb(209, 87, 4);
  }
  .border-orange-8 {
    border-color: rgb(194, 78, 0);
  }
  .border-orange-9 {
    border-color: rgb(160, 65, 0);
  }
  .border-yellow {
    border-color: rgb(255, 211, 61);
  }
  .border-yellow-0 {
    border-color: rgb(255, 253, 239);
  }
  .border-yellow-1 {
    border-color: rgb(255, 251, 221);
  }
  .border-yellow-2 {
    border-color: rgb(255, 245, 177);
  }
  .border-yellow-3 {
    border-color: rgb(255, 234, 127);
  }
  .border-yellow-4 {
    border-color: rgb(255, 223, 93);
  }
  .border-yellow-5 {
    border-color: rgb(255, 211, 61);
  }
  .border-yellow-6 {
    border-color: rgb(249, 197, 19);
  }
  .border-yellow-7 {
    border-color: rgb(219, 171, 9);
  }
  .border-yellow-8 {
    border-color: rgb(176, 136, 0);
  }
  .border-yellow-9 {
    border-color: rgb(115, 92, 15);
  }
  .border-green {
    border-color: rgb(40, 167, 69);
  }
  .border-green-0 {
    border-color: rgb(240, 255, 244);
  }
  .border-green-1 {
    border-color: rgb(220, 255, 228);
  }
  .border-green-2 {
    border-color: rgb(190, 245, 203);
  }
  .border-green-3 {
    border-color: rgb(133, 232, 157);
  }
  .border-green-4 {
    border-color: rgb(52, 208, 88);
  }
  .border-green-5 {
    border-color: rgb(40, 167, 69);
  }
  .border-green-6 {
    border-color: rgb(34, 134, 58);
  }
  .border-green-7 {
    border-color: rgb(23, 111, 44);
  }
  .border-green-8 {
    border-color: rgb(22, 92, 38);
  }
  .border-green-9 {
    border-color: rgb(20, 70, 32);
  }
  .border-blue {
    border-color: rgb(3, 102, 214);
  }
  .border-blue-0 {
    border-color: rgb(241, 248, 255);
  }
  .border-blue-1 {
    border-color: rgb(219, 237, 255);
  }
  .border-blue-2 {
    border-color: rgb(200, 225, 255);
  }
  .border-blue-3 {
    border-color: rgb(121, 184, 255);
  }
  .border-blue-4 {
    border-color: rgb(33, 136, 255);
  }
  .border-blue-5 {
    border-color: rgb(3, 102, 214);
  }
  .border-blue-6 {
    border-color: rgb(0, 92, 197);
  }
  .border-blue-7 {
    border-color: rgb(4, 66, 137);
  }
  .border-blue-8 {
    border-color: rgb(3, 47, 98);
  }
  .border-blue-9 {
    border-color: rgb(5, 38, 76);
  }
  .border-purple {
    border-color: rgb(111, 66, 193);
  }
  .border-purple-0 {
    border-color: rgb(245, 240, 255);
  }
  .border-purple-1 {
    border-color: rgb(230, 220, 253);
  }
  .border-purple-2 {
    border-color: rgb(209, 188, 249);
  }
  .border-purple-3 {
    border-color: rgb(179, 146, 240);
  }
  .border-purple-4 {
    border-color: rgb(138, 99, 210);
  }
  .border-purple-5 {
    border-color: rgb(111, 66, 193);
  }
  .border-purple-6 {
    border-color: rgb(90, 50, 163);
  }
  .border-purple-7 {
    border-color: rgb(76, 40, 136);
  }
  .border-purple-8 {
    border-color: rgb(58, 29, 110);
  }
  .border-purple-9 {
    border-color: rgb(41, 19, 78);
  }
  .border-pink {
    border-color: rgb(234, 74, 170);
  }
  .border-pink-0 {
    border-color: rgb(255, 238, 248);
  }
  .border-pink-1 {
    border-color: rgb(254, 219, 240);
  }
  .border-pink-2 {
    border-color: rgb(249, 179, 221);
  }
  .border-pink-3 {
    border-color: rgb(246, 146, 206);
  }
  .border-pink-4 {
    border-color: rgb(236, 108, 185);
  }
  .border-pink-5 {
    border-color: rgb(234, 74, 170);
  }
  .border-pink-6 {
    border-color: rgb(208, 53, 146);
  }
  .border-pink-7 {
    border-color: rgb(185, 58, 134);
  }
  .border-pink-8 {
    border-color: rgb(153, 48, 111);
  }
  .border-pink-9 {
    border-color: rgb(109, 34, 79);
  }
}

/* docara-shell-source: runtime/utility/border-radius/default/css/default.css */
@layer sf.utilities {
  .radius-0 {
    border-radius: var(--sf-radius-0);
  }
  .radius-1\/3 {
    border-radius: var(--sf-radius-1\/3);
  }
  .radius-1\/2 {
    border-radius: var(--sf-radius-1\/2);
  }
  .radius-1 {
    border-radius: var(--sf-radius-1);
  }
  .radius-2 {
    border-radius: var(--sf-radius-2);
  }
  .radius-3 {
    border-radius: var(--sf-radius-3);
  }
  .radius-default {
    border-radius: var(--sf-radius-default);
  }
  .radius-square {
    border-radius: var(--sf-radius-square);
  }
  .radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .radius-round {
    border-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-0:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  .radius-top-0 {
    border-start-start-radius: var(--sf-radius-0);
    border-start-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-0:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  .radius-bottom-0 {
    border-end-start-radius: var(--sf-radius-0);
    border-end-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-start-0:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  .radius-inline-start-0 {
    border-start-start-radius: var(--sf-radius-0);
    border-end-start-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-inline-end-0:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  .radius-inline-end-0 {
    border-start-end-radius: var(--sf-radius-0);
    border-end-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-start-0:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-start-0:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  .radius-top-inline-start-0 {
    border-start-start-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-0 {
    border-top-right-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-end-0:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-0 {
    border-top-left-radius: var(--sf-radius-0);
    }
  }
  .radius-top-inline-end-0:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-0);
  }
  .radius-top-inline-end-0 {
    border-start-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-start-0:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-start-0:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  .radius-bottom-inline-start-0 {
    border-end-start-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-0 {
    border-bottom-right-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-end-0:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-0 {
    border-bottom-left-radius: var(--sf-radius-0);
    }
  }
  .radius-bottom-inline-end-0:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-0);
  }
  .radius-bottom-inline-end-0 {
    border-end-end-radius: var(--sf-radius-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-1\/3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  .radius-top-1\/3 {
    border-start-start-radius: var(--sf-radius-1\/3);
    border-start-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-1\/3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  .radius-bottom-1\/3 {
    border-end-start-radius: var(--sf-radius-1\/3);
    border-end-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-start-1\/3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  .radius-inline-start-1\/3 {
    border-start-start-radius: var(--sf-radius-1\/3);
    border-end-start-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-inline-end-1\/3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  .radius-inline-end-1\/3 {
    border-start-end-radius: var(--sf-radius-1\/3);
    border-end-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-start-1\/3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-start-1\/3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  .radius-top-inline-start-1\/3 {
    border-start-start-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-1\/3 {
    border-top-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-end-1\/3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-1\/3 {
    border-top-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-top-inline-end-1\/3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/3);
  }
  .radius-top-inline-end-1\/3 {
    border-start-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-start-1\/3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-start-1\/3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  .radius-bottom-inline-start-1\/3 {
    border-end-start-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-1\/3 {
    border-bottom-right-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-end-1\/3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-1\/3 {
    border-bottom-left-radius: var(--sf-radius-1\/3);
    }
  }
  .radius-bottom-inline-end-1\/3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/3);
  }
  .radius-bottom-inline-end-1\/3 {
    border-end-end-radius: var(--sf-radius-1\/3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-1\/2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  .radius-top-1\/2 {
    border-start-start-radius: var(--sf-radius-1\/2);
    border-start-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-1\/2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  .radius-bottom-1\/2 {
    border-end-start-radius: var(--sf-radius-1\/2);
    border-end-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-start-1\/2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  .radius-inline-start-1\/2 {
    border-start-start-radius: var(--sf-radius-1\/2);
    border-end-start-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-inline-end-1\/2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  .radius-inline-end-1\/2 {
    border-start-end-radius: var(--sf-radius-1\/2);
    border-end-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-start-1\/2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-start-1\/2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  .radius-top-inline-start-1\/2 {
    border-start-start-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-1\/2 {
    border-top-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-end-1\/2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-1\/2 {
    border-top-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-top-inline-end-1\/2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1\/2);
  }
  .radius-top-inline-end-1\/2 {
    border-start-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-start-1\/2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-start-1\/2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  .radius-bottom-inline-start-1\/2 {
    border-end-start-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-1\/2 {
    border-bottom-right-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-end-1\/2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-1\/2 {
    border-bottom-left-radius: var(--sf-radius-1\/2);
    }
  }
  .radius-bottom-inline-end-1\/2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1\/2);
  }
  .radius-bottom-inline-end-1\/2 {
    border-end-end-radius: var(--sf-radius-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-1:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  .radius-top-1 {
    border-start-start-radius: var(--sf-radius-1);
    border-start-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-1:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  .radius-bottom-1 {
    border-end-start-radius: var(--sf-radius-1);
    border-end-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-start-1:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  .radius-inline-start-1 {
    border-start-start-radius: var(--sf-radius-1);
    border-end-start-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-inline-end-1:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  .radius-inline-end-1 {
    border-start-end-radius: var(--sf-radius-1);
    border-end-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-start-1:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-start-1:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  .radius-top-inline-start-1 {
    border-start-start-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-1 {
    border-top-right-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-end-1:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-1 {
    border-top-left-radius: var(--sf-radius-1);
    }
  }
  .radius-top-inline-end-1:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-1);
  }
  .radius-top-inline-end-1 {
    border-start-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-start-1:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-start-1:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  .radius-bottom-inline-start-1 {
    border-end-start-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-1 {
    border-bottom-right-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-end-1:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-1 {
    border-bottom-left-radius: var(--sf-radius-1);
    }
  }
  .radius-bottom-inline-end-1:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-1);
  }
  .radius-bottom-inline-end-1 {
    border-end-end-radius: var(--sf-radius-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  .radius-top-2 {
    border-start-start-radius: var(--sf-radius-2);
    border-start-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  .radius-bottom-2 {
    border-end-start-radius: var(--sf-radius-2);
    border-end-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-start-2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  .radius-inline-start-2 {
    border-start-start-radius: var(--sf-radius-2);
    border-end-start-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-inline-end-2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  .radius-inline-end-2 {
    border-start-end-radius: var(--sf-radius-2);
    border-end-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-start-2:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-start-2:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  .radius-top-inline-start-2 {
    border-start-start-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-2 {
    border-top-right-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-end-2:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-2 {
    border-top-left-radius: var(--sf-radius-2);
    }
  }
  .radius-top-inline-end-2:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-2);
  }
  .radius-top-inline-end-2 {
    border-start-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-start-2:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-start-2:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  .radius-bottom-inline-start-2 {
    border-end-start-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-2 {
    border-bottom-right-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-end-2:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-2 {
    border-bottom-left-radius: var(--sf-radius-2);
    }
  }
  .radius-bottom-inline-end-2:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-2);
  }
  .radius-bottom-inline-end-2 {
    border-end-end-radius: var(--sf-radius-2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  .radius-top-3 {
    border-start-start-radius: var(--sf-radius-3);
    border-start-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  .radius-bottom-3 {
    border-end-start-radius: var(--sf-radius-3);
    border-end-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-start-3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  .radius-inline-start-3 {
    border-start-start-radius: var(--sf-radius-3);
    border-end-start-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-inline-end-3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  .radius-inline-end-3 {
    border-start-end-radius: var(--sf-radius-3);
    border-end-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-start-3:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-start-3:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  .radius-top-inline-start-3 {
    border-start-start-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-3 {
    border-top-right-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-end-3:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-3 {
    border-top-left-radius: var(--sf-radius-3);
    }
  }
  .radius-top-inline-end-3:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-3);
  }
  .radius-top-inline-end-3 {
    border-start-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-start-3:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-start-3:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  .radius-bottom-inline-start-3 {
    border-end-start-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-3 {
    border-bottom-right-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-end-3:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-3 {
    border-bottom-left-radius: var(--sf-radius-3);
    }
  }
  .radius-bottom-inline-end-3:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-3);
  }
  .radius-bottom-inline-end-3 {
    border-end-end-radius: var(--sf-radius-3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-default:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  .radius-top-default {
    border-start-start-radius: var(--sf-radius-default);
    border-start-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-default:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  .radius-bottom-default {
    border-end-start-radius: var(--sf-radius-default);
    border-end-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-start-default:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  .radius-inline-start-default {
    border-start-start-radius: var(--sf-radius-default);
    border-end-start-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-inline-end-default:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  .radius-inline-end-default {
    border-start-end-radius: var(--sf-radius-default);
    border-end-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-start-default:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-start-default:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  .radius-top-inline-start-default {
    border-start-start-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-default {
    border-top-right-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-end-default:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-default {
    border-top-left-radius: var(--sf-radius-default);
    }
  }
  .radius-top-inline-end-default:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-default);
  }
  .radius-top-inline-end-default {
    border-start-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-start-default:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-start-default:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  .radius-bottom-inline-start-default {
    border-end-start-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-default {
    border-bottom-right-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-end-default:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-default {
    border-bottom-left-radius: var(--sf-radius-default);
    }
  }
  .radius-bottom-inline-end-default:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-default);
  }
  .radius-bottom-inline-end-default {
    border-end-end-radius: var(--sf-radius-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-square:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  .radius-top-square {
    border-start-start-radius: var(--sf-radius-square);
    border-start-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-square:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  .radius-bottom-square {
    border-end-start-radius: var(--sf-radius-square);
    border-end-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-start-square:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .radius-inline-start-square {
    border-start-start-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-inline-end-square:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  .radius-inline-end-square {
    border-start-end-radius: var(--sf-radius-square);
    border-end-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-start-square:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-start-square:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .radius-top-inline-start-square {
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-square {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-end-square:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-square {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .radius-top-inline-end-square:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  .radius-top-inline-end-square {
    border-start-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-start-square:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-start-square:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .radius-bottom-inline-start-square {
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-square {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-end-square:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-square {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .radius-bottom-inline-end-square:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  .radius-bottom-inline-end-square {
    border-end-end-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-rounded:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  .radius-top-rounded {
    border-start-start-radius: var(--sf-radius-rounded);
    border-start-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-rounded:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  .radius-bottom-rounded {
    border-end-start-radius: var(--sf-radius-rounded);
    border-end-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-start-rounded:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  .radius-inline-start-rounded {
    border-start-start-radius: var(--sf-radius-rounded);
    border-end-start-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-inline-end-rounded:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  .radius-inline-end-rounded {
    border-start-end-radius: var(--sf-radius-rounded);
    border-end-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-start-rounded:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-start-rounded:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  .radius-top-inline-start-rounded {
    border-start-start-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-rounded {
    border-top-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-end-rounded:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-rounded {
    border-top-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-top-inline-end-rounded:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-rounded);
  }
  .radius-top-inline-end-rounded {
    border-start-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-start-rounded:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-start-rounded:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  .radius-bottom-inline-start-rounded {
    border-end-start-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-rounded {
    border-bottom-right-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-end-rounded:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-rounded {
    border-bottom-left-radius: var(--sf-radius-rounded);
    }
  }
  .radius-bottom-inline-end-rounded:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-rounded);
  }
  .radius-bottom-inline-end-rounded {
    border-end-end-radius: var(--sf-radius-rounded);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-round:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  .radius-top-round {
    border-start-start-radius: var(--sf-radius-round);
    border-start-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-round:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  .radius-bottom-round {
    border-end-start-radius: var(--sf-radius-round);
    border-end-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-start-round:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  .radius-inline-start-round {
    border-start-start-radius: var(--sf-radius-round);
    border-end-start-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-inline-end-round:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  .radius-inline-end-round {
    border-start-end-radius: var(--sf-radius-round);
    border-end-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-start-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-start-round:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .radius-top-inline-start-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-start-round:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  .radius-top-inline-start-round {
    border-start-start-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-top-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .radius-top-inline-end-round {
    border-top-right-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-end-round:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-top-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .radius-top-inline-end-round {
    border-top-left-radius: var(--sf-radius-round);
    }
  }
  .radius-top-inline-end-round:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-round);
  }
  .radius-top-inline-end-round {
    border-start-end-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-start-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-start-round:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-start-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-start-round:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  .radius-bottom-inline-start-round {
    border-end-start-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .radius-bottom-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .radius-bottom-inline-end-round {
    border-bottom-right-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-end-round:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-round);
  }
  _:-ms-input-placeholder, [dir="rtl"] .radius-bottom-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .radius-bottom-inline-end-round {
    border-bottom-left-radius: var(--sf-radius-round);
    }
  }
  .radius-bottom-inline-end-round:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-round);
  }
  .radius-bottom-inline-end-round {
    border-end-end-radius: var(--sf-radius-round);
  }
}

/* docara-shell-source: runtime/utility/border-style/default/css/default.css */
@layer sf.utilities {
  .border-dotted {
    border-style: dotted;
  }
  .border-dashed {
    border-style: dashed;
  }
  .border-solid {
    border-style: solid;
  }
  .border-double {
    border-style: double;
  }
  .border-hidden {
    border-style: hidden;
  }
  .border-inset {
    border-style: inset;
  }
  .border-none {
    border-style: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-dotted {
    border-left-style: dotted;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-inline-start-dotted {
    border-left-style: dotted;
    }
  }
  .border-inline-start-dotted:where(:dir(ltr)) {
    border-left-style: dotted;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-dotted {
    border-right-style: dotted;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-inline-start-dotted {
    border-right-style: dotted;
    }
  }
  .border-inline-start-dotted:where(:dir(rtl)) {
    border-right-style: dotted;
  }
  .border-inline-start-dotted {
    border-inline-start-style: dotted;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-dashed {
    border-left-style: dashed;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-inline-start-dashed {
    border-left-style: dashed;
    }
  }
  .border-inline-start-dashed:where(:dir(ltr)) {
    border-left-style: dashed;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-dashed {
    border-right-style: dashed;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-inline-start-dashed {
    border-right-style: dashed;
    }
  }
  .border-inline-start-dashed:where(:dir(rtl)) {
    border-right-style: dashed;
  }
  .border-inline-start-dashed {
    border-inline-start-style: dashed;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-solid {
    border-left-style: solid;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-inline-start-solid {
    border-left-style: solid;
    }
  }
  .border-inline-start-solid:where(:dir(ltr)) {
    border-left-style: solid;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-solid {
    border-right-style: solid;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-inline-start-solid {
    border-right-style: solid;
    }
  }
  .border-inline-start-solid:where(:dir(rtl)) {
    border-right-style: solid;
  }
  .border-inline-start-solid {
    border-inline-start-style: solid;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-double {
    border-left-style: double;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-inline-start-double {
    border-left-style: double;
    }
  }
  .border-inline-start-double:where(:dir(ltr)) {
    border-left-style: double;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-double {
    border-right-style: double;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-inline-start-double {
    border-right-style: double;
    }
  }
  .border-inline-start-double:where(:dir(rtl)) {
    border-right-style: double;
  }
  .border-inline-start-double {
    border-inline-start-style: double;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-hidden {
    border-left-style: hidden;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-inline-start-hidden {
    border-left-style: hidden;
    }
  }
  .border-inline-start-hidden:where(:dir(ltr)) {
    border-left-style: hidden;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-hidden {
    border-right-style: hidden;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-inline-start-hidden {
    border-right-style: hidden;
    }
  }
  .border-inline-start-hidden:where(:dir(rtl)) {
    border-right-style: hidden;
  }
  .border-inline-start-hidden {
    border-inline-start-style: hidden;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-inset {
    border-left-style: inset;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-inline-start-inset {
    border-left-style: inset;
    }
  }
  .border-inline-start-inset:where(:dir(ltr)) {
    border-left-style: inset;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-inset {
    border-right-style: inset;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-inline-start-inset {
    border-right-style: inset;
    }
  }
  .border-inline-start-inset:where(:dir(rtl)) {
    border-right-style: inset;
  }
  .border-inline-start-inset {
    border-inline-start-style: inset;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-none {
    border-left-style: none;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-inline-start-none {
    border-left-style: none;
    }
  }
  .border-inline-start-none:where(:dir(ltr)) {
    border-left-style: none;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-none {
    border-right-style: none;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-inline-start-none {
    border-right-style: none;
    }
  }
  .border-inline-start-none:where(:dir(rtl)) {
    border-right-style: none;
  }
  .border-inline-start-none {
    border-inline-start-style: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-dotted {
    border-right-style: dotted;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-inline-end-dotted {
    border-right-style: dotted;
    }
  }
  .border-inline-end-dotted:where(:dir(ltr)) {
    border-right-style: dotted;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-dotted {
    border-left-style: dotted;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-inline-end-dotted {
    border-left-style: dotted;
    }
  }
  .border-inline-end-dotted:where(:dir(rtl)) {
    border-left-style: dotted;
  }
  .border-inline-end-dotted {
    border-inline-end-style: dotted;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-dashed {
    border-right-style: dashed;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-inline-end-dashed {
    border-right-style: dashed;
    }
  }
  .border-inline-end-dashed:where(:dir(ltr)) {
    border-right-style: dashed;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-dashed {
    border-left-style: dashed;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-inline-end-dashed {
    border-left-style: dashed;
    }
  }
  .border-inline-end-dashed:where(:dir(rtl)) {
    border-left-style: dashed;
  }
  .border-inline-end-dashed {
    border-inline-end-style: dashed;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-solid {
    border-right-style: solid;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-inline-end-solid {
    border-right-style: solid;
    }
  }
  .border-inline-end-solid:where(:dir(ltr)) {
    border-right-style: solid;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-solid {
    border-left-style: solid;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-inline-end-solid {
    border-left-style: solid;
    }
  }
  .border-inline-end-solid:where(:dir(rtl)) {
    border-left-style: solid;
  }
  .border-inline-end-solid {
    border-inline-end-style: solid;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-double {
    border-right-style: double;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-inline-end-double {
    border-right-style: double;
    }
  }
  .border-inline-end-double:where(:dir(ltr)) {
    border-right-style: double;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-double {
    border-left-style: double;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-inline-end-double {
    border-left-style: double;
    }
  }
  .border-inline-end-double:where(:dir(rtl)) {
    border-left-style: double;
  }
  .border-inline-end-double {
    border-inline-end-style: double;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-hidden {
    border-right-style: hidden;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-inline-end-hidden {
    border-right-style: hidden;
    }
  }
  .border-inline-end-hidden:where(:dir(ltr)) {
    border-right-style: hidden;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-hidden {
    border-left-style: hidden;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-inline-end-hidden {
    border-left-style: hidden;
    }
  }
  .border-inline-end-hidden:where(:dir(rtl)) {
    border-left-style: hidden;
  }
  .border-inline-end-hidden {
    border-inline-end-style: hidden;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-inset {
    border-right-style: inset;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-inline-end-inset {
    border-right-style: inset;
    }
  }
  .border-inline-end-inset:where(:dir(ltr)) {
    border-right-style: inset;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-inset {
    border-left-style: inset;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-inline-end-inset {
    border-left-style: inset;
    }
  }
  .border-inline-end-inset:where(:dir(rtl)) {
    border-left-style: inset;
  }
  .border-inline-end-inset {
    border-inline-end-style: inset;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-none {
    border-right-style: none;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-inline-end-none {
    border-right-style: none;
    }
  }
  .border-inline-end-none:where(:dir(ltr)) {
    border-right-style: none;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-none {
    border-left-style: none;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-inline-end-none {
    border-left-style: none;
    }
  }
  .border-inline-end-none:where(:dir(rtl)) {
    border-left-style: none;
  }
  .border-inline-end-none {
    border-inline-end-style: none;
  }
  .border-top-dotted {
    border-top-style: dotted;
  }
  .border-top-dashed {
    border-top-style: dashed;
  }
  .border-top-solid {
    border-top-style: solid;
  }
  .border-top-double {
    border-top-style: double;
  }
  .border-top-hidden {
    border-top-style: hidden;
  }
  .border-top-inset {
    border-top-style: inset;
  }
  .border-top-none {
    border-top-style: none;
  }
  .border-bottom-dotted {
    border-bottom-style: dotted;
  }
  .border-bottom-dashed {
    border-bottom-style: dashed;
  }
  .border-bottom-solid {
    border-bottom-style: solid;
  }
  .border-bottom-double {
    border-bottom-style: double;
  }
  .border-bottom-hidden {
    border-bottom-style: hidden;
  }
  .border-bottom-inset {
    border-bottom-style: inset;
  }
  .border-bottom-none {
    border-bottom-style: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-dotted {
    border-left-style: dotted;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-x-dotted {
    border-left-style: dotted;
    }
  }
  .border-x-dotted:where(:dir(ltr)) {
    border-left-style: dotted;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-dotted {
    border-right-style: dotted;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-x-dotted {
    border-right-style: dotted;
    }
  }
  .border-x-dotted:where(:dir(rtl)) {
    border-right-style: dotted;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-dotted {
    border-right-style: dotted;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-x-dotted {
    border-right-style: dotted;
    }
  }
  .border-x-dotted:where(:dir(ltr)) {
    border-right-style: dotted;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-dotted {
    border-left-style: dotted;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-x-dotted {
    border-left-style: dotted;
    }
  }
  .border-x-dotted:where(:dir(rtl)) {
    border-left-style: dotted;
  }
  .border-x-dotted {
    border-inline-start-style: dotted;
    border-inline-end-style: dotted;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-dashed {
    border-left-style: dashed;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-x-dashed {
    border-left-style: dashed;
    }
  }
  .border-x-dashed:where(:dir(ltr)) {
    border-left-style: dashed;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-dashed {
    border-right-style: dashed;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-x-dashed {
    border-right-style: dashed;
    }
  }
  .border-x-dashed:where(:dir(rtl)) {
    border-right-style: dashed;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-dashed {
    border-right-style: dashed;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-x-dashed {
    border-right-style: dashed;
    }
  }
  .border-x-dashed:where(:dir(ltr)) {
    border-right-style: dashed;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-dashed {
    border-left-style: dashed;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-x-dashed {
    border-left-style: dashed;
    }
  }
  .border-x-dashed:where(:dir(rtl)) {
    border-left-style: dashed;
  }
  .border-x-dashed {
    border-inline-start-style: dashed;
    border-inline-end-style: dashed;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-solid {
    border-left-style: solid;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-x-solid {
    border-left-style: solid;
    }
  }
  .border-x-solid:where(:dir(ltr)) {
    border-left-style: solid;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-solid {
    border-right-style: solid;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-x-solid {
    border-right-style: solid;
    }
  }
  .border-x-solid:where(:dir(rtl)) {
    border-right-style: solid;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-solid {
    border-right-style: solid;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-x-solid {
    border-right-style: solid;
    }
  }
  .border-x-solid:where(:dir(ltr)) {
    border-right-style: solid;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-solid {
    border-left-style: solid;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-x-solid {
    border-left-style: solid;
    }
  }
  .border-x-solid:where(:dir(rtl)) {
    border-left-style: solid;
  }
  .border-x-solid {
    border-inline-start-style: solid;
    border-inline-end-style: solid;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-double {
    border-left-style: double;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-x-double {
    border-left-style: double;
    }
  }
  .border-x-double:where(:dir(ltr)) {
    border-left-style: double;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-double {
    border-right-style: double;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-x-double {
    border-right-style: double;
    }
  }
  .border-x-double:where(:dir(rtl)) {
    border-right-style: double;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-double {
    border-right-style: double;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-x-double {
    border-right-style: double;
    }
  }
  .border-x-double:where(:dir(ltr)) {
    border-right-style: double;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-double {
    border-left-style: double;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-x-double {
    border-left-style: double;
    }
  }
  .border-x-double:where(:dir(rtl)) {
    border-left-style: double;
  }
  .border-x-double {
    border-inline-start-style: double;
    border-inline-end-style: double;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-hidden {
    border-left-style: hidden;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-x-hidden {
    border-left-style: hidden;
    }
  }
  .border-x-hidden:where(:dir(ltr)) {
    border-left-style: hidden;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-hidden {
    border-right-style: hidden;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-x-hidden {
    border-right-style: hidden;
    }
  }
  .border-x-hidden:where(:dir(rtl)) {
    border-right-style: hidden;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-hidden {
    border-right-style: hidden;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-x-hidden {
    border-right-style: hidden;
    }
  }
  .border-x-hidden:where(:dir(ltr)) {
    border-right-style: hidden;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-hidden {
    border-left-style: hidden;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-x-hidden {
    border-left-style: hidden;
    }
  }
  .border-x-hidden:where(:dir(rtl)) {
    border-left-style: hidden;
  }
  .border-x-hidden {
    border-inline-start-style: hidden;
    border-inline-end-style: hidden;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-inset {
    border-left-style: inset;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-x-inset {
    border-left-style: inset;
    }
  }
  .border-x-inset:where(:dir(ltr)) {
    border-left-style: inset;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-inset {
    border-right-style: inset;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-x-inset {
    border-right-style: inset;
    }
  }
  .border-x-inset:where(:dir(rtl)) {
    border-right-style: inset;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-inset {
    border-right-style: inset;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-x-inset {
    border-right-style: inset;
    }
  }
  .border-x-inset:where(:dir(ltr)) {
    border-right-style: inset;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-inset {
    border-left-style: inset;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-x-inset {
    border-left-style: inset;
    }
  }
  .border-x-inset:where(:dir(rtl)) {
    border-left-style: inset;
  }
  .border-x-inset {
    border-inline-start-style: inset;
    border-inline-end-style: inset;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-none {
    border-left-style: none;
  }
  @supports not (border-inline-start-style: initial) {
  html:not([dir="rtl"]) .border-x-none {
    border-left-style: none;
    }
  }
  .border-x-none:where(:dir(ltr)) {
    border-left-style: none;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-none {
    border-right-style: none;
  }
  @supports not (border-inline-start-style: initial) {
  [dir="rtl"] .border-x-none {
    border-right-style: none;
    }
  }
  .border-x-none:where(:dir(rtl)) {
    border-right-style: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-none {
    border-right-style: none;
  }
  @supports not (border-inline-end-style: initial) {
  html:not([dir="rtl"]) .border-x-none {
    border-right-style: none;
    }
  }
  .border-x-none:where(:dir(ltr)) {
    border-right-style: none;
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-none {
    border-left-style: none;
  }
  @supports not (border-inline-end-style: initial) {
  [dir="rtl"] .border-x-none {
    border-left-style: none;
    }
  }
  .border-x-none:where(:dir(rtl)) {
    border-left-style: none;
  }
  .border-x-none {
    border-inline-start-style: none;
    border-inline-end-style: none;
  }
  .border-y-dotted {
    border-top-style: dotted;
    border-bottom-style: dotted;
  }
  .border-y-dashed {
    border-top-style: dashed;
    border-bottom-style: dashed;
  }
  .border-y-solid {
    border-top-style: solid;
    border-bottom-style: solid;
  }
  .border-y-double {
    border-top-style: double;
    border-bottom-style: double;
  }
  .border-y-hidden {
    border-top-style: hidden;
    border-bottom-style: hidden;
  }
  .border-y-inset {
    border-top-style: inset;
    border-bottom-style: inset;
  }
  .border-y-none {
    border-top-style: none;
    border-bottom-style: none;
  }
}

/* docara-shell-source: runtime/utility/border-width/default/css/default.css */
@layer sf.utilities {
  .border-1 {
    border-width: var(--sf-a1);
  }
  .border-2 {
    border-width: var(--sf-a2);
  }
  .border-3 {
    border-width: var(--sf-a3);
  }
  .border-4 {
    border-width: var(--sf-a4);
  }
  .border-5 {
    border-width: var(--sf-a5);
  }
  .border-6 {
    border-width: var(--sf-a6);
  }
  .border-7 {
    border-width: var(--sf-a7);
  }
  .border-8 {
    border-width: var(--sf-a8);
  }
  .border-9 {
    border-width: var(--sf-a9);
  }
  .border-10 {
    border-width: var(--sf-b0);
  }
  .border-0 {
    border-width: var(--sf-0);
  }
  .border-top-1 {
    border-top-width: var(--sf-a1);
  }
  .border-top-2 {
    border-top-width: var(--sf-a2);
  }
  .border-top-3 {
    border-top-width: var(--sf-a3);
  }
  .border-top-4 {
    border-top-width: var(--sf-a4);
  }
  .border-top-5 {
    border-top-width: var(--sf-a5);
  }
  .border-top-6 {
    border-top-width: var(--sf-a6);
  }
  .border-top-7 {
    border-top-width: var(--sf-a7);
  }
  .border-top-8 {
    border-top-width: var(--sf-a8);
  }
  .border-top-9 {
    border-top-width: var(--sf-a9);
  }
  .border-top-10 {
    border-top-width: var(--sf-b0);
  }
  .border-top-0 {
    border-top-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-inline-end-1:where(:dir(ltr)) {
    border-right-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-inline-end-1:where(:dir(rtl)) {
    border-left-width: var(--sf-a1);
  }
  .border-inline-end-1 {
    border-inline-end-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-inline-end-2:where(:dir(ltr)) {
    border-right-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-inline-end-2:where(:dir(rtl)) {
    border-left-width: var(--sf-a2);
  }
  .border-inline-end-2 {
    border-inline-end-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-inline-end-3:where(:dir(ltr)) {
    border-right-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-inline-end-3:where(:dir(rtl)) {
    border-left-width: var(--sf-a3);
  }
  .border-inline-end-3 {
    border-inline-end-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-inline-end-4:where(:dir(ltr)) {
    border-right-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-inline-end-4:where(:dir(rtl)) {
    border-left-width: var(--sf-a4);
  }
  .border-inline-end-4 {
    border-inline-end-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-inline-end-5:where(:dir(ltr)) {
    border-right-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-inline-end-5:where(:dir(rtl)) {
    border-left-width: var(--sf-a5);
  }
  .border-inline-end-5 {
    border-inline-end-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-inline-end-6:where(:dir(ltr)) {
    border-right-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-inline-end-6:where(:dir(rtl)) {
    border-left-width: var(--sf-a6);
  }
  .border-inline-end-6 {
    border-inline-end-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-inline-end-7:where(:dir(ltr)) {
    border-right-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-inline-end-7:where(:dir(rtl)) {
    border-left-width: var(--sf-a7);
  }
  .border-inline-end-7 {
    border-inline-end-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-inline-end-8:where(:dir(ltr)) {
    border-right-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-inline-end-8:where(:dir(rtl)) {
    border-left-width: var(--sf-a8);
  }
  .border-inline-end-8 {
    border-inline-end-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-inline-end-9:where(:dir(ltr)) {
    border-right-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-inline-end-9:where(:dir(rtl)) {
    border-left-width: var(--sf-a9);
  }
  .border-inline-end-9 {
    border-inline-end-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-inline-end-10:where(:dir(ltr)) {
    border-right-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-inline-end-10:where(:dir(rtl)) {
    border-left-width: var(--sf-b0);
  }
  .border-inline-end-10 {
    border-inline-end-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-end-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-inline-end-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-inline-end-0:where(:dir(ltr)) {
    border-right-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-end-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-inline-end-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-inline-end-0:where(:dir(rtl)) {
    border-left-width: var(--sf-0);
  }
  .border-inline-end-0 {
    border-inline-end-width: var(--sf-0);
  }
  .border-bottom-1 {
    border-bottom-width: var(--sf-a1);
  }
  .border-bottom-2 {
    border-bottom-width: var(--sf-a2);
  }
  .border-bottom-3 {
    border-bottom-width: var(--sf-a3);
  }
  .border-bottom-4 {
    border-bottom-width: var(--sf-a4);
  }
  .border-bottom-5 {
    border-bottom-width: var(--sf-a5);
  }
  .border-bottom-6 {
    border-bottom-width: var(--sf-a6);
  }
  .border-bottom-7 {
    border-bottom-width: var(--sf-a7);
  }
  .border-bottom-8 {
    border-bottom-width: var(--sf-a8);
  }
  .border-bottom-9 {
    border-bottom-width: var(--sf-a9);
  }
  .border-bottom-10 {
    border-bottom-width: var(--sf-b0);
  }
  .border-bottom-0 {
    border-bottom-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-inline-start-1:where(:dir(ltr)) {
    border-left-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-inline-start-1:where(:dir(rtl)) {
    border-right-width: var(--sf-a1);
  }
  .border-inline-start-1 {
    border-inline-start-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-inline-start-2:where(:dir(ltr)) {
    border-left-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-inline-start-2:where(:dir(rtl)) {
    border-right-width: var(--sf-a2);
  }
  .border-inline-start-2 {
    border-inline-start-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-inline-start-3:where(:dir(ltr)) {
    border-left-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-inline-start-3:where(:dir(rtl)) {
    border-right-width: var(--sf-a3);
  }
  .border-inline-start-3 {
    border-inline-start-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-inline-start-4:where(:dir(ltr)) {
    border-left-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-inline-start-4:where(:dir(rtl)) {
    border-right-width: var(--sf-a4);
  }
  .border-inline-start-4 {
    border-inline-start-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-inline-start-5:where(:dir(ltr)) {
    border-left-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-inline-start-5:where(:dir(rtl)) {
    border-right-width: var(--sf-a5);
  }
  .border-inline-start-5 {
    border-inline-start-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-inline-start-6:where(:dir(ltr)) {
    border-left-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-inline-start-6:where(:dir(rtl)) {
    border-right-width: var(--sf-a6);
  }
  .border-inline-start-6 {
    border-inline-start-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-inline-start-7:where(:dir(ltr)) {
    border-left-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-inline-start-7:where(:dir(rtl)) {
    border-right-width: var(--sf-a7);
  }
  .border-inline-start-7 {
    border-inline-start-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-inline-start-8:where(:dir(ltr)) {
    border-left-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-inline-start-8:where(:dir(rtl)) {
    border-right-width: var(--sf-a8);
  }
  .border-inline-start-8 {
    border-inline-start-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-inline-start-9:where(:dir(ltr)) {
    border-left-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-inline-start-9:where(:dir(rtl)) {
    border-right-width: var(--sf-a9);
  }
  .border-inline-start-9 {
    border-inline-start-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-inline-start-10:where(:dir(ltr)) {
    border-left-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-inline-start-10:where(:dir(rtl)) {
    border-right-width: var(--sf-b0);
  }
  .border-inline-start-10 {
    border-inline-start-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-inline-start-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-inline-start-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-inline-start-0:where(:dir(ltr)) {
    border-left-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-inline-start-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-inline-start-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-inline-start-0:where(:dir(rtl)) {
    border-right-width: var(--sf-0);
  }
  .border-inline-start-0 {
    border-inline-start-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(ltr)) {
    border-right-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(rtl)) {
    border-left-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-1 {
    border-left-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-1 {
    border-left-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(ltr)) {
    border-left-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-1 {
    border-right-width: var(--sf-a1);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-1 {
    border-right-width: var(--sf-a1);
    }
  }
  .border-x-1:where(:dir(rtl)) {
    border-right-width: var(--sf-a1);
  }
  .border-x-1 {
    border-inline-end-width: var(--sf-a1);
    border-inline-start-width: var(--sf-a1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(ltr)) {
    border-right-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(rtl)) {
    border-left-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-2 {
    border-left-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-2 {
    border-left-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(ltr)) {
    border-left-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-2 {
    border-right-width: var(--sf-a2);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-2 {
    border-right-width: var(--sf-a2);
    }
  }
  .border-x-2:where(:dir(rtl)) {
    border-right-width: var(--sf-a2);
  }
  .border-x-2 {
    border-inline-end-width: var(--sf-a2);
    border-inline-start-width: var(--sf-a2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(ltr)) {
    border-right-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(rtl)) {
    border-left-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-3 {
    border-left-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-3 {
    border-left-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(ltr)) {
    border-left-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-3 {
    border-right-width: var(--sf-a3);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-3 {
    border-right-width: var(--sf-a3);
    }
  }
  .border-x-3:where(:dir(rtl)) {
    border-right-width: var(--sf-a3);
  }
  .border-x-3 {
    border-inline-end-width: var(--sf-a3);
    border-inline-start-width: var(--sf-a3);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(ltr)) {
    border-right-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(rtl)) {
    border-left-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-4 {
    border-left-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-4 {
    border-left-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(ltr)) {
    border-left-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-4 {
    border-right-width: var(--sf-a4);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-4 {
    border-right-width: var(--sf-a4);
    }
  }
  .border-x-4:where(:dir(rtl)) {
    border-right-width: var(--sf-a4);
  }
  .border-x-4 {
    border-inline-end-width: var(--sf-a4);
    border-inline-start-width: var(--sf-a4);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(ltr)) {
    border-right-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(rtl)) {
    border-left-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-5 {
    border-left-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-5 {
    border-left-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(ltr)) {
    border-left-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-5 {
    border-right-width: var(--sf-a5);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-5 {
    border-right-width: var(--sf-a5);
    }
  }
  .border-x-5:where(:dir(rtl)) {
    border-right-width: var(--sf-a5);
  }
  .border-x-5 {
    border-inline-end-width: var(--sf-a5);
    border-inline-start-width: var(--sf-a5);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(ltr)) {
    border-right-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(rtl)) {
    border-left-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-6 {
    border-left-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-6 {
    border-left-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(ltr)) {
    border-left-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-6 {
    border-right-width: var(--sf-a6);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-6 {
    border-right-width: var(--sf-a6);
    }
  }
  .border-x-6:where(:dir(rtl)) {
    border-right-width: var(--sf-a6);
  }
  .border-x-6 {
    border-inline-end-width: var(--sf-a6);
    border-inline-start-width: var(--sf-a6);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(ltr)) {
    border-right-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(rtl)) {
    border-left-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-7 {
    border-left-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-7 {
    border-left-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(ltr)) {
    border-left-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-7 {
    border-right-width: var(--sf-a7);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-7 {
    border-right-width: var(--sf-a7);
    }
  }
  .border-x-7:where(:dir(rtl)) {
    border-right-width: var(--sf-a7);
  }
  .border-x-7 {
    border-inline-end-width: var(--sf-a7);
    border-inline-start-width: var(--sf-a7);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(ltr)) {
    border-right-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(rtl)) {
    border-left-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-8 {
    border-left-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-8 {
    border-left-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(ltr)) {
    border-left-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-8 {
    border-right-width: var(--sf-a8);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-8 {
    border-right-width: var(--sf-a8);
    }
  }
  .border-x-8:where(:dir(rtl)) {
    border-right-width: var(--sf-a8);
  }
  .border-x-8 {
    border-inline-end-width: var(--sf-a8);
    border-inline-start-width: var(--sf-a8);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(ltr)) {
    border-right-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(rtl)) {
    border-left-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-9 {
    border-left-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-9 {
    border-left-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(ltr)) {
    border-left-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-9 {
    border-right-width: var(--sf-a9);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-9 {
    border-right-width: var(--sf-a9);
    }
  }
  .border-x-9:where(:dir(rtl)) {
    border-right-width: var(--sf-a9);
  }
  .border-x-9 {
    border-inline-end-width: var(--sf-a9);
    border-inline-start-width: var(--sf-a9);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(ltr)) {
    border-right-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(rtl)) {
    border-left-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-10 {
    border-left-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-10 {
    border-left-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(ltr)) {
    border-left-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-10 {
    border-right-width: var(--sf-b0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-10 {
    border-right-width: var(--sf-b0);
    }
  }
  .border-x-10:where(:dir(rtl)) {
    border-right-width: var(--sf-b0);
  }
  .border-x-10 {
    border-inline-end-width: var(--sf-b0);
    border-inline-start-width: var(--sf-b0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .border-x-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(ltr)) {
    border-right-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .border-x-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(rtl)) {
    border-left-width: var(--sf-0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .border-x-0 {
    border-left-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .border-x-0 {
    border-left-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(ltr)) {
    border-left-width: var(--sf-0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .border-x-0 {
    border-right-width: var(--sf-0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .border-x-0 {
    border-right-width: var(--sf-0);
    }
  }
  .border-x-0:where(:dir(rtl)) {
    border-right-width: var(--sf-0);
  }
  .border-x-0 {
    border-inline-end-width: var(--sf-0);
    border-inline-start-width: var(--sf-0);
  }
  .border-y-1 {
    border-top-width: var(--sf-a1);
    border-bottom-width: var(--sf-a1);
  }
  .border-y-2 {
    border-top-width: var(--sf-a2);
    border-bottom-width: var(--sf-a2);
  }
  .border-y-3 {
    border-top-width: var(--sf-a3);
    border-bottom-width: var(--sf-a3);
  }
  .border-y-4 {
    border-top-width: var(--sf-a4);
    border-bottom-width: var(--sf-a4);
  }
  .border-y-5 {
    border-top-width: var(--sf-a5);
    border-bottom-width: var(--sf-a5);
  }
  .border-y-6 {
    border-top-width: var(--sf-a6);
    border-bottom-width: var(--sf-a6);
  }
  .border-y-7 {
    border-top-width: var(--sf-a7);
    border-bottom-width: var(--sf-a7);
  }
  .border-y-8 {
    border-top-width: var(--sf-a8);
    border-bottom-width: var(--sf-a8);
  }
  .border-y-9 {
    border-top-width: var(--sf-a9);
    border-bottom-width: var(--sf-a9);
  }
  .border-y-10 {
    border-top-width: var(--sf-b0);
    border-bottom-width: var(--sf-b0);
  }
  .border-y-0 {
    border-top-width: var(--sf-0);
    border-bottom-width: var(--sf-0);
  }
}

/* docara-shell-source: runtime/component/breadcrumbs/css/breadcrumbs.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/*
* _var__component_name.scss
* 
* SCSS file containing variables for component styling.
* 
* Used to define default parameters (color, size, etc.)
* that can be overridden in other parts of the project.
* 
* Example usage:
* --sf-icon--fill: 0; // Fill for icon
*/
@layer sf.components {
  /* 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) */
  .sf-breadcrumbs-item {
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    min-inline-size: -webkit-min-content;
    min-inline-size: -moz-min-content;
    min-inline-size: min-content;
    background-color: var(--sf-breadcrumbs-item--background-color);
    box-shadow: var(--sf-breadcrumbs-item--box-shadow);
    --sf-breadcrumbs-item--background-color: transparent;
    --sf-breadcrumbs-item--box-shadow: none;
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--separator {
    flex: 0 0 auto;
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-breadcrumbs-item-container--gap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-breadcrumbs-item .sf-breadcrumbs-item-container {
    min-width: 0;
    min-inline-size: 0;
    word-wrap: anywhere;
    --sf-breadcrumbs-item-container--background-color: transparent;
    --sf-breadcrumbs-item-container--color: var(--sf-on-surface-variant);
    --sf-breadcrumbs-item-container--font-family: var(--sf-text--family);
    --sf-breadcrumbs-item-container--font-size: var(--sf-text-size-1\/2);
    --sf-breadcrumbs-item-container--font-weight: var(--sf-font-weight-regular);
    --sf-breadcrumbs-item-container--gap: var(--sf-space-1\/4);
    --sf-breadcrumbs-item-container--line-height: var(--sf-text-height-1\/2);
    background-color: var(--sf-breadcrumbs-item-container--background-color);
    color: var(--sf-breadcrumbs-item-container--color);
    font-family: var(--sf-breadcrumbs-item-container--font-family);
    font-size: var(--sf-breadcrumbs-item-container--font-size);
    font-weight: var(--sf-breadcrumbs-item-container--font-weight);
    gap: var(--sf-breadcrumbs-item-container--gap);
    line-height: var(--sf-breadcrumbs-item-container--line-height);
  }
  .sf-breadcrumbs-item .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item .sf-breadcrumbs-item-container > sf-icon > .sf-icon {
    flex-shrink: 0;
    --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);
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon--font-size);
    height: var(--sf-icon--height);
    width: var(--sf-icon--width);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-primary);
  }
  .sf-breadcrumbs-item[aria-current=page] .sf-breadcrumbs-item-container,
  .sf-breadcrumbs-item .sf-breadcrumbs-item-container[aria-current=page] {
    --sf-breadcrumbs-item-container--color: var(--sf-on-surface);
    --sf-breadcrumbs-item-container--font-weight: var(--sf-font-weight-medium);
  }
}
@layer sf.states {
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):hover > .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):hover > .sf-breadcrumbs-item-container > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-primary-hover);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):hover .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-primary-hover);
  }
  .sf-breadcrumbs-item:not(:disabled):not(.disabled):active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item:not(:disabled):not(.disabled):active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > sf-icon > .sf-icon, .sf-breadcrumbs-item.active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > .sf-icon, .sf-breadcrumbs-item.active.sf-breadcrumbs-item--link > .sf-breadcrumbs-item-container > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-breadcrumbs-item:not(:disabled):not(.disabled):active.sf-breadcrumbs-item--link .sf-breadcrumbs-item-container, .sf-breadcrumbs-item.active.sf-breadcrumbs-item--link .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-primary-active);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible {
    --sf-breadcrumbs-item--background-color: var(--sf-transparent-for-focus);
    --sf-breadcrumbs-item--box-shadow: var(--sf-ui-focus);
  }
  .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible {
    --sf-breadcrumbs-item--background-color: var(--sf-transparent-for-focus);
    --sf-breadcrumbs-item--box-shadow: var(--sf-ui-focus);
  }
  @media (forced-colors: active) {
    .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-breadcrumbs-item--box-shadow: none;
    }
    .sf-breadcrumbs-item.sf-breadcrumbs-item--link:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-breadcrumbs-item--box-shadow: none;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/wrap (.flex-wrap) gap/var(--sf-space-1\/3) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-breadcrumbs {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    flex-wrap: wrap;
    background-color: transparent;
    background-color: var(--sf-breadcrumbs--background-color, transparent);
    gap: var(--sf-space-1\/3);
    gap: var(--sf-breadcrumbs--gap, var(--sf-space-1\/3));
    overscroll-behavior-inline: contain;
  }
  .sf-breadcrumbs-item[hidden] {
    display: none;
  }
  [dir=rtl] .sf-breadcrumbs .sf-breadcrumbs-item--separator .sf-icon,
  .sf-breadcrumbs[dir=rtl] .sf-breadcrumbs-item--separator .sf-icon {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

/* docara-shell-source: runtime/component/buttons/css/buttons.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 {
  /* 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-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-button--radius);
    border-bottom-left-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-button {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-button--radius);
    border-bottom-right-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-button--radius);
    border-top-left-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-button {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-button--radius);
    border-top-right-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    padding-left: var(--sf-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-button {
    padding-left: var(--sf-button--padding-inline-start);
    }
  }
  .sf-button:where(:dir(ltr)) {
    padding-left: var(--sf-button--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    padding-right: var(--sf-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-button {
    padding-right: var(--sf-button--padding-inline-start);
    }
  }
  .sf-button:where(:dir(rtl)) {
    padding-right: var(--sf-button--padding-inline-start);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    padding-right: var(--sf-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-button {
    padding-right: var(--sf-button--padding-inline-end);
    }
  }
  .sf-button:where(:dir(ltr)) {
    padding-right: var(--sf-button--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    padding-left: var(--sf-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-button {
    padding-left: var(--sf-button--padding-inline-end);
    }
  }
  .sf-button:where(:dir(rtl)) {
    padding-left: var(--sf-button--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-end-width, 0);
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-end-width, 0);
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-button {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-start-width, 0);
    }
  }
  .sf-button:where(:dir(ltr)) {
    border-left-width: 0;
    border-left-width: var(--sf-button--border-inline-start-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-button {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-start-width, 0);
    }
  }
  .sf-button:where(:dir(rtl)) {
    border-right-width: 0;
    border-right-width: var(--sf-button--border-inline-start-width, 0);
  }
  .sf-button {
    --sf-button--radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-button--radius);
    border-end-end-radius: var(--sf-button--border-bottom-right-radius, var(--sf-button--radius));
    border-end-start-radius: var(--sf-button--radius);
    border-end-start-radius: var(--sf-button--border-bottom-left-radius, var(--sf-button--radius));
    border-start-end-radius: var(--sf-button--radius);
    border-start-end-radius: var(--sf-button--border-top-right-radius, var(--sf-button--radius));
    border-start-start-radius: var(--sf-button--radius);
    border-start-start-radius: var(--sf-button--border-top-left-radius, var(--sf-button--radius));
    -webkit-padding-start: var(--sf-button--padding-inline-start);
            padding-inline-start: var(--sf-button--padding-inline-start);
    padding-top: var(--sf-button--padding-top);
    -webkit-padding-end: var(--sf-button--padding-inline-end);
            padding-inline-end: var(--sf-button--padding-inline-end);
    padding-bottom: var(--sf-button--padding-bottom);
    background-color: var(--sf-button--background-color);
    border-color: transparent;
    border-color: var(--sf-button--border-color, transparent);
    border-width: 0;
    border-width: var(--sf-button--border-width, 0);
    border-top-width: 0;
    border-top-width: var(--sf-button--border-top-width, 0);
    border-inline-end-width: 0;
    border-inline-end-width: var(--sf-button--border-inline-end-width, 0);
    border-bottom-width: 0;
    border-bottom-width: var(--sf-button--border-bottom-width, 0);
    border-inline-start-width: 0;
    border-inline-start-width: var(--sf-button--border-inline-start-width, 0);
    border-style: solid;
    border-style: var(--sf-button--border-style, solid);
    box-shadow: var(--sf-button--box-shadow);
  }
  /* 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-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-end);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(ltr)) {
    padding-right: var(--sf-button-text-container--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-end);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(rtl)) {
    padding-left: var(--sf-button-text-container--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-button .sf-button-text-container {
    padding-left: var(--sf-button-text-container--padding-inline-start);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(ltr)) {
    padding-left: var(--sf-button-text-container--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-button .sf-button-text-container {
    padding-right: var(--sf-button-text-container--padding-inline-start);
    }
  }
  .sf-button .sf-button-text-container:where(:dir(rtl)) {
    padding-right: var(--sf-button-text-container--padding-inline-start);
  }
  .sf-button .sf-button-text-container {
    --sf-button-text-container--background-color: transparent;
    background-color: var(--sf-button-text-container--background-color);
    color: var(--sf-button-text-container--color);
    font-family: var(--sf-button-text-container--font-family);
    font-size: var(--sf-button-text-container--font-size);
    font-weight: var(--sf-button-text-container--font-weight);
    line-height: var(--sf-button-text-container--line-height);
    -webkit-padding-end: var(--sf-button-text-container--padding-inline-end);
            padding-inline-end: var(--sf-button-text-container--padding-inline-end);
    -webkit-padding-start: var(--sf-button-text-container--padding-inline-start);
            padding-inline-start: var(--sf-button-text-container--padding-inline-start);
  }
  .sf-button .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));
  }
  .sf-button.sf-button--default.sf-button--primary {
    --sf-button--background-color: var(--sf-primary);
  }
  .sf-button.sf-button--size-1 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-button.sf-button--size-1.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1);
    --sf-button-text-container--line-height: var(--sf-text-height-1);
  }
  .sf-button.sf-button--size-1.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1.sf-button--link.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--link.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--link.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-family: var(--sf-text--family);
    --sf-button-text-container--font-weight: var(--sf-font-weight-medium);
  }
  .sf-button.sf-button--default.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-primary);
  }
  .sf-button.sf-button--default.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-button.sf-button--default.sf-button--on-surface {
    --sf-button--background-color: var(--sf-on-surface);
  }
  .sf-button.sf-button--default.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-inverse);
  }
  .sf-button.sf-button--default.sf-button--on-surface .sf-icon {
    --sf-icon--color: var(--sf-on-surface-inverse);
  }
  .sf-button.sf-button--tonal.sf-button--secondary {
    --sf-button--background-color: var(--sf-secondary-container);
  }
  .sf-button.sf-button--tonal.sf-button--secondary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-secondary-container);
  }
  .sf-button.sf-button--tonal.sf-button--secondary .sf-icon {
    --sf-icon--color: var(--sf-on-secondary-container);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface {
    --sf-button--background-color: var(--sf-surface-container);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--link.sf-button--on-surface .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface .sf-icon, .sf-button.sf-button--outline.sf-button--on-surface .sf-icon, .sf-button.sf-button--link.sf-button--on-surface .sf-icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-button.sf-button--outline.sf-button--primary, .sf-button.sf-button--outline.sf-button--on-surface {
    --sf-button--background-color: transparent;
    --sf-button--border-color: var(--sf-outline);
  }
  .sf-button.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary);
  }
  .sf-button.sf-button--outline.sf-button--primary .sf-icon, .sf-button.sf-button--link.sf-button--primary .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-button.sf-button--link.sf-button--primary, .sf-button.sf-button--link.sf-button--on-surface, .sf-button.sf-button--loading.sf-button--default.sf-button--primary {
    --sf-button--background-color: transparent;
  }
  .sf-button.sf-button--size-2 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-button.sf-button--size-2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-2.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-2);
    --sf-button-text-container--line-height: var(--sf-text-height-2);
  }
  .sf-button.sf-button--size-3 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-3--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-3--text-space-x);
  }
  .sf-button.sf-button--size-3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-3.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-3);
    --sf-button-text-container--line-height: var(--sf-text-height-3);
  }
  .sf-button.sf-button--size-1\/2 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/2.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/2);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/2);
  }
  .sf-button.sf-button--size-1\/3 .sf-button-text-container {
    --sf-button-text-container--padding-inline-end: var(--sf-ui-1\/3--text-space-x);
    --sf-button-text-container--padding-inline-start: var(--sf-ui-1\/3--text-space-x);
  }
  .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--default.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--secondary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--tonal.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--on-surface .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--outline.sf-button--primary .sf-button-text-container, .sf-button.sf-button--size-1\/3.sf-button--link.sf-button--primary .sf-button-text-container {
    --sf-button-text-container--font-size: var(--sf-text-size-1\/3);
    --sf-button-text-container--line-height: var(--sf-text-height-1\/3);
  }
  .sf-button--size-1 {
    --sf-button--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-button--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-button--padding-inline-start: var(--sf-ui-1--space-x);
    --sf-button--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-button.sf-button--size-1 .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-button--size-1.tightness-low {
    --sf-button--padding-top: var(--sf-ui-1--space-y-tightness-low);
    --sf-button--padding-bottom: var(--sf-ui-1--space-y-tightness-low);
  }
  .sf-button--size-1.tightness-high {
    --sf-button--padding-top: var(--sf-ui-1--space-y-tightness-high);
    --sf-button--padding-bottom: var(--sf-ui-1--space-y-tightness-high);
  }
  .sf-button--size-1.tightness-highest {
    --sf-button--padding-top: var(--sf-ui-1--space-y-tightness-highest);
    --sf-button--padding-bottom: var(--sf-ui-1--space-y-tightness-highest);
  }
  .sf-button--size-2 {
    --sf-button--padding-bottom: var(--sf-ui-2--space-y-tightness-default);
    --sf-button--padding-inline-end: var(--sf-ui-2--space-x);
    --sf-button--padding-inline-start: var(--sf-ui-2--space-x);
    --sf-button--padding-top: var(--sf-ui-2--space-y-tightness-default);
  }
  .sf-button.sf-button--size-2 .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-button--size-2.tightness-low {
    --sf-button--padding-top: var(--sf-ui-2--space-y-tightness-low);
    --sf-button--padding-bottom: var(--sf-ui-2--space-y-tightness-low);
  }
  .sf-button--size-2.tightness-high {
    --sf-button--padding-top: var(--sf-ui-2--space-y-tightness-high);
    --sf-button--padding-bottom: var(--sf-ui-2--space-y-tightness-high);
  }
  .sf-button--size-2.tightness-highest {
    --sf-button--padding-top: var(--sf-ui-2--space-y-tightness-highest);
    --sf-button--padding-bottom: var(--sf-ui-2--space-y-tightness-highest);
  }
  .sf-button--size-3 {
    --sf-button--padding-bottom: var(--sf-ui-3--space-y-tightness-default);
    --sf-button--padding-inline-end: var(--sf-ui-3--space-x);
    --sf-button--padding-inline-start: var(--sf-ui-3--space-x);
    --sf-button--padding-top: var(--sf-ui-3--space-y-tightness-default);
  }
  .sf-button.sf-button--size-3 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-button--size-3.tightness-low {
    --sf-button--padding-top: var(--sf-ui-3--space-y-tightness-low);
    --sf-button--padding-bottom: var(--sf-ui-3--space-y-tightness-low);
  }
  .sf-button--size-3.tightness-high {
    --sf-button--padding-top: var(--sf-ui-3--space-y-tightness-high);
    --sf-button--padding-bottom: var(--sf-ui-3--space-y-tightness-high);
  }
  .sf-button--size-3.tightness-highest {
    --sf-button--padding-top: var(--sf-ui-3--space-y-tightness-highest);
    --sf-button--padding-bottom: var(--sf-ui-3--space-y-tightness-highest);
  }
  .sf-button--size-1\/2 {
    --sf-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-button--padding-inline-end: var(--sf-ui-1\/2--space-x);
    --sf-button--padding-inline-start: var(--sf-ui-1\/2--space-x);
    --sf-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-button.sf-button--size-1\/2 .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-button--size-1\/2.tightness-low {
    --sf-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-low);
    --sf-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-low);
  }
  .sf-button--size-1\/2.tightness-high {
    --sf-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-high);
    --sf-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-high);
  }
  .sf-button--size-1\/2.tightness-highest {
    --sf-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-highest);
    --sf-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-highest);
  }
  .sf-button--size-1\/3 {
    --sf-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-button--padding-inline-end: var(--sf-ui-1\/3--space-x);
    --sf-button--padding-inline-start: var(--sf-ui-1\/3--space-x);
    --sf-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-button.sf-button--size-1\/3 .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-button--size-1\/3.tightness-low {
    --sf-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-low);
    --sf-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-low);
  }
  .sf-button--size-1\/3.tightness-high {
    --sf-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-high);
    --sf-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-high);
  }
  .sf-button--size-1\/3.tightness-highest {
    --sf-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-highest);
    --sf-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-highest);
  }
  .sf-button--outline {
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-style: solid;
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-width: var(--sf-px);
  }
  .sf-button.radius-default {
    border-radius: var(--sf-radius-default);
  }
  .sf-button.radius-square {
    border-radius: var(--sf-radius-square);
  }
  .sf-button.radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .sf-button.segment-start {
    --sf-button--border-top-right-radius: var(--sf-radius-square);
    --sf-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-button--border-inline-end-width: var(--sf-px);
  }
  .sf-button.segment-middle {
    --sf-button--border-top-left-radius: var(--sf-radius-square);
    --sf-button--border-top-right-radius: var(--sf-radius-square);
    --sf-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-button--border-bottom-left-radius: var(--sf-radius-square);
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button.segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button.segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button.segment-end {
    --sf-button--border-top-left-radius: var(--sf-radius-square);
    --sf-button--border-bottom-left-radius: var(--sf-radius-square);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button:not(.sf-button--outline).segment-end {
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-start:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-start:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button:not(.sf-button--outline).segment-start {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-button:not(.sf-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-button:not(.sf-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-button:not(.sf-button--outline).segment-middle:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-button:not(.sf-button--outline).segment-middle {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
}
@layer sf.states {
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).focus-visible, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).focus-visible, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled).focus-visible, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled).focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):focus-visible, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):focus-visible, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):focus-visible, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):focus-visible {
    --sf-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-button.sf-button--default.sf-button--primary:disabled, .sf-button.sf-button--default.sf-button--on-surface:disabled, .sf-button.sf-button--tonal.sf-button--secondary:disabled, .sf-button.sf-button--tonal.sf-button--on-surface:disabled {
    --sf-button--background-color: var(--sf-disable);
  }
  .sf-button.sf-button--default.sf-button--primary:disabled .sf-button-text-container, .sf-button.sf-button--default.sf-button--on-surface:disabled .sf-button-text-container, .sf-button.sf-button--tonal.sf-button--secondary:disabled .sf-button-text-container, .sf-button.sf-button--tonal.sf-button--on-surface:disabled .sf-button-text-container, .sf-button.sf-button--outline.sf-button--primary:disabled .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:disabled .sf-button-text-container, .sf-button.sf-button--link.sf-button--primary:disabled .sf-button-text-container, .sf-button.sf-button--link.sf-button--on-surface:disabled .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-disable);
  }
  .sf-button.sf-button--outline.sf-button--primary:disabled {
    --sf-button--border-color: var(--sf-outline-disable);
  }
  .sf-button.sf-button--outline.sf-button--on-surface:disabled {
    --sf-button--border-color: var(--sf-outline-variant);
  }
  .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--default.sf-button--on-surface:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--tonal.sf-button--secondary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-secondary-container-hover);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):hover, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):hover, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-button-text-container, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):hover, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):hover {
    --sf-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):hover .sf-button-text-container, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):hover .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):hover .sf-icon, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-primary-hover);
  }
  .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-icon, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):hover .sf-icon {
    --sf-icon--color: var(--sf-on-surface-hover);
  }
  .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled):active, .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-primary-active);
  }
  .sf-button.sf-button--default.sf-button--on-surface:not(:disabled):not(.disabled):active, .sf-button.sf-button--default.sf-button--on-surface:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--tonal.sf-button--secondary:not(:disabled):not(.disabled):active, .sf-button.sf-button--tonal.sf-button--secondary:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-secondary-container-active);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):active, .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled).active, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):active, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).active, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):active, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-surface-container-active);
  }
  .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--tonal.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-button-text-container, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-on-surface-active);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):active, .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).active, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):active, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled).active {
    --sf-button--background-color: var(--sf-primary-container-active);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).active .sf-button-text-container, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):active .sf-button-text-container, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled).active .sf-button-text-container {
    --sf-button-text-container--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled):active .sf-icon, .sf-button.sf-button--outline.sf-button--primary:not(:disabled):not(.disabled).active .sf-icon, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled):active .sf-icon, .sf-button.sf-button--link.sf-button--primary:not(:disabled):not(.disabled).active .sf-icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-icon, .sf-button.sf-button--outline.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-icon, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled):active .sf-icon, .sf-button.sf-button--link.sf-button--on-surface:not(:disabled):not(.disabled).active .sf-icon {
    --sf-icon--color: var(--sf-on-surface-active);
  }
  .sf-button:not(:disabled):not(.disabled).focus-visible {
    --sf-button--box-shadow: var(--sf-ui-focus);
  }
  .sf-button:not(:disabled):not(.disabled):focus-visible {
    --sf-button--box-shadow: var(--sf-ui-focus);
  }
  @media (forced-colors: active) {
    .sf-button:not(:disabled):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-button--box-shadow: none;
    }
    .sf-button:not(:disabled):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-button--box-shadow: none;
    }
  }
  .sf-button.sf-button.sf-button:disabled .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
}
@layer sf.components {
  .sf-button,
  .sf-icon-button {
    transition-duration: var(--sf-duration-fast);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--sf-animation);
  }
  .sf-button {
    --sf-button-loading-stripe-1: color-mix(in srgb, var(--sf-on-surface) 18%, transparent);
    --sf-button-loading-stripe-2: color-mix(in srgb, var(--sf-surface-container) 94%, var(--sf-on-surface) 6%);
  }
  .sf-button > * {
    position: relative;
    z-index: 1;
  }
  .sf-button.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }
  .sf-button.loading::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    inset: -50%;
    background-image: repeating-linear-gradient(135deg, var(--sf-button-loading-stripe-1) 0, var(--sf-button-loading-stripe-1) var(--sf-space-1\/2), var(--sf-button-loading-stripe-2) var(--sf-space-1\/2), var(--sf-button-loading-stripe-2) var(--sf-space-1));
    -webkit-animation: sf-button-stripes-slide var(--sf-duration-slow) linear infinite;
            animation: sf-button-stripes-slide var(--sf-duration-slow) linear infinite;
    will-change: transform;
    pointer-events: none;
  }
  .sf-button.sf-button--default.sf-button--primary {
    --sf-button-loading-stripe-1: color-mix(in srgb, var(--sf-on-primary) 18%, transparent);
    --sf-button-loading-stripe-2: color-mix(in srgb, var(--sf-primary) 94%, var(--sf-on-primary) 6%);
  }
  .sf-button.sf-button--default.sf-button--on-surface {
    --sf-button-loading-stripe-1: color-mix(in srgb, var(--sf-on-surface-inverse) 18%, transparent);
    --sf-button-loading-stripe-2: color-mix(in srgb, var(--sf-on-surface) 94%, var(--sf-on-surface-inverse) 6%);
  }
  .sf-button.sf-button--tonal.sf-button--secondary {
    --sf-button-loading-stripe-1: color-mix(in srgb, var(--sf-on-secondary-container) 18%, transparent);
    --sf-button-loading-stripe-2: color-mix(in srgb, var(--sf-secondary-container) 94%, var(--sf-on-secondary-container) 6%);
  }
  .sf-button.sf-button--outline.sf-button--primary,
  .sf-button.sf-button--link.sf-button--primary {
    --sf-button-loading-stripe-1: color-mix(in srgb, var(--sf-primary) 18%, transparent);
    --sf-button-loading-stripe-2: color-mix(in srgb, var(--sf-primary-container) 94%, var(--sf-primary) 6%);
  }
  @-webkit-keyframes sf-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(var(--sf-space-1));
              transform: translateX(var(--sf-space-1));
    }
  }
  @keyframes sf-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(var(--sf-space-1));
              transform: translateX(var(--sf-space-1));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-button,
    .sf-icon-button {
      transition-duration: 0s;
    }
    .sf-button.loading::after {
      -webkit-animation: none;
              animation: none;
    }
  }
}
@layer sf.override {
  /* An outline segment and its link siblings form one closed control. The
     link variant previously kept only a translucent join, leaving its outer
     top, bottom and end edges transparent. Draw the group perimeter once and
     let the selected outline segment own both of its joins. */
  .sf-button.sf-button--link[class*=segment-] {
    border-color: var(--sf-outline);
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
  }
  .sf-button.sf-button--link.segment-start,
  .sf-button.sf-button--link.segment-middle {
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: 0;
  }
  .sf-button.sf-button--link.segment-end {
    --sf-button--border-inline-start-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button[\:has\(\%2B\%20sf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline) [\:has\(\%2B\%20.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(+ sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline) :has(+ .sf-icon-button.sf-icon-button--outline[class*=segment-]) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline)[\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-button[class*=segment-]:not(.sf-button--outline):has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  /* Keep this after the compatibility rules above: the selected segment's
     end border is the only line at this join. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    --sf-button--border-inline-start-width: 0;
    border-inline-start-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(.sf-button--outline\[class] + sf-button .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)) {
    border-right-width: 0;
  }
  sf-button[\:has\(.sf-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    --sf-button--border-inline-start-width: 0;
    border-inline-start-width: 0;
  }
  sf-button:has(.sf-button--outline[class*=segment-]) + sf-button .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--outline[class*=segment-] + .sf-button.sf-button--link[class*=segment-] {
    --sf-button--border-inline-start-width: 0;
    border-inline-start-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(rtl)) {
    border-left-width: 0;
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-inline-end-width: 0;
    border-inline-end-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-right-width: 0;
    }
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]):where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(rtl)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    border-left-width: 0;
    }
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]):where(:dir(rtl)) {
    border-left-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],html:not([dir="rtl"])
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-right-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(ltr)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(ltr)) {
    border-right-width: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] sf-button[*|\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class] .sf-button.sf-button--link[class*=segment-],[dir="rtl"]
  .sf-button.sf-button--link[class*=segment-][*|\:has\(\%2B\%20.sf-button.sf-button--outline\[class] {
    border-left-width: 0;
    }
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-]:where(:dir(rtl)),
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)]:where(:dir(rtl)) {
    border-left-width: 0;
  }
  sf-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--link[class*=segment-][\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-button--border-inline-end-width: 0;
    border-inline-end-width: 0;
  }
  sf-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-button.sf-button--link[class*=segment-],
  .sf-button.sf-button--link[class*=segment-]:has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-button--border-inline-end-width: 0;
    border-inline-end-width: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

.sf-icon--filled,
.sf-icon-filled,
.sf-icon-solid {
  --sf-icon--fill: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* docara-shell-source: runtime/component/icon-buttons/css/icon-buttons.css */
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-start);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-left: var(--sf-icon-button--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-start);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-right: var(--sf-icon-button--padding-inline-start);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-end);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-right: var(--sf-icon-button--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-end);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-left: var(--sf-icon-button--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  .sf-icon-button {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    --sf-icon-button--radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-icon-button--radius);
    border-end-end-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    border-end-start-radius: var(--sf-icon-button--radius);
    border-end-start-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    border-start-end-radius: var(--sf-icon-button--radius);
    border-start-end-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    border-start-start-radius: var(--sf-icon-button--radius);
    border-start-start-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    -webkit-padding-start: var(--sf-icon-button--padding-inline-start);
            padding-inline-start: var(--sf-icon-button--padding-inline-start);
    padding-top: var(--sf-icon-button--padding-top);
    -webkit-padding-end: var(--sf-icon-button--padding-inline-end);
            padding-inline-end: var(--sf-icon-button--padding-inline-end);
    padding-bottom: var(--sf-icon-button--padding-bottom);
    background-color: var(--sf-icon-button--background-color);
    border-color: transparent;
    border-color: var(--sf-icon-button--border-color, transparent);
    border-width: 0;
    border-width: var(--sf-icon-button--border-width, 0);
    border-top-width: 0;
    border-top-width: var(--sf-icon-button--border-top-width, 0);
    border-inline-end-width: 0;
    border-inline-end-width: var(--sf-icon-button--border-inline-end-width, 0);
    border-bottom-width: 0;
    border-bottom-width: var(--sf-icon-button--border-bottom-width, 0);
    border-inline-start-width: 0;
    border-inline-start-width: var(--sf-icon-button--border-inline-start-width, 0);
    border-style: solid;
    border-style: var(--sf-icon-button--border-style, solid);
    box-shadow: var(--sf-icon-button--box-shadow);
  }
  .sf-icon-button .sf-close-icon {
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
  }
  .sf-icon-button .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
    height: var(--sf-icon-size-3);
    height: var(--sf-icon--height, var(--sf-icon-size-3));
    width: var(--sf-icon-size-3);
    width: var(--sf-icon--width, var(--sf-icon-size-3));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-primary);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-on-primary);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-secondary-container);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-on-secondary-container);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: transparent;
    --sf-icon-button--border-color: var(--sf-outline);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: transparent;
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-primary-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-on-surface);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-surface-container);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-on-surface);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-on-surface-inverse);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-primary);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-secondary-container);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-primary);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-primary-active);
  }
  .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-surface);
    --sf-close-icon--border-color: var(--sf-outline);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-surface-inverse);
  }
  .sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-icon-button--size-1 {
    --sf-icon-button--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1--space-y-tightness-default);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1--space-y-tightness-default);
    --sf-icon-button--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .sf-icon-button--size-1.tightness-low {
    --sf-icon-button--padding-top: var(--sf-ui-1--space-y-tightness-low);
    --sf-icon-button--padding-bottom: var(--sf-ui-1--space-y-tightness-low);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1--space-y-tightness-low);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1--space-y-tightness-low);
  }
  .sf-icon-button--size-1.tightness-high {
    --sf-icon-button--padding-top: var(--sf-ui-1--space-y-tightness-high);
    --sf-icon-button--padding-bottom: var(--sf-ui-1--space-y-tightness-high);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1--space-y-tightness-high);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1--space-y-tightness-high);
  }
  .sf-icon-button--size-1.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-ui-1--space-y-tightness-highest);
    --sf-icon-button--padding-bottom: var(--sf-ui-1--space-y-tightness-highest);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1--space-y-tightness-highest);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1--space-y-tightness-highest);
  }
  .sf-icon-button--size-2 {
    --sf-icon-button--padding-bottom: var(--sf-ui-2--space-y-tightness-default);
    --sf-icon-button--padding-inline-end: var(--sf-ui-2--space-y-tightness-default);
    --sf-icon-button--padding-inline-start: var(--sf-ui-2--space-y-tightness-default);
    --sf-icon-button--padding-top: var(--sf-ui-2--space-y-tightness-default);
  }
  .sf-icon-button--size-2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-ui-2--space-y-tightness-low);
    --sf-icon-button--padding-bottom: var(--sf-ui-2--space-y-tightness-low);
    --sf-icon-button--padding-inline-start: var(--sf-ui-2--space-y-tightness-low);
    --sf-icon-button--padding-inline-end: var(--sf-ui-2--space-y-tightness-low);
  }
  .sf-icon-button--size-2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-ui-2--space-y-tightness-high);
    --sf-icon-button--padding-bottom: var(--sf-ui-2--space-y-tightness-high);
    --sf-icon-button--padding-inline-start: var(--sf-ui-2--space-y-tightness-high);
    --sf-icon-button--padding-inline-end: var(--sf-ui-2--space-y-tightness-high);
  }
  .sf-icon-button--size-2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-ui-2--space-y-tightness-highest);
    --sf-icon-button--padding-bottom: var(--sf-ui-2--space-y-tightness-highest);
    --sf-icon-button--padding-inline-start: var(--sf-ui-2--space-y-tightness-highest);
    --sf-icon-button--padding-inline-end: var(--sf-ui-2--space-y-tightness-highest);
  }
  .sf-icon-button--size-3 {
    --sf-icon-button--padding-bottom: var(--sf-ui-3--space-y-tightness-default);
    --sf-icon-button--padding-inline-end: var(--sf-ui-3--space-y-tightness-default);
    --sf-icon-button--padding-inline-start: var(--sf-ui-3--space-y-tightness-default);
    --sf-icon-button--padding-top: var(--sf-ui-3--space-y-tightness-default);
  }
  .sf-icon-button--size-3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-ui-3--space-y-tightness-low);
    --sf-icon-button--padding-bottom: var(--sf-ui-3--space-y-tightness-low);
    --sf-icon-button--padding-inline-start: var(--sf-ui-3--space-y-tightness-low);
    --sf-icon-button--padding-inline-end: var(--sf-ui-3--space-y-tightness-low);
  }
  .sf-icon-button--size-3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-ui-3--space-y-tightness-high);
    --sf-icon-button--padding-bottom: var(--sf-ui-3--space-y-tightness-high);
    --sf-icon-button--padding-inline-start: var(--sf-ui-3--space-y-tightness-high);
    --sf-icon-button--padding-inline-end: var(--sf-ui-3--space-y-tightness-high);
  }
  .sf-icon-button--size-3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-ui-3--space-y-tightness-highest);
    --sf-icon-button--padding-bottom: var(--sf-ui-3--space-y-tightness-highest);
    --sf-icon-button--padding-inline-start: var(--sf-ui-3--space-y-tightness-highest);
    --sf-icon-button--padding-inline-end: var(--sf-ui-3--space-y-tightness-highest);
  }
  .sf-icon-button--size-1\/2 {
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-icon-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-icon-button--size-1\/2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-low);
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-low);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/2--space-y-tightness-low);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/2--space-y-tightness-low);
  }
  .sf-icon-button--size-1\/2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-high);
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-high);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/2--space-y-tightness-high);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/2--space-y-tightness-high);
  }
  .sf-icon-button--size-1\/2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-ui-1\/2--space-y-tightness-highest);
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-highest);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/2--space-y-tightness-highest);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/2--space-y-tightness-highest);
  }
  .sf-icon-button--size-1\/3 {
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-icon-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-icon-button--size-1\/3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-low);
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-low);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/3--space-y-tightness-low);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/3--space-y-tightness-low);
  }
  .sf-icon-button--size-1\/3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-high);
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-high);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/3--space-y-tightness-high);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/3--space-y-tightness-high);
  }
  .sf-icon-button--size-1\/3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-ui-1\/3--space-y-tightness-highest);
    --sf-icon-button--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-highest);
    --sf-icon-button--padding-inline-start: var(--sf-ui-1\/3--space-y-tightness-highest);
    --sf-icon-button--padding-inline-end: var(--sf-ui-1\/3--space-y-tightness-highest);
  }
  .sf-icon-button--outline {
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
    --sf-icon-button--border-style: solid;
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-width: var(--sf-px);
  }
  .sf-icon-button.radius-default {
    border-radius: var(--sf-radius-default);
  }
  .sf-icon-button.radius-square {
    border-radius: var(--sf-radius-square);
  }
  .sf-icon-button.radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .sf-icon-button.segment-start {
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  .sf-icon-button.segment-middle {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button.segment-end {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
}
@layer sf.states {
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--border-color: var(--sf-outline-variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-secondary-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-secondary-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-on-surface-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-on-surface-active);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--box-shadow: var(--sf-ui-focus);
  }
  .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--box-shadow: var(--sf-ui-focus);
  }
  .sf-icon-button.segment-start:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--box-shadow: var(--sf-ui-focus-inset);
  }
  .sf-icon-button.segment-start:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--box-shadow: var(--sf-ui-focus-inset);
  }
  @media (forced-colors: active) {
    .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      --sf-icon-button--box-shadow: none;
    }
    .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      --sf-icon-button--box-shadow: none;
    }
  }
}
@layer sf.override {
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-icon-button.sf-icon-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
}

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

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

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

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

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

/* docara-shell-source: runtime/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-a1) solid var(--sf-outline-variant);
    border-radius: var(--sf-radius-default);
    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-default);
    color: var(--sf-on-surface-inverse);
    -moz-tab-size: 2;
      -o-tab-size: 2;
         tab-size: 2;
  }
  .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-a1) solid CanvasText;
    }
  }
}

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

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

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

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

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

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

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

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

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

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

/* docara-shell-source: runtime/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-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);
    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 {
    --sf-icon--color: var(--sf-on-surface-muted);
  }
  .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-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-3 .sf-input-hint-text-wrap, .sf-input.sf-input--size-1\/3 .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-3 input, .sf-input.sf-input--size-1\/3 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.sf-input--size-3 .sf-input-label .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-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-3 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-3--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-3--text-space-x);
  }
  .sf-input.sf-input--size-3 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-2);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-3 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-2);
    --sf-input-required--line-height: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-3 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-3--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-3--text-space-x);
  }
  .sf-input.sf-input--size-3 .sf-input-field .sf-input-right .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-3);
    --sf-input-text--line-height: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-3 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-3 > .sf-input-field > .sf-input-left > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-3 input {
    --sf-input-input--font-size: var(--sf-text-size-3);
    --sf-input-input--line-height: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field .sf-input-right .sf-input-text, .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\/3 > .sf-input-field > .sf-input-hint > .sf-icon, .sf-input.sf-input--size-1\/3 > .sf-input-field > .sf-input-left > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field input {
    --sf-input-input--padding-inline-end: var(--sf-ui-1\/3--text-space-x);
    --sf-input-input--padding-inline-start: var(--sf-ui-1\/3--text-space-x);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-hint-text-wrap {
    --sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/4);
    --sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/4);
  }
  .sf-input.sf-input--size-1\/3 input {
    --sf-input-input--font-size: var(--sf-text-size-1\/3);
    --sf-input-input--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-label .sf-input-text {
    --sf-input-text--font-size: var(--sf-text-size-1\/4);
    --sf-input-text--line-height: var(--sf-text-height-1\/4);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-required {
    --sf-input-required--font-size: var(--sf-text-size-1\/4);
    --sf-input-required--line-height: var(--sf-text-height-1\/4);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-right {
    --sf-input-right--padding-inline-end: var(--sf-ui-1\/3--text-space-x);
    --sf-input-right--padding-inline-start: var(--sf-ui-1\/3--text-space-x);
  }
  .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-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-ui-1--space-y-tightness-default);
    --sf-input-field--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-input-field--padding-inline-start: var(--sf-ui-1--space-x);
    --sf-input-field--padding-top: var(--sf-ui-1--space-y-tightness-default);
  }
  .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-ui-2--space-y-tightness-default);
    --sf-input-field--padding-inline-end: var(--sf-ui-2--space-x);
    --sf-input-field--padding-inline-start: var(--sf-ui-2--space-x);
    --sf-input-field--padding-top: var(--sf-ui-2--space-y-tightness-default);
  }
  .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-3 .sf-input-field {
    height: var(--sf-ui-3--control-height);
    block-size: var(--sf-ui-3--control-height);
    --sf-input-field--padding-bottom: var(--sf-ui-3--space-y-tightness-default);
    --sf-input-field--padding-inline-end: var(--sf-ui-3--space-x);
    --sf-input-field--padding-inline-start: var(--sf-ui-3--space-x);
    --sf-input-field--padding-top: var(--sf-ui-3--space-y-tightness-default);
  }
  .sf-input.sf-input--size-3 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-3);
    --sf-input-placeholder--line-height: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-3 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-3);
    --sf-input-placeholder--line-height: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-3 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-3);
    --sf-input-placeholder--line-height: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-3 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-3);
    --sf-input-placeholder--line-height: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-3 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-3);
    --sf-input-placeholder--line-height: var(--sf-text-height-3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field {
    height: var(--sf-ui-1\/3--control-height);
    block-size: var(--sf-ui-1\/3--control-height);
    --sf-input-field--padding-bottom: var(--sf-ui-1\/3--space-y-tightness-default);
    --sf-input-field--padding-inline-end: var(--sf-ui-1\/3--space-x);
    --sf-input-field--padding-inline-start: var(--sf-ui-1\/3--space-x);
    --sf-input-field--padding-top: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field input::-webkit-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/3);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field input::-moz-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/3);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field input:-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/3);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field input::-ms-input-placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/3);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/3);
  }
  .sf-input.sf-input--size-1\/3 .sf-input-field input::placeholder {
    --sf-input-placeholder--font-size: var(--sf-text-size-1\/3);
    --sf-input-placeholder--line-height: var(--sf-text-height-1\/3);
  }
  .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-ui-1\/2--space-y-tightness-default);
    --sf-input-field--padding-inline-end: var(--sf-ui-1\/2--space-x);
    --sf-input-field--padding-inline-start: var(--sf-ui-1\/2--space-x);
    --sf-input-field--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .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-on-surface-muted);
  }
}
@layer sf.states {
  .sf-input:not(.error).sf-input--bordered[\:not-has\(input\:disabled\)] .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
    --sf-input-field--border-color: var(--sf-outline-variant);
  }
  .sf-input:not(.error).sf-input--bordered:not(:has(input:disabled)) .sf-input-field {
    --sf-input-field--background-color: var(--sf-surface-0);
    --sf-input-field--border-color: var(--sf-outline-variant);
  }
  .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-surface-container);
    --sf-input-field--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-surface-container);
    --sf-input-field--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);
  }
  .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field {
    --sf-input-field--box-shadow: var(--sf-ui-focus);
  }
  .sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-input-field {
    --sf-input-field--box-shadow: var(--sf-ui-focus);
  }
  .sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field {
    --sf-input-field--box-shadow: var(--sf-ui-focus);
  }
  .sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-input-field {
    --sf-input-field--box-shadow: var(--sf-ui-focus);
  }
  .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;
    }
  }
}

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

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

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

/* 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);
    padding-top: var(--sf-space-1\/3);
    -webkit-padding-before: var(--sf-space-1\/3);
            padding-block-start: var(--sf-space-1\/3);
    padding-top: var(--sf-space-1\/3);
    padding-top: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, var(--sf-space-1\/3)));
    -webkit-padding-before: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, var(--sf-space-1\/3)));
            padding-block-start: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, var(--sf-space-1\/3)));
    padding-bottom: var(--sf-space-1\/3);
    -webkit-padding-after: var(--sf-space-1\/3);
            padding-block-end: var(--sf-space-1\/3);
    padding-bottom: var(--sf-space-1\/3);
    padding-bottom: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, var(--sf-space-1\/3)));
    -webkit-padding-after: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, var(--sf-space-1\/3)));
            padding-block-end: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, var(--sf-space-1\/3)));
    -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: none;
    box-shadow: var(--sf-ui-focus-inset);
  }
  .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: none;
    box-shadow: var(--sf-ui-focus-inset);
  }
  .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-surface-0);
    background: var(--sf-menu-horizontal-submenu--background-color, var(--sf-surface-0));
    box-shadow: var(--sf-ui-shadow-2);
    box-shadow: var(--sf-menu-horizontal-submenu--box-shadow, var(--sf-ui-shadow-2));
  }
  _:-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%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: auto;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: auto;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(ltr)) {
    left: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: auto;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: auto;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(rtl)) {
    right: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: 0;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: 0;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(rtl)) {
    left: 0;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: auto;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: auto;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(ltr)) {
    left: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: auto;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: auto;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(rtl)) {
    right: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: 100%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    right: 100%;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(ltr)) {
    right: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: 100%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    left: 100%;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline:where(:dir(rtl)) {
    left: 100%;
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu.sf-menu--flip-inline {
    inset-inline-start: auto;
    inset-inline-end: 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-a4) solid var(--sf-primary);
    outline: var(--sf-focus-outline-width, var(--sf-a4)) solid var(--sf-focus, var(--sf-primary));
    outline-offset: calc(var(--sf-a4) * -1);
    outline-offset: calc(var(--sf-focus-outline-width, var(--sf-a4)) * -1);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap.focus-visible {
    outline: var(--sf-a4) solid var(--sf-primary);
    outline: var(--sf-a4) solid var(--sf-primary);
    outline: var(--sf-focus-outline-width, var(--sf-a4)) solid var(--sf-focus, var(--sf-primary));
    outline-offset: calc(var(--sf-a4) * -1);
    outline-offset: calc(var(--sf-a4) * -1);
    outline-offset: calc(var(--sf-focus-outline-width, var(--sf-a4)) * -1);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap:focus-visible {
    outline: var(--sf-a4) solid var(--sf-primary);
    outline: var(--sf-focus-outline-width, var(--sf-a4)) solid var(--sf-focus, var(--sf-primary));
    outline-offset: calc(var(--sf-a4) * -1);
    outline-offset: calc(var(--sf-focus-outline-width, var(--sf-a4)) * -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/pointer-events/default/css/default.css */
@layer sf.utilities {
  .pointer-event-none {
    pointer-events: none;
  }
  .pointer-event-auto {
    pointer-events: auto;
  }
}

/* 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/component/radio/css/radio.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 {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-radio-button {
    background-color: transparent;
    background-color: var(--sf-radio-button--background-color, transparent);
    gap: var(--sf-radio-button--gap);
  }
  .sf-radio-button > .sf-radio-button-container > .sf-radio-button-top > .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) gap/var(--sf-radio-button-box--gap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radio-button-box--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-end-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radio-button-box--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-radio-button .sf-radio-button-box {
    border-top-left-radius: var(--sf-radio-button-box--border-start-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-radio-button .sf-radio-button-box {
    border-top-right-radius: var(--sf-radio-button-box--border-start-start-radius);
    }
  }
  .sf-radio-button .sf-radio-button-box:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radio-button-box--border-start-start-radius);
  }
  .sf-radio-button .sf-radio-button-box {
    --sf-radio-button-box--background-color: transparent;
    --sf-radio-button-box--border: var(--sf-px) solid;
    --sf-radio-button-box--border-color: var(--sf-outline);
    --sf-radio-button-box--border-end-end-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-end-start-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-start-end-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-start-start-radius: var(--sf-radius-circle);
    --sf-radio-button-box--border-style: solid;
    --sf-radio-button-box--border-width: var(--sf-px);
    --sf-radio-button-box--gap: var(--sf-a0);
    background-color: var(--sf-radio-button-box--background-color);
    border: var(--sf-radio-button-box--border);
    border-color: transparent;
    border-color: var(--sf-radio-button-box--border-color, transparent);
    border-end-end-radius: var(--sf-radio-button-box--border-end-end-radius);
    border-end-start-radius: var(--sf-radio-button-box--border-end-start-radius);
    border-start-end-radius: var(--sf-radio-button-box--border-start-end-radius);
    border-start-start-radius: var(--sf-radio-button-box--border-start-start-radius);
    border-style: solid;
    border-style: var(--sf-radio-button-box--border-style, solid);
    border-width: var(--sf-radio-button-box--border-width);
    box-shadow: var(--sf-radio-button-box--box-shadow);
    gap: var(--sf-radio-button-box--gap);
    height: var(--sf-radio-button-box--height);
    width: var(--sf-radio-button-box--width);
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-radio-button .sf-radio-button-container {
    --sf-radio-button-container--background-color: transparent;
    background-color: var(--sf-radio-button-container--background-color);
  }
  .sf-radio-button .sf-radio-button-description {
    --sf-radio-button-description--color: var(--sf-on-surface-variant);
    --sf-radio-button-description--font-family: var(--sf-text--family);
    --sf-radio-button-description--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-radio-button-description--color);
    font-family: var(--sf-radio-button-description--font-family);
    font-size: var(--sf-radio-button-description--font-size);
    font-weight: var(--sf-radio-button-description--font-weight);
    line-height: var(--sf-radio-button-description--line-height);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) gap/var(--sf-radio-button-top--gap) */
  .sf-radio-button .sf-radio-button-top {
    --sf-radio-button-top--background-color: transparent;
    background-color: var(--sf-radio-button-top--background-color);
    gap: var(--sf-radio-button-top--gap);
  }
  /* 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) */
  .sf-radio-button .sf-radio-button-text {
    --sf-radio-button-text--background-color: transparent;
    background-color: var(--sf-radio-button-text--background-color);
    color: var(--sf-radio-button-text--color);
    font-family: var(--sf-radio-button-text--font-family);
    font-size: var(--sf-radio-button-text--font-size);
    font-weight: var(--sf-radio-button-text--font-weight);
    line-height: var(--sf-radio-button-text--line-height);
    --sf-radio-button-text--color: var(--sf-on-surface);
  }
  .sf-radio-button .sf-radio-button-mark {
    background-color: var(--sf-radio-button-mark--background-color);
    border-radius: var(--sf-radio-button-mark--border-radius);
    height: var(--sf-radio-button-mark--height);
    width: var(--sf-radio-button-mark--width);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-box {
    --sf-radio-button-box--height: var(--sf-text-height-1);
    --sf-radio-button-box--width: var(--sf-text-height-1);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-description {
    --sf-radio-button-description--font-size: var(--sf-text-size-1\/2);
    --sf-radio-button-description--line-height: var(--sf-text-height-1\/2);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-text {
    --sf-radio-button-text--font-size: var(--sf-text-size-1);
    --sf-radio-button-text--line-height: var(--sf-text-height-1);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-text, .sf-radio-button.sf-radio-button--size-1\/3 .sf-radio-button-text {
    --sf-radio-button-text--font-family: var(--sf-text--family);
    --sf-radio-button-text--font-weight: var(--sf-font-weight-medium);
  }
  .sf-radio-button.sf-radio-button--size-1 .sf-radio-button-top {
    --sf-radio-button-top--gap: var(--sf-space-1\/4);
  }
  .sf-radio-button.sf-radio-button--size-1[\:has\(input\:checked\)] .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button.sf-radio-button--size-1:has(input:checked) .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-b2);
    --sf-radio-button-mark--width: var(--sf-b2);
  }
  .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-text {
    --sf-radio-button-text--color: var(--sf-disable);
  }
  .sf-radio-button:has(input:disabled) .sf-radio-button-text {
    --sf-radio-button-text--color: var(--sf-disable);
  }
  .sf-radio-button.sf-radio-button--size-1\/3 .sf-radio-button-box {
    --sf-radio-button-box--height: var(--sf-text-height-1\/3);
    --sf-radio-button-box--width: var(--sf-text-height-1\/3);
  }
  .sf-radio-button.sf-radio-button--size-1\/3 > .sf-radio-button-container > .sf-radio-button-top > .sf-icon {
    --sf-icon--font-size: var(--sf-icon-size-1);
    --sf-icon--height: var(--sf-icon-size-1);
    --sf-icon--width: var(--sf-icon-size-1);
  }
  .sf-radio-button.sf-radio-button--size-1\/3 .sf-radio-button-description {
    --sf-radio-button-description--font-size: var(--sf-text-size-1\/4);
    --sf-radio-button-description--line-height: var(--sf-text-height-1\/4);
  }
  .sf-radio-button.sf-radio-button--size-1\/3 .sf-radio-button-text {
    --sf-radio-button-text--font-size: var(--sf-text-size-1\/3);
    --sf-radio-button-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-radio-button.sf-radio-button--size-1\/3 .sf-radio-button-top {
    --sf-radio-button-top--gap: var(--sf-space-0);
  }
  .sf-radio-button.sf-radio-button--size-1\/3[\:has\(input\:checked\)] .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-a8);
    --sf-radio-button-mark--width: var(--sf-a8);
  }
  .sf-radio-button.sf-radio-button--size-1\/3:has(input:checked) .sf-radio-button-mark {
    --sf-radio-button-mark--height: var(--sf-a8);
    --sf-radio-button-mark--width: var(--sf-a8);
  }
  .sf-radio-button--size-1 {
    --sf-radio-button--gap: var(--sf-space-1\/3);
  }
  .sf-radio-button--size-1\/3 {
    --sf-radio-button--gap: var(--sf-space-1\/4);
  }
  .sf-radio-button[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary-hover);
  }
  .sf-radio-button:has(input:enabled:not(:disabled):not(.disabled):hover) .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary-hover);
  }
  .sf-radio-button[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\)]:hover {
    --sf-radio-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-radio-button:has(input:enabled:not(:disabled):not(.disabled)):hover {
    --sf-radio-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-radio-button[\:has\(input\:checked\)] .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary);
  }
  .sf-radio-button:has(input:checked) .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-primary);
  }
  .sf-radio-button[\:has\(input\:checked\)] .sf-radio-button-mark {
    --sf-radio-button-mark--background-color: var(--sf-primary);
    --sf-radio-button-mark--border-radius: var(--sf-radius-circle);
  }
  .sf-radio-button:has(input:checked) .sf-radio-button-mark {
    --sf-radio-button-mark--background-color: var(--sf-primary);
    --sf-radio-button-mark--border-radius: var(--sf-radius-circle);
  }
  .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    --sf-radio-button-box--box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button:has(input:not(:disabled):not(.disabled).focus-visible) .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    --sf-radio-button-box--box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    --sf-radio-button-box--box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button:has(input:not(:disabled):not(.disabled):focus-visible) .sf-radio-button-box {
    --sf-radio-button-box--background-color: var(--sf-transparent-for-focus);
    --sf-radio-button-box--box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-outline-disable);
  }
  .sf-radio-button:has(input:disabled) .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-outline-disable);
  }
  .sf-radio-button[\:has\(input\:disabled\)] > .sf-radio-button-container > .sf-radio-button-top > .sf-icon {
    --sf-icon--color: var(--sf-disable);
  }
  .sf-radio-button:has(input:disabled) > .sf-radio-button-container > .sf-radio-button-top > .sf-icon {
    --sf-icon--color: var(--sf-disable);
  }
  .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-description {
    --sf-radio-button-description--color: var(--sf-disable);
  }
  .sf-radio-button:has(input:disabled) .sf-radio-button-description {
    --sf-radio-button-description--color: var(--sf-disable);
  }
  .sf-radio-button.error .sf-radio-button-box {
    --sf-radio-button-box--border-color: var(--sf-error);
  }
}
@layer sf.states {
  @media (forced-colors: active) {
    .sf-radio-button .sf-radio-button-box {
      forced-color-adjust: none;
      background-color: Canvas;
      border-color: ButtonText;
    }
    .sf-radio-button .sf-radio-button-mark {
      background-color: transparent;
    }
    .sf-radio-button[\:has\(input\:checked\)] .sf-radio-button-box {
      border-color: Highlight;
    }
    .sf-radio-button:has(input:checked) .sf-radio-button-box {
      border-color: Highlight;
    }
    .sf-radio-button[\:has\(input\:checked\)] .sf-radio-button-mark {
      background-color: Highlight;
    }
    .sf-radio-button:has(input:checked) .sf-radio-button-mark {
      background-color: Highlight;
    }
    .sf-radio-button[\:has\(input\:disabled\)] .sf-radio-button-box {
      border-color: GrayText;
    }
    .sf-radio-button:has(input:disabled) .sf-radio-button-box {
      border-color: GrayText;
    }
    .sf-radio-button[\:has\(input\:disabled\:checked\)] .sf-radio-button-mark {
      background-color: GrayText;
    }
    .sf-radio-button:has(input:disabled:checked) .sf-radio-button-mark {
      background-color: GrayText;
    }
    .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
    .sf-radio-button:has(input:not(:disabled):not(.disabled).focus-visible) .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
    .sf-radio-button[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
    .sf-radio-button:has(input:not(:disabled):not(.disabled):focus-visible) .sf-radio-button-box {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      --sf-radio-button-box--box-shadow: none;
    }
  }
}
@layer sf.components {
  .sf-radio-button {
    min-width: 0;
  }
  .sf-radio-button:not(.disabled)[\:has\(input\:not\(\:disabled\)\)] {
    cursor: pointer;
  }
  .sf-radio-button:not(.disabled):has(input:not(:disabled)) {
    cursor: pointer;
  }
  .sf-radio-button[\:has\(input\:disabled\)] {
    cursor: default;
  }
  .sf-radio-button:has(input:disabled) {
    cursor: default;
  }
  .sf-radio-button .sf-radio-button-container {
    min-width: 0;
  }
  .sf-radio-button .sf-radio-button-box {
    position: relative;
    flex-shrink: 0;
  }
  .sf-radio-button .sf-radio-button-box > input[type=radio] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .sf-radio-button .sf-radio-button-text {
    white-space: normal;
    white-space: var(--sf-radio-button-text--white-space, normal);
    word-wrap: anywhere;
  }
  .sf-radio-group--font {
    gap: var(--sf-space-1\/4);
    flex-wrap: wrap;
  }
  .sf-radio-wrap--type-font {
    align-items: flex-start;
    gap: var(--sf-space-1\/3);
    min-width: 0;
  }
  .sf-radio-wrap--type-font:hover {
    --sf-radio-button--background-color: transparent;
  }
  .sf-radio-button--type-font {
    position: relative;
  }
  .sf-radio-button--type-font .sf-radio-text {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    box-sizing: border-box;
    color: var(--sf-on-surface);
    background-color: var(--sf-surface-0);
    border: var(--sf-px) solid var(--sf-outline);
    border-radius: var(--sf-radius--ui);
    font-family: inherit;
    font-family: var(--sf-radio-font--family, inherit);
    font-style: normal;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--sf-duration-fast);
    transition-timing-function: var(--sf-animation);
  }
  .sf-radio-button--type-font.sf-radio-button--size-1 .sf-radio-text {
    width: var(--sf-d2);
    inline-size: var(--sf-d2);
    height: var(--sf-c2);
    block-size: var(--sf-c2);
    font-size: var(--sf-text-size-1);
    line-height: var(--sf-text-height-1);
  }
  .sf-radio-button--type-font.sf-radio-button--size-1\/3 .sf-radio-text {
    width: var(--sf-c6);
    inline-size: var(--sf-c6);
    height: var(--sf-b6);
    block-size: var(--sf-b6);
    font-size: var(--sf-text-size-1\/3);
    line-height: var(--sf-text-height-1\/3);
  }
  .sf-radio-button--type-font[\:has\(input\:not\(\:disabled\)\:hover\)] .sf-radio-text {
    border-color: var(--sf-primary-hover);
    background-color: var(--sf-surface-container-hover);
  }
  .sf-radio-button--type-font:has(input:not(:disabled):hover) .sf-radio-text {
    border-color: var(--sf-primary-hover);
    background-color: var(--sf-surface-container-hover);
  }
  .sf-radio-button--type-font .sf-radio-text.active {
    color: var(--sf-on-primary);
    background-color: var(--sf-primary);
    border-color: var(--sf-primary);
  }
  .sf-radio-button--type-font[\:has\(input.focus-visible\)] .sf-radio-text {
    box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button--type-font:has(input.focus-visible) .sf-radio-text {
    box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button--type-font[\:has\(input\:focus-visible\)] .sf-radio-text {
    box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button--type-font:has(input:focus-visible) .sf-radio-text {
    box-shadow: var(--sf-ui-focus);
  }
  .sf-radio-button--type-font[\:has\(input\:disabled\)] .sf-radio-text {
    color: var(--sf-disable);
    background-color: var(--sf-surface-0);
    border-color: var(--sf-outline-disable);
  }
  .sf-radio-button--type-font:has(input:disabled) .sf-radio-text {
    color: var(--sf-disable);
    background-color: var(--sf-surface-0);
    border-color: var(--sf-outline-disable);
  }
  @media (forced-colors: active) {
    .sf-radio-button--type-font .sf-radio-text {
      forced-color-adjust: none;
      color: ButtonText;
      background-color: Canvas;
      border-color: ButtonText;
    }
    .sf-radio-button--type-font .sf-radio-text.active {
      color: HighlightText;
      background-color: Highlight;
      border-color: Highlight;
    }
    .sf-radio-button--type-font[\:has\(input.focus-visible\)] .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font:has(input.focus-visible) .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font[\:has\(input\:focus-visible\)] .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font:has(input:focus-visible) .sf-radio-text {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
      box-shadow: none;
    }
    .sf-radio-button--type-font[\:has\(input\:disabled\)] .sf-radio-text {
      color: GrayText;
      border-color: GrayText;
    }
    .sf-radio-button--type-font:has(input:disabled) .sf-radio-text {
      color: GrayText;
      border-color: GrayText;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-radio-button--type-font .sf-radio-text {
      transition-duration: 0s;
    }
  }
}

/* docara-shell-source: runtime/component/scrollbar/css/scrollbar.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/*
* _var__component_name.scss
* 
* SCSS file containing variables for component styling.
* 
* Used to define default parameters (color, size, etc.)
* that can be overridden in other parts of the project.
* 
* Example usage:
* --sf-icon--fill: 0; // Fill for icon
*/
/*
* 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-scrollbar {
    --sf-scrollbar-hit-size: var(--sf-b6);
    --sf-scrollbar-rest-size: var(--sf-a2);
    --sf-scrollbar-active-size: var(--sf-a6);
    --sf-scrollbar-min-thumb-size: var(--sf-d1);
    --sf-scrollbar-keyboard-step: var(--sf-d0);
    --sf-scrollbar-thumb-color: color-mix(
      in srgb,
      var(--sf-on-surface) 34%,
      var(--sf-transparent)
    );
    position: relative;
    min-height: 0;
    min-block-size: 0;
    overflow: hidden;
  }
  .sf-scrollbar__viewport {
    height: 100%;
    block-size: 100%;
    overflow: auto;
    overscroll-behavior-block: contain;
    overscroll-behavior-inline: auto;
    scrollbar-gutter: auto;
  }
  .sf-scrollbar[data-mode=""]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=overlay]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=hidden]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=""]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=overlay]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=hidden]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar:not([data-mode]):not([data-sf-scrollbar]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=""]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=overlay]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=hidden]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=""]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=overlay]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=hidden]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar:not([data-mode]):not([data-sf-scrollbar]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-color: var(--sf-outline) var(--sf-transparent);
    scrollbar-width: auto;
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-color: var(--sf-outline) var(--sf-transparent);
    scrollbar-width: auto;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    height: var(--sf-scroll-bg-width);
    block-size: var(--sf-scroll-bg-width);
    width: var(--sf-scroll-bg-width);
    inline-size: var(--sf-scroll-bg-width);
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    height: var(--sf-scroll-bg-width);
    block-size: var(--sf-scroll-bg-width);
    width: var(--sf-scroll-bg-width);
    inline-size: var(--sf-scroll-bg-width);
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar-track {
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-transparent);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar-track {
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-transparent);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar-thumb {
    min-height: var(--sf-scroll-thumb-size);
    min-block-size: var(--sf-scroll-thumb-size);
    min-width: var(--sf-scroll-thumb-size);
    min-inline-size: var(--sf-scroll-thumb-size);
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-outline);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar-thumb {
    min-height: var(--sf-scroll-thumb-size);
    min-block-size: var(--sf-scroll-thumb-size);
    min-width: var(--sf-scroll-thumb-size);
    min-inline-size: var(--sf-scroll-thumb-size);
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-outline);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport:hover::-webkit-scrollbar-thumb {
    background-color: var(--sf-on-surface-variant);
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport:hover::-webkit-scrollbar-thumb {
    background-color: var(--sf-on-surface-variant);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__track {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__track {
    right: 0;
    }
  }
  .sf-scrollbar__track:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__track {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-scrollbar__track {
    left: 0;
    }
  }
  .sf-scrollbar__track:where(:dir(rtl)) {
    left: 0;
  }
  .sf-scrollbar__track {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--sf-scrollbar-hit-size);
    inline-size: var(--sf-scrollbar-hit-size);
    opacity: 0;
    pointer-events: auto;
    transition: opacity var(--sf-duration-fast) var(--sf-animation);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__thumb {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__thumb {
    right: 0;
    }
  }
  .sf-scrollbar__thumb:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__thumb {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-scrollbar__thumb {
    left: 0;
    }
  }
  .sf-scrollbar__thumb:where(:dir(rtl)) {
    left: 0;
  }
  .sf-scrollbar__thumb {
    position: absolute;
    top: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: var(--sf-scrollbar-hit-size);
    inline-size: var(--sf-scrollbar-hit-size);
    min-height: var(--sf-scrollbar-min-thumb-size);
    min-block-size: var(--sf-scrollbar-min-thumb-size);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: none;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: translateY(var(--sf-scrollbar-thumb-offset, 0));
            transform: translateY(var(--sf-scrollbar-thumb-offset, 0));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__thumb::before {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__thumb::before {
    right: 0;
    }
  }
  .sf-scrollbar__thumb::before:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__thumb::before {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-scrollbar__thumb::before {
    left: 0;
    }
  }
  .sf-scrollbar__thumb::before:where(:dir(rtl)) {
    left: 0;
  }
  .sf-scrollbar__thumb::before {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--sf-scrollbar-rest-size);
    inline-size: var(--sf-scrollbar-rest-size);
    border-radius: inherit;
    background: var(--sf-scrollbar-thumb-color);
    content: "";
    transition: inline-size var(--sf-duration-fast) var(--sf-animation);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb:focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-state=active] .sf-scrollbar__track,
  .sf-scrollbar[focus-within] .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-state=active] .sf-scrollbar__track,
  .sf-scrollbar[focus-within] .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-state=active] .sf-scrollbar__track,
  .sf-scrollbar:focus-within .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .sf-scrollbar[data-sf-scrollbar-overflow=false] .sf-scrollbar__track {
    display: none;
  }
  .sf-scrollbar__thumb.focus-visible {
    outline: var(--sf-focus-outline-width) solid var(--sf-focus);
    outline-offset: calc(-1 * var(--sf-focus-outline-width));
  }
  .sf-scrollbar__thumb:focus-visible {
    outline: var(--sf-focus-outline-width) solid var(--sf-focus);
    outline-offset: calc(-1 * var(--sf-focus-outline-width));
  }
  .sf-scrollbar[data-axis=horizontal]:not(.does-not-exist) .sf-scrollbar__viewport {
    height: auto;
    block-size: auto;
    max-width: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-block: auto;
    overscroll-behavior-inline: contain;
  }
  .sf-scrollbar[data-sf-scrollbar-axis=horizontal]:not([data-axis]) .sf-scrollbar__viewport {
    height: auto;
    block-size: auto;
    max-width: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-block: auto;
    overscroll-behavior-inline: contain;
  }
  .sf-scrollbar__track--horizontal {
    top: auto;
    bottom: 0;
    inset-block: auto 0;
    left: 0;
    right: 0;
    inset-inline: 0;
    height: var(--sf-scrollbar-hit-size);
    block-size: var(--sf-scrollbar-hit-size);
    width: auto;
    inline-size: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__thumb--horizontal {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__thumb--horizontal {
    left: 0;
    }
  }
  .sf-scrollbar__thumb--horizontal:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__thumb--horizontal {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-scrollbar__thumb--horizontal {
    right: 0;
    }
  }
  .sf-scrollbar__thumb--horizontal:where(:dir(rtl)) {
    right: 0;
  }
  .sf-scrollbar__thumb--horizontal {
    top: auto;
    bottom: 0;
    inset-block: auto 0;
    inset-inline-start: 0;
    height: var(--sf-scrollbar-hit-size);
    block-size: var(--sf-scrollbar-hit-size);
    width: auto;
    inline-size: auto;
    min-height: 0;
    min-block-size: 0;
    min-width: var(--sf-scrollbar-min-thumb-size);
    min-inline-size: var(--sf-scrollbar-min-thumb-size);
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transform: translateX(var(--sf-scrollbar-thumb-offset, 0));
            transform: translateX(var(--sf-scrollbar-thumb-offset, 0));
  }
  .sf-scrollbar__thumb--horizontal::before {
    top: auto;
    bottom: 0;
    inset-block: auto 0;
    left: 0;
    right: 0;
    inset-inline: 0;
    height: var(--sf-scrollbar-rest-size);
    block-size: var(--sf-scrollbar-rest-size);
    width: auto;
    inline-size: auto;
    transition: block-size var(--sf-duration-fast) var(--sf-animation);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal:focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .scrollbar::-webkit-scrollbar {
    width: var(--sf-a8);
    inline-size: var(--sf-a8);
  }
  .scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar::-webkit-scrollbar-thumb {
    background: var(--sf-surface-4);
  }
  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--sf-on-surface-variant);
  }
  @media (pointer: coarse) {
    .sf-scrollbar__track,
    .sf-scrollbar__thumb {
      width: var(--sf-a8);
      inline-size: var(--sf-a8);
      pointer-events: none;
    }
    .sf-scrollbar__thumb::before {
      width: var(--sf-a4);
      inline-size: var(--sf-a4);
    }
    .sf-scrollbar__thumb--horizontal::before {
      height: var(--sf-a4);
      block-size: var(--sf-a4);
      width: auto;
      inline-size: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-scrollbar__track,
    .sf-scrollbar__thumb::before {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .sf-scrollbar__track {
      display: none;
    }
    .sf-scrollbar .sf-scrollbar__viewport {
      scrollbar-color: auto;
      scrollbar-width: auto !important;
    }
    .sf-scrollbar .sf-scrollbar__viewport::-webkit-scrollbar {
      display: inline !important;
      display: initial !important;
    }
  }
}

/* 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;
  }
}

/* docara-shell-source: runtime/utility/text-align/default/css/default.css */
@layer sf.utilities {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .text-start {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .text-start {
    text-align: left;
    }
  }
  .text-start:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .text-start {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .text-start {
    text-align: right;
    }
  }
  .text-start:where(:dir(rtl)) {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .text-center {
    text-align: center;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .text-end {
    text-align: right;
  }
  @supports not (text-align: end) {
  html:not([dir="rtl"]) .text-end {
    text-align: right;
    }
  }
  .text-end:where(:dir(ltr)) {
    text-align: right;
  }
  _:-ms-input-placeholder, [dir="rtl"] .text-end {
    text-align: left;
  }
  @supports not (text-align: end) {
  [dir="rtl"] .text-end {
    text-align: left;
    }
  }
  .text-end:where(:dir(rtl)) {
    text-align: left;
  }
  .text-end {
    text-align: end;
  }
  .text-justify {
    text-align: justify;
  }
}

/* docara-shell-source: runtime/utility/text-color/default/css/default.css */
@layer sf.utilities {
  .color-transparent {
    color: var(--sf-transparent);
  }
  .color-inherit {
    color: var(--sf-inherit);
  }
  .color-on-surface {
    color: var(--sf-on-surface);
  }
  .color-on-surface-fixed {
    color: var(--sf-on-surface-fixed);
  }
  .color-on-surface-variant {
    color: var(--sf-on-surface-variant);
  }
  .color-on-surface-inverse {
    color: var(--sf-on-surface-inverse);
  }
  .color-on-surface-inverse-fixed {
    color: var(--sf-on-surface-inverse-fixed);
  }
  .color-disable {
    color: var(--sf-disable);
  }
  .color-on-disable {
    color: var(--sf-on-disable);
  }
  .color-primary {
    color: var(--sf-primary);
  }
  .color-on-primary {
    color: var(--sf-on-primary);
  }
  .color-on-primary-container {
    color: var(--sf-on-primary-container);
  }
  .color-on-primary-container-graphic {
    color: var(--sf-on-primary-container-graphic);
  }
  .color-secondary {
    color: var(--sf-secondary);
  }
  .color-on-secondary {
    color: var(--sf-on-secondary);
  }
  .color-on-secondary-container {
    color: var(--sf-on-secondary-container);
  }
  .color-on-secondary-container-graphic {
    color: var(--sf-on-secondary-container-graphic);
  }
  .color-tertiary {
    color: var(--sf-tertiary);
  }
  .color-on-tertiary {
    color: var(--sf-on-tertiary);
  }
  .color-on-tertiary-container {
    color: var(--sf-on-tertiary-container);
  }
  .color-on-tertiary-container-graphic {
    color: var(--sf-on-tertiary-container-graphic);
  }
  .color-error {
    color: var(--sf-error);
  }
  .color-on-error {
    color: var(--sf-on-error);
  }
  .color-on-error-container {
    color: var(--sf-on-error-container);
  }
  .color-on-error-container-graphic {
    color: var(--sf-on-error-container-graphic);
  }
  .color-warning {
    color: var(--sf-warning);
  }
  .color-on-warning {
    color: var(--sf-on-warning);
  }
  .color-on-warning-container {
    color: var(--sf-on-warning-container);
  }
  .color-on-warning-container-graphic {
    color: var(--sf-on-warning-container-graphic);
  }
  .color-success {
    color: var(--sf-success);
  }
  .color-on-success {
    color: var(--sf-on-success);
  }
  .color-on-success-container {
    color: var(--sf-on-success-container);
  }
  .color-on-success-container-graphic {
    color: var(--sf-on-success-container-graphic);
  }
  .color-white {
    color: rgb(255, 255, 255);
  }
  .color-black {
    color: rgb(0, 0, 0);
  }
  .color-gray {
    color: rgb(106, 115, 125);
  }
  .color-gray-0 {
    color: rgb(250, 251, 252);
  }
  .color-gray-1 {
    color: rgb(246, 248, 250);
  }
  .color-gray-2 {
    color: rgb(225, 228, 232);
  }
  .color-gray-3 {
    color: rgb(209, 213, 218);
  }
  .color-gray-4 {
    color: rgb(149, 157, 165);
  }
  .color-gray-5 {
    color: rgb(106, 115, 125);
  }
  .color-gray-6 {
    color: rgb(88, 96, 105);
  }
  .color-gray-7 {
    color: rgb(68, 77, 86);
  }
  .color-gray-8 {
    color: rgb(47, 54, 61);
  }
  .color-gray-9 {
    color: rgb(36, 41, 46);
  }
  .color-red {
    color: rgb(215, 58, 73);
  }
  .color-red-0 {
    color: rgb(255, 238, 240);
  }
  .color-red-1 {
    color: rgb(255, 220, 224);
  }
  .color-red-2 {
    color: rgb(253, 174, 183);
  }
  .color-red-3 {
    color: rgb(249, 117, 131);
  }
  .color-red-4 {
    color: rgb(234, 74, 90);
  }
  .color-red-5 {
    color: rgb(215, 58, 73);
  }
  .color-red-6 {
    color: rgb(203, 36, 49);
  }
  .color-red-7 {
    color: rgb(179, 29, 40);
  }
  .color-red-8 {
    color: rgb(158, 28, 35);
  }
  .color-red-9 {
    color: rgb(134, 24, 29);
  }
  .color-orange {
    color: rgb(246, 106, 10);
  }
  .color-orange-0 {
    color: rgb(255, 248, 242);
  }
  .color-orange-1 {
    color: rgb(255, 235, 218);
  }
  .color-orange-2 {
    color: rgb(255, 209, 172);
  }
  .color-orange-3 {
    color: rgb(255, 171, 112);
  }
  .color-orange-4 {
    color: rgb(251, 133, 50);
  }
  .color-orange-5 {
    color: rgb(246, 106, 10);
  }
  .color-orange-6 {
    color: rgb(227, 98, 9);
  }
  .color-orange-7 {
    color: rgb(209, 87, 4);
  }
  .color-orange-8 {
    color: rgb(194, 78, 0);
  }
  .color-orange-9 {
    color: rgb(160, 65, 0);
  }
  .color-yellow {
    color: rgb(255, 211, 61);
  }
  .color-yellow-0 {
    color: rgb(255, 253, 239);
  }
  .color-yellow-1 {
    color: rgb(255, 251, 221);
  }
  .color-yellow-2 {
    color: rgb(255, 245, 177);
  }
  .color-yellow-3 {
    color: rgb(255, 234, 127);
  }
  .color-yellow-4 {
    color: rgb(255, 223, 93);
  }
  .color-yellow-5 {
    color: rgb(255, 211, 61);
  }
  .color-yellow-6 {
    color: rgb(249, 197, 19);
  }
  .color-yellow-7 {
    color: rgb(219, 171, 9);
  }
  .color-yellow-8 {
    color: rgb(176, 136, 0);
  }
  .color-yellow-9 {
    color: rgb(115, 92, 15);
  }
  .color-green {
    color: rgb(40, 167, 69);
  }
  .color-green-0 {
    color: rgb(240, 255, 244);
  }
  .color-green-1 {
    color: rgb(220, 255, 228);
  }
  .color-green-2 {
    color: rgb(190, 245, 203);
  }
  .color-green-3 {
    color: rgb(133, 232, 157);
  }
  .color-green-4 {
    color: rgb(52, 208, 88);
  }
  .color-green-5 {
    color: rgb(40, 167, 69);
  }
  .color-green-6 {
    color: rgb(34, 134, 58);
  }
  .color-green-7 {
    color: rgb(23, 111, 44);
  }
  .color-green-8 {
    color: rgb(22, 92, 38);
  }
  .color-green-9 {
    color: rgb(20, 70, 32);
  }
  .color-blue {
    color: rgb(3, 102, 214);
  }
  .color-blue-0 {
    color: rgb(241, 248, 255);
  }
  .color-blue-1 {
    color: rgb(219, 237, 255);
  }
  .color-blue-2 {
    color: rgb(200, 225, 255);
  }
  .color-blue-3 {
    color: rgb(121, 184, 255);
  }
  .color-blue-4 {
    color: rgb(33, 136, 255);
  }
  .color-blue-5 {
    color: rgb(3, 102, 214);
  }
  .color-blue-6 {
    color: rgb(0, 92, 197);
  }
  .color-blue-7 {
    color: rgb(4, 66, 137);
  }
  .color-blue-8 {
    color: rgb(3, 47, 98);
  }
  .color-blue-9 {
    color: rgb(5, 38, 76);
  }
  .color-purple {
    color: rgb(111, 66, 193);
  }
  .color-purple-0 {
    color: rgb(245, 240, 255);
  }
  .color-purple-1 {
    color: rgb(230, 220, 253);
  }
  .color-purple-2 {
    color: rgb(209, 188, 249);
  }
  .color-purple-3 {
    color: rgb(179, 146, 240);
  }
  .color-purple-4 {
    color: rgb(138, 99, 210);
  }
  .color-purple-5 {
    color: rgb(111, 66, 193);
  }
  .color-purple-6 {
    color: rgb(90, 50, 163);
  }
  .color-purple-7 {
    color: rgb(76, 40, 136);
  }
  .color-purple-8 {
    color: rgb(58, 29, 110);
  }
  .color-purple-9 {
    color: rgb(41, 19, 78);
  }
  .color-pink {
    color: rgb(234, 74, 170);
  }
  .color-pink-0 {
    color: rgb(255, 238, 248);
  }
  .color-pink-1 {
    color: rgb(254, 219, 240);
  }
  .color-pink-2 {
    color: rgb(249, 179, 221);
  }
  .color-pink-3 {
    color: rgb(246, 146, 206);
  }
  .color-pink-4 {
    color: rgb(236, 108, 185);
  }
  .color-pink-5 {
    color: rgb(234, 74, 170);
  }
  .color-pink-6 {
    color: rgb(208, 53, 146);
  }
  .color-pink-7 {
    color: rgb(185, 58, 134);
  }
  .color-pink-8 {
    color: rgb(153, 48, 111);
  }
  .color-pink-9 {
    color: rgb(109, 34, 79);
  }
}

/* docara-shell-source: runtime/utility/text-decoration/default/css/default.css */
@layer sf.utilities {
  .underline {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
  }
  .overline {
    -webkit-text-decoration-line: overline;
            text-decoration-line: overline;
  }
  .line-through {
    -webkit-text-decoration-line: line-through;
            text-decoration-line: line-through;
  }
  .decoration-none {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }
}

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

/* docara-shell-source: runtime/utility/transition-property/default/css/default.css */
@layer sf.utilities {
  .transition-none {
    transition-property: none;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-transform {
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-width {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-height {
    transition-property: height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-size {
    transition-property: width, height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-max-width {
    transition-property: max-width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-max-height {
    transition-property: max-height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-max-size {
    transition-property: max-width, max-height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-flex {
    transition-property: flex, flex-basis;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-flex-basis {
    transition-property: flex-basis;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-layout {
    transition-property: flex-grow, flex-shrink, flex-basis, width, min-width, max-width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
}

/* docara-shell-source: runtime/utility/width/default/css/default.css */
@layer sf.utilities {
  .w-auto {
    width: auto;
  }
  .w-1\/1 {
    width: 100%;
  }
  .w-1\/2 {
    width: 50%;
  }
  .w-1\/3 {
    width: 33.333333%;
  }
  .w-2\/3 {
    width: 66.666667%;
  }
  .w-1\/4 {
    width: 25%;
  }
  .w-2\/4 {
    width: 50%;
  }
  .w-3\/4 {
    width: 75%;
  }
  .w-1\/5 {
    width: 20%;
  }
  .w-2\/5 {
    width: 40%;
  }
  .w-3\/5 {
    width: 60%;
  }
  .w-4\/5 {
    width: 80%;
  }
  .w-1\/6 {
    width: 16.666667%;
  }
  .w-2\/6 {
    width: 33.333333%;
  }
  .w-3\/6 {
    width: 50%;
  }
  .w-4\/6 {
    width: 66.666667%;
  }
  .w-5\/6 {
    width: 83.333333%;
  }
  .w-1\/12 {
    width: 8.333333%;
  }
  .w-2\/12 {
    width: 16.666667%;
  }
  .w-3\/12 {
    width: 25%;
  }
  .w-4\/12 {
    width: 33.333333%;
  }
  .w-5\/12 {
    width: 41.666667%;
  }
  .w-6\/12 {
    width: 50%;
  }
  .w-7\/12 {
    width: 58.333333%;
  }
  .w-8\/12 {
    width: 66.666667%;
  }
  .w-9\/12 {
    width: 75%;
  }
  .w-10\/12 {
    width: 83.333333%;
  }
  .w-11\/12 {
    width: 91.666667%;
  }
  .w-full {
    width: 100%;
  }
  .w-screen {
    width: 100vw;
  }
  .w-screen-small {
    width: var(--sf-viewport-width-small);
  }
  .w-screen-large {
    width: var(--sf-viewport-width-large);
  }
  .w-screen-dynamic {
    width: var(--sf-viewport-width-dynamic);
  }
  .w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }
  .w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  .w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .w-px {
    width: 1px;
  }
  .w-0 {
    width: 0;
  }
}

/* docara-shell-source: runtime/utility/z-index/default/css/default.css */
@layer sf.utilities {
  .z-auto {
    z-index: auto;
  }
  .z--1 {
    z-index: var(--sf-z-index--1);
  }
  .z-1 {
    z-index: var(--sf-z-index-1);
  }
  .z-2 {
    z-index: var(--sf-z-index-2);
  }
  .z-3 {
    z-index: var(--sf-z-index-3);
  }
  .z-4 {
    z-index: var(--sf-z-index-4);
  }
  .z-5 {
    z-index: var(--sf-z-index-5);
  }
  .z-6 {
    z-index: var(--sf-z-index-6);
  }
  .z-7 {
    z-index: var(--sf-z-index-7);
  }
  .z-8 {
    z-index: var(--sf-z-index-8);
  }
  .z-9 {
    z-index: var(--sf-z-index-9);
  }
  .z-0 {
    z-index: var(--sf-z-index-0);
  }
}

/* docara-shell-source: portable/declarative-shell.css */
html{color-scheme:light dark}
.theme-light{color-scheme:light}
.theme-dark{color-scheme:dark}
body{min-height:100vh;background:var(--sf-surface-0);color:var(--sf-on-surface)}
.docara-skip-link{position:fixed;inset-block-start:var(--sf-space-1);inset-inline-start:var(--sf-space-1);z-index:100;transform:translateY(-200%);color:var(--sf-on-surface);text-decoration:none}
.docara-skip-link:focus{transform:translateY(0)}
body[data-docara-shell]{opacity:1!important}
.docara-mobile-navigation-trigger,.docara-outline-mobile{display:none}
.docara-header-row>[data-docara-section="docara.header"]{min-inline-size:0;align-items:center;flex:1 1 auto}
.docara-language-menu>summary{list-style:none}
.docara-language-menu>summary::-webkit-details-marker{display:none}
.docara-language-menu__popup{position:absolute;inset-block-start:calc(100% + var(--sf-space-1\/3));inset-inline-end:0;z-index:10;min-inline-size:10rem;border:1px solid var(--sf-outline-variant);border-radius:var(--sf-radius-2,var(--sf-radius-default));background:var(--sf-surface-0);box-shadow:var(--sf-ui-shadow-2)}
.docara-language-menu:not([open])>.docara-language-menu__popup{display:none}
.docara-language-menu__option:hover{background:var(--sf-surface-container-hover)}
.docara-language-menu__option:focus-visible{background:var(--sf-surface-container-active);outline:var(--sf-focus-outline-width) solid var(--sf-focus);outline-offset:calc(var(--sf-focus-outline-width) * -1)}
.docara-docs-layout{display:grid;grid-template-columns:minmax(var(--sf-f4),var(--sf-f8)) minmax(0,1fr)}
.docara-docs-layout[data-outline="true"]{grid-template-columns:minmax(var(--sf-f4),var(--sf-f8)) minmax(0,1fr) var(--sf-f2)}
.docara-docs-layout[data-sidebar="false"]{grid-template-columns:minmax(0,1fr)}
.docara-docs-layout[data-sidebar="false"][data-outline="true"]{grid-template-columns:minmax(0,1fr) var(--sf-f2)}
.docara-sidebar{align-self:stretch;border-inline-end:1px solid var(--sf-outline-variant)}
.docara-sidebar-scroll{position:sticky;inset-block-start:3.5rem;block-size:calc(100vh - 3.5rem)}
.docara-sidebar-scroll>.sf-scrollbar__viewport>[data-docara-section]{padding-block:var(--sf-space-1);padding-inline-end:var(--sf-space-1);padding-inline-start:0}
.docara-outline-rail{position:relative;align-self:stretch;box-shadow:inset var(--sf-px) var(--sf-0) var(--sf-0) var(--sf-outline-variant)}
.docara-outline-scroll{position:sticky;inset-block-start:4.5rem;block-size:calc(100vh - 4.5rem);direction:ltr}
.docara-outline-scroll>.sf-scrollbar__viewport>[data-docara-section]{padding:var(--sf-space-2);padding-inline-start:calc(var(--sf-space-2) + var(--sf-a2))}
html[dir="ltr"] .docara-outline-scroll>.sf-scrollbar__viewport>[data-docara-section]>*{direction:ltr}
html[dir="rtl"] .docara-outline-scroll>.sf-scrollbar__viewport>[data-docara-section]>*{direction:rtl}
.docara-content{color:var(--sf-on-surface);scroll-margin-block-start:4.5rem}
[data-docara-region="main"]{container-type:inline-size}
.sf-breadcrumbs{overscroll-behavior-inline:contain}
.sf-breadcrumbs-item[hidden]{display:none}
.docara-document-link{overflow-wrap:anywhere;background:transparent;transition:background-color 120ms ease}
.docara-document-link:hover{background:var(--sf-surface-container-hover)}
.docara-document-link:active{background:var(--sf-surface-container-active)}
.docara-document-link>sf-icon{flex:none}
.docara-previous-next{margin-block-start:var(--sf-space-4);padding-block-start:var(--sf-space-2);border-block-start:1px solid var(--sf-outline-variant)}
.docara-document-link--next{justify-content:flex-end;text-align:end}
.docara-prose h1[id],.docara-prose h2[id],.docara-prose h3[id],.docara-prose h4[id],.docara-prose h5[id],.docara-prose h6[id]{scroll-margin-block-start:4.5rem}
.docara-prose p,.docara-prose li{max-width:var(--sf-text--measure-wide)}
.docara-prose img{max-inline-size:100%}
.aspect-21x9{aspect-ratio:21/9}
.docara-prose>p>img:only-child,.docara-prose>p>a:only-child>img:only-child{display:block;block-size:auto}
.docara-prose figure>img,.docara-prose picture>img{display:block}
.docara-prose figure,.docara-prose picture{max-inline-size:100%}
[data-docara-table-scroll]{border:1px solid var(--sf-outline-variant);border-radius:var(--sf-radius-2,var(--sf-radius-default));background:var(--sf-surface-0)}
[data-docara-table-scroll]>.table{inline-size:100%;margin:0;border:0;border-radius:0;border-collapse:separate;border-spacing:0}
[data-docara-table-scroll]>.table>thead{background:var(--sf-surface-container)}
[data-docara-table-scroll]>.table>thead>tr>th,[data-docara-table-scroll]>.table>tbody>tr>td{padding-block:var(--sf-space-1\/2);padding-inline:var(--sf-space-1);border:0;border-inline-end:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant);text-align:start;vertical-align:top}
[data-docara-table-scroll]>.table>thead>tr>th{padding-block:var(--sf-space-1);background:var(--sf-surface-container);color:var(--sf-on-surface);font-weight:var(--sf-font-weight-bold)}
[data-docara-table-scroll]>.table>*>tr>*:last-child{border-inline-end-width:0}
[data-docara-table-scroll]>.table>tbody>tr:last-child>*{border-block-end-width:0}
.docara-mobile-sheet{position:fixed;inset-block:0;inset-inline-start:0;inset-inline-end:auto;inline-size:min(90vw,22rem);block-size:100dvh;max-block-size:100dvh;margin:0;border:0;border-inline-end:1px solid var(--sf-outline-variant);border-radius:0;overflow:hidden;color:var(--sf-on-surface);background:var(--sf-surface-0)}
.docara-mobile-sheet:not([open]){display:none}
.docara-mobile-sheet::backdrop{background:color-mix(in srgb,var(--sf-on-surface) 38%,transparent);backdrop-filter:blur(2px)}
.docara-mobile-sheet-header{min-block-size:3.5rem}
.docara-mobile-sheet-content{max-block-size:calc(100dvh - 3.5rem);overflow:auto;overscroll-behavior:contain}
.docara-outline-dialog{inset-inline-start:auto;inset-inline-end:0;border-inline-start:1px solid var(--sf-outline-variant);border-inline-end:0}
.docara-code-block.bg-surface-container{background:var(--sf-surface-0)}
.docara-code-block>.sf--highlight-head{margin:0;border-bottom:1px solid var(--sf-outline-variant)}
.docara-code-header,.docara-code-block>.sf--highlight-head,.docara-example-preview__header{position:relative;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;gap:var(--sf-space-1);min-block-size:calc(var(--sf-ui-1--control-height) + 2 * var(--sf-space-1\/3));padding:var(--sf-space-1\/3) var(--sf-space-1);background:var(--sf-surface-0)}
.docara-code-header>span,.docara-code-block>.sf--highlight-head>span{display:inline-flex;align-self:center;inline-size:max-content;max-inline-size:100%;min-block-size:var(--sf-ui-1--control-height);align-items:center;padding-inline:var(--sf-space-1);color:var(--sf-on-surface);font-size:var(--sf-text-size-1);line-height:var(--sf-text-height-1)}
.docara-code-header>[data-docara-code-actions],.docara-code-block>.sf--highlight-head>[data-docara-code-actions],.docara-example-preview__actions{display:flex;align-self:center;align-items:center;justify-self:end;gap:var(--sf-space-1\/3)}
.docara-code-header>[data-docara-code-actions],.docara-code-block>.sf--highlight-head>[data-docara-code-actions]{margin:0}
.docara-code-header>[data-docara-code-actions]>button,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button{margin:0;color:var(--sf-on-surface-variant)}
.docara-code-header>[data-docara-code-actions]>button .sf-button-text-container,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button .sf-button-text-container{display:none}
.docara-code-header>[data-docara-code-actions]>button:hover,.docara-code-header>[data-docara-code-actions]>button:focus-visible,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button:hover,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button:focus-visible{color:var(--sf-on-surface)}
.docara-code-header>[data-docara-code-actions]>button:focus:not(:focus-visible),.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button:focus:not(:focus-visible){--sf-icon-button--box-shadow:none;outline:0;box-shadow:none}
.docara-code-fallback-action{display:block;inline-size:var(--sf-ui-1--control-height);block-size:var(--sf-ui-1--control-height);margin:0}
.docara-code-block>[data-docara-code-fallback]{border-bottom:1px solid var(--sf-outline-variant)}
.docara-code-block:not([data-sf-highlight-chrome="static"]):has(>.sf--highlight-head)>[data-docara-code-fallback]{display:none}
.docara-code-block+*{margin-block-start:var(--sf-space-4)}
.docara-code-scroll{max-width:100%;background:var(--sf-surface-0);border:0;border-radius:0;box-shadow:none;overscroll-behavior-inline:contain}
.docara-code-scroll code{display:block;min-inline-size:max-content;white-space:pre;background:transparent}
.docara-code-scroll .hljs-ln{inline-size:max-content;margin:0;border:0;border-spacing:0;border-collapse:collapse;background:transparent}
.docara-code-scroll .hljs-ln td{margin:0;padding:0;border:0;background:transparent}
.docara-code-scroll .hljs-ln-numbers{display:none}
.docara-code-scroll .hljs-ln-code{padding-inline:0}
[data-docara-code-wrap-active="true"] .docara-code-scroll{overflow-x:hidden}
[data-docara-code-wrap-active="true"] .docara-code-scroll code{min-inline-size:0;white-space:pre-wrap;overflow-wrap:anywhere}
[data-docara-code-wrap-active="true"] .docara-code-scroll .hljs-ln{inline-size:100%;table-layout:fixed}
[data-docara-code-wrap-active="true"] .docara-code-scroll .hljs-ln-code{white-space:pre-wrap;overflow-wrap:anywhere}
sf-alert,sf-button{display:block}
.sf-alert.sf-alert--success>sf-icon>.sf-icon{--sf-icon--color:var(--sf-success)}
.docara-prose sf-alert,.docara-prose sf-button{margin-block:var(--sf-space-2)}
.docara-landing{display:block;min-height:auto;container-type:inline-size}
.docara-landing [data-docara-block="hero"]:not([data-docara-surface]){background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--sf-primary-container) 72%,transparent),transparent 46%),radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--sf-tertiary-container) 58%,transparent),transparent 38%),color-mix(in srgb,var(--sf-surface-container) 76%,transparent)}
.docara-landing .docara-content{width:100%}
.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:0}
.docara-landing .docara-content>[data-docara-width="full"],.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]>[data-docara-width="full"],[data-docara-region="main"]>.docara-prose>[data-docara-width="full"],[data-docara-region="main"]>.docara-prose>[data-docara-section][data-docara-region-owner="main"]>[data-docara-width="full"]{box-sizing:border-box;width:100cqw;margin-inline:calc(50% - 50cqw)}
.docara-landing [data-docara-container]{box-sizing:border-box;width:100%}
.docara-surface>[data-docara-surface-background],.docara-surface>[data-docara-surface-overlay]{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}
.docara-surface>[data-docara-container]{box-sizing:border-box;max-inline-size:100%}
.docara-surface>[data-docara-surface-background]{z-index:-2}
.docara-surface>[data-docara-surface-background][data-fit="cover"]{object-fit:cover}
.docara-surface>[data-docara-surface-background][data-fit="contain"]{object-fit:contain}
.docara-surface>[data-docara-surface-background][data-fit="auto"]{object-fit:none}
.docara-surface>[data-docara-surface-background][data-x="left"]{object-position:left center}
.docara-surface>[data-docara-surface-background][data-x="center"]{object-position:center center}
.docara-surface>[data-docara-surface-background][data-x="right"]{object-position:right center}
.docara-surface>[data-docara-surface-background][data-y="top"]{object-position:var(--docara-surface-x,center) top}
.docara-surface>[data-docara-surface-background][data-y="center"]{object-position:var(--docara-surface-x,center) center}
.docara-surface>[data-docara-surface-background][data-y="bottom"]{object-position:var(--docara-surface-x,center) bottom}
.docara-surface>[data-docara-surface-background][data-x="left"]{--docara-surface-x:left}
.docara-surface>[data-docara-surface-background][data-x="center"]{--docara-surface-x:center}
.docara-surface>[data-docara-surface-background][data-x="right"]{--docara-surface-x:right}
.docara-surface>[data-docara-surface-overlay]{z-index:-1;background:transparent}
.docara-surface>[data-docara-surface-overlay][data-overlay="light"][data-strength="soft"]{background:color-mix(in srgb,var(--sf-surface-0) 30%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="light"][data-strength="medium"]{background:color-mix(in srgb,var(--sf-surface-0) 55%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="light"][data-strength="strong"]{background:color-mix(in srgb,var(--sf-surface-0) 78%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="dark"][data-strength="soft"]{background:color-mix(in srgb,var(--sf-on-surface) 30%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="dark"][data-strength="medium"]{background:color-mix(in srgb,var(--sf-on-surface) 55%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="dark"][data-strength="strong"]{background:color-mix(in srgb,var(--sf-on-surface) 78%,transparent)}
.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]>h1:first-child,.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]>p:first-of-type{max-width:65ch}
[data-docara-media]{display:block;inline-size:100%;block-size:auto}
[data-docara-media="hero"],[data-docara-media="promo"]{aspect-ratio:16/9;object-fit:contain}
[data-docara-media="showcase"]{aspect-ratio:16/9;object-fit:contain}
[data-docara-media="feature-icon"]{inline-size:var(--sf-e0);block-size:var(--sf-e0);object-fit:contain}
[data-docara-block="features"]>li>.docara-icon{align-self:flex-start}
.docara-landing [data-docara-block="columns"]>div>h3:first-child{font-size:var(--sf-heading-4--size);line-height:var(--sf-heading-4--height)}
[data-docara-media="card"]{aspect-ratio:4/3;object-fit:cover;border-radius:var(--sf-radius-2)}
[data-docara-media="logo"]{max-inline-size:10rem;max-block-size:3rem;object-fit:contain}
.docara-example-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.docara-example-grid .sf-button{margin-block-start:auto;align-self:flex-start}
.docara-example-preview{overflow:hidden;margin-block-end:var(--sf-space-1);border:1px solid var(--sf-outline-variant);border-radius:var(--sf-radius-2,var(--sf-radius-default));background:var(--sf-surface-0)}
.docara-example-preview__header{border-block-end:1px solid var(--sf-outline-variant)}
.docara-example-preview__tabs{display:inline-flex;inline-size:max-content;max-inline-size:100%;align-items:center;gap:0;overflow-x:auto}
.docara-example-preview__tab{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--sf-ui-1--control-height);margin:0;padding-inline:var(--sf-space-1);border:0;border-radius:0;background:transparent;color:var(--sf-on-surface-variant);font-size:var(--sf-text-size-1);line-height:var(--sf-text-height-1);cursor:pointer}
.docara-example-preview__tab[aria-selected="true"]{color:var(--sf-on-surface)}
.docara-example-preview__tab:focus-visible{outline:2px solid var(--sf-primary);outline-offset:-2px}
.docara-example-preview__indicator{position:absolute;inset-block-end:-1px;inset-inline-start:0;z-index:1;inline-size:0;block-size:2px;background:var(--sf-outline);pointer-events:none;transition:inset-inline-start 180ms ease,inline-size 180ms ease}
.docara-example-preview__actions{justify-content:flex-end}
.docara-example-preview__action,.docara-example-preview__copy{margin:0;color:var(--sf-on-surface-variant)}
.docara-example-preview__action .sf-icon,.docara-example-preview__copy .sf-icon{--sf-icon--color:var(--sf-on-surface-variant)}
.docara-example-preview__action:hover,.docara-example-preview__action:focus-visible,.docara-example-preview__copy:hover,.docara-example-preview__copy:focus-visible{color:var(--sf-on-surface)}
.docara-example-preview__action:hover .sf-icon,.docara-example-preview__action:focus-visible .sf-icon,.docara-example-preview__copy:hover .sf-icon,.docara-example-preview__copy:focus-visible .sf-icon{--sf-icon--color:var(--sf-on-surface)}
.docara-example-preview .docara-example-preview__action:focus:not(:focus-visible),.docara-example-preview .docara-example-preview__copy:focus:not(:focus-visible){--sf-icon-button--box-shadow:none;outline:0;box-shadow:none}
.docara-example-preview__copy[data-copy-state="copied"],.docara-example-preview__copy[data-copy-state="copied"] .sf-icon{color:var(--sf-on-surface);--sf-icon--color:var(--sf-on-surface)}
.docara-example-preview__panels{background:var(--sf-surface-0)}
.docara-example-preview__panel{display:none;min-inline-size:0;padding:var(--sf-space-2)}
.docara-example-preview__panel>:last-child{margin-block-end:0}
.docara-example-preview__panel--source{padding:0}
.docara-example-preview__panel.is-active{display:block}
.docara-example-preview iframe{display:block;inline-size:100%;border:0;overflow:hidden;background:var(--sf-surface-0)}
.docara-example-preview iframe[data-docara-example-frame]{block-size:12rem}
.docara-example-preview iframe:not([data-docara-example-frame]){block-size:32rem}
.docara-example-preview[data-preview-size="compact"] iframe:not([data-docara-example-frame]){block-size:22rem}
.docara-example-preview[data-preview-size="tall"] iframe:not([data-docara-example-frame]){block-size:44rem}
.docara-example-source{background:var(--sf-surface-container-low);color:var(--sf-on-surface);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre;overscroll-behavior-inline:contain}
[data-docara-example-panel] [data-docara-code-block]{block-size:auto;margin:0;border:0;border-radius:0;background:var(--sf-surface-0)}
[data-docara-example-panel] [data-docara-code-block]>.sf--highlight-head{display:none}
[data-docara-example-panel] [data-docara-code-block]>[data-docara-code-fallback]{display:none}
[data-docara-example-panel] .docara-code-scroll{box-sizing:border-box;block-size:auto;margin:0;background:var(--sf-surface-0)}
[data-docara-example-panel] .docara-code-scroll code{background:transparent}
[data-docara-example-panel] .docara-code-scroll .hljs-ln{inline-size:max-content;margin:0;border:0;border-spacing:0;border-collapse:collapse;background:transparent}
[data-docara-example-panel] .docara-code-scroll .hljs-ln td{margin:0;padding:0;border:0;background:transparent}
[data-docara-example-panel] .docara-code-scroll .hljs-ln-numbers{display:none}
[data-docara-example-panel] .docara-code-scroll .hljs-ln-code{padding-inline:0}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll{overflow-x:hidden}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll code{min-inline-size:0;white-space:pre-wrap;overflow-wrap:anywhere}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll .hljs-ln{inline-size:100%;table-layout:fixed}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll .hljs-ln-code{white-space:pre-wrap;overflow-wrap:anywhere}
[data-docara-example-copy][hidden],[data-docara-example-viewer][hidden],[data-docara-example-viewports][hidden],[data-docara-example-wrap][hidden]{display:none}
.docara-example-preview__viewports{display:flex;align-items:center;gap:var(--sf-space-1\/3)}
.docara-example-preview__viewport{min-block-size:var(--sf-ui-1--control-height);margin:0;padding-inline:var(--sf-space-1);border:1px solid transparent;border-radius:var(--sf-radius-1);background:transparent;color:var(--sf-on-surface-variant);font:inherit;cursor:pointer}
.docara-example-preview__viewport:hover,.docara-example-preview__viewport:focus-visible{color:var(--sf-on-surface);background:var(--sf-surface-container-hover)}
.docara-example-preview__viewport:focus-visible{outline:2px solid var(--sf-primary);outline-offset:2px}
.docara-example-preview__viewport[aria-pressed="true"]{border-color:var(--sf-outline);background:var(--sf-surface-container);color:var(--sf-on-surface)}
.docara-example-viewer-dialog{box-sizing:border-box;inline-size:100vw;max-inline-size:none;block-size:100dvh;max-block-size:none;margin:0;padding:0;border:0;background:var(--sf-surface-0);color:var(--sf-on-surface)}
.docara-example-viewer-dialog::backdrop{background:color-mix(in srgb,var(--sf-scrim,var(--sf-on-surface)) 48%,transparent)}
.docara-example-preview[data-docara-example-viewer-active="true"]{display:flex;flex-direction:column;inline-size:100%;block-size:100%;margin:0;border:0;border-radius:0;background:var(--sf-surface-0)}
.docara-example-preview[data-docara-example-viewer-active="true"] .docara-example-preview__panels{display:flex;flex:1;min-block-size:0;overflow:hidden}
.docara-example-preview[data-docara-example-viewer-active="true"] [data-docara-example-panel="example"].is-active{box-sizing:border-box;display:flex;flex:1;min-inline-size:0;min-block-size:0;align-items:flex-start;justify-content:center;overflow:auto;background:var(--sf-surface-container-low)}
.docara-example-preview[data-docara-example-viewer-active="true"] iframe[data-docara-example-frame]{flex:0 0 auto;max-inline-size:none;background:var(--sf-surface-0);box-shadow:var(--sf-ui-shadow-1)}
[data-docara-tree-toggle]+ul[hidden]{display:none}
.docara-step{position:relative;grid-template-columns:2.5rem minmax(0,1fr);column-gap:var(--sf-space-1);min-block-size:2.5rem;padding-block-end:var(--sf-space-2)}
.docara-step:last-child{padding-block-end:0}
.docara-step:not(:last-child)::after{content:"";position:absolute;inset-block-start:2.5rem;inset-block-end:0;inset-inline-start:calc(1.25rem - .5px);inline-size:1px;background:var(--sf-outline-variant)}
.docara-step-marker{position:relative;z-index:1;box-sizing:border-box;inline-size:2.5rem;block-size:2.5rem;align-self:start;border:1px solid var(--sf-outline);border-radius:50%;background:var(--sf-surface-0);color:var(--sf-on-surface);font-weight:700}
.docara-step[data-step-state="complete"] .docara-step-marker{border-color:var(--sf-primary);background:var(--sf-primary);color:var(--sf-on-primary)}
.docara-step[data-step-state="current"] .docara-step-marker{border:2px solid var(--sf-primary);background:var(--sf-primary-container);color:var(--sf-on-primary-container)}
.docara-step-content{min-inline-size:0;padding-block-start:var(--sf-space-1\/3)}
.docara-step-content>p{margin:0;color:var(--sf-on-surface-variant)}
.docara-step-content strong{color:var(--sf-on-surface);font-weight:700}
.docara-skip-link:focus-visible,.docara-document-link:focus-visible,[data-docara-component-details-summary]:focus-visible{outline:3px solid var(--sf-primary,Highlight);outline-offset:3px}
@media(max-width:1152px){
  .docara-header-navigation{display:none}
  .docara-mobile-navigation-trigger--primary{display:inline-flex}
  .docara-docs-layout[data-outline="true"]{grid-template-columns:minmax(var(--sf-f4),var(--sf-f8)) minmax(0,1fr)}
  .docara-docs-layout[data-sidebar="false"],.docara-docs-layout[data-sidebar="false"][data-outline="true"]{grid-template-columns:minmax(0,1fr)}
  .docara-outline-rail{display:none}
  .docara-outline-mobile{display:block}
}
@media(max-width:800px){
  .docara-mobile-navigation-trigger{display:inline-flex}
  .docara-docs-layout,.docara-docs-layout[data-outline="true"]{grid-template-columns:minmax(0,1fr)}
  .docara-sidebar{display:none}
  .docara-reading-column{padding:var(--sf-space-2)}
  .docara-content{scroll-margin-block-start:4rem}
  .docara-prose h1[id],.docara-prose h2[id],.docara-prose h3[id],.docara-prose h4[id],.docara-prose h5[id],.docara-prose h6[id]{scroll-margin-block-start:4rem}
  .docara-landing [data-docara-container]{padding:var(--sf-space-2)}
}
@media(max-width:600px){
  [data-docara-example-viewer]{display:none!important}
  .docara-previous-next{flex-direction:column}
  .docara-document-link--next{order:-1;justify-content:flex-start;text-align:start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.docara-example-preview__indicator{transition:none!important}}

.docara-search-modal-surface{--sf-modal-surface-bg:transparent;--sf-modal-surface-border-width:0;--sf-modal-surface-shadow:none;--sf-modal-surface--padding-inline-start:0;--sf-modal-surface--padding-top:0;--sf-modal-surface--padding-inline-end:0;--sf-modal-surface--padding-bottom:0}
.docara-search-trigger{--sf-button--border-color:var(--sf-outline-variant)}
.docara-search-modal-body,.docara-search-modal-content{overflow:visible}
.docara-search-query{box-shadow:var(--sf-ui-shadow-2)}
.docara-search-results-surface{box-shadow:var(--sf-ui-shadow-3)}
.docara-search-results{list-style:none;max-block-size:min(56vh,34rem);overflow:auto}
.docara-search-result-item:not(:last-child){border-bottom:var(--sf-a1) solid var(--sf-outline-variant)}
.docara-search-result{overflow-wrap:anywhere}
.docara-search-result:hover{background:var(--sf-surface-container-hover)}
.docara-search-result:focus-visible{background:var(--sf-surface-container-active);outline:var(--sf-focus-outline-width) solid var(--sf-focus);outline-offset:calc(var(--sf-focus-outline-width) * -1)}
.docara-search-result-context,.docara-search-result-summary{font-size:var(--sf-text-small--size);line-height:var(--sf-text-small--height)}
.docara-search-mark{background:var(--sf-mark);color:inherit;border-radius:var(--sf-radius-1\/2);padding-inline:var(--sf-a2)}
.docara-search-help kbd{color:var(--sf-on-surface);background:var(--sf-surface-container);border-radius:var(--sf-radius-1)}
.docara-search-status[data-state="error"]{color:var(--sf-error)}
.sf-button.sf-button--outline{border-inline-start-width:var(--sf-button--border-inline-start-width,1px);border-inline-end-width:var(--sf-button--border-inline-end-width,1px)}
@media(max-width:800px){.docara-search-trigger>.sf-button-text-container,.docara-search-shortcut{display:none}.docara-search-help{display:none}.docara-search-results{max-block-size:min(64vh,34rem)}}
/* Product-owned composition around the Framework icon primitive. */
.docara-icon {
  --docara-icon-color: var(--sf-on-surface);
  --docara-icon-main: var(--sf-on-surface);
  --docara-icon-on-main: var(--sf-surface-0);
  --docara-icon-container: var(--sf-surface-container);
  --docara-icon-on-container: var(--sf-on-surface);
  place-items: center;
  flex: 0 0 auto;
  color: var(--docara-icon-color);
  vertical-align: middle;
}

.docara-icon > .sf-icon { --sf-icon--color: currentColor; }
.docara-icon[data-docara-icon-scheme="primary"] { --docara-icon-color: var(--sf-primary); --docara-icon-main: var(--sf-primary); --docara-icon-on-main: var(--sf-on-primary); --docara-icon-container: var(--sf-primary-container); --docara-icon-on-container: var(--sf-on-primary-container); }
.docara-icon[data-docara-icon-scheme="secondary"] { --docara-icon-color: var(--sf-secondary); --docara-icon-main: var(--sf-secondary); --docara-icon-on-main: var(--sf-on-secondary); --docara-icon-container: var(--sf-secondary-container); --docara-icon-on-container: var(--sf-on-secondary-container); }
.docara-icon[data-docara-icon-scheme="tertiary"] { --docara-icon-color: var(--sf-tertiary); --docara-icon-main: var(--sf-tertiary); --docara-icon-on-main: var(--sf-on-tertiary); --docara-icon-container: var(--sf-tertiary-container); --docara-icon-on-container: var(--sf-on-tertiary-container); }
.docara-icon[data-docara-icon-scheme="info"] { --docara-icon-color: var(--sf-info); --docara-icon-main: var(--sf-info); --docara-icon-on-main: var(--sf-on-info); --docara-icon-container: var(--sf-info-container); --docara-icon-on-container: var(--sf-on-info-container); }
.docara-icon[data-docara-icon-scheme="success"] { --docara-icon-color: var(--sf-success); --docara-icon-main: var(--sf-success); --docara-icon-on-main: var(--sf-on-success); --docara-icon-container: var(--sf-success-container); --docara-icon-on-container: var(--sf-on-success-container); }
.docara-icon[data-docara-icon-scheme="warning"] { --docara-icon-color: var(--sf-warning); --docara-icon-main: var(--sf-warning); --docara-icon-on-main: var(--sf-on-warning); --docara-icon-container: var(--sf-warning-container); --docara-icon-on-container: var(--sf-on-warning-container); }
.docara-icon[data-docara-icon-scheme="danger"] { --docara-icon-color: var(--sf-error); --docara-icon-main: var(--sf-error); --docara-icon-on-main: var(--sf-on-error); --docara-icon-container: var(--sf-error-container); --docara-icon-on-container: var(--sf-on-error-container); }
.docara-icon[data-docara-icon-variant="tonal"] { background: var(--docara-icon-container); color: var(--docara-icon-on-container); }
.docara-icon[data-docara-icon-variant="main"] { background: var(--docara-icon-main); color: var(--docara-icon-on-main); }
.docara-icon[data-docara-icon-variant="outline"] { border: 1px solid var(--docara-icon-color); color: var(--docara-icon-color); }
.docara-icon[data-docara-icon-container="square"],
.docara-icon[data-docara-icon-container="circle"] { padding: var(--sf-space-1\/2); }
.docara-icon[data-docara-icon-container="square"] { border-radius: var(--sf-radius-default); }
.docara-icon[data-docara-icon-container="circle"] { border-radius: 50%; }
.docara-icon[data-docara-icon-size="1/3"]:not([data-docara-icon-container="none"]) { padding: var(--sf-space-1\/4); }
.docara-icon[data-docara-icon-size="1/2"]:not([data-docara-icon-container="none"]) { padding: var(--sf-space-1\/3); }
.docara-icon[data-docara-icon-size="2"]:not([data-docara-icon-container="none"]),
.docara-icon[data-docara-icon-size="3"]:not([data-docara-icon-container="none"]) { padding: var(--sf-space-1); }