.list-component[data-v-4b7f0865] {
   background-color: var(--list-bg-color);
   display: var(--list-display, block);
   gap: var(--list-gap);
   list-style: none;
   margin: var(--list-margin, 0);
   padding-block: var(--list-padding-block);
   padding-inline: var(--list-padding-inline);
   position: relative;
}

.list-item-component {
&[data-v-7170de34] {
   --_bg-color: var(--list-item-bg-color, transparent);
   --_color: var(--list-item-color, currentColor);
   --_ripple-color: var(--_color);
   -webkit-tap-highlight-color: transparent;
   align-items: var(--list-item-align-items);
   background-color: var(--_bg-color);
   border-color: var(--list-item-border-color);
   border-radius: var(--list-item-border-radius);
   border-style: var(--list-item-border-style, solid);
   border-width: var(--list-item-border-width, 0);
   color: currentColor;
   display: var(--list-item-display, flex);
   font-family: var(--font-family);
   font-size: var(--list-item-font-size, 1rem);
   font-weight: var(--list-item-font-weight, 500);
   gap: var(--list-item-gap);
   grid-template-columns: var(--list-item-columns);
   justify-content: var(--list-item-justify-content);
   line-height: var(--list-item-line-height);
   min-height: var(--list-item-height, 48px);
   text-decoration: none !important;
   transition:
      outline-color var(--focus-transition, 0ms),
      background-color 300ms;
}
&.disabled[data-v-7170de34] {
      opacity: 0.7;
      pointer-events: none;
}
&.interactive {
&[data-v-7170de34] {
      cursor: pointer;
}
&[data-v-7170de34]:hover {
         background-color: var(
            --list-item-hover-bg-color,
            color-mix(in srgb, currentColor 8%, var(--_bg-color, transparent))
         );
}
&[data-v-7170de34]:active {
         background-color: var(
            --list-item-active-bg-color,
            color-mix(in srgb, currentColor 16%, var(--_bg-color, transparent))
         );
}
}
&:not(.disabled).active[data-v-7170de34] {
      background-color: var(
         --list-item-active-bg-color,
         color-mix(in srgb, currentColor 16%, var(--_bg-color, transparent))
      );
}
&[data-v-7170de34]:focus-visible,
   &[data-v-7170de34]:has(a:focus-visible),
   &[data-v-7170de34]:has(button.content:focus-visible) {
      outline-color: var(
         --list-item-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-style: var(
         --list-item-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --list-item-focus-width,
         var(--default-focus-width, 2px)
      );
}
a[data-v-7170de34] {
      outline: none;
}
.content {
&[data-v-7170de34] {
      align-items: var(--list-item__content-align-items, center);
      color: var(--_color);
      display: var(--list-item__content-display, flex);
      gap: var(--list-item__content-gap, 0.5rem);
      padding-inline: var(--list-item-padding-inline, 1rem);
      text-decoration: none;
      width: var(--list-item-width, 100%);
      z-index: var(--z-index-list-item-content, 1);
}
&[data-v-7170de34]:is(button) {
         background: none;
         border: 0;
         cursor: inherit;
         font: inherit;
         outline: none;
         padding-block: 0;
         text-align: start;
}
.icon-wrapper {
&[data-v-7170de34] {
         height: 24px;
         width: 24px;
}
svg[data-v-7170de34] {
            display: block;
            fill: currentColor;
}
}
}
.append[data-v-7170de34] {
      align-items: var(--list-item__append-align-items, center);
      display: var(--list-item__append-display, flex);
      gap: var(--list-item__append-gap);
      justify-content: var(--list-item__append-justify-content, center);
      padding-inline-end: var(--list-item-padding-inline-end, 1rem);
}
}

.switch-component {
&[data-v-4a4ce282] {
   --_bg-color: var(--switch-bg-color, transparent);
   --_border-color: var(
      --switch-border-color,
      var(--default-form-control-border-color, canvasText)
   );
   --_dot-bg-color: var(
      --switch-dot-bg-color,
      var(--default-form-control-border-color, canvasText)
   );
   --default-switch-container-width: 52px;
   --default-switch-size: 32px;
   align-items: center;
   display: var(--switch-display, inline-grid);
   gap: var(--switch-gap, 0.5rem);
   grid-template-columns: var(--switch-columns);
   margin-block: var(--switch-margin-block);
   position: relative;
   width: fit-content;
}
&.disabled {
.switch-container[data-v-4a4ce282] {
         opacity: 0.4;
         pointer-events: none;
}
}
&[data-v-4a4ce282]:has(input:checked) {
      --_bg-color: var(
         --switch-bg-color-checked,
         var(--default-form-control-checked-bg-color, canvasText)
      );
      --_border-color: var(
         --switch-border-color-checked,
         var(--default-form-control-checked-bg-color, canvasText)
      );
      --_dot-bg-color: var(--switch-dot-bg-color-checked, canvas);
      --_dot-size: 24px;
      --_dot-translate: calc(
         var(--switch-container-width, var(--default-switch-container-width)) -
            var(--switch-size, var(--default-switch-size)) + 2px
      );
}
&[data-v-4a4ce282]:has(input:focus-visible) {
      --_focus-color: var(
         --switch-focus-color,
         var(--default-focus-color, canvasText)
      );
}
}
.switch-container {
&[data-v-4a4ce282] {
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   background-color: var(--_bg-color);
   border: 2px solid var(--_border-color, var(--input-border-color));
   border-radius: 999px;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
   grid-area: area;
   height: var(--switch-size, var(--default-switch-size));
   outline-color: var(--_focus-color, transparent);
   outline-offset: 2px;
   outline-style: var(--switch-focus-style, var(--default-focus-style, solid));
   outline-width: var(--switch-focus-width, var(--default-focus-width, 2px));
   pointer-events: none;
   position: relative;
   transition: all 300ms ease;
   width: var(--switch-container-width, var(--default-switch-container-width));
}
.dot[data-v-4a4ce282] {
      background-color: var(--_dot-bg-color, var(--input-border-color));
      border-radius: 999px;
      height: var(--_dot-size, 16px);
      transition: all 256ms ease;
      translate: var(--_dot-translate, 6px) 0;
      width: var(--_dot-size, 16px);
}
}
.wrapper[data-v-4a4ce282] {
   display: inline-grid;
   grid-template-areas: "area";
}
.input {
&[data-v-4a4ce282] {
   grid-area: area;
   /* grid-area: area;
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      white-space: nowrap;
      width: 1px; */
   opacity: 0;
}
&[disabled][data-v-4a4ce282] {
      pointer-events: none;
}
}
label[data-v-4a4ce282] {
   color: var(--input-label-color, currentColor);
   cursor: pointer;
   display: var(--switch-label-display, block);
   flex-basis: 100%;
   font-size: var(
      --switch-label-font-size,
      var(--input-label-font-size, 0.875rem)
   );
   font-weight: var(--switch-label-font-weight, var(--input-label-font-weight));
}

.avatar-component[data-v-494e4388] {
   border: var(--avatar-border);
   border-radius: var(--avatar-border-radius, 999px);
   width: auto;
}

.demo-section-component {
&[data-v-c139645d] {
   border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
   padding-block: 2rem;
   scroll-margin-top: 1rem;
}
h2[data-v-c139645d] {
      font-size: 1.25rem;
      margin-bottom: 1rem;
}
.examples[data-v-c139645d] {
      align-items: start;
      display: flex;
      flex-direction: column;
      gap: 1rem;
}
}

.row[data-v-da6982e4] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.badge-component {
&[data-v-370e5bf9] {
   display: var(--badge-display, inline-block);
   position: relative;
}
.badge {
&[data-v-370e5bf9] {
      background-color: var(--badge-bg-color, canvasText);
      border-radius: var(--badge-border-radius, 999px);
      color: var(--badge-color, canvas);
      display: grid;
      font-family: var(--font-family);
      font-size: var(--badge-font-size, 0.75rem);
      font-weight: var(--badge-font-weight, 600);
      height: var(--badge-height, 20px);
      inset: auto auto calc(100% - 16px) calc(100% - 16px);
      line-height: var(--badge-line-height, 16px);
      min-width: 20px;
      padding-inline: var(--badge-padding-inline, 0.25rem);
      place-items: center;
      pointer-events: none;
      position: absolute;
      z-index: 2;
}
&.dot[data-v-370e5bf9] {
         height: var(--badge-dot-size, 8px);
         inset: auto auto calc(100% - 10px) calc(100% - 10px);
         min-width: var(--badge-dot-size, 8px);
         padding-inline: 0;
         width: var(--badge-dot-size, 8px);
}
}
}

.icon-button-component {
&[data-v-98dd914d] {
   --icon-color: var(--icon-button-color, currentColor);
   -webkit-appearance: none;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   background-color: var(--icon-button-bg-color);
   border: var(--icon-button-border);
   border-radius: var(--icon-button-border-radius, 999px);
   box-shadow: var(--icon-button-box-shadow);
   box-sizing: border-box;
   color: var(--icon-button-color, currentColor);
   cursor: pointer;
   display: inline-flex;
   flex-shrink: 0;
   font-family: var(--font-family, sans-serif);
   font-weight: 500;
   height: var(--icon-button-height, var(--icon-button-size, 40px));
   justify-content: center;
   line-height: inherit;
   opacity: var(--icon-button-opacity, 1);
   outline-color: transparent;
   outline-offset: 0;
   outline-style: var(
      --icon-button-focus-style,
      var(--default-focus-style, solid)
   );
   outline-width: var(
      --icon-button-focus-width,
      var(--default-focus-width, 2px)
   );
   overflow: hidden;
   position: relative;
   text-decoration: var(--icon-button-text-decoration, none);
   user-select: none;
   vertical-align: middle;
   width: var(--icon-button-width, var(--icon-button-size, 40px));
}
&[data-v-98dd914d]::before {
      background-color: currentColor;
      border-radius: inherit;
      content: " ";
      inset: 0;
      opacity: var(--icon-button-before-opacity, 0);
      pointer-events: none;
      position: absolute;
      transition: opacity 0.3s ease;
      will-change: opacity;
}
&[data-v-98dd914d]:hover {
      --icon-button-before-opacity: 0.08;
}
&[data-v-98dd914d]:active,
   &.active[data-v-98dd914d] {
      --icon-button-before-opacity: 0.16;
}
&[data-v-98dd914d]:focus-visible {
      --icon-button-before-opacity: 0.24;
      outline-color: var(
         --icon-button-focus-color,
         var(--default-focus-color, canvasText)
      );
}
&.disabled[data-v-98dd914d],
   &[disabled][data-v-98dd914d] {
      box-shadow: none;
      cursor: not-allowed;
      opacity: 0.4;
      pointer-events: none;
}
}
web-icon[data-v-98dd914d] {
   --web-icon-size: var(--icon-button-icon-size, 24px);
   z-index: var(--z-index-icon-button-before-content, 1);
}
.image[data-v-98dd914d] {
   align-items: center;
   border-radius: 9999px;
   display: flex;
   height: var(--icon-button-height, var(--icon-button-size, 40px));
   justify-content: center;
   opacity: var(--icon-button-image-opacity);
   width: var(--icon-button-width, var(--icon-button-size, 40px));
   z-index: var(--z-index-icon-button-before-content, 1);
}

.row[data-v-7f0c752a] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.button-component {
&[data-v-92994e6c] {
   /* Colours resolve as: variant token → global token → variant default */
   --_active-bg-color: var(
      --_variant-active-bg-color,
      var(
         --button-active-bg-color,
         color-mix(in srgb, currentColor 16%, var(--_bg-color))
      )
   );
   --_bg-color: var(
      --_variant-bg-color,
      var(--button-bg-color, var(--_default-bg-color, transparent))
   );
   --_border-color: var(
      --_variant-border-color,
      var(--button-border-color, var(--_default-border-color, transparent))
   );
   --_border-radius: var(--button-border-radius);
   --_border-width: var(
      --_variant-border-width,
      var(--button-border-width, var(--_default-border-width, 0px))
   );
   --_box-shadow: var(
      --_variant-box-shadow,
      var(--button-box-shadow, var(--_default-box-shadow, none))
   );
   --_color: var(
      --_variant-color,
      var(--button-color, var(--_default-color, currentColor))
   );
   --_hover-bg-color: var(
      --_variant-hover-bg-color,
      var(
         --button-hover-bg-color,
         color-mix(in srgb, currentColor 8%, var(--_bg-color))
      )
   );
   -webkit-appearance: none;
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   appearance: none;
   background-color: var(--_bg-color);
   border-color: var(--_border-color);
   border-radius: var(--_border-radius);
   border-style: var(--button-border-style, solid);
   border-width: var(--_border-width);
   box-shadow: var(--_box-shadow);
   box-sizing: border-box;
   color: var(--_color);
   cursor: pointer;
   display: var(--button-display, inline-flex);
   font-family: var(--button-font-family);
   font-size: var(--button-font-size, 1rem);
   font-weight: var(--button-font-weight, 500);
   height: var(--button-height, 48px);
   justify-content: center;
   margin-block: var(--button-margin-block);
   min-width: var(--button-min-width);
   outline-color: transparent;
   outline-offset: 2px;
   outline-style: var(--button-focus-style, var(--default-focus-style, solid));
   outline-width: var(--button-focus-width, var(--default-focus-width, 2px));
   overflow: hidden;
   padding-block: var(--button-padding-block, 0);
   padding-inline: var(--button-padding-inline, 1rem);
   position: relative;
   text-decoration: var(--button-text-decoration, none);
   transition:
      outline-color var(--focus-transition, 0ms),
      background-color 300ms;
   user-select: none;
   vertical-align: middle;
   width: var(--button-width);
}
&[data-v-92994e6c]:not(:disabled):not(.disabled):hover {
      background-color: var(--_hover-bg-color);
}
&[data-v-92994e6c]:not(:disabled):not(.disabled):active {
      background-color: var(--_active-bg-color);
}
&[data-v-92994e6c]:focus-visible {
      outline-color: var(
         --button-focus-color,
         var(--default-focus-color, canvasText)
      );
}
&.disabled[data-v-92994e6c],
   &[disabled][data-v-92994e6c] {
      box-shadow: none;
      opacity: 0.4;
      pointer-events: none;
}
&[data-icon-only] {
&[data-v-92994e6c] {
      --_icon-only-size: var(--button__icon-only-size, 40px);
      border-radius: var(--button__icon-only-border-radius, 999px);
      height: var(--_icon-only-size);
      min-width: 0;
      padding-inline: 0;
      width: var(--_icon-only-size);

      /* No room for both: the spinner takes the place of the icon */
}
&.loading {
.spinner[data-v-92994e6c] {
            margin-inline-end: 0;
}
[data-v-92994e6c-s] {
            display: none;
}
}
}
.spinner[data-v-92994e6c] {
      --_spinner-size: var(--button-spinner-size, 1em);
      border: 2px solid currentColor;
      border-inline-end-color: transparent;
      border-radius: 50%;
      box-sizing: border-box;
      flex-shrink: 0;
      height: var(--_spinner-size);
      margin-inline-end: var(--button-spinner-gap, 0.5rem);
      width: var(--_spinner-size);

      /* Still ring when the user prefers reduced motion; aria-busy on the
         button already conveys the loading state. */
@media (prefers-reduced-motion: no-preference) {
         animation: button-spin-92994e6c 0.8s linear infinite;
}
}
&[data-variant="text"][data-v-92994e6c] {
      --_variant-active-bg-color: var(--button__text-active-bg-color);
      --_variant-bg-color: var(--button__text-bg-color);
      --_variant-color: var(--button__text-color);
      --_variant-hover-bg-color: var(--button__text-hover-bg-color);
}
&[data-variant="elevated"][data-v-92994e6c] {
      --_default-bg-color: canvasText;
      --_default-box-shadow:
         0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14),
         0 2px 1px rgba(0, 0, 0, 0.12);
      --_default-color: contrast-color(var(--_bg-color));
      --_variant-active-bg-color: var(--button__elevated-active-bg-color);
      --_variant-bg-color: var(--button__elevated-bg-color);
      --_variant-box-shadow: var(--button__elevated-box-shadow);
      --_variant-color: var(--button__elevated-color);
      --_variant-hover-bg-color: var(--button__elevated-hover-bg-color);
}
&[data-variant="filled"][data-v-92994e6c] {
      --_default-bg-color: canvasText;
      --_default-color: contrast-color(var(--_bg-color));
      --_variant-active-bg-color: var(--button__filled-active-bg-color);
      --_variant-bg-color: var(--button__filled-bg-color);
      --_variant-color: var(--button__filled-color);
      --_variant-hover-bg-color: var(--button__filled-hover-bg-color);
}
&[data-variant="outlined"][data-v-92994e6c] {
      --_default-border-color: currentColor;
      --_default-border-width: 1px;
      --_variant-active-bg-color: var(--button__outlined-active-bg-color);
      --_variant-bg-color: var(--button__outlined-bg-color);
      --_variant-border-color: var(--button__outlined-border-color);
      --_variant-border-width: var(--button__outlined-border-width);
      --_variant-color: var(--button__outlined-color);
      --_variant-hover-bg-color: var(--button__outlined-hover-bg-color);
}
&[data-variant="tonal"][data-v-92994e6c] {
      --_default-bg-color: color-mix(
         in srgb,
         currentColor var(--button__tonal-percentage, 10%),
         transparent
      );
      --_variant-active-bg-color: var(--button__tonal-active-bg-color);
      --_variant-bg-color: var(--button__tonal-bg-color);
      --_variant-color: var(--button__tonal-color);
      --_variant-hover-bg-color: var(--button__tonal-hover-bg-color);
}
}
@keyframes button-spin-92994e6c {
to {
      rotate: 360deg;
}
}

.row[data-v-2068b748] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.button-group-component {
&[data-v-3dea82de] {
   --_border-width: 1px;
   --button-border-color: var(--input-border-color);
   --button-border-style: solid;
   --button-border-width: 0 1px 0 0;
   --button-gap: 0.5rem;
   --button-padding: 0 0.75rem;
   margin-bottom: 1rem;
}
.wrapper {
&[data-v-3dea82de] {
      --button-border-radius: 0;
      --button-height: 40px;
      border: var(--_border-width) solid var(--input-border-color);
      border-radius: 999px;
      display: inline-grid;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
}
.segment-button {
&[data-v-3dea82de] {
         min-width: max-content;
}
&[data-v-3dea82de]:first-child {
            border-bottom-left-radius: inherit;
            border-top-left-radius: inherit;
}
&[data-v-3dea82de]:last-child {
            border-bottom-right-radius: inherit;
            border-right: none;
            border-top-right-radius: inherit;
}
&.selected[data-v-3dea82de] {
            --_opacity-value: 0;
            --_opacity-value-selected: 1;
            background-color: var(--button-group-selected-bg-color, canvasText);
            color: var(--button-group-selected-color, canvas);
}
&[data-v-3dea82de]:focus-visible {
            z-index: 1;
}
}
}
}
label[data-v-3dea82de] {
   color: var(--button-group-label-color, currentColor);
   display: block;
   font-size: var(--button-group-label-font-size, 1rem);
   font-weight: var(--button-group-label-font-weight, 500);
   margin-bottom: 0.5rem;
}
.value {
&[data-v-3dea82de] {
   align-items: center;
   display: flex;
   gap: 0.5rem;
   grid-area: area;
   justify-content: center;
   opacity: var(--_opacity-value, 1);
}
&.value-selected[data-v-3dea82de] {
      opacity: var(--_opacity-value-selected, 0);
}
span[data-v-3dea82de] {
      white-space: nowrap;
}
}

.btn-group-button-component {
&[data-v-71157e5c] {
   min-width: max-content;
}
&[data-v-71157e5c]:first-child {
      border-bottom-left-radius: inherit;
      border-top-left-radius: inherit;
}
&[data-v-71157e5c]:last-child {
      border-bottom-right-radius: inherit;
      border-right: none;
      border-top-right-radius: inherit;
}
&.selected[data-v-71157e5c] {
      --_opacity-value: 0;
      --_opacity-value-selected: 1;
      --button-bg-color: var(--button-group-selected-bg-color, canvasText);
      --button-color: var(--button-group-selected-color, canvas);
      --icon-color: var(--button-color);
}
&[data-v-71157e5c]:focus-visible {
      z-index: 1;
}
}

.image-component[data-v-e9c481dd] {
   --_height: var(--image-height);
   --_radius: var(--image-border-radius);
   border-radius: var(--_radius);
   height: var(--_height);
   max-height: var(--image-max-height);
   padding-block: var(--image-padding-block);
   padding-inline: var(--image-padding-inline);
   width: 100%;
}
img[data-v-e9c481dd] {
   aspect-ratio: var(--image-aspect-ratio);
   border-radius: var(--_radius);
   display: block;
   height: var(--_height);
   object-fit: var(--image-object-fit, cover);
   object-position: var(--image-object-position);
   scale: var(--image-scale);
   transition: var(--image-transition);
   width: 100%;
}

.card-component {
&[data-v-1aa562d5] {
   -webkit-tap-highlight-color: transparent;
   align-items: var(--card-align-items);
   backdrop-filter: var(--card-backdrop-filter);
   background-color: var(--card-bg-color);
   border-color: var(--card-border-color);
   border-radius: var(--card-border-radius);
   border-style: var(--card-border-style, solid);
   border-width: var(--card-border-width, 0);
   bottom: var(--card-bottom);
   box-shadow: var(--card-box-shadow);
   color: var(--card-color);
   display: var(--card-display, grid);
   flex-direction: var(--card-flex-direction);
   gap: var(--card-gap);
   grid-template-columns: var(--card-grid-template-columns);
   justify-content: var(--card-justify-content);
   left: var(--card-left);
   margin-block: var(--card-margin-block);
   margin-inline: var(--card-margin-inline);
   max-width: var(--card-max-width);
   overflow: var(--card-overflow);
   overflow-wrap: break-word;
   padding-block: var(--card-padding-block, 1rem);
   padding-inline: var(--card-padding-inline, 1rem);
   position: var(--card-position, relative);
   right: var(--card-right);
   scale: var(--card-scale);
   text-align: var(--card-text-align, left);
   text-decoration: none;
   top: var(--card-top);
   transition: var(--card-transition);
   z-index: var(--z-index-card);
}
&[data-v-1aa562d5]:hover {
      background-color: var(--card-bg-color-hover, var(--card-bg-color));
      border-color: var(--card-border-color-hover, var(--card-border-color));
      scale: var(--card-scale-hover, var(--card-scale));
}
&.card-component-link {
&[data-v-1aa562d5] {
      outline-color: var(--_focus-color, transparent);
      outline-offset: 0;
      outline-style: var(--card-focus-style, var(--default-focus-style, solid));
      outline-width: var(--card-focus-width, var(--default-focus-width, 2px));
}
&[data-v-1aa562d5]:focus-visible {
         --_focus-color: var(
            --card-focus-color,
            var(--default-focus-color, canvasText)
         );
}
}
.image[data-v-1aa562d5] {
      width: 100%;
}
}

.card-actions[data-v-f28e9fcb] {
   align-items: var(--card-actions-align-items);
   background-color: var(--card-actions-bg-color);
   display: var(--card-actions-display, flex);
   flex-direction: var(--card-actions-flex-direction, row-reverse);
   gap: var(--card-actions-gap, 8px);
   margin-block: var(--card-actions-margin-block);
   padding-block: var(--card-actions-padding-block, 1rem);
   padding-inline: var(--card-actions-padding-inline);
}

.card-content-component[data-v-b7f0ecb3] {
   align-items: var(--card-content-align-items);
   background-color: var(--card-content-bg-color);
   color: var(--card-content-color);
   display: var(--card-content-display, flex);
   flex-direction: var(--card-content-flex-direction, column);
   gap: var(--card-content-gap);
   grid-template-columns: var(--card-content-columns);
   grid-template-rows: var(--card-content-rows);
   padding-block: var(--card-content-padding-block);
   padding-inline: var(--card-content-padding-inline);
}

.card-subtitle-component[data-v-e6b39af9] {
   color: var(--card-subtitle-color, inherit);
   font-size: var(--card-subtitle-font-size, 0.875rem);
   font-weight: var(--card-subtitle-font-weight, 400);
   margin-block: var(--card-subtitle-margin-block, 0.5rem);
   opacity: var(--card-subtitle-opacity, 0.7);
   text-transform: none;
   white-space: nowrap;
}

.card-text-component[data-v-b99f1065] {
   color: var(--card-color, currentColor);
   display: var(--card-text-display, block);
   font-size: var(--card-text-font-size, 1rem);
   font-weight: var(--card-text-font-weight, 400);
   letter-spacing: var(--card-text-letter-spacing, normal);
   line-height: var(--card-text-line-height);
   padding-block: var(--card-text-padding-block, 1rem);
   padding-inline: var(--card-text-padding-inline);
}

.card-title-component[data-v-41ea1d02] {
   color: var(--card-title-color);
   font-size: var(--card-title-font-size);
   font-weight: var(--card-title-font-weight);
   line-height: var(--card-title-line-height);
   margin-block: var(--card-title-margin-block);
   margin-inline: var(--card-title-margin-inline);
   padding-block: var(--card-title-padding-block);
   padding-inline: var(--card-title-padding-inline);
}

.cards[data-v-224e69a0] {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   width: 100%;
}

.checkbox-indicator-component[data-v-6f95adee] {
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   align-self: var(--checkbox-indicator-align-self, flex-start);
   background-color: var(--_checkbox-indicator-bg-color, transparent);
   border-color: var(--_checkbox-indicator-border-color, canvasText);
   border-radius: var(--checkbox-border-radius, 2px);
   border-style: solid;
   border-width: var(--checkbox-border-width, 2px);
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
   height: var(--checkbox-indicator-size);
   justify-content: center;
   margin-block-start: var(--checkbox-indicator-margin-block-start, 3px);
   outline-color: var(
      --checkbox-focus-color,
      var(--default-focus-color, canvasText)
   );
   outline-offset: 3px;
   outline-style: var(
      --checkbox-focus-style,
      var(--default-focus-style, solid)
   );
   outline-width: var(--_checkbox-indicator-outline-width, 0);
   position: relative;
   transition:
      background-color 0.18s ease,
      border-color 0.18s ease;
   width: var(--checkbox-indicator-size);
}
.checkbox-svg[data-v-6f95adee] {
   height: var(--checkbox-indicator-size);
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   width: var(--checkbox-indicator-size);
}

/* Wipes the check mark in from left to right, like the original stroke draw */
.check[data-v-6f95adee] {
   clip-path: var(--_checkbox-indicator-check-clip, inset(0 83% 0 17%));
   fill: var(--_checkbox-indicator-check-color, canvasText);
   transition: clip-path 180ms cubic-bezier(0.4, 0, 0.6, 1);
}
.indeterminate[data-v-6f95adee] {
   fill: var(--_checkbox-indicator-dash-color, canvasText);
   opacity: var(--_checkbox-indicator-dash-opacity, 0);
}

.checkbox-component {
&[data-v-7d2917f0] {
   --_bg-color: var(--checkbox-bg-color, transparent);
   --_checkbox-indicator-bg-color: transparent;
   --_checkbox-indicator-border-color: var(--_indicator-border-color);
   --_checkbox-indicator-check-clip: inset(0 83% 0 17%);
   --_checkbox-indicator-check-color: var(
      --checkbox-check-color,
      contrast-color(var(--_checked-color))
   );
   --_checkbox-indicator-dash-color: var(--_checkbox-indicator-check-color);
   --_checkbox-indicator-dash-opacity: 0;
   --_checked-color: var(--checkbox-checked-color, canvasText);
   --_color: var(
      --checkbox-color,
      var(--default-form-control-color, canvasText)
   );
   --_indicator-border-color: var(
      --checkbox-border-color,
      var(--default-form-control-border-color, canvasText)
   );
   --checkbox-indicator-size: var(--checkbox-size, 18px);
   -webkit-tap-highlight-color: transparent;
   align-items: var(--checkbox-align-items, center);
   background-color: var(--_bg-color);
   color: var(--_color);
   cursor: pointer;
   display: var(--checkbox-display, flex);
   font-family: var(--font-family);
   font-size: var(
      --checkbox-font-size,
      var(--checkbox-label-font-size, var(--input-label-font-size, 0.875rem))
   );
   font-weight: var(
      --checkbox-font-weight,
      var(--checkbox-label-font-weight, var(--input-label-font-weight))
   );
   gap: var(--checkbox-gap, 8px);
   line-height: var(--checkbox-line-height, 1.5rem);
   margin-block: var(--checkbox-margin-block, 0.5rem);
   margin-inline: var(--checkbox-margin-inline, 0 1rem);
   padding: var(--checkbox-padding);
   position: relative;
   user-select: none;
   width: var(--checkbox-width, var(--checkbox-label-width, fit-content));

   /* Checked state */

   /* Indeterminate state (filled box with a dash, wins over the check mark) */

   /* Focus state */
}
&.readonly[data-v-7d2917f0] {
      pointer-events: none;
}
&.disabled[data-v-7d2917f0] {
      opacity: var(--checkbox-disabled-opacity, 0.7);
      pointer-events: none;
}
&[data-v-7d2917f0]:has(input:checked) {
      --_checkbox-indicator-bg-color: var(--_checked-color);
      --_checkbox-indicator-border-color: var(--_checked-color);
      --_checkbox-indicator-check-clip: inset(0);
}
&[data-v-7d2917f0]:has(input:indeterminate) {
      --_checkbox-indicator-bg-color: var(--_checked-color);
      --_checkbox-indicator-border-color: var(--_checked-color);
      --_checkbox-indicator-check-clip: inset(0 83% 0 17%);
      --_checkbox-indicator-dash-color: var(--_checkbox-indicator-check-color);
      --_checkbox-indicator-dash-opacity: 1;
}
&[data-v-7d2917f0]:has(input:focus-visible) {
      --_checkbox-indicator-outline-width: var(
         --checkbox-focus-width,
         var(--default-focus-width, 2px)
      );
}
}
.checkbox-input[data-v-7d2917f0] {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

.chip-component {
&[data-v-6d0bca2d] {
   --icon-button-height: 32px;
   --icon-button-width: 32px;
   --icon-button-icon-size: 20px;
   align-items: center;
   background-color: var(--chip-bg-color);
   border: var(
      --chip-border,
      1px solid
         var(
            --default-border-color,
            color-mix(in srgb, currentColor 16%, transparent)
         )
   );
   border-radius: var(--chip-border-radius, 4px);
   color: var(--chip-color, currentColor);
   display: flex;
   font-size: var(--chip-font-size, 0.875rem);
   font-weight: var(--chip-font-weight);
   height: var(--chip-height, 32px);
   justify-content: center;
   margin-inline: var(--chip-margin-inline);
   padding-block: var(--chip-padding-block);
   padding-inline: var(--chip-padding-inline);
   position: relative;
}
span[data-v-6d0bca2d] {
      align-items: center;
      display: flex;
      height: 100%;
      padding-inline: 0.5rem;
      white-space: nowrap;
}
}

.row[data-v-08cf1c5f] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.tooltip-component {
&[data-v-863fdcd1] {
   --_position-area: var(--tooltip-position-area, bottom span-all);
   display: var(--tooltip-display, inline-block);
}
@media (prefers-reduced-motion: no-preference) {
&[data-v-863fdcd1] {
      --_popover-transition-duration: var(
         --tooltip-transition-duration,
         var(--default-popover-transition-duration, 150ms)
      );
}
}
&[data-tooltip-location="top"][data-v-863fdcd1] {
      --_position-area: top span-all;
}
&[data-tooltip-location="bottom"][data-v-863fdcd1] {
      --_position-area: bottom span-all;
}
&[data-tooltip-location="left"][data-v-863fdcd1] {
      --_position-area: left span-all;
}
&[data-tooltip-location="right"][data-v-863fdcd1] {
      --_position-area: right span-all;
}
}
.anchor[data-v-863fdcd1] {
   anchor-name: var(--_anchor-name);
   display: var(--tooltip-anchor-display, inline-block);
   height: var(--tooltip-anchor-height);
}
.popover {
&[data-v-863fdcd1] {
   background-color: var(--tooltip-bg-color, canvas);
   border: var(--tooltip-border, 0);
   border-radius: var(--tooltip-border-radius, 0.25rem);
   box-shadow: var(
      --tooltip-box-shadow,
      var(
         --default-popover-box-shadow,
         0 1px 3px rgba(0, 0, 0, 0.2),
         0 1px 1px rgba(0, 0, 0, 0.14),
         0 2px 1px rgba(0, 0, 0, 0.12)
      )
   );
   color: var(--tooltip-color, canvasText);
   inset: unset;
   /* reset */
   justify-self: anchor-center;
   margin: 0;
   margin-block-end: var(--tooltip-margin-bottom, 0.5rem);
   margin-block-start: var(--tooltip-margin-top, 0.5rem);
   margin-bottom: 15px;
   margin-inline: var(--tooltip-margin-inline, 0.5rem);
   max-width: var(--tooltip-max-width);
   min-width: var(--tooltip-min-width);
   opacity: 0;
   padding: var(--menu-padding, 0.5rem);
   position-anchor: var(--_anchor-name);
   position-area: var(--_position-area);
   position-try:
      flip-block,
      flip-inline,
      flip-block flip-inline;
   scale: 0.97;
   transition:
      opacity var(--_popover-transition-duration),
      scale var(--_popover-transition-duration),
      overlay var(--_popover-transition-duration),
      display var(--_popover-transition-duration);
   transition-behavior: allow-discrete;
   width: var(--tooltip-width);
}
&[data-v-863fdcd1]:popover-open {
      opacity: 1;
      scale: 1;
      transition-delay: var(--_transition-delay, 0);
@starting-style {
         opacity: 0;
         scale: 0.97;
}
}
}

.form-label-wrapper {
&[data-v-cc19eba5] {
   --_label-color: var(--default-form-control-label-color, canvasText);
   --tooltip-anchor-display: flex;
   --tooltip-display: flex;
   align-items: center;
   display: flex;
   gap: var(--default-form-control-label-gap, 0.25rem);
}
.tooltip-button {
&[data-v-cc19eba5] {
      --button-color: var(--_label-color);
      --button__icon-only-size: var(
         --default-form-control-label-icon-size,
         24px
      );
}
&[data-v-cc19eba5] svg {
         fill: currentColor;
         height: 100%;
         width: 100%;
}
}
label {
&[data-v-cc19eba5] {
      color: var(--_label-color);
      display: block;
      font-family: var(--default-form-control-label-font-family, inherit);
      font-size: var(--default-form-control-label-font-size, 0.875rem);
      font-weight: var(--default-form-control-label-font-weight, 500);
      line-height: var(--default-form-control-label-line-height, 1.25rem);
}
&.visually-hidden[data-v-cc19eba5] {
         border: 0;
         clip-path: inset(50%);
         height: 1px;
         margin: -1px;
         overflow: hidden;
         padding: 0;
         position: absolute;
         white-space: nowrap;
         width: 1px;
         word-wrap: normal;
}
.required[data-v-cc19eba5] {
         color: var(--default-form-control-label-required-color, red);
         margin-inline-start: 0.125rem;
}
}
}

.message-component {
&[data-v-0f74b953] {
   font-size: var(--default-form-control-hint-font-size, 0.875rem);
}
&[data-variant="hint"][data-v-0f74b953] {
      color: var(--default-form-control-hint-color, currentColor);
      opacity: var(--default-form-control-hint-opacity, 0.7);
}
&[data-variant="error"][data-v-0f74b953] {
      color: var(--default-form-control-error-color, red);
}
}

.combobox-component {
&[data-v-daede480] {
   display: inline-grid;
   gap: var(--combobox-gap, var(--input-gap, 0.25rem));
   margin-block: var(--combobox-margin-block, var(--input-margin-block));
   position: relative;
   width: var(--combobox-field-width, 100%);
}
@media (prefers-reduced-motion: no-preference) {
&[data-v-daede480] {
      --_popover-transition-duration: var(
         --combobox-transition-duration,
         var(--default-popover-transition-duration, 150ms)
      );
}
}
&.disabled[data-v-daede480] {
      opacity: var(
         --combobox-disabled-opacity,
         var(--input-disabled-opacity, 0.6)
      );
      pointer-events: none;
}
&[data-v-daede480]:has(:popover-open) {
      --_arrow-rotate: 180deg;
}
&:not(.has-selection) {
#values[data-v-daede480] {
         width: 100%;
}
input[data-v-daede480] {
         width: 100%;
}
}
}

/* Field wrapper — mirrors BaseInput's .field-container */
#anchor {
&[data-v-daede480] {
   align-items: center;
   anchor-name: var(--_anchor-name);
   background-color: var(
      --combobox-bg-color,
      var(--input-bg-color, var(--default-form-control-bg-color))
   );
   border-color: var(
      --combobox-border-color,
      var(
         --input-border-color,
         var(--default-form-control-border-color, canvasText)
      )
   );
   border-radius: var(
      --combobox-border-radius,
      var(--input-border-radius, var(--default-form-control-border-radius))
   );
   border-style: var(--combobox-border-style, var(--input-border-style, solid));
   border-width: var(--combobox-border-width, var(--input-border-width, 1px));
   display: grid;
   grid-template-columns: 1fr auto;
   min-height: var(
      --combobox-height,
      var(--input-height, var(--default-form-control-height, 48px))
   );
   padding-block: var(--combobox-padding-block, 0.5rem);
   padding-inline: var(
      --combobox-padding-inline,
      var(--input-padding-inline, 1rem)
   );
   position: relative;
   transition:
      border-color var(--focus-transition, 0ms),
      outline-color var(--focus-transition, 0ms);
   width: 100%;
}
&[data-v-daede480]:focus-within {
      border-color: var(
         --combobox-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-color: var(
         --combobox-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-offset: 0px;
      outline-style: var(
         --combobox-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --combobox-focus-width,
         var(--default-focus-width, 2px)
      );
}
#wrapper {
&[data-v-daede480] {
      appearance: none;
      background-color: transparent;
      border: none;
      cursor: pointer;
      height: 100%;
      inset: 0;
      position: absolute;
      width: 100%;

      /* individual button focus (keyboard tab to the button itself) */
}
&[data-v-daede480]:focus-visible {
         outline: none;
}
}
#values[data-v-daede480] {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-inline-end: auto;
      padding-inline-end: 1rem;
      position: relative;
      z-index: 1;
}
#right[data-v-daede480] {
      align-items: center;
      display: flex;
      position: relative;
      z-index: 1;
}
input {
&[data-v-daede480] {
      background-color: transparent;
      border: none;
      color: var(
         --combobox-color,
         var(--input-color, var(--default-form-control-text, canvasText))
      );
      font-family: var(
         --combobox-font-family,
         var(--input-font-family, var(--font-family))
      );
      font-size: var(--combobox-font-size, var(--input-font-size, 1rem));
      height: 32px;
      min-width: 4rem;
      outline: none;
}
&[data-v-daede480]::placeholder {
         color: var(
            --combobox-placeholder-color,
            var(
               --default-form-control-placeholder-color,
               color-mix(in srgb, currentColor 60%, transparent)
            )
         );
}
}
.icon {
&[data-v-daede480] {
      --icon-button-size: 32px;
      align-items: center;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      pointer-events: none;
}
svg[data-v-daede480] {
         fill: var(
            --combobox-icon-color,
            var(
               --input-icon-color,
               var(--default-form-control-icon-color, canvasText)
            )
         );
         rotate: var(--_arrow-rotate, 0deg);
         transition: rotate 150ms ease;
}
}
}

/* Error state overrides the field border */
.combobox-component.error #anchor {
&[data-v-daede480] {
   border-color: var(
      --combobox-error-color,
      var(--input-error-color, var(--default-form-control-error-color, red))
   );
}
&[data-v-daede480]:focus-within {
      border-color: var(
         --combobox-error-color,
         var(--input-error-color, var(--default-form-control-error-color, red))
      );
      outline-color: var(
         --combobox-error-color,
         var(--input-error-color, var(--default-form-control-error-color, red))
      );
}
}
.popover {
&[data-v-daede480] {
   background-color: var(
      --combobox-menu-bg-color,
      var(--default-popover-bg-color, canvas)
   );
   border-color: var(
      --combobox-menu-border-color,
      var(
         --default-popover-border-color,
         var(--default-form-control-border-color)
      )
   );
   border-radius: var(
      --combobox-menu-border-radius,
      var(--default-popover-border-radius)
   );
   border-style: var(
      --combobox-menu-border-style,
      var(
         --default-popover-border-style,
         var(--default-form-control-border-style, solid)
      )
   );
   border-width: var(
      --combobox-menu-border-width,
      var(
         --default-popover-border-width,
         var(--default-form-control-border-width, 1px)
      )
   );
   box-shadow: var(
      --combobox-menu-box-shadow,
      var(--default-popover-box-shadow, 0 4px 16px rgb(0 0 0 / 0.12))
   );
   height: var(--combobox-menu-height, fit-content);
   inset: unset;
   margin: unset;
   margin-block-start: var(
      --combobox-menu-margin-top,
      var(--default-popover-margin-top, 4px)
   );
   max-height: var(--combobox-max-height);
   max-width: var(--combobox-max-width);
   min-height: var(--combobox-min-height);
   min-width: var(--combobox-min-width, 200px);
   opacity: 0;
   padding-block: var(
      --combobox-menu-padding-block,
      var(--default-popover-padding-block, 0.5rem)
   );
   padding-inline: var(
      --combobox-menu-padding-inline,
      var(--default-popover-padding-inline, 0.5rem)
   );
   position-anchor: var(--_anchor-name);
   position-area: bottom span-right;
   position-try:
      flip-block,
      flip-inline,
      flip-block flip-inline;
   scale: 0.97;
   transform-origin: var(--_transform_origin);
   transition:
      opacity var(--_popover-transition-duration),
      scale var(--_popover-transition-duration),
      overlay var(--_popover-transition-duration),
      display var(--_popover-transition-duration);
   transition-behavior: allow-discrete;
   width: var(--combobox-width, anchor-size(width));
}
&[data-v-daede480]:popover-open {
      opacity: 1;
      scale: 1;
@starting-style {
         opacity: 0;
         scale: 0.97;
}
}
}
.chip {
&[data-v-daede480] {
   align-items: center;
   background-color: var(
      --combobox-chip-bg-color,
      contrast-color(currentcolor)
   );
   border-color: var(
      --combobox-chip-border-color,
      color-mix(in srgb, currentColor 20%, transparent)
   );
   border-radius: var(--combobox-chip-border-radius, 16px);
   border-style: var(--combobox-chip-border-style, solid);
   border-width: var(--combobox-chip-border-width, 1px);
   color: var(--combobox-chip-text-color, currentcolor);
   display: flex;
   gap: var(--combobox-chip-gap, 0.5rem);
   padding-block: var(--combobox-chip-padding-block, 0.25rem);
   padding-inline: var(--combobox-chip-padding-inline, 0.75rem);
   position: relative;
   z-index: 2;
}
.remove-button {
&[data-v-daede480] {
      --_remove-button-size: 16px;
      align-items: center;
      background-color: transparent;
      border: none;
      border-radius: 50%;
      color: inherit;
      cursor: pointer;
      display: flex;
      height: var(--_remove-button-size);
      justify-content: center;
      width: var(--_remove-button-size);
      z-index: 3;
}
&[data-v-daede480]::before {
         border-radius: inherit;
         content: "";
         height: var(--_remove-button-size);
         position: absolute;
         scale: 2;
         width: var(--_remove-button-size);
}
}
}
.clear-all[data-v-daede480] {
   align-items: center;
   background: transparent;
   border: none;
   color: currentColor;
   cursor: pointer;
   display: flex;
   justify-content: center;
   padding: 0;
   z-index: 3;
}
.empty[data-v-daede480] {
   color: color-mix(in srgb, currentColor 60%, transparent);
   padding: 0.5rem;
   text-align: center;
}
.combobox-option {
&[data-v-daede480] {
   align-items: center;
   background-color: var(
      --combobox-option-bg-color,
      var(--default-form-control-option-bg-color, transparent)
   );
   border-radius: var(
      --combobox-option-border-radius,
      var(--default-form-control-option-border-radius)
   );
   color: var(
      --combobox-option-color,
      var(--default-form-control-option-color, canvasText)
   );
   cursor: pointer;
   display: grid;
   font-family: var(
      --combobox-option-font-family,
      var(--default-form-control-option-font-family, inherit)
   );
   font-size: var(
      --combobox-option-font-size,
      var(--default-form-control-option-font-size, 1rem)
   );
   font-weight: var(
      --combobox-option-font-weight,
      var(--default-form-control-option-font-weight, 500)
   );
   gap: var(
      --combobox-option-gap,
      var(--default-form-control-option-gap, 0.25rem)
   );
   grid-template-columns: 1fr 24px;
   line-height: var(
      --combobox-option-line-height,
      var(--default-form-control-option-line-height)
   );
   min-height: var(
      --combobox-option-height,
      var(--default-form-control-option-height, 40px)
   );
   padding-inline: var(
      --combobox-option-padding-inline,
      var(--default-form-control-option-padding-inline, 1rem)
   );
   transition:
      outline-color var(--focus-transition, 0ms),
      background-color
         var(
            --combobox-option-transition-speed,
            var(--default-form-control-option-transition-speed, 300ms)
         );
   user-select: none;
}
&[data-v-daede480]:hover,
   &.highlighted[data-v-daede480] {
      background-color: var(
         --combobox-option-hover-bg-color,
         var(
            --default-form-control-option-hover-bg-color,
            color-mix(in srgb, currentColor 8%, transparent)
         )
      );
}
&[data-v-daede480]:active {
      background-color: var(
         --combobox-option-active-bg-color,
         var(
            --default-form-control-option-active-bg-color,
            color-mix(in srgb, currentColor 16%, transparent)
         )
      );
}
&[data-v-daede480]:focus-visible {
      outline-color: var(
         --combobox-option-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-offset: -2px;
      outline-style: var(
         --combobox-option-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --combobox-option-focus-width,
         var(--default-focus-width, 2px)
      );
}
}
.combobox-option-label[data-v-daede480] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.combobox-option-check[data-v-daede480] {
   color: var(
      --combobox-option-icon-color,
      var(
         --default-form-control-option-icon-color,
         var(--default-form-control-icon-color, canvasText)
      )
   );
   flex-shrink: 0;
}
.sr-only[data-v-daede480] {
   border-width: 0px;
   clip: rect(0px, 0px, 0px, 0px);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0px;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

.calendar-header-component {
&[data-v-bdda9d1e] {
   align-items: center;
   display: flex;
   justify-content: space-between;
   margin-block-end: 0.5rem;
}
.nav {
&[data-v-bdda9d1e] {
      align-items: center;
      background: none;
      border: none;
      border-radius: var(--datepicker-nav-border-radius, 4px);
      color: inherit;
      cursor: pointer;
      display: flex;
      justify-content: center;
      padding: 0.25rem;
}
&[data-v-bdda9d1e]:hover {
         background-color: var(
            --datepicker-nav-hover-bg,
            color-mix(in srgb, currentColor 8%, transparent)
         );
}
&[data-v-bdda9d1e]:focus-visible {
         outline-color: var(
            --datepicker-calendar-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-style: var(
            --datepicker-calendar-focus-style,
            var(--default-focus-style, solid)
         );
         outline-width: var(
            --datepicker-calendar-focus-width,
            var(--default-focus-width, 2px)
         );
         outline-offset: 2px;
}
}
.header-labels[data-v-bdda9d1e] {
      align-items: center;
      display: flex;
      gap: 0.125rem;
}
.label-button {
&[data-v-bdda9d1e] {
      background: none;
      border: none;
      border-radius: var(--datepicker-nav-border-radius, 4px);
      color: inherit;
      cursor: pointer;
      font-size: inherit;
      font-weight: 600;
      padding: 0.125rem 0.375rem;
      text-transform: capitalize;
      transition: background-color 150ms;
}
&[data-v-bdda9d1e]:hover {
         background-color: var(
            --datepicker-nav-hover-bg,
            color-mix(in srgb, currentColor 8%, transparent)
         );
}
&[data-v-bdda9d1e]:focus-visible {
         outline-color: var(
            --datepicker-calendar-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-style: var(
            --datepicker-calendar-focus-style,
            var(--default-focus-style, solid)
         );
         outline-width: var(
            --datepicker-calendar-focus-width,
            var(--default-focus-width, 2px)
         );
         outline-offset: 2px;
}
}
.decade-label[data-v-bdda9d1e] {
      font-weight: 600;
}
}

.calendar-cell-component {
&[data-v-a4e7ce53] {
   --button-border-radius: 999px;
   --button-height: 40px;
   --button-padding-inline: 0.75rem;
}
&[aria-selected="true"][data-v-a4e7ce53] {
      --button-bg-color: var(--_primary);
      color: contrast-color(var(--_primary));
}
}

.month-grid[data-v-f0ac890b] {
   display: grid;
   gap: var(--datepicker-day-gap, 4px);
   grid-template-columns: repeat(3, 1fr);
   padding-block: 0.25rem;
}
.cell {
&[data-v-f0ac890b] {
   align-items: center;
   background-color: transparent;
   border: none;
   border-radius: 999px;
   cursor: pointer;
   display: flex;
   height: 36px;
   justify-content: center;
   padding-inline: 0.75rem;
   transition: background-color 150ms;
   }
&[data-v-f0ac890b]:hover:not(.selected) {
      background-color: var(
         --datepicker-day-hover-bg,
         color-mix(in srgb, currentColor 8%, transparent)
      );
}
&[data-v-f0ac890b]:focus-visible {
      outline-color: var(
         --datepicker-calendar-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-style: var(
         --datepicker-calendar-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --datepicker-calendar-focus-width,
         var(--default-focus-width, 2px)
      );
      outline-offset: 2px;
}
&.selected[data-v-f0ac890b] {
      background-color: var(--_primary);
      color: contrast-color(var(--_primary));
}
}

.calendar-weekdays-component[data-v-668c57ae] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   margin-block-end: 0.25rem;
}
.day[data-v-668c57ae] {
   color: var(
      --datepicker-weekday-color,
      color-mix(in srgb, currentColor 50%, transparent)
   );
   font-size: 0.75rem;
   font-weight: 500;
   padding-block: 0.25rem;
   text-align: center;
   text-transform: capitalize;
}

.year-grid[data-v-538b687e] {
   display: grid;
   gap: var(--datepicker-day-gap, 4px);
   grid-template-columns: repeat(3, 1fr);
   padding-block: 0.25rem;
}
.cell {
&[data-v-538b687e] {
   align-items: center;
   background-color: transparent;
   border: none;
   border-radius: 999px;
   cursor: pointer;
   display: flex;
   height: 36px;
   justify-content: center;
   padding-inline: 0.75rem;
   transition: background-color 150ms;
   }
&[data-v-538b687e]:hover:not(.selected) {
      background-color: var(
         --datepicker-day-hover-bg,
         color-mix(in srgb, currentColor 8%, transparent)
      );
}
&[data-v-538b687e]:focus-visible {
      outline-color: var(
         --datepicker-calendar-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-style: var(
         --datepicker-calendar-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --datepicker-calendar-focus-width,
         var(--default-focus-width, 2px)
      );
      outline-offset: 2px;
}
&.selected[data-v-538b687e] {
      background-color: var(--_primary);
      color: contrast-color(var(--_primary));
}
}

.calendar-component[data-v-899e7460] {
   --_primary: var(--datepicker-color, canvasText);
   font-family: var(--datepicker-font-family, inherit);
   font-size: var(--datepicker-font-size, 0.875rem);
   padding: var(--datepicker-calendar-padding, 0.75rem);
   user-select: none;
   width: var(--datepicker-calendar-width);
}

/* ── Day cells ───────────────────────────────────────────── */
.days-grid[data-v-899e7460] {
   display: grid;
   gap: var(--datepicker-day-gap, 2px);
   grid-template-columns: repeat(7, 1fr);
}
button[data-type="day"] {
&[data-v-899e7460] {
   aspect-ratio: 1;
   height: 40px;
   width: 40px;

   /* Today indicator dot */

   /* Days outside the current month */

   /* Disabled */
   }
&.today[data-v-899e7460]:not(&.selected) {
      border: 1px solid var(--_primary);
      color: var(--_primary);
}
&.other-month[data-v-899e7460] {
      color: var(
         --datepicker-other-month-color,
         color-mix(in srgb, currentColor 35%, transparent)
      );
}
&[data-v-899e7460]:disabled {
      color: var(
         --datepicker-day-disabled-color,
         color-mix(in srgb, currentColor 25%, transparent)
      );
      cursor: not-allowed;
      pointer-events: none;
}
}

/* Selected */
.cell {
&[data-v-899e7460] {
   align-items: center;
   background-color: transparent;
   border: none;
   border-radius: 999px;
   cursor: pointer;
   display: flex;
   height: 36px;
   justify-content: center;
   padding-inline: 0.75rem;
   transition: background-color 150ms;
   }
&[data-v-899e7460]:hover:not(.selected) {
      background-color: var(
         --datepicker-day-hover-bg,
         color-mix(in srgb, currentColor 8%, transparent)
      );
}
&[data-v-899e7460]:focus-visible {
      outline-color: var(
         --datepicker-calendar-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-style: var(
         --datepicker-calendar-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --datepicker-calendar-focus-width,
         var(--default-focus-width, 2px)
      );
      outline-offset: 2px;
}
&.selected[data-v-899e7460] {
      background-color: var(--_primary);
      color: contrast-color(var(--_primary));
}
}

.datepicker-component {
&[data-v-0eed2146] {
   --button__icon-only-size: 32px;
   display: inline-grid;
   gap: var(--datepicker-gap, var(--input-gap, 0.25rem));
   margin-block: var(--datepicker-margin-block, var(--input-margin-block));
   width: var(--datepicker-width, 100%);

   /* ── Icon buttons (clear + calendar) ────────────────────── */

   /* ── Popover (Popover API + CSS Anchor Positioning) ────────── */

   /* ── Error / hint messages ───────────────────────────────── */

   /* Error state overrides the field border */
}
@media (prefers-reduced-motion: no-preference) {
&[data-v-0eed2146] {
      --_popover-transition-duration: var(
         --datepicker-transition-duration,
         var(--default-popover-transition-duration, 150ms)
      );
}
}
&.disabled[data-v-0eed2146] {
      opacity: var(
         --datepicker-disabled-opacity,
         var(--input-disabled-opacity, 0.6)
      );
      pointer-events: none;
}
.field-container {
&[data-v-0eed2146] {
      align-items: center;
      anchor-name: var(--_anchor-name);
      background-color: var(
         --datepicker-bg-color,
         var(--default-form-control-bg-color)
      );
      border-color: var(
         --datepicker-border-color,
         var(--default-form-control-border-color, canvasText)
      );
      border-radius: var(
         --datepicker-border-radius,
         var(--default-form-control-border-radius)
      );
      border-style: var(
         --datepicker-border-style,
         var(--default-form-control-border-style, solid)
      );
      border-width: var(
         --datepicker-border-width,
         var(--default-form-control-border-width, 1px)
      );
      display: flex;
      height: var(
         --datepicker-height,
         var(--default-form-control-height, 48px)
      );
      padding-inline: var(
         --datepicker-padding-inline,
         var(--default-form-control-padding-inline, 1rem)
      );

      position: relative;
      transition:
         border-color var(--focus-transition, 0ms),
         outline-color var(--focus-transition, 0ms);
}
&[data-v-0eed2146]:focus-within {
         border-color: var(
            --datepicker-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-color: var(
            --datepicker-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-offset: 0px;
         outline-style: var(
            --datepicker-focus-style,
            var(--default-focus-style, solid)
         );
         outline-width: var(
            --datepicker-focus-width,
            var(--default-focus-width, 2px)
         );
}
}
input {
&[data-v-0eed2146] {
      background-color: transparent;
      border: none;
      color: var(
         --datepicker-color,
         var(--default-form-control-text, canvasText)
      );
      cursor: pointer;
      flex: 1;
      font-family: var(--datepicker-font-family, var(--font-family));
      font-size: var(
         --datepicker-font-size,
         var(--default-form-control-font-size, 1rem)
      );
      height: 100%;
      min-width: 0;
      outline: none;
      /* Without a width the field cannot shrink below the input's default size */
      width: 100%;
}
&[data-v-0eed2146]::placeholder {
         color: var(
            --datepicker-placeholder-color,
            var(
               --default-form-control-placeholder-color,
               color-mix(in srgb, currentColor 60%, transparent)
            )
         );
}
&[data-v-0eed2146]:disabled {
         cursor: not-allowed;
}
}
.icon[data-v-0eed2146] {
      --icon-button-size: 32px;
      align-items: center;
      display: flex;
      flex-shrink: 0;
}
svg[data-v-0eed2146] {
      fill: var(
         --datepicker-icon-color,
         var(--default-form-control-icon-color, canvasText)
      );
}
.popover {
&[data-v-0eed2146] {
      /* Reset Popover API defaults */
      background-color: var(
         --datepicker-menu-bg-color,
         var(--default-popover-bg-color, canvas)
      );
      border-color: var(
         --datepicker-menu-border-color,
         var(
            --default-popover-border-color,
            var(--default-form-control-border-color)
         )
      );
      border-radius: var(
         --datepicker-menu-border-radius,
         var(--default-popover-border-radius)
      );
      border-style: var(
         --datepicker-menu-border-style,
         var(
            --default-popover-border-style,
            var(--default-form-control-border-style, solid)
         )
      );
      border-width: var(
         --datepicker-menu-border-width,
         var(
            --default-popover-border-width,
            var(--default-form-control-border-width, 1px)
         )
      );
      box-shadow: var(
         --datepicker-menu-box-shadow,
         var(--default-popover-box-shadow, 0 4px 16px rgb(0 0 0 / 0.12))
      );
      inset: auto;
      /* CSS Anchor Positioning — positions below the input by default */
      left: anchor(left);
      margin: 0;
      margin-block-start: var(
         --datepicker-menu-margin-top,
         var(--default-popover-margin-top, 4px)
      );

      /* Smooth open/close via Popover API transitions */
      opacity: 0;
      overflow: visible;
      padding: 0;
      position: fixed;
      position-anchor: var(--_anchor-name);

      /* Flip above when there is not enough room below */
      position-try-fallbacks: --datepicker-popover-above;

      scale: 0.97;
      top: anchor(bottom);
      transition:
         opacity var(--_popover-transition-duration),
         scale var(--_popover-transition-duration),
         overlay var(--_popover-transition-duration),
         display var(--_popover-transition-duration);
      transition-behavior: allow-discrete;
}
&[data-v-0eed2146]:popover-open {
         opacity: 1;
         scale: 1;
@starting-style {
            opacity: 0;
            scale: 0.97;
}
}
}
&.error .field-container {
&[data-v-0eed2146] {
      border-color: var(
         --datepicker-error-color,
         var(--input-error-color, var(--default-form-control-error-color, red))
      );
}
&[data-v-0eed2146]:focus-within {
         border-color: var(
            --datepicker-error-color,
            var(
               --input-error-color,
               var(--default-form-control-error-color, red)
            )
         );
         outline-color: var(
            --datepicker-error-color,
            var(
               --input-error-color,
               var(--default-form-control-error-color, red)
            )
         );
}
}
}

/*
 * @position-try defines an alternative placement used automatically
  * when the default (below) would overflow the viewport.
  * position-anchor uses var(--_anchor-name) which is set per-instance
  * on the root element so multiple pickers on the same page don't conflict.
  */
@position-try --datepicker-popover-above {
   bottom: anchor(top);
   left: anchor(left);
   margin-block-end: 4px;
   margin-block-start: 0;
   top: auto;
}

details {
&[data-v-726272f6] {
   --_display: var(--details-display, block);
   --_icon-transition-duration: var(--details-icon-transition-duration, 256ms);
   --_radius: var(--details-border-radius);
   background-color: var(--details-bg-color);
   border-color: var(--details-border-color, transparent);
   border-radius: var(--_radius);
   border-style: var(--details-border-style, solid);
   border-width: var(--details-border-width, 0);
   color: var(--details-color, currentColor);
   display: var(--_display);
   interpolate-size: allow-keywords;
}
&.disabled[data-v-726272f6] {
      pointer-events: none;
}
summary {
&[data-v-726272f6] {
      -webkit-tap-highlight-color: transparent;
      align-items: center;
      background-color: var(
         --_summary-bg-color,
         var(--details-summary-bg-color)
      );
      border-color: var(--details-summary-border-color, transparent);
      border-radius: var(--_summary-radius, var(--_radius));
      border-style: var(--details-summary-border-style, solid);
      border-width: var(--details-summary-border-width, 0);
      cursor: pointer;
      display: flex;
      font-family: var(--details-summary-font-family, inherit);
      font-size: var(--details-summary-font-size, 1rem);
      font-weight: var(--details-summary-font-weight, bold);
      gap: 0.25rem;
      justify-content: space-between;
      list-style-position: outside;
      outline: var(--_outline);
      padding-block: var(--details-summary-padding-block, 1rem);
      padding-inline: var(--details-summary-padding-inline, 1rem 0.75rem);
      transition: all;
}
&[data-v-726272f6]:focus-visible {
         --_outline: var(
               --details-summary-focus-width,
               var(--default-focus-width, 2px)
            )
            var(
               --details-summary-focus-style,
               var(--default-focus-style, solid)
            )
            var(
               --details-summary-focus-color,
               var(--default-focus-color, canvasText)
            );
}
&[data-v-726272f6]:hover {
         --_summary-bg-color: var(--details-summary-hover-bg-color);
}
&[data-v-726272f6]::marker {
         content: none;
}
&[data-v-726272f6]::-webkit-details-marker {
         display: none;
}
.icon-component[data-v-726272f6] {
         fill: currentColor;
         rotate: var(--_rotate);
         transition: rotate var(--_icon-transition-duration);
}
}
.content[data-v-726272f6] {
      background-color: var(--details-content-bg-color);
      padding-block: var(--details-content-padding-block, 0 1rem);
      padding-inline: var(--details-content-padding-inline, 1rem);
}
&[open] {
&[data-v-726272f6] {
      --_rotate: 180deg;
      --_summary-radius: var(--_radius) var(--_radius) 0 0;
}
&[data-v-726272f6]::details-content {
         block-size: auto;
         /* block-size: calc-size(auto, size); */
}
}
&[data-v-726272f6]::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
         block-size var(--_transition-duration),
         content-visibility var(--_transition-duration);
      transition-behavior: allow-discrete;
}
&.inline {
summary[data-v-726272f6] {
         display: inline-flex;
         justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
&[data-v-726272f6] {
      --_icon-transition-duration: 0ms;
}
&[data-v-726272f6]::details-content {
         transition: none;
}
}
}

.dialog-component[data-v-b7425f1f],[data-v-b7425f1f]::backdrop {
   --_transition-duration: var(--dialog-transition-duration, 256ms);
   --_transition-property: var(
      --dialog-transition-property,
      overlay display opacity transform
   );
}
dialog {
&[data-v-b7425f1f] {
   background-color: var(--dialog-bg-color, canvas);
   border: none;
   border-radius: var(--dialog-border-radius, var(--card-border-radius, 8px));
   bottom: var(--dialog-bottom, 0);
   box-shadow: 0 0 1rem rgb(0 0 0 / 0.3);
   display: var(--_display, none);
   flex-direction: column;
   height: var(--dialog-height, fit-content);
   left: var(--dialog-left, 0);
   margin: auto;
   max-height: var(--dialog-max-height, calc(100% - 2rem));
   /*Used to negate the browser default */
   max-width: var(--dialog-max-width, 640px);
   min-height: var(--dialog-min-height, initial);
   opacity: var(--dialog-opacity, var(--_opacity, 0));
   overflow: hidden;
   padding: var(--dialog-padding);
   right: var(--dialog-right, 0);
   scale: var(--dialog-scale, var(--_scale, 0));
   top: var(--dialog-top, 0);
   transition-behavior: allow-discrete;
   transition-duration: var(--_transition-duration);
   transition-property: var(--_transition-property);
   translate: var(--dialog-translate-starting-style);
   width: var(--dialog-width, calc(100% - 2rem));
   }
&:has(header):not(:has(footer)) {
.content[data-v-b7425f1f] {
         animation-name: add-shadow-top-b7425f1f;
}
}
&:has(footer):not(:has(header)) {
.content[data-v-b7425f1f] {
         animation-name: add-shadow-bottom-b7425f1f;
}
}
&:has(header):has(footer) {
.content[data-v-b7425f1f] {
         animation-name: add-shadow-both-b7425f1f;
}
}
&[open][data-v-b7425f1f] {
      --_display: flex;
      --_opacity: 1;
      --_scale: 1;
      translate: var(--dialog-translate, 0);
@starting-style {
         --_opacity: 0;
         --_scale: 0;
         translate: var(--dialog-translate-starting-style);
}
}
header {
&[data-v-b7425f1f] {
      --button-border-radius: 999px;
      --button-height: 40px;
      --button-padding-inline: 0;
      --button-width: 40px;
      align-items: var(--dialog-align-items, center);
      border-bottom: var(--dialog-header-border);
      display: var(--dialog-header-display, flex);
      font-size: var(--dialog-header-font-size, 1.25rem);
      font-weight: var(--dialog-header-font-weight, 500);
      gap: var(--dialog-header-gap, 1rem);
      grid-template-columns: 1fr auto;
      justify-content: var(--dialog-header-justify-content, space-between);
      padding: var(--dialog-header-padding, 1rem);
      }
button[data-v-b7425f1f] {
         align-self: flex-start;
         flex-shrink: 0;
}
}
.content[data-v-b7425f1f] {
      animation-name: add-shadow;
      animation-timeline: --timeline;
      flex-grow: 1;
      overflow: auto;
      padding: var(--dialog-content-padding, 1rem);
      scroll-behavior: contain;
      scroll-timeline: --timeline;
}
footer[data-v-b7425f1f] {
      display: flex;
      flex-direction: row-reverse;
      gap: var(--dialog-footer-gap, 0.5rem);
      justify-content: var(--dialog-footer-justify-content);
      padding: var(--dialog-footer-padding, 1rem);
}
}
dialog[data-v-b7425f1f]::backdrop {
   backdrop-filter: blur(24px);
   background-color: var(--dialog-overlay-bg-color, rgb(0 0 0 / 60%));
   opacity: var(--_backdrop-opacity, 0);
   transition-behavior: allow-discrete;
   transition-duration: var(--_transition-duration);
   transition-property: var(--_transition-property);
}
dialog[open][data-v-b7425f1f]::backdrop {
   --_backdrop-opacity: 1;
}

/*   Before-open state  */
/* Needs to be after the previous dialog[open] rule to take effect,
    as the specificity is the same. Cannot be nested in ::pseudo */
@starting-style {
dialog[open][data-v-b7425f1f]::backdrop {
      --_backdrop-opacity: 0;
}
}
@keyframes add-shadow-top-b7425f1f {
0% {
      box-shadow: none;
}
0.8% {
      box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.5);
}
100% {
      box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.5);
}
}
@keyframes add-shadow-bottom-b7425f1f {
0% {
      box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.5);
}
99.8% {
      box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.5);
}
100% {
      box-shadow: none;
}
}
@keyframes add-shadow-both-b7425f1f {
0% {
      box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.5);
}
0.8% {
      box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, 0.5);
}
0.9% {
      box-shadow:
         inset 0 5px 5px -5px rgba(0, 0, 0, 0.5),
         inset 0 -5px 5px -5px rgba(0, 0, 0, 0.5);
}
99.8% {
      box-shadow:
         inset 0 5px 5px -5px rgba(0, 0, 0, 0.5),
         inset 0 -5px 5px -5px rgba(0, 0, 0, 0.5);
}
100% {
      box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.5);
}
}

.divider {
&[data-v-613f9f1f] {
   align-items: center;
   background: none;
   border-width: 0;
   display: flex;
   height: var(--divider-height, 1px);
   justify-content: center;
   margin-block: var(--divider-margin-block, 8px);
   position: relative;
   width: 100%;
}
&[data-v-613f9f1f]::before {
      background-color: var(
         --divider-color,
         var(
            --default-border-color,
            color-mix(in srgb, currentColor 16%, transparent)
         )
      );
      content: "";
      height: var(--divider-height, 1px);
      margin: var(--divider-margin-inline);
      width: 100%;
}
}

.dragContainer {
&[data-v-ef6cb2a0] {
   background-color: var(--input-bg-color);
   border: 1px dashed
      var(
         --file-input-border-color,
         var(
            --default-border-color,
            color-mix(in srgb, currentColor 16%, transparent)
         )
      );
   transition: border 0.3s ease;

   padding: 3rem;
}
&[data-v-ef6cb2a0]:hover {
      border-color: canvasText;
}
&.dragover {
.block[data-v-ef6cb2a0] {
         pointer-events: none;
}
}
}
.file[data-v-ef6cb2a0] {
   height: 1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}
label[data-v-ef6cb2a0] {
   cursor: pointer;
   display: block;
}
.dragover[data-v-ef6cb2a0] {
   background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.row[data-v-b2921844] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.cloudinary-image-component[data-v-becdcbc4] {
   aspect-ratio: var(--cloudinary-image-picture-aspect-ratio);
   border-radius: var(--cloudinary-image-border-radius);
   overflow: hidden;
}
img[data-v-becdcbc4] {
   aspect-ratio: var(--cloudinary-image-aspect-ratio);
   border-radius: inherit;
   display: block;
   height: var(--cloudinary-image-height, auto);
   object-fit: var(--cloudinary-image-object-fit);
   scale: var(--cloudinary-image-scale);
   transition: var(--cloudinary-image-transition);
   width: var(--cloudinary-image-width, 100%);
}

.images[data-v-71471c74] {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(2, minmax(0, 300px));
}

.input-component {
&[data-v-52166854] {
   --button__icon-only-size: 32px;
   display: inline-grid;
   gap: var(--input-gap, 0.25rem);
   margin-block: var(--input-margin-block);
   width: var(--input-width, 100%);

   /* Error state overrides the field border */
}
&.disabled[data-v-52166854] {
      opacity: var(--input-disabled-opacity, 0.6);
      pointer-events: none;
}
.field-container {
&[data-v-52166854] {
      align-items: center;
      background-color: var(
         --input-bg-color,
         var(--default-form-control-bg-color)
      );
      border-color: var(
         --input-border-color,
         var(--default-form-control-border-color, canvasText)
      );
      border-radius: var(
         --input-border-radius,
         var(--default-form-control-border-radius)
      );
      border-style: var(--input-border-style, solid);
      border-width: var(
         --input-border-width,
         var(--default-form-control-border-width, 1px)
      );
      display: flex;
      gap: 0.5rem;
      height: var(--input-height, var(--default-form-control-height, 48px));
      padding-inline: var(
         --input-padding-inline,
         var(--default-form-control-padding-inline, 1rem)
      );
      transition:
         border-color var(--focus-transition, 0ms),
         outline-color var(--focus-transition, 0ms);

      /* Tint the whole container: the input itself doesn't span the padding */
}
&[data-v-52166854]:focus-within {
         border-color: var(
            --input-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-color: var(
            --input-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-offset: 0px;
         outline-style: var(
            --input-focus-style,
            var(--default-focus-style, solid)
         );
         outline-width: var(
            --input-focus-width,
            var(--default-focus-width, 2px)
         );
}
&[data-v-52166854]:has(input:autofill) {
         background-color: var(
            --input-autofill-bg-color,
            var(
               --default-form-control-autofill-bg-color,
               light-dark(#e8f0fe, rgba(70, 90, 126, 0.4))
            )
         );
}
input {
&[data-v-52166854] {
         -webkit-appearance: none;
         appearance: none;
         background-color: transparent;
         border: none;
         color: var(
            --input-color,
            var(--default-form-control-text, canvasText)
         );
         flex: 1;
         font-family: var(--input-font-family, var(--font-family));
         font-size: var(--input-font-size, 1rem);
         height: 100%;
         outline: none;
         width: 100%;

         /* The transition keeps the browser's own autofill background out of view */
}
&[data-v-52166854]::placeholder {
            color: var(
               --input-placeholder-color,
               var(
                  --default-form-control-placeholder-color,
                  color-mix(in srgb, currentColor 60%, transparent)
               )
            );
}
&[data-v-52166854]:disabled {
            cursor: not-allowed;
}
&[data-v-52166854]:autofill {
            -webkit-text-fill-color: var(
               --input-autofill-color,
               var(
                  --default-form-control-autofill-color,
                  var(
                     --input-color,
                     var(--default-form-control-text, canvasText)
                  )
               )
            );
            transition: background-color 0s 600000s;
}
}
}
.icon[data-v-52166854] {
      --icon-button-size: 32px;
      flex-shrink: 0;
}
&.error .field-container {
&[data-v-52166854] {
      border-color: var(
         --input-error-color,
         var(--default-form-control-error-color, red)
      );
}
&[data-v-52166854]:focus-within {
         border-color: var(
            --input-error-color,
            var(--default-form-control-error-color, red)
         );
         outline-color: var(
            --input-error-color,
            var(--default-form-control-error-color, red)
         );
}
}
input[type="search"][data-v-52166854]::-webkit-search-cancel-button {
      -webkit-appearance: none;
      opacity: 0;
      pointer-events: none;
}
svg[data-v-52166854] {
      fill: var(
         --input-icon-color,
         var(--default-form-control-icon-color, canvasText)
      );
}
.prefix[data-v-52166854] {
      align-items: center;
      display: flex;
      flex-shrink: 0;
}
}

.input-color-component {
&[data-v-cd4268f2] {
   align-items: center;
   display: grid;
   gap: 1rem;
   grid-template-columns: var(--input-color-columns, 1fr auto);
   margin-bottom: var(--input-color-margin-bottom, 1rem);
}
label[data-v-cd4268f2] {
      font-size: var(--input-color-font-size, 1rem);
      font-weight: var(--input-color-font-weight, 500);
}
.container {
&[data-v-cd4268f2] {
      border-radius: var(--input-color-border-radius, 999px);
      height: var(--input-color-size, 24px);
      position: relative;
      transition: all 0.15s ease;
      width: var(--input-color-size, 24px);
}
&[data-v-cd4268f2]:hover {
         transform: scale(1.1);
}
label {
&[data-v-cd4268f2] {
         cursor: pointer;
         inset: 0;
         position: absolute;
}
&[data-v-cd4268f2]::after {
            border: 1px solid transparent;
            border-radius: 50%;
            box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
            content: "";
            inset: -1px;
            position: absolute;
}
}
}
input[data-v-cd4268f2] {
      visibility: hidden;
}
}

.input-outlined {
&[data-v-4b494b9b] {
   --_border-radius: var(
      --input-border-radius,
      var(--default-form-control-border-radius)
   );
   --_color-border: var(
      --input-border-color,
      var(--default-form-control-border-color)
   );
   --_leading-width: var(--input-outlined-leading-width, 12px);
   --_notch-border-top-color: var(--_color-border);
   --focus-transition: 300ms ease;
   box-sizing: border-box;
   display: flex;
   height: 100%;
   inset: 0;
   pointer-events: none;
   width: 100%;
}
&.is-textarea {
&[data-v-4b494b9b] {
      --_label-translateY: 16px;
      --_notch-align-items: flex-start;
}
&.has-focus[data-v-4b494b9b],
      &.has-value[data-v-4b494b9b] {
         --_label-translateY: -10px;
}
}
&.is-search[data-v-4b494b9b] {
      --_label-translateX: calc(
         var(--input-container-padding-inline) + 1rem + var(--_leading-width) -
            var(--input-outlined-label-padding-inline, 4px)
      );
}
.leading {
&[data-v-4b494b9b] {
      isolation: isolate;
      position: relative;
      width: var(--_leading-width);
}
&[data-v-4b494b9b]::before {
         border-bottom-left-radius: var(--_border-radius);
         border-color: var(--_color-border);
         border-style: solid;
         border-top-left-radius: var(--_border-radius);
         border-width: 1px 0 1px 1px;
         content: "";
         inset: 0;
         position: absolute;
         transition: border-color var(--focus-transition);
         z-index: 100;
}
&[data-v-4b494b9b]::after {
         border-bottom-left-radius: var(--_border-radius);
         border-color: var(
            --input-focus-color,
            var(--default-focus-color, canvasText)
         );
         border-style: solid;
         border-top-left-radius: var(--_border-radius);
         border-width: var(--input-focus-width, var(--default-focus-width, 2px))
            0 var(--input-focus-width, var(--default-focus-width, 2px))
            var(--input-focus-width, var(--default-focus-width, 2px));
         content: "";
         inset: 0;
         opacity: var(--outline-opacity, 0);
         position: absolute;
         transition:
            opacity var(--focus-transition),
            border-color var(--focus-transition);
}
}
.notch {
&[data-v-4b494b9b] {
      align-items: var(--_notch-align-items, center);
      display: flex;
      flex: 0 0 auto;
      height: 100%;
      line-height: var(--input-line-height, 24px);
      max-width: calc(100% - var(--_leading-width));
      position: relative;
      transition: border-color var(--focus-transition);
}
&[data-v-4b494b9b]::before {
         border-bottom-color: var(--_color-border);
         border-style: solid;
         border-top-color: var(--_notch-border-top-color);
         border-width: 1px 0 1px 0;
         content: "";
         inset: 0;
         position: absolute;
         transition: border-color var(--focus-transition);
}
&[data-v-4b494b9b]::after {
         border-color: var(
            --input-focus-color,
            var(--default-focus-color, canvasText)
         );
         border-style: solid;
         border-width: 0 0
            var(--input-focus-width, var(--default-focus-width, 2px)) 0;
         content: "";
         inset: 0;
         opacity: var(--outline-opacity, 0);
         position: absolute;
         transition: opacity var(--focus-transition);
}
label {
&[data-v-4b494b9b] {
         display: inline-block;
         padding-inline: var(--input-outlined-label-padding-inline, 4px);
         position: relative;
         top: var(--_label-top);
         transition: all var(--focus-transition);
         translate: var(--_label-translateX, 0) var(--_label-translateY, 0);
}
span[data-v-4b494b9b] {
            display: block;
            font-size: var(--input-oulined-label-font-size);
            transition: font-size var(--focus-transition);
}
}
}
.trailing {
&[data-v-4b494b9b] {
      flex-grow: 1;
      position: relative;
}
&[data-v-4b494b9b]::before {
         border-bottom-right-radius: var(--_border-radius);
         border-color: var(--_color-border);
         border-style: solid;
         border-top-right-radius: var(--_border-radius);
         border-width: 1px 1px 1px 0;
         content: "";
         inset: 0;
         position: absolute;
         transition:
            opacity var(--focus-transition),
            border-color var(--focus-transition);
}
&[data-v-4b494b9b]::after {
         border-bottom-right-radius: var(--_border-radius);
         border-color: var(
            --input-focus-color,
            var(--default-focus-color, canvasText)
         );
         border-style: solid;
         border-top-right-radius: var(--_border-radius);
         border-width: var(--input-focus-width, var(--default-focus-width, 2px))
            var(--input-focus-width, var(--default-focus-width, 2px))
            var(--input-focus-width, var(--default-focus-width, 2px)) 0;
         content: "";
         inset: 0;
         opacity: var(--outline-opacity, 0);
         position: absolute;
         transition:
            opacity var(--focus-transition),
            border-color var(--focus-transition);
         transition: opacity var(--focus-transition);
}
}
&.has-focus[data-v-4b494b9b],
   &.has-value[data-v-4b494b9b] {
      --_label-translateX: 0;
      --_label-translateY: calc(
         -1 *
            (var(--input-height, var(--default-form-control-height, 56px)) / 2)
      );
      --_notch-border-top-color: transparent;
      --input-oulined-label-font-size: 0.75rem;
}
&.has-focus[data-v-4b494b9b] {
      --outline-opacity: 1;
}
}

.input-field-component {
&[data-v-02e589bf] {
   --_bg-color: var(--input-bg-color, var(--default-form-control-bg-color));
   --input-container-padding-inline: 1rem 0.75rem;
   --input-outlined-border-radius: var(--input-border-radius);
   margin-block: var(--input-margin-block);
   width: 100%;
}
&.search[data-v-02e589bf] {
      --input-container-padding-inline: 0.75rem;
}
&.disabled[data-v-02e589bf] {
      opacity: 0.7;
      pointer-events: none;
}
}
.input-container {
&[data-v-02e589bf] {
   background-color: var(--_bg-color);
   border-radius: var(
      --input-border-radius,
      var(--default-form-control-border-radius)
   );
   box-shadow: var(--input-box-shadow);
   box-sizing: border-box;
   display: grid;
   grid-template-areas: "area";
   height: var(--input-height, var(--default-form-control-height, 56px));
   position: relative;
   transition:
      border-color var(--focus-transition),
      outline-color var(--focus-transition);
}
&[data-v-02e589bf]:not(.has-label) {
      --_placeholder-opacity: 1;
      --input-outlined-leading-width: 32px;
}
&[data-v-02e589bf]:has(:focus) {
      --_placeholder-opacity: 1;
}
.inner[data-v-02e589bf] {
      align-items: center;
      display: flex;
      gap: 1rem;
      grid-area: area;
      padding-inline: var(--input-container-padding-inline);
}
input {
&[data-v-02e589bf] {
      align-items: center;
      background-color: var(--_bg-color);
      border: none;
      box-sizing: border-box;
      color: var(--input-color-text, currentColor);
      display: flex;
      font-family: var(--input-font-family, var(--font-family));
      font-size: var(--input-font-size, 1rem);
      font-weight: var(--input-font-weight, 400);
      height: 100%;
      line-height: var(--input-line-height, 24px);
      outline: none;
      transition: var(--input-transition);
      width: 100%;
}
&[data-v-02e589bf]::placeholder {
         opacity: var(--_placeholder-opacity, 0);
}
}
}
.search-icon[data-v-02e589bf] {
   flex-shrink: 0;
   height: 24px;
   width: 24px;
}
.input-outlined[data-v-02e589bf] {
   grid-area: area;
}
.supporting-text[data-v-02e589bf] {
   font-size: 0.75rem;
   margin-block-start: 0.25rem;
   padding-inline: var(--input-container-padding-inline);
   text-align: right;
}
input[type="search"][data-v-02e589bf]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   opacity: 0;
   pointer-events: none;
}

.input-component {
&[data-v-b585ae1f] {
   position: relative;

   /* Firefox */
}
&:has(input:focus),
   &:has(input:not(:placeholder-shown)) {
&[data-v-b585ae1f] {
      --_input-padding-block-start: 1rem;
      --_label-opacity: 0.6;
      --_label-scale: 0.85;
      --_label-translate-x: 0.15rem;
      --_label-translate-y: -0.5rem;
      --_placeholder-opacity: 1;
}
&.has-prepend-icon[data-v-b585ae1f] {
         --_label-translate-x: 0.5rem;
}
}
&.has-prepend-icon[data-v-b585ae1f] {
      --_input-padding-inline-start: 2.875rem;
}
.prepend[data-v-b585ae1f] {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      left: 0;
      padding-inline-start: 0.75rem;
      position: absolute;
      top: 0;
      z-index: 2;
}
.append[data-v-b585ae1f] {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      padding-inline-end: 0.75rem;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
}
input {
&[data-v-b585ae1f] {
      -webkit-appearance: none;
      appearance: none;
      background-color: var(
         --input-bg-color,
         var(--default-form-control-bg-color)
      );
      /* border-color: var(--_color-border, var(--input-border-color)); */
      border-color: var(
         --input-border-color,
         var(--default-form-control-border-color)
      );
      border-radius: var(
         --input-border-radius,
         var(--default-form-control-border-radius)
      );
      border-style: solid;
      border-width: var(
         --input-border-width,
         var(--default-form-control-border-width, 1px)
      );
      font-family: var(
         --input-font-family,
         var(--default-form-control-font-family),
         var(--font-family)
      );
      font-size: 1rem;
      height: var(--input-height, var(--default-form-control-height, 56px));
      outline: 2px solid var(--_color-border, transparent);
      outline-offset: -2px;
      padding-block-start: var(--_input-padding-block-start);
      padding-inline-end: var(--_input-padding-inline-end, 0.75rem);
      padding-inline-start: var(--_input-padding-inline-start, 0.75rem);
      transition:
         outline 128ms ease-in-out,
         transform 128ms ease-in-out;
      width: 100%;
}
&[data-v-b585ae1f]::placeholder {
         opacity: var(--_placeholder-opacity, 0);
}
&[data-v-b585ae1f]:focus {
         --_color-border: var(
            --input-focus-color,
            var(--default-focus-color, canvasText)
         );
}
}
label[data-v-b585ae1f] {
      align-items: center;
      display: flex;
      height: 100%;
      left: 0;
      opacity: var(--_label-opacity, 1);
      overflow: hidden;
      padding-inline-end: 0.75rem;
      padding-inline-start: var(--_input-padding-inline-start, 0.75rem);
      pointer-events: none;
      position: absolute;
      text-align: start;
      text-overflow: ellipsis;
      top: 0;
      transform: scale(var(--_label-scale, 1))
         translateY(var(--_label-translate-y, 0))
         translateX(var(--_label-translate-x, 0));
      transform-origin: 0 0;
      transition:
         opacity 0.1s ease-in-out,
         transform 0.1s ease-in-out;
      white-space: nowrap;
      z-index: 2;
}
input[type="search"][data-v-b585ae1f]::-webkit-search-decoration,
   input[type="search"][data-v-b585ae1f]::-webkit-search-cancel-button,
   input[type="search"][data-v-b585ae1f]::-webkit-search-results-button,
   input[type="search"][data-v-b585ae1f]::-webkit-search-results-decoration {
      -webkit-appearance: none;
      appearance: none;
}
input[data-v-b585ae1f]::-webkit-outer-spin-button,
   input[data-v-b585ae1f]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
}
input[type="number"][data-v-b585ae1f] {
      -moz-appearance: textfield;
}
}

.menu-component[data-v-9d71ee3b] {
@media (prefers-reduced-motion: no-preference) {
      --_popover-transition-duration: var(
         --menu-popover-transition-duration,
         var(--default-popover-transition-duration, 150ms)
      );
}
}
#anchor[data-v-9d71ee3b] {
   anchor-name: var(--_anchor-name);
   display: inline-block;
}
.popover {
&[data-v-9d71ee3b] {
   background-color: var(
      --menu-bg-color,
      var(--default-popover-bg-color, canvas)
   );
   border-color: var(
      --menu-border-color,
      var(
         --default-popover-border-color,
         var(--default-form-control-border-color)
      )
   );
   border-radius: var(
      --menu-border-radius,
      var(--default-popover-border-radius)
   );
   border-style: var(
      --menu-border-style,
      var(
         --default-popover-border-style,
         var(--default-form-control-border-style, solid)
      )
   );
   border-width: var(
      --menu-border-width,
      var(
         --default-popover-border-width,
         var(--default-form-control-border-width, 1px)
      )
   );
   box-shadow: var(
      --menu-box-shadow,
      var(--default-popover-box-shadow, 0 4px 16px rgb(0 0 0 / 0.12))
   );
   height: var(--menu-height, fit-content);
   inset: unset;
   margin: unset;
   margin-block-start: var(--menu-margin-top, 4px);
   max-height: var(--menu-max-height);
   max-width: var(--menu-max-width, 300px);
   min-height: var(--menu-min-height);
   min-width: var(--menu-min-width, 200px);
   opacity: 0;
   padding-block: var(--menu-padding-block, 0.5rem);
   padding-inline: var(--menu-padding-inline, 0.5rem);
   position-anchor: var(--_anchor-name);
   position-area: bottom span-right;
   position-try:
      flip-block,
      flip-inline,
      flip-block flip-inline;
   scale: 0.97;
   transition:
      display var(--_popover-transition-duration),
      opacity var(--_popover-transition-duration),
      overlay var(--_popover-transition-duration),
      scale var(--_popover-transition-duration);
   transition-behavior: allow-discrete;

   width: var(--menu-width, anchor-size(width));
}
&[data-v-9d71ee3b]:popover-open {
      opacity: 1;
      scale: 1;
@starting-style {
         opacity: 0;
         scale: 0.97;
}
}
}

.menu-item-component {
&[data-v-e4eaa3f8] {
   --_bg-color: var(--menu-item-bg-color, transparent);
   --_color: var(--menu-item-color, canvasText);
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   background-color: var(--_bg-color);
   border: var(--menu-item-border);
   border-radius: var(--menu-item-border-radius, 8px);
   color: var(--_color);
   cursor: pointer;
   display: flex;
   font-family: var(--font-family);
   font-size: var(--menu-item-font-size, 1rem);
   font-weight: var(--menu-item-font-weight, 500);
   gap: var(--menu-item-gap, 1rem);
   line-height: var(--menu-item-line-height);
   margin: var(--menu-item-margin, 0);
   min-height: var(--menu-item-height, 40px);
   text-decoration: none;
   transition:
      outline-color var(--focus-transition, 0ms),
      background-color 300ms;
}
&.disabled[data-v-e4eaa3f8] {
      cursor: default;
      opacity: 0.7;
      pointer-events: none;
}
&:not(.disabled) {
&[data-v-e4eaa3f8]:hover {
         background-color: var(
            --menu-item-hover-bg-color,
            color-mix(in srgb, currentColor 8%, var(--_bg-color, transparent))
         );
}
&[data-v-e4eaa3f8]:active {
         background-color: var(
            --menu-item-active-bg-color,
            color-mix(in srgb, currentColor 16%, var(--_bg-color, transparent))
         );
}
}
&.selected[data-v-e4eaa3f8] {
      background-color: var(
         --menu-item-active-bg-color,
         color-mix(in srgb, currentColor 16%, var(--_bg-color, transparent))
      );
}
&[data-v-e4eaa3f8]:focus-visible,
   &[data-v-e4eaa3f8]:has(a:focus-visible) {
      outline-color: var(
         --menu-item-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-offset: -2px;
      outline-style: var(
         --menu-item-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --menu-item-focus-width,
         var(--default-focus-width, 2px)
      );
}
.content[data-v-e4eaa3f8] {
      align-items: center;
      display: flex;
      gap: inherit;
      padding-inline: var(--menu-item-padding-inline, 1rem);
      width: 100%;
}
}

.row[data-v-51aa0317] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.radio-indicator-component {
&[data-v-05163257] {
   -webkit-tap-highlight-color: transparent;
   align-items: center;
   align-self: var(--radio-indicator-align-self, flex-start);
   border-radius: 50%;
   display: flex;
   flex-shrink: 0;
   height: var(--radio-indicator-size);
   justify-content: center;
   outline-color: var(
      --radio-focus-color,
      var(--default-focus-color, canvasText)
   );
   outline-offset: 3px;
   outline-style: var(--radio-focus-style, var(--default-focus-style, solid));
   outline-width: var(--_radio-indicator-outline-width, 0);
   position: relative;
   width: var(--radio-indicator-size);

   /* No viewBox: 1 user unit = 1px, so lengths can be used directly. Avoids
      length / length division in calc(), which Firefox doesn't support.
      Border and inner dot scale with --radio-indicator-size through
      --radio-indicator-border-ratio / --radio-indicator-inner-ratio; set
      --radio-indicator-border-width / --radio-indicator-inner-size to
      override with fixed lengths. */
}
.radio-background[data-v-05163257] {
      height: var(--radio-indicator-size);
      width: var(--radio-indicator-size);
}
.radio-svg[data-v-05163257] {
      display: block;
      height: 100%;
      width: 100%;
}
.svg-outer[data-v-05163257] {
      fill: transparent;
      r: calc(var(--radio-indicator-size) * 0.45);
      stroke: var(--_radio-indicator-border-color, canvasText);
      stroke-width: var(
         --radio-indicator-border-width,
         calc(
            var(--radio-indicator-size) *
               var(--radio-indicator-border-ratio, 0.1)
         )
      );
      transition: stroke 0.3s ease;
}
.svg-inner[data-v-05163257] {
      fill: var(--_radio-indicator-color);
      r: calc(
         var(
               --radio-indicator-inner-size,
               calc(
                  var(--radio-indicator-size) *
                     var(--radio-indicator-inner-ratio, 0.45)
               )
            ) /
            2
      );
      scale: var(--_radio-indicator-inner-scale, 0);
      transform-box: fill-box;
      transform-origin: center;
      transition: scale 0.3s ease;
}
}

/* .radio-ripple {
   border-radius: 50%;
   height: calc(var(--radio-indicator-size) * 2);
   left: 50%;
   outline: var(--_outline, none);
   pointer-events: none;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   width: calc(var(--radio-indicator-size) * 2);

   &::before {
      background-color: var(--_ripple-color);
      border-radius: inherit;
      content: '';
      inset: 0;
      opacity: var(--_ripple-before-opacity, 0);
      pointer-events: none;
      position: absolute;
      transition: opacity var(--_ripple-transition-duration, 256ms) ease;
   }

   &::after {
      background-color: var(--_ripple-color);
      border-radius: inherit;
      content: '';
      inset: 0;
      opacity: var(--_ripple-after-opacity, 0);
      pointer-events: none;
      position: absolute;
      scale: var(--_ripple-after-scale, 0);
      transform-origin: center center;
      transition: scale var(--_ripple-transition-duration, 256ms) ease;
   }
} */

.radio-component {
&[data-v-d3fbdcc3] {
   --_bg-color: var(--radio-bg-color, transparent);
   --_border-color: var(
      --radio-border-color,
      var(--default-form-control-border-color, currentcolor)
   );
   --_box-shadow: var(
      --radio-box-shadow,
      var(--default-form-control-box-shadow, none)
   );
   --_color: var(--radio-color, var(--default-form-control-color, CanvasText));
   --_radio-indicator-border-color: var(
      --radio-indicator-border-color,
      var(--default-form-control-border-color, canvasText)
   );
   --_radio-indicator-color: var(--radio-indicator-color, CanvasText);
   --radio-indicator-size: var(--radio-size, 20px);
   align-items: center;
   background-color: var(--_bg-color);
   border-color: var(--_border-color);
   border-radius: var(--radio-border-radius, 0);
   border-style: solid;
   border-width: var(--radio-border-width, 0);
   box-shadow: var(--_box-shadow);
   color: var(--_color);
   cursor: pointer;
   display: var(--radio-display, inline-flex);
   font-size: var(--radio-font-size, var(--input-label-font-size, 0.875rem));
   font-weight: var(--radio-font-weight, var(--input-label-font-weight));
   gap: var(--radio-gap, 1rem);
   grid-template-columns: var(--radio-grid-columns);
   line-height: var(--radio-line-height, 1.5);
   margin-block-end: var(--radio-margin-block-end, 0);
   margin-block-start: var(--radio-margin-block-start, 0);
   outline-color: var(
      --radio-focus-color,
      var(--default-focus-color, canvasText)
   );
   outline-offset: 3px;
   outline-style: var(--radio-focus-style, var(--default-focus-style, solid));
   outline-width: 0;
   padding-block: var(--radio-padding-block, 0.5rem);
   padding-inline: var(--radio-padding-inline, 0);
   position: relative;
   transition:
      border-color 0.3s ease,
      background-color 0.3s ease;
   user-select: none;
   width: var(--radio-width, 100%);

   /* Checked state */

   /* Hover state */

   /* Checked + hover state */

   /* Focus state */
}
&.disabled[data-v-d3fbdcc3] {
      opacity: var(--radio-disabled-opacity, 0.7);
      pointer-events: none;
}
&[data-v-d3fbdcc3]:has(input:checked) {
      --_radio-indicator-color: var(
         --radio-indicator-checked-color,
         var(--radio-indicator-color, CanvasText)
      );
      --_radio-indicator-border-color: var(--_radio-indicator-color);
      --_radio-indicator-inner-scale: 1;
      background-color: var(--radio-checked-bg-color, var(--_bg-color));
      border-color: var(--radio-checked-border-color, var(--_border-color));
      box-shadow: var(--radio-checked-box-shadow, var(--_box-shadow));
      color: var(--radio-checked-color, var(--_color));
}
&[data-v-d3fbdcc3]:hover {
      background-color: var(--radio-hover-bg-color, var(--_bg-color));
      border-color: var(--radio-hover-border-color, var(--_border-color));
      box-shadow: var(--radio-hover-box-shadow, var(--_box-shadow));
      color: var(--radio-hover-color, var(--_color));
}
&[data-v-d3fbdcc3]:has(input:checked):hover {
      background-color: var(
         --radio-checked-hover-bg-color,
         var(--radio-checked-bg-color, var(--_bg-color))
      );
      border-color: var(
         --radio-checked-hover-border-color,
         var(--radio-checked-border-color, var(--_border-color))
      );
      box-shadow: var(
         --radio-checked-hover-box-shadow,
         var(--radio-checked-box-shadow, var(--_box-shadow))
      );
      color: var(
         --radio-checked-hover-color,
         var(--radio-checked-color, var(--_color))
      );
}
&[data-v-d3fbdcc3]:has(input:focus-visible) {
      /* Radio indicator outline width */
      --_radio-indicator-outline-width: var(
         --radio-focus-width,
         var(--default-focus-width, 2px)
      );
      outline-width: 0;
}
}
.radio-input[data-v-d3fbdcc3] {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

/* Customize the label (the wrapper) */
.radio-block-component {
&[data-v-784bff98] {
   --_color: var(--input-border-color);
   --_radio-outline: var(--radio-block-outline, var(--_outline));
   --_size: var(--radio-size, 20px);
   --radio-margin: 0;
   align-items: flex-start;
   background-color: var(--_bg, var(--radio-block-bg-color));
   border: var(--radio-block-border);
   border-radius: var(--radio-block-border-radius);
   cursor: pointer;
   display: flex;
   margin-block: var(--radio-block-margin-block);
   margin-inline: var(--radio-block-margin-inline);
   outline: var(--_radio-outline);
   outline-offset: 2px;
   padding: var(--radio-block-padding, 1rem);
   transition:
      border 256ms ease,
      box-shadow 256ms;
   user-select: none;

   /* Remove ripple circle */

   /* Focus state */

   /* Active state */
}
&.disabled[data-v-784bff98] {
      opacity: 0.7;
      pointer-events: none;
}
[data-v-784bff98] .radio-ripple {
      display: none;
}
&[data-v-784bff98]:has(input:focus-visible) {
      --_outline: var(
            --radio-block-focus-width,
            var(--default-focus-width, 2px)
         )
         var(--radio-block-focus-style, var(--default-focus-style, solid))
         var(
            --radio-block-focus-color,
            var(--default-focus-color, var(--_color))
         );
      /* --_ripple-before-opacity: 0.24; */
}
&[data-v-784bff98]:has(input:active) {
      /* --_ripple-after-opacity: 0.12;
      --_ripple-after-scale: 1; */
}
}
.label[data-v-784bff98] {
   color: var(--radio-block-label-color);
   font-size: var(
      --radio-block-label-font-size,
      var(--input-label-font-size, 0.875rem)
   );
   font-weight: var(
      --radio-block-label-font-weight,
      var(--input-label-font-weight)
   );
   line-height: var(--radio-block-label-line-height, 1.5);
   padding-left: var(--radio-block-label-padding-left, 1rem);
}

fieldset[data-v-f9f739df] {
   border: 0;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.option-component {
&[data-v-1cdeaaf1] {
   background-color: var(
      --select-option-bg-color,
      var(--default-form-control-option-bg-color, transparent)
   );
   border-radius: var(
      --select-option-border-radius,
      var(--default-form-control-option-border-radius)
   );
   color: var(
      --select-option-color,
      var(--default-form-control-option-color, canvasText)
   );
   font-family: var(
      --select-option-font-family,
      var(--default-form-control-option-font-family, inherit)
   );
   font-size: var(
      --select-option-font-size,
      var(--default-form-control-option-font-size, 1rem)
   );
   font-weight: var(
      --select-option-font-weight,
      var(--default-form-control-option-font-weight, 500)
   );
   line-height: var(
      --select-option-line-height,
      var(--default-form-control-option-line-height)
   );
   min-height: var(
      --select-option-height,
      var(--default-form-control-option-height, 40px)
   );
   padding-inline: var(
      --select-option-padding-inline,
      var(--default-form-control-option-padding-inline, 1rem)
   );
   transition:
      outline-color var(--focus-transition, 0ms),
      background-color
         var(
            --select-option-transition-speed,
            var(--default-form-control-option-transition-speed, 300ms)
         );

   /* Hide the default checkmark */
}
&[data-v-1cdeaaf1]:not([hidden]) {
      display: grid;
      gap: var(
         --select-option-gap,
         var(--default-form-control-option-gap, 0.25rem)
      );
      grid-template-columns: 1fr 24px;
}
&:not(:disabled) {
&[data-v-1cdeaaf1] {
      cursor: pointer;
}
&[data-v-1cdeaaf1]:hover {
         background-color: var(
            --select-option-hover-bg-color,
            var(
               --default-form-control-option-hover-bg-color,
               color-mix(in srgb, currentColor 8%, transparent)
            )
         );
}
&.active[data-v-1cdeaaf1],
      &[data-v-1cdeaaf1]:active {
         background-color: var(
            --select-option-active-bg-color,
            var(
               --default-form-control-option-active-bg-color,
               color-mix(in srgb, currentColor 16%, transparent)
            )
         );
}
&[data-v-1cdeaaf1]:focus-visible {
         outline-color: var(
            --select-option-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-offset: -2px;
         outline-style: var(
            --select-option-focus-style,
            var(--default-focus-style, solid)
         );
         outline-width: var(
            --select-option-focus-width,
            var(--default-focus-width, 2px)
         );
}
}
&:checked {
&[data-v-1cdeaaf1] {
      --_check-display: block;
}
svg[data-v-1cdeaaf1] {
         fill: var(
            --select-option-icon-color,
            var(
               --default-form-control-option-icon-color,
               var(--default-form-control-icon-color, canvasText)
            )
         );
         height: 24px;
         visibility: visible;
         width: 24px;
}
}
&[data-v-1cdeaaf1]:disabled {
      color: var(--select-option-disabled-color, canvasText);
      opacity: var(--select-option-disabled-opacity, 0.6);
}
&[data-v-1cdeaaf1]::checkmark {
      display: none;
}
}

.select-component {
&[data-v-0fb9faef] {
   display: inline-grid;
   gap: var(--select-gap, 0.25rem);
   margin-block: var(--select-margin-block);
   width: var(--select-width, 100%);

   /* Error state overrides the field border */
}
@media (prefers-reduced-motion: no-preference) {
&[data-v-0fb9faef] {
      --_popover-transition-duration: var(
         --select-transition-duration,
         var(--default-popover-transition-duration, 150ms)
      );
}
}
&.disabled[data-v-0fb9faef] {
      opacity: var(
         --select-disabled-opacity,
         var(--input-disabled-opacity, 0.6)
      );
      pointer-events: none;
}
.field {
&[data-v-0fb9faef] {
      align-items: center;
      background-color: var(
         --select-bg-color,
         var(--default-form-control-bg-color)
      );
      border-color: var(
         --select-border-color,
         var(--default-form-control-border-color, canvasText)
      );
      border-radius: var(
         --select-border-radius,
         var(--default-form-control-border-radius)
      );
      border-style: var(
         --select-border-style,
         var(--default-form-control-border-style, solid)
      );
      border-width: var(
         --select-border-width,
         var(--default-form-control-border-width, 1px)
      );
      display: flex;
      height: var(--select-height, var(--default-form-control-height, 48px));
      transition:
         border-color var(--focus-transition, 0ms),
         outline-color var(--focus-transition, 0ms);
}
&[data-v-0fb9faef]:focus-within,
      &[data-v-0fb9faef]:has(select:open) {
         border-color: var(
            --select-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-color: var(
            --select-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-offset: 0px;
         outline-style: var(
            --select-focus-style,
            var(--default-focus-style, solid)
         );
         outline-width: var(
            --select-focus-width,
            var(--default-focus-width, 2px)
         );
}
}
&.error .field {
&[data-v-0fb9faef] {
      border-color: var(
         --select-error-color,
         var(--default-form-control-error-color, red)
      );
}
&[data-v-0fb9faef]:focus-within,
      &[data-v-0fb9faef]:has(select:open) {
         border-color: var(
            --select-error-color,
            var(--default-form-control-error-color, red)
         );
         outline-color: var(
            --select-error-color,
            var(--default-form-control-error-color, red)
         );
}
}
select {
&[data-v-0fb9faef] {
      align-items: center;
      appearance: base-select;
      background-color: transparent;
      border: 0;
      color: var(
         --select-color,
         var(--input-color, var(--default-form-control-text, canvasText))
      );
      flex: 1;
      font-family: var(
         --select-font-family,
         var(--input-font-family, var(--font-family))
      );
      font-size: var(--select-font-size, 1rem);
      height: 100%;
      outline: 0;
      padding-inline: var(
         --select-padding-inline,
         var(--default-form-control-padding-inline, 1rem)
      );
      width: 100%;

      /* Remove default arrow */

      /* Popover styles — aligned with BaseMenu's .popover */
}
&[data-v-0fb9faef]::picker-icon {
         display: none;
}
&[data-v-0fb9faef]:open {
         --_arrow-rotate: 180deg;
}
svg[data-v-0fb9faef] {
         fill: var(
            --select-icon-color,
            var(--default-form-control-icon-color, canvasText)
         );
         height: 24px;
         rotate: var(--_arrow-rotate);
         transition: rotate 150ms ease;
         width: 24px;
}
&[data-v-0fb9faef]::picker(select) {
         appearance: base-select;
         background-color: var(
            --select-menu-bg-color,
            var(--default-popover-bg-color, canvas)
         );
         border-color: var(
            --select-menu-border-color,
            var(
               --default-popover-border-color,
               var(--default-form-control-border-color)
            )
         );
         border-radius: var(
            --select-menu-border-radius,
            var(--default-popover-border-radius)
         );
         border-style: var(
            --select-menu-border-style,
            var(
               --default-popover-border-style,
               var(--default-form-control-border-style, solid)
            )
         );
         border-width: var(
            --select-menu-border-width,
            var(
               --default-popover-border-width,
               var(--default-form-control-border-width, 1px)
            )
         );
         box-shadow: var(
            --select-menu-box-shadow,
            var(--default-popover-box-shadow, 0 4px 16px rgb(0 0 0 / 0.12))
         );
         margin-block-start: var(
            --select-menu-margin-top,
            var(--default-popover-margin-top, 4px)
         );
         opacity: 0;
         padding-block: var(
            --select-menu-padding-block,
            var(--default-popover-padding-block, 0.5rem)
         );
         padding-inline: var(
            --select-menu-padding-inline,
            var(--default-popover-padding-inline, 0.5rem)
         );
         scale: 0.97;
         transition:
            opacity var(--_popover-transition-duration),
            scale var(--_popover-transition-duration),
            overlay var(--_popover-transition-duration),
            display var(--_popover-transition-duration);
         transition-behavior: allow-discrete;
}
&[data-v-0fb9faef]::picker(select):popover-open {
         opacity: 1;
         scale: 1;
}
@starting-style {
&[data-v-0fb9faef]::picker(select):popover-open {
            opacity: 0;
            scale: 0.97;
}
}
}
selectedcontent[data-v-0fb9faef] {
      --_checkmark-visibility: hidden;
      align-items: center;
      display: flex;
      flex: 1;
}
&.placeholder-shown selectedcontent[data-v-0fb9faef] {
      color: var(
         --select-placeholder-color,
         var(
            --default-form-control-placeholder-color,
            color-mix(in srgb, currentColor 60%, transparent)
         )
      );
}
}

.sheet-component {
&[data-v-f0c4ce31] {
   --dialog-content-padding: var(--sheet-content-padding, 1rem);
   --dialog-max-width: var(--sheet-max-width, 100vw);
}
&[data-location="top"][data-v-f0c4ce31] {
      --dialog-border-radius: var(--sheet-border-radius, 0);
      --dialog-bottom: auto;
      --dialog-max-width: 100dvw;
      --dialog-opacity: 1;
      --dialog-scale: 1;
      --dialog-transition-property: overlay transform;
      --dialog-translate-starting-style: 0 -100%;
      --dialog-width: 100dvw;
}
&[data-location="bottom"][data-v-f0c4ce31] {
      --dialog-border-radius: var(--sheet-border-radius, 0);
      --dialog-max-width: var(--sheet-max-width, 100vw);
      --dialog-opacity: 1;
      --dialog-scale: 1;
      --dialog-top: auto;
      --dialog-transition-property: overlay transform;
      --dialog-translate-starting-style: 0 100%;
      --dialog-width: 100vw;
}
&[data-location="left"][data-v-f0c4ce31] {
      --dialog-border-radius: var(--sheet-border-radius, 0);
      --dialog-height: 100dvh;
      --dialog-max-height: 100dvh;
      --dialog-max-width: 320px;
      --dialog-opacity: 1;
      --dialog-right: auto;
      --dialog-scale: 1;
      --dialog-transition-property: overlay transform;
      --dialog-translate-starting-style: -100% 0;
}
&[data-location="right"][data-v-f0c4ce31] {
      --dialog-border-radius: var(--sheet-border-radius, 0);
      --dialog-height: 100dvh;
      --dialog-left: auto;
      --dialog-max-height: 100dvh;
      --dialog-max-width: 320px;
      --dialog-opacity: 1;
      --dialog-scale: 1;
      --dialog-transition-property: overlay transform;
      --dialog-translate-starting-style: 100% 0;
}
}

.row[data-v-881de2f2] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.skeleton-component[data-v-fdc4453c] {
   background-color: var(
      --skeleton-bg-color,
      color-mix(in srgb, currentColor 14%, transparent)
   );
   display: block;
@media (prefers-reduced-motion: no-preference) {
      animation: skeleton-pulse-fdc4453c var(--skeleton-duration, 1.2s) ease-in-out
         infinite;
}
}
@keyframes skeleton-pulse-fdc4453c {
50% {
      opacity: 0.4;
}
}

.row[data-v-e141a1e9] {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}
.lines[data-v-e141a1e9] {
   display: grid;
   gap: 0.5rem;
   width: min(100%, 400px);
}

.slider-component {
&[data-v-05134c72] {
   align-items: center;
   cursor: pointer;
   display: flex;
   height: 48px;
   min-width: var(--slider-min-width, 200px);
   position: relative;
   width: 100%;
}
&.disabled[data-v-05134c72] {
      opacity: 0.5;
      pointer-events: none;
}
&[data-v-05134c72]:hover {
      --_ripple-opacity: 0.08;
      --_scale: 1;
}
&[data-v-05134c72]:has(input:focus) {
      --_ripple-opacity: 0.16;
      --_scale: 1;
}
input[data-v-05134c72] {
      -webkit-appearance: none;
      cursor: pointer;
      height: 100%;
      left: 0;
      margin: 0;
      opacity: 0;
      padding: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 3;
}
.track {
&[data-v-05134c72] {
      background: color-mix(in srgb, currentColor 10%, transparent);
      border-radius: 2px;
      height: 4px;
      left: 0;
      overflow: visible;
      position: absolute;
      right: 0;
}
.active-track[data-v-05134c72] {
         height: 100%;
         position: absolute;
         width: 100%;
}
.active-fill[data-v-05134c72] {
         background-color: var(--slider-color);
         height: 100%;
         transform-origin: left;
         transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
         width: 100%;
}
}
.tick-marks {
&[data-v-05134c72] {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
}
.tick-mark {
&[data-v-05134c72] {
         background: color-mix(in srgb, currentColor 50%, transparent);
         border-radius: 50%;
         height: 2px;
         position: absolute;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 2px;
}
&.active[data-v-05134c72] {
            background: canvas;
}
}
}
#thumb {
&[data-v-05134c72] {
      height: var(--thumb-size);
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: left 0.1s cubic-bezier(0.4, 0, 0.2, 1);
      width: var(--thumb-size);
      z-index: 2;
}
.thumb-knob {
&[data-v-05134c72] {
         background-color: var(--slider-color);
         border-radius: 50%;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         height: 100%;
         width: 100%;
}
&[data-v-05134c72]::before {
            background: var(--slider-color);
            border-radius: 50%;
            content: "";
            height: 40px;
            left: 50%;
            opacity: var(--_ripple-opacity, 0);
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
}
}
}
.value-indicator-container[data-v-05134c72] {
      bottom: 100%;
      left: 50%;
      margin-bottom: 12px;
      position: absolute;
      transform: translateX(-50%);
      transform-origin: bottom;
      transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.value-indicator {
&[data-v-05134c72] {
      background-color: var(--slider-color);
      border-radius: 4px;
      color: canvas;
      font-size: 0.875rem;
      font-weight: 500;
      padding: 4px 8px;
      scale: var(--_scale, 1);
      transition: scale 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
}
&[data-v-05134c72]::after {
         border: 6px solid transparent;
         border-top-color: var(--slider-color);
         content: "";
         left: 50%;
         position: absolute;
         top: 100%;
         transform: translateX(-50%);
}
}
}

[data-v-3a69ce51]::selection {
   background: var(--slider-color, canvasText);
   color: canvas;
}
.range-slider-component {
&[data-v-3a69ce51] {
   --_slider-height: var(--slider-track-height, 4px);
   --_thumb-box-shadow:
      0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
      0px 1px 5px 0px rgba(0, 0, 0, 0.12);
   background-color: var(--slider-component-bg-color);
   border-radius: 10px;
   display: var(--range-slider-component-display, block);
   font-size: var(--font-size);
   padding-block: var(--slider-padding-block, 2rem);
   padding-inline: var(--slider-padding-inline);
   position: relative;
   width: 100%;
   }
&.disabled[data-v-3a69ce51] {
      --_display-thumb-container: none;
}
}
.slider[data-v-3a69ce51] {
   background-color: var(
      --slider-track-bg-color,
      var(
         --default-border-color,
         color-mix(in srgb, currentColor 16%, transparent)
      )
   );
   border-radius: 5px;
   height: var(--slider-track-height, 4px);
   position: relative;
}
.slider .progress[data-v-3a69ce51] {
   background: var(--slider-color, canvasText);
   border-radius: 5px;
   height: 100%;
   left: var(--left-percentage);
   position: absolute;
   width: calc(var(--right-percentage) - var(--left-percentage));
}
.slider-marks {
&[data-v-3a69ce51] {
   align-items: center;
   display: flex;
   height: var(--_slider-height);
   position: absolute;
   width: 100%;
   }
.mark {
&[data-v-3a69ce51] {
      background-color: var(--slider-mark-color, currentColor);
      border-radius: 1px;
      display: block;
      height: 2px;
      position: absolute;
      top: 50%;
      transition: background-color var(--_movement-transition);
      translate: -1px -50%;
      width: 2px;
      z-index: 1;
      }
&.active[data-v-3a69ce51] {
         background-color: var(--slider-mark-active-color, canvas);
}
}
}
.range-input-container {
&[data-v-3a69ce51] {
   position: relative;
   }
input[type="range"] {
&[data-v-3a69ce51] {
      -moz-appearance: none;
      -webkit-appearance: none;
      background: none;
      height: var(--_slider-height);
      pointer-events: none;
      position: absolute;
      top: -5px;
      width: 100%;
      }
&[data-v-3a69ce51]:focus {
         outline: none;
}
&.focused[data-v-3a69ce51] {
         z-index: 2;
}
&[data-v-3a69ce51]::-webkit-slider-thumb {
         -moz-appearance: none;
         -webkit-appearance: none;
         -webkit-tap-highlight-color: transparent;
         background-color: transparent;
         border-radius: 999px;
         cursor: pointer;
         height: var(--_thumb-size);
         pointer-events: auto;
         position: relative;
         scale: 2;
         width: var(--_thumb-size);
}
&[data-v-3a69ce51]::-moz-range-thumb {
         -moz-appearance: none;
         background-color: transparent;
         border: 5px solid transparent;
         border-radius: 999px;
         cursor: pointer;
         height: calc(var(--_thumb-size) / 2);
         opacity: 0;
         pointer-events: auto;
         position: relative;
         scale: 2;
         width: calc(var(--_thumb-size) / 2);
}
}
}
.thumb-container {
&[data-v-3a69ce51] {
   align-items: center;
   border-radius: 999px;
   box-shadow: var(--_thumb-box-shadow);
   display: var(--_display-thumb-container, flex);
   height: var(--_thumb-size);
   justify-content: center;
   left: var(--left-percentage);
   pointer-events: none;
   position: absolute;
   transition: background-color 100ms cubic-bezier(0.4, 0, 1, 1);
   translate: -50% -64%;
   width: var(--_thumb-size);
   z-index: 1;
   }
&.hovered[data-v-3a69ce51] {
      --slider-thumb-container-before-opacity: 0.08;
      --slider-tooltip-scale: 1;
}
&.focused[data-v-3a69ce51] {
      --slider-thumb-container-before-opacity: 0.16;
      --slider-tooltip-scale: 1;
}
&[data-v-3a69ce51]::before {
      background: var(--slider-thumb-color, canvasText);
      border-radius: inherit;
      content: "";
      inset: 0;
      opacity: var(--slider-thumb-container-before-opacity, 0);
      position: absolute;
      scale: 2;
      transition: opacity 100ms cubic-bezier(0.4, 0, 1, 1);
}
.thumb[data-v-3a69ce51] {
      background-color: var(--slider-thumb-color, canvasText);
      border-radius: 999px;
      box-shadow: var(
         --slider-thumb-box-shadow,
         0 1px 3px rgba(0, 0, 0, 0.2),
         0 1px 1px rgba(0, 0, 0, 0.14),
         0 2px 1px rgba(0, 0, 0, 0.12)
      );
      height: var(--_thumb-size);
      width: var(--_thumb-size);
      z-index: 2;
}
.tooltip {
&[data-v-3a69ce51] {
      bottom: 35px;
      position: absolute;
      }
.tooltip-inner {
&[data-v-3a69ce51] {
         align-items: center;
         background-color: var(--slider-tooltip-bg-color, canvasText);
         border-radius: var(--slider-tooltip-border-radius, 4px);
         color: var(--slider-tooltip-color, canvas);
         display: flex;
         font-weight: var(--slider-tooltip-font-weight, 500);
         justify-content: center;
         min-width: var(
            --slider-tooltip-min-width,
            calc(var(--thumb-size) * 2)
         );
         opacity: var(--slider-tooltip-opacity, 1);
         padding: var(--slider-tooltip-padding, 0.25rem 0.5rem);
         scale: var(--slider-tooltip-scale, 0);
         transform-origin: bottom;
         transition: scale 100ms 0ms cubic-bezier(0.4, 0, 1, 1);
         }
&[data-v-3a69ce51]::before {
            border-left: 6px solid rgba(0, 0, 0, 0);
            border-right: 6px solid rgba(0, 0, 0, 0);
            border-top: 6px solid currentColor;
            bottom: -5px;
            color: var(--slider-tooltip-bg-color, canvasText);
            content: "";
            height: 0;
            left: 50%;
            position: absolute;
            transform: translateX(-50%);
            width: 0;
}
}
}
}
.thumb-container-right[data-v-3a69ce51] {
   left: var(--right-percentage);
}

.slider[data-v-d59dccb6] {
   width: min(100%, 400px);
}

.single-donut-chart-component[data-v-8f65aaf1] {
   display: inline-grid;
   grid-template-areas: "area";
   justify-content: space-around;
}
svg[data-v-8f65aaf1] {
   display: block;
   grid-area: area;
   width: var(--_width);
}
.circle-bg[data-v-8f65aaf1] {
   fill: none;
   stroke: var(--donut-chart-bg-color);
   stroke-width: var(--_stroke-width);
}
.circle[data-v-8f65aaf1] {
   fill: none;
   stroke: var(--donut-chart-color, var(--color-primary, blue));
   stroke-linecap: var(--_stroke-linecap);
   stroke-width: var(--_stroke-width);
   transition: stroke-dasharray var(--_transition-speed) ease-out;
}
.percentage[data-v-8f65aaf1] {
   fill: var(--color-text);
   font-family: sans-serif;
   font-size: 0.5em;
   text-anchor: middle;
}
.slot-wrapper[data-v-8f65aaf1] {
   display: grid;
   grid-area: area;
   place-content: center;
}

/* Fixes the stroke width when the percentage is 0 */
.zero-percent[data-v-8f65aaf1] {
   stroke-width: 0;
}

.slideshow-pause-button-component[data-v-e9eb890a] {
   --icon-button-size: 48px;
   background-color: transparent;
   border: 0;
   display: flex;
   outline: none;
   z-index: 1;
}

.slideshow-component {
&[data-v-f25b09d9] {
   --button-bg-color: canvas;
   --button-border-radius: 999px;
   --button-color: var(--slideshow-btn-color, canvasText);
   --button-height: 48px;
   --button-width: 48px;
   background-color: var(--slideshow-bg-color);
   border: var(--slideshow-border);
   border-radius: var(--slideshow-border-radius);
   display: grid;
   grid-template-areas: "area";
   height: var(--slideshow-height);
   margin-block: var(--slideshow-margin-block, 1rem);
   max-height: var(--slideshow-max-height);
   max-width: var(--slideshow-max-width, 3000px);
   overflow: hidden;
   position: relative;
   width: 100%;
}
@media (prefers-reduced-motion) {
&[data-v-f25b09d9] {
      --_transition-speed: 0ms !important;
}
}
img[data-v-f25b09d9] {
      display: block;
}
}
.button-previous-slide[data-v-f25b09d9] {
   display: grid;
   grid-area: area;
   height: 100%;
   justify-self: flex-start;
   padding-inline: 1rem;
   place-content: center;
}
.button-next-slide[data-v-f25b09d9] {
   display: grid;
   grid-area: area;
   height: 100%;
   justify-self: flex-end;
   padding-inline: 1rem;
   place-content: center;
}
.button-pause[data-v-f25b09d9] {
   align-self: flex-end;
   grid-area: area;
   justify-self: flex-end;
   padding: 1rem;
   z-index: 1;
}
.btn-icon-component[data-v-f25b09d9]:active {
   scale: 0.95;
}
.slide {
&[data-v-f25b09d9] {
   grid-area: area;
   height: 100%;
   transform: translate3d(-10000px, 0, 0);
   width: 100%;
   will-change: transform;
}
[data-v-f25b09d9] img {
      display: block;
      object-fit: cover;
}
}
.active[data-v-f25b09d9] {
   transform: translate3d(0, 0, 0);
}
button[data-v-f25b09d9] {
   display: block;
}
.back {
.slideIn[data-v-f25b09d9] {
      animation: slideInFromLeft-f25b09d9 var(--_transition-speed) ease-out forwards;
}
.slideOut[data-v-f25b09d9] {
      animation: slideAwayToRight-f25b09d9 var(--_transition-speed) ease-out forwards;
}
}
.slideIn[data-v-f25b09d9] {
   animation: slideInFromRight-f25b09d9 var(--_transition-speed) ease-out forwards;
}
.slideOut[data-v-f25b09d9] {
   animation: slideAwayToLeft-f25b09d9 var(--_transition-speed) ease-out forwards;
}
@keyframes slideInFromRight-f25b09d9 {
from {
      transform: translate3d(100%, 0, 0);
}
to {
      transform: translate3d(0, 0, 0);
}
}
@keyframes slideInFromLeft-f25b09d9 {
from {
      transform: translate3d(-100%, 0, 0);
}
to {
      transform: translate3d(0, 0, 0);
}
}
@keyframes slideAwayToLeft-f25b09d9 {
from {
      transform: translate3d(0, 0, 0);
}
to {
      transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideAwayToRight-f25b09d9 {
from {
      transform: translate3d(0, 0, 0);
}
to {
      transform: translate3d(100%, 0, 0);
}
}
.progress-bar[data-v-f25b09d9] {
   align-self: flex-end;
   grid-area: area;
   height: var(--slideshow-progress-bar-height, 8px);
   width: 100%;
   z-index: 9;
}
.progress-bar.paused[data-v-f25b09d9]::before {
   animation: none;
}
.progress-bar[data-v-f25b09d9]::before {
   animation: progressBar-f25b09d9 var(--_auto-play-speed) forwards infinite;
   background-color: var(--slideshow-progress-bar-color, canvasText);
   content: "";
   display: block;
   height: 100%;
   width: 0%;
}
@keyframes progressBar-f25b09d9 {
to {
      width: 100%;
}
}

.slideshow[data-v-e70d979b] {
   width: min(100%, 400px);
}

.snackbar-component {
&[data-v-18f2a53b] {
   background-color: var(--snackbar-bg-color, canvasText);
   border: 0;
   border-radius: var(--snackbar-border-radius, 0.25rem);
   inset: unset;
   bottom: 1rem;
   box-shadow: var(
      --snackbar-box-shadow,
      0 1px 3px rgba(0, 0, 0, 0.2),
      0 1px 1px rgba(0, 0, 0, 0.14),
      0 2px 1px rgba(0, 0, 0, 0.12)
   );
   color: var(--snackbar-color, canvas);
   left: 2rem;
   margin: 0;
   opacity: 0;
   padding: var(--snackbar-padding, 0.5rem 1rem);

   transition-behavior: allow-discrete;
   transition-duration: 1000ms;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   translate: 0 100%;
}
&[data-v-18f2a53b]:popover-open {
      opacity: 1;
      translate: 0 0;
@starting-style {
         opacity: 0;
         translate: 0 100%;
}
}
.content[data-v-18f2a53b] {
      --button-color: currentColor;
      --button-height: 36px;
      --button-padding: 0 0.5rem;
      align-items: center;
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 1fr auto;
      justify-content: space-between;
}
}

.text-switch-component[data-v-6585c4d1] {
   border-radius: 25px;
   height: 50px;
   margin: 20px 0;
   position: relative;
   width: 200px;
}
input {
&[data-v-6585c4d1] {
   appearance: none;
   background-color: canvasText;
   border-radius: 25px;
   font-family: "Oswald", sans-serif;
   height: 50px;
   outline: none;
   position: relative;
   transition: 0.25s -0.1s;
   width: 200px;
   }
&:checked {
&[data-v-6585c4d1] {
      background-color: canvas;
      }
&[data-v-6585c4d1]:before {
         color: canvas;
         transition: color 0.5s 0.2s;
}
&[data-v-6585c4d1]:after {
         color: color-mix(in srgb, canvasText 50%, canvas);
         transition: color 0.5s;
}
& + label[data-v-6585c4d1] {
         background: canvasText;
         left: 10px;
         right: 100px;
         transition:
            left 0.5s,
            right 0.4s 0.2s;
}
}
&:not(:checked) {
&[data-v-6585c4d1] {
      background: canvasText;
      transition: background 0.5s -0.1s;
      }
&[data-v-6585c4d1]:before {
         color: color-mix(in srgb, canvasText 50%, canvas);
         transition: color 0.5s;
}
&[data-v-6585c4d1]:after {
         color: canvasText;
         transition: color 0.5s 0.2s;
}
& + label[data-v-6585c4d1] {
         background: canvas;
         left: 100px;

         right: 10px;

         transition:
            left 0.4s 0.2s,
            right 0.5s,
            background 0.35s -0.1s;
}
}
&[data-v-6585c4d1]:before,
   &[data-v-6585c4d1]:after {
      color: canvas;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
}
&[data-v-6585c4d1]:before {
      content: "ON";
      left: 20px;
}
&[data-v-6585c4d1]:after {
      content: "OFF";
      right: 20px;
}
}
label[data-v-6585c4d1] {
   border-radius: 20px;
   bottom: 10px;
   position: absolute;
   top: 10px;

   z-index: 1;
}

.tab-switch-component {
&[data-v-7093f48e] {
   --_border-radius: 999px;
   --_padding: var(--tab-switch-padding, 4px);
   background-color: var(
      --tab-switch-bg-color,
      color-mix(in srgb, canvasText 8%, transparent)
   );
   border: var(--tab-switch-border);
   border-radius: var(--_border-radius);
   box-shadow: var(--tab-switch-box-shadow);
   display: inline-flex;
   margin-block: var(--tab-switch-margin-block);
   max-width: 100%;
   overflow-x: auto;

   padding: var(--_padding);
   position: var(--tabs-position, relative);
   width: auto;
}
button {
&[data-v-7093f48e] {
      flex: var(--tab-flex);
      flex-shrink: 0;
      z-index: 1;
}
&[data-v-7093f48e]:focus-visible {
         outline-color: var(
            --tab-switch-focus-color,
            var(--default-focus-color, canvasText)
         );
         outline-style: var(
            --tab-switch-focus-style,
            var(--default-focus-style, solid)
         );
         outline-width: var(
            --tab-switch-focus-width,
            var(--default-focus-width, 2px)
         );
}
&.active[data-v-7093f48e] {
         color: var(--tab-switch-active-color, canvasText);
}
}
&.fixed[data-v-7093f48e] {
      --tab-flex: 1;
      display: flex;
}
&[data-v-7093f48e]::before {
      background-color: var(--tab-switch-active-bg-color, canvas);
      border-radius: var(--_border-radius);
      box-shadow: 0 0 0 1px
         var(
            --tab-switch-color-border,
            var(
               --default-border-color,
               color-mix(in srgb, currentColor 16%, transparent)
            )
         );
      content: var(--tabs-slider-content, "");
      height: calc(100% - var(--_padding) * 2);
      left: 0;
      position: absolute;
      transform-origin: left;
      transition: var(--_transition);
      translate: var(--_left, 0);
      width: var(--_width, 0);
}
}
button[data-v-7093f48e] {
   background-color: transparent;
   border: 0;
   border-radius: var(--_border-radius);
   cursor: pointer;
   font-size: 1rem;
   padding: 0.5rem 1rem;
}

.table-component[data-v-98571c48] {
   background-color: var(--table-bg-color);
   border: var(--table-border);
   border-radius: var(--table-border-radius);
   box-shadow: var(--table-box-shadow);
   display: flex;
   flex-direction: column;
   max-height: var(--table-height);
   overflow-x: auto;
   overflow-y: var(--overflow-y-table);
   padding: var(--table-padding);
}
.table-row {
&[data-v-98571c48] {
   align-items: center;
   background-color: var(--table-row-bg-color);
   border-color: var(
      --table-row-border-color,
      var(
         --default-border-color,
         color-mix(in srgb, currentColor 16%, transparent)
      )
   );
   border-radius: var(--table-row-border-radius);
   border-style: var(--table-row-border-style, solid);
   border-width: var(--table-row-border-width, 1px 0 0 0);
   display: var(--table-row-display, grid);
   gap: var(--table-row-gap);
   grid-template-areas: var(--table-row-template-areas);
   grid-template-columns: var(
      --table-columns,
      repeat(auto-fit, minmax(100px, 1fr))
   );
   margin: var(--table-row-margin);
   padding: var(--table-row-padding);
   position: relative;
   }
&.selected[data-v-98571c48] {
      background-color: var(
         --table-cell-bg-color-selected,
         color-mix(in srgb, currentColor 4%, transparent)
      );
}
&[data-v-98571c48]:not(.selected):not(.header):hover::before {
      background-color: var(--table-row-hover-bg-color, currentColor);
      content: "";
      inset: 0;
      opacity: var(--table-row-hover-opacity, 0.08);
      pointer-events: none;
      position: absolute;
}
}
.table-header {
&[data-v-98571c48] {
   align-items: center;
   background: var(--table-header-bg-color);
   border-color: var(--table-header-border-color);
   border-radius: var(--table-header-border-radius);
   border-style: var(--table-header-border-style, solid);
   border-width: var(--table-header-border-width, 0);
   display: var(--table-header-display, grid);
   grid-template-columns: var(
      --table-columns,
      repeat(auto-fit, minmax(100px, 1fr))
   );
   margin: var(--table-header-margin);
   padding: var(--table-header-padding);
   }
.table-header-cell {
&[data-v-98571c48] {
      align-items: center;
      color: var(--table-header-color);
      cursor: pointer;
      display: flex;
      font-weight: 500;
      height: var(--table-header-height, 56px);
      outline-color: transparent;
      outline-offset: -2px;
      outline-style: var(
         --table-header-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --table-header-focus-width,
         var(--default-focus-width, 2px)
      );
      padding-inline: var(
         --table-header-padding-inline,
         var(--table-cell-padding-inline, 1rem)
      );
      text-align: left;
      user-select: none;
      }
&[data-v-98571c48]:hover {
         background-color: color-mix(in srgb, currentColor 4%, transparent);
}
.label[data-v-98571c48] {
         font-size: 1rem;
         margin-right: 0.5rem;
         opacity: 0.7;
}
.sortIcon[data-v-98571c48] {
         font-size: 0.875rem;
         opacity: 0;
}
&.active {
.label[data-v-98571c48] {
            opacity: 1;
}
.sortIcon[data-v-98571c48] {
            opacity: 1;
}
}
&[data-v-98571c48]:focus-visible {
         outline-color: var(
            --table-header-focus-color,
            var(--default-focus-color, canvasText)
         );
}
&.disabled[data-v-98571c48] {
         pointer-events: none;
}
}
}
.checkbox-cell[data-v-98571c48] {
   padding-left: 1rem;
   padding-right: 1rem;
   width: 64px;
}
.pagination-container {
&[data-v-98571c48] {
   align-items: center;
   background-color: var(--table-pagination-bg-color);
   border-color: var(
      --table-pagination-border-color,
      var(
         --default-border-color,
         color-mix(in srgb, currentColor 16%, transparent)
      )
   );
   border-radius: var(--table-pagination-border-radius);
   border-style: var(--table-pagination-border-style, solid);
   border-width: var(--table-pagination-border-width, 1px 0 0 0);
   display: flex;
   gap: 1rem;
   padding: var(--table-pagination-padding, 1rem);
   }
.perPage[data-v-98571c48] {
      align-items: center;
      display: flex;
      font-size: 0.875rem;
      gap: 0.5rem;
      margin-left: auto;
}
.pagination[data-v-98571c48] {
      font-size: 0.75rem;
}
}
.noResults[data-v-98571c48] {
   align-items: center;
   border-top: 1px solid var(--table-border-color);
   display: flex;
   font-size: 0.875rem;
   height: var(--table-row-height, 52px);
   justify-content: center;
   opacity: 0.7;
}

.cell {
&[data-v-9c70e87d] {
   align-items: center;
   background-color: var(--table-cell-bg-color);
   color: var(--table-cell-color);
   display: flex;
   font-size: var(--table-cell-font-size);
   font-weight: var(--table-cell-font-weight);
   height: var(--table-cell-height, 52px);
   min-width: 0;
   padding-inline: var(--table-cell-padding-inline, 1rem);
}
&.selected[data-v-9c70e87d] {
      background-color: var(--table-cell-bg-color-selected);
}
}
span[data-v-9c70e87d] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.tab-component {
&[data-v-84654681] {
   -webkit-tap-highlight-color: transparent;
   align-items: var(--tab-align-items, center);
   background-color: var(--tab-bg-color);
   border: var(--tab-border);
   border-radius: var(--tab-border-radius);
   color: var(--tab-color, canvasText);
   cursor: pointer;
   display: var(--tab-display, flex);
   flex: var(--tab-flex);
   font-family: var(--font-family);
   font-size: var(--tab-font-size, 1rem);
   font-weight: var(--tab-font-weight, 500);
   gap: var(--tab-gap);
   justify-content: var(--tab-justify-content, center);
   line-height: var(--tab-line-height, 24px);
   margin: var(--tab-margin);
   overflow: hidden;
   padding: var(--tab-padding, 12px 24px);
   position: relative;
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;
   text-transform: var(--tab-text-transform);
   transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
   white-space: nowrap;
}
&[data-v-84654681]::before {
      background-color: currentColor;
      content: " ";
      inset: 0;
      opacity: var(--tab-opacity-before, 0);
      pointer-events: none;
      position: absolute;
      transition: opacity 0.3s ease;
      will-change: opacity;
      z-index: 0;
}
&[data-v-84654681]::after {
      background-color: var(--tab-indicator-color, currentColor);
      bottom: 0;
      content: "";
      height: var(--tab-indicator-height, 2px);
      left: 0;
      opacity: var(--_indicator-opacity, 0);
      pointer-events: none;
      position: absolute;
      right: 0;
      transition: opacity var(--tab-indicator-transition-duration, 0ms);
      z-index: 1;
}
&[data-v-84654681]:hover {
      --tab-opacity-before: 0.08;
}
&[data-v-84654681]:active {
      --tab-opacity-before: 0.16;
}
&[aria-selected="true"][data-v-84654681] {
      --_indicator-opacity: 1;
      --tab-bg-color: var(--tab-selected-bg-color);
      --tab-border: var(--tab-selected-border);
      --tab-color: var(--tab-selected-color, canvasText);
      --tab-opacity-before: 0;
}
&[data-v-84654681]:focus-visible {
      outline-color: var(
         --tab-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-offset: -2px;
      outline-style: var(--tab-focus-style, var(--default-focus-style, solid));
      outline-width: var(--tab-focus-width, var(--default-focus-width, 2px));
}
.tab-component-content[data-v-84654681] {
      position: relative;
      z-index: var(--z-index-tab-before-content, 1);
}
}

.tabs-component[data-v-610167fb] {
   width: 100%;
}
[role="tablist"] {
&[data-v-610167fb] {
   background-color: var(--tabs-bg-color);
   border-bottom: var(
      --tabs-border,
      1px solid
         var(
            --default-border-color,
            color-mix(in srgb, currentColor 16%, transparent)
         )
   );
   border-radius: var(--tabs-border-radius);
   box-shadow: var(--tabs-box-shadow);
   display: var(--tabs-display, flex);
   gap: var(--tabs-gap);
   grid-template-columns: var(--tabs-grid-columns);
   inset: var(--tabs-inset);
   margin-block: var(--tabs-margin-block);
   overflow-x: auto;
   padding-block: var(--tabs-padding-block);
   padding-inline: var(--tabs-padding-inline);
   position: var(--tabs-position, relative);
   scrollbar-color: transparent transparent;
   /* Hide the scrollbar */
   scrollbar-width: thin;
   /* Hide the scrollbar */
   width: var(--tabs-width);
   z-index: var(--z-index-tabs);
   }
button[data-v-610167fb] {
      flex-shrink: 0;
}
&.fixed[data-v-610167fb] {
      --tab-flex: 1;
      display: flex;
}
&[data-v-610167fb]::-webkit-scrollbar {
      background-color: transparent;
      height: 0;
      width: 0;
}
}

.tab[data-v-b0483395] {
   align-items: center;
   display: inline-flex;
   gap: 0.5rem;
}

.textarea-component {
&[data-v-df1f60c9] {
   display: inline-grid;
   gap: var(--textarea-gap, 0.25rem);
   margin-block: var(--textarea-margin-block);
   width: var(--textarea-width, 100%);
}
&.disabled[data-v-df1f60c9] {
      opacity: var(--textarea-disabled-opacity, 0.6);
      pointer-events: none;
}
}
.field-container {
&[data-v-df1f60c9] {
   background-color: var(
      --textarea-bg-color,
      var(--default-form-control-bg-color)
   );
   border-color: var(
      --textarea-border-color,
      var(--default-form-control-border-color, canvasText)
   );
   border-radius: var(
      --textarea-border-radius,
      var(--default-form-control-border-radius)
   );
   border-style: var(
      --textarea-border-style,
      var(--default-form-control-border-style, solid)
   );
   border-width: var(
      --textarea-border-width,
      var(--default-form-control-border-width, 1px)
   );
   display: flex;
   transition:
      border-color var(--focus-transition, 0ms),
      outline-color var(--focus-transition, 0ms);
}
&[data-v-df1f60c9]:focus-within {
      border-color: var(
         --textarea-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-color: var(
         --textarea-focus-color,
         var(--default-focus-color, canvasText)
      );
      outline-offset: 0px;
      outline-style: var(
         --textarea-focus-style,
         var(--default-focus-style, solid)
      );
      outline-width: var(
         --textarea-focus-width,
         var(--default-focus-width, 2px)
      );
}
}
textarea {
&[data-v-df1f60c9] {
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
   border: none;
   box-sizing: border-box;
   color: var(--textarea-color, var(--default-form-control-text, canvasText));
   field-sizing: content;
   font-family: var(
      --textarea-font-family,
      var(--default-form-control-font-family, var(--font-family))
   );
   font-size: var(
      --textarea-font-size,
      var(--default-form-control-font-size, 1rem)
   );
   line-height: var(--textarea-line-height, 24px);
   max-height: var(--textarea-max-height, 300px);
   min-height: var(--textarea-min-height, 100px);
   outline: none;
   padding-block: var(
      --textarea-padding-block,
      var(--default-form-control-padding-block, 0.75rem)
   );
   padding-inline: var(
      --textarea-padding-inline,
      var(--default-form-control-padding-inline, 1rem)
   );
   resize: none;
   width: 100%;
}
&[data-v-df1f60c9]::placeholder {
      color: var(
         --textarea-placeholder-color,
         var(
            --default-form-control-placeholder-color,
            color-mix(in srgb, currentColor 60%, transparent)
         )
      );
}
&[data-v-df1f60c9]:disabled {
      cursor: not-allowed;
}
}

/* Error state overrides the field border */
.textarea-component.error .field-container {
&[data-v-df1f60c9] {
   border-color: var(
      --textarea-error-color,
      var(--default-form-control-error-color, red)
   );
}
&[data-v-df1f60c9]:focus-within {
      border-color: var(
         --textarea-error-color,
         var(--default-form-control-error-color, red)
      );
      outline-color: var(
         --textarea-error-color,
         var(--default-form-control-error-color, red)
      );
}
}

.app-component {
&[data-v-c482805f] {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr);
   min-height: 100vh;
}
aside[data-v-c482805f] {
      border-right: 1px solid color-mix(in srgb, currentColor 16%, transparent);
      display: flex;
      flex-direction: column;
      height: 100vh;
      position: sticky;
      top: 0;
}
h1[data-v-c482805f] {
      font-size: 1.25rem;
      padding: 1.5rem 1rem 1rem;
}
nav[data-v-c482805f] {
      --list-item-height: 36px;
      flex: 1;
      overflow-y: auto;
      padding-inline: 0.5rem;
}
.theme-toggle[data-v-c482805f] {
      border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
      padding: 1rem;
}
main[data-v-c482805f] {
      margin-inline: auto;
      max-width: 960px;
      padding: 1rem 1.5rem 4rem;
      width: 100%;
}
@media (width < 768px) {
&[data-v-c482805f] {
      grid-template-columns: minmax(0, 1fr);
}
aside[data-v-c482805f] {
         border-bottom: 1px solid
            color-mix(in srgb, currentColor 16%, transparent);
         border-right: 0;
         height: auto;
         position: static;
}
nav[data-v-c482805f] {
         max-height: 40vh;
}
}
}
/*
   Minimal reset for the shell. It deliberately sets no design tokens, so the
   components show their own fallbacks.
*/
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   /* Follows the system until the toggle sets an explicit choice */
   color-scheme: light dark;
   font-size: 16px;

   &[data-theme="light"] {
      color-scheme: light;
   }

   &[data-theme="dark"] {
      color-scheme: dark;
   }
}

body {
   background-color: canvas;
   color: canvasText;
   font-family: system-ui, sans-serif;
   min-height: 100vh;
}

img {
   width: 100%;
}

output {
   display: block;
   font-size: 0.875rem;
}