/*!***********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./assets/scss/app.scss ***!
  \***********************************************************************************************************************************************************************/
@charset "UTF-8";
@layer library, reset, ui, theme, override;
@layer library {
  .fa-solid,
  .fa-regular,
  .fa-brands,
  .fa-classic,
  .fas,
  .far,
  .fab,
  .fal,
  .fat,
  .fad,
  .fadr,
  .fadl,
  .fadt,
  .fass,
  .fasr,
  .fasl,
  .fast,
  .fasds,
  .fasdr,
  .fasdl,
  .fasdt,
  .faslr,
  .faslpr,
  .fasldr,
  .faslpdr,
  .fapr,
  .fams,
  .favs,
  .fawsb,
  .fatl,
  .fans,
  .fands,
  .faes,
  .fagt,
  .fajr,
  .fajfr,
  .fajdr,
  .facr,
  .fausb,
  .faudsb,
  .faufsb,
  .fa-solid,
  .fa-semibold,
  .fa-regular,
  .fa-light,
  .fa-thin,
  .fa-brands,
  .fa-classic,
  .fa-duotone,
  .fa-sharp,
  .fa-sharp-duotone,
  .fa-chisel,
  .fa-etch,
  .fa-graphite,
  .fa-jelly,
  .fa-jelly-duo,
  .fa-jelly-fill,
  .fa-mosaic,
  .fa-notdog,
  .fa-notdog-duo,
  .fa-pixel,
  .fa-slab,
  .fa-slab-duo,
  .fa-slab-press,
  .fa-slab-press-duo,
  .fa-thumbprint,
  .fa-utility,
  .fa-utility-duo,
  .fa-utility-fill,
  .fa-vellum,
  .fa-whiteboard,
  .fa {
    --_fa-family: var(--fa-family, var(--fa-style-family, 'Font Awesome 7 Pro'));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: var(--fa-display, inline-block);
    font-family: var(--_fa-family);
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: var(--fa-style, 900);
    line-height: 1;
    text-align: center;
    text-rendering: auto;
    width: var(--fa-width, 1.25em);
  }
  :is(.fas,
  .fass,
  .far,
  .fasr,
  .fal,
  .fasl,
  .fat,
  .fast,
  .fad,
  .fadr,
  .fadl,
  .fadt,
  .fasds,
  .fasdr,
  .fasdl,
  .fasdt,
  .fab,
  .faslr,
  .faslpr,
  .fasldr,
  .faslpdr,
  .fapr,
  .fams,
  .favs,
  .fawsb,
  .fatl,
  .fans,
  .fands,
  .faes,
  .fagt,
  .fajr,
  .fajfr,
  .fajdr,
  .facr,
  .fausb,
  .faudsb,
  .faufsb,
  .fa-solid,
  .fa-semibold,
  .fa-regular,
  .fa-light,
  .fa-thin,
  .fa-brands,
  .fa-classic,
  .fa-duotone,
  .fa-sharp,
  .fa-sharp-duotone,
  .fa-chisel,
  .fa-etch,
  .fa-graphite,
  .fa-jelly,
  .fa-jelly-duo,
  .fa-jelly-fill,
  .fa-mosaic,
  .fa-notdog,
  .fa-notdog-duo,
  .fa-pixel,
  .fa-slab,
  .fa-slab-duo,
  .fa-slab-press,
  .fa-slab-press-duo,
  .fa-thumbprint,
  .fa-utility,
  .fa-utility-duo,
  .fa-utility-fill,
  .fa-vellum,
  .fa-whiteboard,
  .fa)::before {
    content: var(--fa)/"";
  }
  @supports not (content: ""/"") {
    :is(.fas,
    .fass,
    .far,
    .fasr,
    .fal,
    .fasl,
    .fat,
    .fast,
    .fad,
    .fadr,
    .fadl,
    .fadt,
    .fasds,
    .fasdr,
    .fasdl,
    .fasdt,
    .fab,
    .faslr,
    .faslpr,
    .fasldr,
    .faslpdr,
    .fapr,
    .fams,
    .favs,
    .fawsb,
    .fatl,
    .fans,
    .fands,
    .faes,
    .fagt,
    .fajr,
    .fajfr,
    .fajdr,
    .facr,
    .fausb,
    .faudsb,
    .faufsb,
    .fa-solid,
    .fa-semibold,
    .fa-regular,
    .fa-light,
    .fa-thin,
    .fa-brands,
    .fa-classic,
    .fa-duotone,
    .fa-sharp,
    .fa-sharp-duotone,
    .fa-chisel,
    .fa-etch,
    .fa-graphite,
    .fa-jelly,
    .fa-jelly-duo,
    .fa-jelly-fill,
    .fa-mosaic,
    .fa-notdog,
    .fa-notdog-duo,
    .fa-pixel,
    .fa-slab,
    .fa-slab-duo,
    .fa-slab-press,
    .fa-slab-press-duo,
    .fa-thumbprint,
    .fa-utility,
    .fa-utility-duo,
    .fa-utility-fill,
    .fa-vellum,
    .fa-whiteboard,
    .fa)::before {
      content: var(--fa);
    }
  }
  :is(.fad,
  .fa-duotone,
  .fadr,
  .fadl,
  .fadt,
  .fasds,
  .fa-sharp-duotone,
  .fasdr,
  .fasdl,
  .fasdt,
  .fatl,
  .fa-thumbprint,
  .fands,
  .fa-notdog-duo,
  .fajdr,
  .fa-jelly-duo,
  .faudsb,
  .fa-utility-duo,
  .fasldr,
  .fa-slab-duo,
  .faslpdr,
  .fa-slab-press-duo,
  .favs,
  .fa-vellum)::after {
    content: var(--fa)/"";
    font-feature-settings: "ss01";
  }
  @supports not (content: ""/"") {
    :is(.fad,
    .fa-duotone,
    .fadr,
    .fadl,
    .fadt,
    .fasds,
    .fa-sharp-duotone,
    .fasdr,
    .fasdl,
    .fasdt,
    .fatl,
    .fa-thumbprint,
    .fands,
    .fa-notdog-duo,
    .fajdr,
    .fa-jelly-duo,
    .faudsb,
    .fa-utility-duo,
    .fasldr,
    .fa-slab-duo,
    .faslpdr,
    .fa-slab-press-duo,
    .favs,
    .fa-vellum)::after {
      content: var(--fa);
    }
  }
  .fa-1x {
    font-size: 1em;
  }
  .fa-2x {
    font-size: 2em;
  }
  .fa-3x {
    font-size: 3em;
  }
  .fa-4x {
    font-size: 4em;
  }
  .fa-5x {
    font-size: 5em;
  }
  .fa-6x {
    font-size: 6em;
  }
  .fa-7x {
    font-size: 7em;
  }
  .fa-8x {
    font-size: 8em;
  }
  .fa-9x {
    font-size: 9em;
  }
  .fa-10x {
    font-size: 10em;
  }
  .fa-2xs {
    font-size: 0.625em; /* converts a 10px size into an em-based value that's relative to the scale's 16px base */
    line-height: 0.1em; /* sets the line-height of the icon back to that of it's parent */
    vertical-align: 0.225em; /* vertically centers the icon taking into account the surrounding text's descender */
  }
  .fa-xs {
    font-size: 0.75em; /* converts a 12px size into an em-based value that's relative to the scale's 16px base */
    line-height: 0.0833333333em; /* sets the line-height of the icon back to that of it's parent */
    vertical-align: 0.125em; /* vertically centers the icon taking into account the surrounding text's descender */
  }
  .fa-sm {
    font-size: 0.875em; /* converts a 14px size into an em-based value that's relative to the scale's 16px base */
    line-height: 0.0714285714em; /* sets the line-height of the icon back to that of it's parent */
    vertical-align: 0.0535714286em; /* vertically centers the icon taking into account the surrounding text's descender */
  }
  .fa-lg {
    font-size: 1.25em; /* converts a 20px size into an em-based value that's relative to the scale's 16px base */
    line-height: 0.05em; /* sets the line-height of the icon back to that of it's parent */
    vertical-align: -0.075em; /* vertically centers the icon taking into account the surrounding text's descender */
  }
  .fa-xl {
    font-size: 1.5em; /* converts a 24px size into an em-based value that's relative to the scale's 16px base */
    line-height: 0.0416666667em; /* sets the line-height of the icon back to that of it's parent */
    vertical-align: -0.125em; /* vertically centers the icon taking into account the surrounding text's descender */
  }
  .fa-2xl {
    font-size: 2em; /* converts a 32px size into an em-based value that's relative to the scale's 16px base */
    line-height: 0.03125em; /* sets the line-height of the icon back to that of it's parent */
    vertical-align: -0.1875em; /* vertically centers the icon taking into account the surrounding text's descender */
  }
  .fa-width-auto {
    --fa-width: auto;
  }
  .fa-fw,
  .fa-width-fixed {
    --fa-width: 1.25em;
  }
  .fa-canvas-square {
    padding-block: 0.125em;
    margin-block-end: -0.125em;
  }
  .fa-canvas-roomy {
    padding-block: 0.25em;
    padding-inline: 0.125em;
    margin-block-end: -0.25em;
    box-sizing: content-box;
  }
  .fa-ul {
    list-style-type: none;
    margin-inline-start: var(--fa-li-margin, 2.5em);
    padding-inline-start: 0;
  }
  .fa-ul > li {
    position: relative;
  }
  .fa-li {
    inset-inline-start: calc(-1 * var(--fa-li-width, 2em));
    position: absolute;
    text-align: center;
    width: var(--fa-li-width, 2em);
    line-height: inherit;
  }
  /* Heads Up: Bordered Icons will not be supported in the future!
    - This feature will be deprecated in the next major release of Font Awesome (v8)!
    - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
  */
  /* Notes:
  * --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
  * --@{v.$css-prefix}-border-padding =
    ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
    ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
  */
  .fa-border {
    border-color: var(--fa-border-color, #eee);
    border-radius: var(--fa-border-radius, 0.1em);
    border-style: var(--fa-border-style, solid);
    border-width: var(--fa-border-width, 0.0625em);
    box-sizing: var(--fa-border-box-sizing, content-box);
    padding: var(--fa-border-padding, 0.1875em 0.25em);
  }
  .fa-pull-left,
  .fa-pull-start {
    float: inline-start;
    margin-inline-end: var(--fa-pull-margin, 0.3em);
  }
  .fa-pull-right,
  .fa-pull-end {
    float: inline-end;
    margin-inline-start: var(--fa-pull-margin, 0.3em);
  }
  .fa-beat {
    animation-name: fa-beat;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
  }
  .fa-bounce {
    animation-name: fa-bounce;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
  }
  .fa-fade {
    animation-name: fa-fade;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
  }
  .fa-beat-fade {
    animation-name: fa-beat-fade;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
  }
  .fa-flip {
    animation-name: fa-flip;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1.5s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
  }
  .fa-flip-360 {
    animation-name: fa-flip-360;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
  }
  .fa-shake {
    animation-name: fa-shake;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 0.75s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
  }
  .fa-spin {
    animation-name: fa-spin;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 2s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
  }
  .fa-spin-reverse {
    --fa-animation-direction: reverse;
  }
  .fa-pulse,
  .fa-spin-pulse {
    animation-name: fa-spin;
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, steps(8));
  }
  .fa-spin-snap {
    animation-name: fa-spin-snap;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 3s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
  }
  .fa-spin-snap-4 {
    animation-name: fa-spin-snap-4;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 2.4s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
  }
  .fa-spin-snap-8 {
    animation-name: fa-spin-snap-8;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 4s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
  }
  .fa-buzz {
    animation-name: fa-buzz;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 0.6s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
  }
  .fa-wag {
    animation-name: fa-wag;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 0.9s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-out);
    transform-origin: bottom center;
  }
  .fa-float {
    animation-name: fa-float;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 3s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-in-out);
    will-change: transform;
  }
  .fa-swing {
    animation-name: fa-swing;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1.2s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-out);
    transform-origin: top center;
  }
  .fa-jello {
    animation-name: fa-jello;
    animation-delay: var(--fa-animation-delay, 0s);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 0.9s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .fa-beat,
    .fa-bounce,
    .fa-fade,
    .fa-beat-fade,
    .fa-flip,
    .fa-flip-360,
    .fa-pulse,
    .fa-shake,
    .fa-spin,
    .fa-spin-pulse,
    .fa-buzz,
    .fa-float,
    .fa-jello,
    .fa-spin-snap,
    .fa-spin-snap-4,
    .fa-spin-snap-8,
    .fa-swing,
    .fa-wag {
      animation: none !important;
      transition: none !important;
    }
  }
  @keyframes fa-beat {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(calc(1.25 * var(--fa-beat-scale, 1.25)));
    }
    45% {
      transform: scale(calc(1.22 * var(--fa-beat-scale, 1.22)));
    }
    65% {
      transform: scale(calc(1.25 * var(--fa-beat-scale, 1.25)));
    }
    90% {
      transform: scale(1);
    }
  }
  @keyframes fa-bounce {
    0% {
      transform: scale(1, 1) translateY(0);
      animation-timing-function: var(--fa-animation-timing);
    }
    14% {
      transform: scale(var(--fa-bounce-start-scale-x, 1.06), var(--fa-bounce-start-scale-y, 0.94)) translateY(var(--fa-bounce-anticipation, 3px));
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
    }
    32% {
      transform: scale(var(--fa-bounce-jump-scale-x, 0.94), var(--fa-bounce-jump-scale-y, 1.12)) translateY(calc(-1 * var(--fa-bounce-height, 0.5em)));
      animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    }
    52% {
      transform: scale(1, 1) translateY(calc(-1 * var(--fa-bounce-height, 0.5em) * 1.1));
      animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
    }
    70% {
      transform: scale(var(--fa-bounce-land-scale-x, 1.06), var(--fa-bounce-land-scale-y, 0.92)) translateY(0);
      animation-timing-function: cubic-bezier(0.33, 0.33, 0.66, 1);
    }
    85% {
      transform: scale(0.98, 1.04) translateY(calc(-2px * var(--fa-bounce-rebound, 1)));
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
    }
    100% {
      transform: scale(1, 1) translateY(0);
    }
  }
  @keyframes fa-fade {
    0% {
      opacity: 1;
      transform: scale(1);
      animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
    }
    40% {
      opacity: var(--fa-fade-opacity, 0.4);
      transform: scale(0.98);
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes fa-beat-fade {
    0% {
      opacity: var(--fa-beat-fade-opacity, 0.4);
      transform: scale(1);
      animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
    }
    25% {
      opacity: calc(var(--fa-beat-fade-opacity, 0.4) + 0.4);
      transform: scale(var(--fa-beat-fade-scale, 1.28));
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    45% {
      opacity: 1;
      transform: scale(var(--fa-beat-fade-scale, 1.25));
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    65% {
      opacity: calc(var(--fa-beat-fade-opacity, 0.4) + 0.4);
      transform: scale(var(--fa-beat-fade-scale, 1.28));
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    100% {
      opacity: var(--fa-beat-fade-opacity, 0.4);
      transform: scale(1);
    }
  }
  @keyframes fa-flip {
    0% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
      animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
    }
    8% {
      transform: perspective(2em) scale(var(--fa-flip-anticipation-scale, 0.95)) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
    }
    35% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * 0.6));
      animation-timing-function: linear;
    }
    65% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * 0.5));
      animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    }
    92% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * var(--fa-flip-overshoot, 1.04)));
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
    }
    100% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -360deg));
    }
  }
  @keyframes fa-flip-360 {
    0% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
      animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
    }
    8% {
      transform: perspective(2em) scale(var(--fa-flip-anticipation-scale, 0.95)) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
    }
    50% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * 0.6));
      animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    }
    80% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * var(--fa-flip-overshoot, 1.04)));
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
    }
    100% {
      transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -360deg));
    }
  }
  @keyframes fa-shake {
    0% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    8% {
      transform: rotate(35deg) translateX(1px);
      animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    }
    20% {
      transform: rotate(-22deg) translateX(-1px);
      animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    }
    35% {
      transform: rotate(15deg) translateX(1px);
      animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    }
    50% {
      transform: rotate(-9deg);
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    65% {
      transform: rotate(5deg);
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    78% {
      transform: rotate(-3deg);
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    90% {
      transform: rotate(1deg);
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes fa-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes fa-spin-snap {
    0% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    12% {
      transform: rotate(60deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    16.67% {
      transform: rotate(60deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    28.67% {
      transform: rotate(120deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    33.33% {
      transform: rotate(120deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    45.33% {
      transform: rotate(180deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: rotate(180deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    62% {
      transform: rotate(240deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    66.67% {
      transform: rotate(240deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    78.67% {
      transform: rotate(300deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    83.33% {
      transform: rotate(300deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    95.33% {
      transform: rotate(360deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes fa-spin-snap-4 {
    0% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    15% {
      transform: rotate(90deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    25% {
      transform: rotate(90deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    40% {
      transform: rotate(180deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: rotate(180deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    65% {
      transform: rotate(270deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    75% {
      transform: rotate(270deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    90% {
      transform: rotate(360deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes fa-spin-snap-8 {
    0% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    9% {
      transform: rotate(45deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    12.5% {
      transform: rotate(45deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    21.5% {
      transform: rotate(90deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    25% {
      transform: rotate(90deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    34% {
      transform: rotate(135deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    37.5% {
      transform: rotate(135deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    46.5% {
      transform: rotate(180deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: rotate(180deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    59% {
      transform: rotate(225deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    62.5% {
      transform: rotate(225deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    71.5% {
      transform: rotate(270deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    75% {
      transform: rotate(270deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    84% {
      transform: rotate(315deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    87.5% {
      transform: rotate(315deg);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    96.5% {
      transform: rotate(360deg);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes fa-buzz {
    0% {
      transform: translateX(0) rotate(0deg);
      animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
    }
    5% {
      transform: translateX(var(--fa-buzz-distance, 4px)) rotate(0.5deg);
    }
    10% {
      transform: translateX(calc(-1 * var(--fa-buzz-distance, 4px))) rotate(-0.5deg);
    }
    15% {
      transform: translateX(var(--fa-buzz-distance, 4px)) rotate(0.3deg);
    }
    20% {
      transform: translateX(calc(-1 * var(--fa-buzz-distance, 4px))) rotate(-0.3deg);
    }
    25% {
      transform: translateX(calc(var(--fa-buzz-distance, 4px) * 0.7)) rotate(0.2deg);
    }
    30% {
      transform: translateX(calc(-1 * var(--fa-buzz-distance, 4px) * 0.7)) rotate(-0.2deg);
    }
    35% {
      transform: translateX(calc(var(--fa-buzz-distance, 4px) * 0.4)) rotate(0.1deg);
    }
    40% {
      transform: translateX(0) rotate(0deg);
    }
    100% {
      transform: translateX(0) rotate(0deg);
    }
  }
  @keyframes fa-wag {
    0% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
    }
    12% {
      transform: rotate(var(--fa-wag-angle, 12deg));
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    24% {
      transform: rotate(2deg);
      animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
    }
    36% {
      transform: rotate(calc(var(--fa-wag-angle, 12deg) * 0.85));
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    48% {
      transform: rotate(1deg);
      animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
    }
    58% {
      transform: rotate(calc(var(--fa-wag-angle, 12deg) * 0.6));
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    68% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes fa-float {
    0% {
      transform: translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x, 1.02), var(--fa-float-squash-y, 0.98));
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
    }
    15% {
      transform: translateY(calc(-0.4 * var(--fa-float-height, 6px))) translateX(var(--fa-float-drift, 1px)) rotate(var(--fa-float-tilt, 1deg)) scale(1, 1);
      animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    }
    35% {
      transform: translateY(calc(-1 * var(--fa-float-height, 6px))) translateX(0) rotate(0deg) scale(var(--fa-float-stretch-x, 0.98), var(--fa-float-stretch-y, 1.03));
      animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0);
    }
    50% {
      transform: translateY(calc(-0.92 * var(--fa-float-height, 6px))) translateX(calc(-0.5 * var(--fa-float-drift, 1px))) rotate(calc(-0.5 * var(--fa-float-tilt, 1deg))) scale(0.995, 1.01);
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
    }
    70% {
      transform: translateY(calc(-0.3 * var(--fa-float-height, 6px))) translateX(calc(-1 * var(--fa-float-drift, 1px))) rotate(calc(-1 * var(--fa-float-tilt, 1deg))) scale(1, 1);
      animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    }
    90% {
      transform: translateY(calc(0.05 * var(--fa-float-height, 6px))) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x, 1.02), var(--fa-float-squash-y, 0.98));
      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
    }
    100% {
      transform: translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x, 1.02), var(--fa-float-squash-y, 0.98));
    }
  }
  @keyframes fa-swing {
    0% {
      transform: rotate(0deg);
      animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    8% {
      transform: rotate(var(--fa-swing-angle, 22deg));
      animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    }
    18% {
      transform: rotate(calc(-1 * var(--fa-swing-angle, 22deg) * 0.85));
      animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    }
    28% {
      transform: rotate(calc(var(--fa-swing-angle, 22deg) * 0.65));
      animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
    }
    38% {
      transform: rotate(calc(-1 * var(--fa-swing-angle, 22deg) * 0.45));
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    48% {
      transform: rotate(calc(var(--fa-swing-angle, 22deg) * 0.25));
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    56% {
      transform: rotate(calc(-1 * var(--fa-swing-angle, 22deg) * 0.1));
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    64% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes fa-jello {
    0% {
      transform: scale(1, 1);
      animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    12% {
      transform: scale(var(--fa-jello-scale-x, 1.15), calc(2 - var(--fa-jello-scale-x, 1.15)));
      animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    }
    24% {
      transform: scale(calc(2 - var(--fa-jello-scale-y, 1.12)), var(--fa-jello-scale-y, 1.12));
      animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
    }
    36% {
      transform: scale(calc(1 + (var(--fa-jello-scale-x, 1.15) - 1) * 0.5), calc(2 - (1 + (var(--fa-jello-scale-x, 1.15) - 1) * 0.5)));
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    48% {
      transform: scale(calc(2 - (1 + (var(--fa-jello-scale-y, 1.12) - 1) * 0.3)), calc(1 + (var(--fa-jello-scale-y, 1.12) - 1) * 0.3));
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    58% {
      transform: scale(1.02, 0.98);
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    68% {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  .fa-rotate-90 {
    transform: rotate(90deg);
  }
  .fa-rotate-180 {
    transform: rotate(180deg);
  }
  .fa-rotate-270 {
    transform: rotate(270deg);
  }
  .fa-flip-horizontal {
    transform: scale(-1, 1);
  }
  .fa-flip-vertical {
    transform: scale(1, -1);
  }
  .fa-flip-both,
  .fa-flip-horizontal.fa-flip-vertical {
    transform: scale(-1, -1);
  }
  .fa-rotate-by {
    transform: rotate(var(--fa-rotate-angle, 0));
  }
  .fa-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em;
  }
  .fa-stack-1x,
  .fa-stack-2x {
    --fa-width: 100%;
    inset: 0;
    position: absolute;
    text-align: center;
    width: var(--fa-width);
    z-index: var(--fa-stack-z-index, auto);
  }
  .fa-stack-1x {
    line-height: inherit;
  }
  .fa-stack-2x {
    font-size: 2em;
  }
  .fa-inverse {
    color: var(--fa-inverse, #fff);
  }
  /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
     readers do not read off random characters that represent icons */
  .fa-00 {
    --fa: "\e467";
  }
  .fa-add {
    --fa: "\2b";
  }
  .fa-address-book {
    --fa: "\f2b9";
  }
  .fa-analytics {
    --fa: "\f643";
  }
  .fa-arrow-down {
    --fa: "\f063";
  }
  .fa-arrow-left {
    --fa: "\f060";
  }
  .fa-arrow-pointer {
    --fa: "\f245";
  }
  .fa-arrow-right {
    --fa: "\f061";
  }
  .fa-arrow-right-from-bracket {
    --fa: "\f08b";
  }
  .fa-arrow-right-to-file {
    --fa: "\f56f";
  }
  .fa-arrow-turn-down-right {
    --fa: "\e3d6";
  }
  .fa-arrow-turn-left-up {
    --fa: "\e634";
  }
  .fa-arrow-up {
    --fa: "\f062";
  }
  .fa-arrow-up-arrow-down {
    --fa: "\e099";
  }
  .fa-arrow-up-right-from-square {
    --fa: "\f08e";
  }
  .fa-arrows-from-line {
    --fa: "\e0a4";
  }
  .fa-arrows-rotate {
    --fa: "\f021";
  }
  .fa-arrows-to-line {
    --fa: "\e0a7";
  }
  .fa-ballot {
    --fa: "\f732";
  }
  .fa-ballot-check {
    --fa: "\f733";
  }
  .fa-ban {
    --fa: "\f05e";
  }
  .fa-bank {
    --fa: "\f19c";
  }
  .fa-barcode-read {
    --fa: "\f464";
  }
  .fa-barcode-scan {
    --fa: "\f465";
  }
  .fa-bars {
    --fa: "\f0c9";
  }
  .fa-bars-filter {
    --fa: "\e0ad";
  }
  .fa-bars-staggered {
    --fa: "\f550";
  }
  .fa-bell {
    --fa: "\f0f3";
  }
  .fa-bells {
    --fa: "\f77f";
  }
  .fa-bolt {
    --fa: "\f0e7";
  }
  .fa-bolt-lightning {
    --fa: "\e0b7";
  }
  .fa-book-user {
    --fa: "\f7e7";
  }
  .fa-box {
    --fa: "\f466";
  }
  .fa-box-arrow-down {
    --fa: "\e794";
  }
  .fa-box-circle-check {
    --fa: "\e0c4";
  }
  .fa-box-full {
    --fa: "\f49c";
  }
  .fa-box-isometric-tape {
    --fa: "\e798";
  }
  .fa-box-open-full {
    --fa: "\f49c";
  }
  .fa-boxes {
    --fa: "\f468";
  }
  .fa-boxes-alt {
    --fa: "\f468";
  }
  .fa-boxes-stacked {
    --fa: "\f468";
  }
  .fa-building-columns {
    --fa: "\f19c";
  }
  .fa-calendar-alt {
    --fa: "\f073";
  }
  .fa-calendar-circle-user {
    --fa: "\e471";
  }
  .fa-calendar-clock {
    --fa: "\e0d2";
  }
  .fa-calendar-days {
    --fa: "\f073";
  }
  .fa-calendar-image {
    --fa: "\e0d4";
  }
  .fa-calendar-time {
    --fa: "\e0d2";
  }
  .fa-cancel {
    --fa: "\f05e";
  }
  .fa-cards-blank {
    --fa: "\e4df";
  }
  .fa-cart-flatbed-boxes {
    --fa: "\f475";
  }
  .fa-cart-shopping {
    --fa: "\f07a";
  }
  .fa-chain {
    --fa: "\f0c1";
  }
  .fa-chart-mixed {
    --fa: "\f643";
  }
  .fa-check {
    --fa: "\f00c";
  }
  .fa-check-circle {
    --fa: "\f058";
  }
  .fa-chevron-down {
    --fa: "\f078";
  }
  .fa-chevron-left {
    --fa: "\f053";
  }
  .fa-chevron-right {
    --fa: "\f054";
  }
  .fa-chevron-up {
    --fa: "\f077";
  }
  .fa-circle-bolt {
    --fa: "\e0fe";
  }
  .fa-circle-check {
    --fa: "\f058";
  }
  .fa-circle-exclamation {
    --fa: "\f06a";
  }
  .fa-circle-heart {
    --fa: "\f4c7";
  }
  .fa-circle-info {
    --fa: "\f05a";
  }
  .fa-circle-nodes {
    --fa: "\e4e2";
  }
  .fa-circle-notch {
    --fa: "\f1ce";
  }
  .fa-circle-plus {
    --fa: "\f055";
  }
  .fa-circle-question {
    --fa: "\f059";
  }
  .fa-circle-x {
    --fa: "\e12e";
  }
  .fa-clipboard-check {
    --fa: "\f46c";
  }
  .fa-clipboard-list-check {
    --fa: "\f737";
  }
  .fa-clock {
    --fa: "\f017";
  }
  .fa-clock-four {
    --fa: "\f017";
  }
  .fa-clock-rotate-left {
    --fa: "\f1da";
  }
  .fa-close {
    --fa: "\f00d";
  }
  .fa-code {
    --fa: "\f121";
  }
  .fa-cog {
    --fa: "\f013";
  }
  .fa-coin {
    --fa: "\f85c";
  }
  .fa-coins {
    --fa: "\f51e";
  }
  .fa-columns {
    --fa: "\f0db";
  }
  .fa-columns-3 {
    --fa: "\e361";
  }
  .fa-comment {
    --fa: "\f075";
  }
  .fa-computer {
    --fa: "\e4e5";
  }
  .fa-contact-book {
    --fa: "\f2b9";
  }
  .fa-copy {
    --fa: "\f0c5";
  }
  .fa-credit-card {
    --fa: "\f09d";
  }
  .fa-credit-card-alt {
    --fa: "\f09d";
  }
  .fa-creemee {
    --fa: "\e400";
  }
  .fa-diagram-project {
    --fa: "\f542";
  }
  .fa-dolly-flatbed-alt {
    --fa: "\f475";
  }
  .fa-download {
    --fa: "\f019";
  }
  .fa-ellipsis-v {
    --fa: "\f142";
  }
  .fa-ellipsis-vertical {
    --fa: "\f142";
  }
  .fa-envelope {
    --fa: "\f0e0";
  }
  .fa-envelope-circle-check {
    --fa: "\e4e8";
  }
  .fa-envelope-open-text {
    --fa: "\f658";
  }
  .fa-exclamation {
    --fa: "\21";
  }
  .fa-exclamation-circle {
    --fa: "\f06a";
  }
  .fa-exclamation-triangle {
    --fa: "\f071";
  }
  .fa-external-link {
    --fa: "\f08e";
  }
  .fa-external-link-alt {
    --fa: "\f35d";
  }
  .fa-eye {
    --fa: "\f06e";
  }
  .fa-eye-slash {
    --fa: "\f070";
  }
  .fa-file {
    --fa: "\f15b";
  }
  .fa-file-alt {
    --fa: "\f15c";
  }
  .fa-file-arrow-down {
    --fa: "\f56d";
  }
  .fa-file-brackets-curly {
    --fa: "\e804";
  }
  .fa-file-circle-minus {
    --fa: "\e4ed";
  }
  .fa-file-download {
    --fa: "\f56d";
  }
  .fa-file-import {
    --fa: "\f56f";
  }
  .fa-file-invoice-dollar {
    --fa: "\f571";
  }
  .fa-file-lines {
    --fa: "\f15c";
  }
  .fa-file-pdf {
    --fa: "\f1c1";
  }
  .fa-file-text {
    --fa: "\f15c";
  }
  .fa-filter-list {
    --fa: "\e17c";
  }
  .fa-flag {
    --fa: "\f024";
  }
  .fa-flashlight {
    --fa: "\f8b8";
  }
  .fa-flask {
    --fa: "\f0c3";
  }
  .fa-flask-vial {
    --fa: "\e4f3";
  }
  .fa-folder {
    --fa: "\f07b";
  }
  .fa-folder-arrow-down {
    --fa: "\e053";
  }
  .fa-folder-arrow-right {
    --fa: "\e7d3";
  }
  .fa-folder-blank {
    --fa: "\f07b";
  }
  .fa-folder-download {
    --fa: "\e053";
  }
  .fa-folder-open {
    --fa: "\f07c";
  }
  .fa-folder-plus {
    --fa: "\f65e";
  }
  .fa-folder-tree {
    --fa: "\f802";
  }
  .fa-forklift {
    --fa: "\f47a";
  }
  .fa-forward-step {
    --fa: "\f051";
  }
  .fa-gear {
    --fa: "\f013";
  }
  .fa-gear-api {
    --fa: "\e8a4";
  }
  .fa-ghost {
    --fa: "\f6e2";
  }
  .fa-gift {
    --fa: "\f06b";
  }
  .fa-globe {
    --fa: "\f0ac";
  }
  .fa-grid {
    --fa: "\e195";
  }
  .fa-grid-3 {
    --fa: "\e195";
  }
  .fa-grip-dots-vertical {
    --fa: "\e411";
  }
  .fa-hand-holding-dollar {
    --fa: "\f4c0";
  }
  .fa-hand-holding-usd {
    --fa: "\f4c0";
  }
  .fa-header {
    --fa: "\f1dc";
  }
  .fa-heading {
    --fa: "\f1dc";
  }
  .fa-heart-circle {
    --fa: "\f4c7";
  }
  .fa-history {
    --fa: "\f1da";
  }
  .fa-home {
    --fa: "\f015";
  }
  .fa-home-alt {
    --fa: "\f015";
  }
  .fa-home-lg-alt {
    --fa: "\f015";
  }
  .fa-hourglass {
    --fa: "\f254";
  }
  .fa-hourglass-empty {
    --fa: "\f254";
  }
  .fa-house {
    --fa: "\f015";
  }
  .fa-ice-cream {
    --fa: "\f810";
  }
  .fa-info {
    --fa: "\f129";
  }
  .fa-info-circle {
    --fa: "\f05a";
  }
  .fa-institution {
    --fa: "\f19c";
  }
  .fa-label {
    --fa: "\e8a7";
  }
  .fa-layer-group {
    --fa: "\f5fd";
  }
  .fa-link {
    --fa: "\f0c1";
  }
  .fa-link-broken {
    --fa: "\e842";
  }
  .fa-list-check {
    --fa: "\f0ae";
  }
  .fa-location-dot {
    --fa: "\f3c5";
  }
  .fa-lock {
    --fa: "\f023";
  }
  .fa-magic-wand-sparkles {
    --fa: "\e2ca";
  }
  .fa-magnifying-glass {
    --fa: "\f002";
  }
  .fa-magnifying-glass-arrow-right {
    --fa: "\e521";
  }
  .fa-mail-forward {
    --fa: "\f064";
  }
  .fa-map-marker-alt {
    --fa: "\f3c5";
  }
  .fa-merge {
    --fa: "\e526";
  }
  .fa-money-bill-transfer {
    --fa: "\e528";
  }
  .fa-money-check-alt {
    --fa: "\f53d";
  }
  .fa-money-check-dollar {
    --fa: "\f53d";
  }
  .fa-money-check-edit {
    --fa: "\f872";
  }
  .fa-money-check-pen {
    --fa: "\f872";
  }
  .fa-mouse-pointer {
    --fa: "\f245";
  }
  .fa-mug-hot {
    --fa: "\f7b6";
  }
  .fa-multiply {
    --fa: "\f00d";
  }
  .fa-museum {
    --fa: "\f19c";
  }
  .fa-navicon {
    --fa: "\f0c9";
  }
  .fa-note-sticky {
    --fa: "\f249";
  }
  .fa-octagon-xmark {
    --fa: "\f2f0";
  }
  .fa-paper-plane {
    --fa: "\f1d8";
  }
  .fa-paperclip {
    --fa: "\f0c6";
  }
  .fa-party-horn {
    --fa: "\e31b";
  }
  .fa-pause {
    --fa: "\f04c";
  }
  .fa-pen {
    --fa: "\f304";
  }
  .fa-pen-field {
    --fa: "\e211";
  }
  .fa-pen-ruler {
    --fa: "\f5ae";
  }
  .fa-pen-swirl {
    --fa: "\e214";
  }
  .fa-pencil-ruler {
    --fa: "\f5ae";
  }
  .fa-person-from-portal {
    --fa: "\e023";
  }
  .fa-person-sign {
    --fa: "\f757";
  }
  .fa-person-to-portal {
    --fa: "\e022";
  }
  .fa-phone {
    --fa: "\f095";
  }
  .fa-play {
    --fa: "\f04b";
  }
  .fa-plug {
    --fa: "\f1e6";
  }
  .fa-plug-circle-minus {
    --fa: "\e55e";
  }
  .fa-plus {
    --fa: "\2b";
  }
  .fa-plus-circle {
    --fa: "\f055";
  }
  .fa-portal-enter {
    --fa: "\e022";
  }
  .fa-portal-exit {
    --fa: "\e023";
  }
  .fa-postage-stamp {
    --fa: "\e6e3";
  }
  .fa-power-off {
    --fa: "\f011";
  }
  .fa-print {
    --fa: "\f02f";
  }
  .fa-project-diagram {
    --fa: "\f542";
  }
  .fa-puzzle {
    --fa: "\e443";
  }
  .fa-puzzle-piece {
    --fa: "\f12e";
  }
  .fa-puzzle-piece-alt {
    --fa: "\e231";
  }
  .fa-puzzle-piece-simple {
    --fa: "\e231";
  }
  .fa-question {
    --fa: "\3f";
  }
  .fa-question-circle {
    --fa: "\f059";
  }
  .fa-receipt {
    --fa: "\f543";
  }
  .fa-rectangle-vertical-history {
    --fa: "\e237";
  }
  .fa-refresh {
    --fa: "\f021";
  }
  .fa-remove {
    --fa: "\f00d";
  }
  .fa-reorder {
    --fa: "\f550";
  }
  .fa-repeat {
    --fa: "\f363";
  }
  .fa-right-from-bracket {
    --fa: "\f2f5";
  }
  .fa-right-from-dotted-line {
    --fa: "\e6c4";
  }
  .fa-rocket-launch {
    --fa: "\e027";
  }
  .fa-rotate-back {
    --fa: "\f2ea";
  }
  .fa-rotate-backward {
    --fa: "\f2ea";
  }
  .fa-rotate-left {
    --fa: "\f2ea";
  }
  .fa-search {
    --fa: "\f002";
  }
  .fa-server {
    --fa: "\f233";
  }
  .fa-share {
    --fa: "\f064";
  }
  .fa-shield-check {
    --fa: "\f2f7";
  }
  .fa-shield-times {
    --fa: "\e24c";
  }
  .fa-shield-xmark {
    --fa: "\e24c";
  }
  .fa-shipping-fast {
    --fa: "\f48b";
  }
  .fa-shopping-cart {
    --fa: "\f07a";
  }
  .fa-shovel {
    --fa: "\f713";
  }
  .fa-sign-out {
    --fa: "\f08b";
  }
  .fa-sign-out-alt {
    --fa: "\f2f5";
  }
  .fa-sliders {
    --fa: "\f1de";
  }
  .fa-sliders-h {
    --fa: "\f1de";
  }
  .fa-sliders-simple {
    --fa: "\e253";
  }
  .fa-soft-serve {
    --fa: "\e400";
  }
  .fa-sort-up-down {
    --fa: "\e099";
  }
  .fa-spinner {
    --fa: "\f110";
  }
  .fa-star {
    --fa: "\f005";
  }
  .fa-step-forward {
    --fa: "\f051";
  }
  .fa-stethoscope {
    --fa: "\f0f1";
  }
  .fa-sticky-note {
    --fa: "\f249";
  }
  .fa-stopwatch {
    --fa: "\f2f2";
  }
  .fa-store {
    --fa: "\f54e";
  }
  .fa-stream {
    --fa: "\f550";
  }
  .fa-sync {
    --fa: "\f021";
  }
  .fa-table-columns {
    --fa: "\f0db";
  }
  .fa-table-columns-add-after {
    --fa: "\e88e";
  }
  .fa-table-columns-add-before {
    --fa: "\e88f";
  }
  .fa-tag {
    --fa: "\f02b";
  }
  .fa-tasks {
    --fa: "\f0ae";
  }
  .fa-terminal {
    --fa: "\f120";
  }
  .fa-text {
    --fa: "\f893";
  }
  .fa-times {
    --fa: "\f00d";
  }
  .fa-times-octagon {
    --fa: "\f2f0";
  }
  .fa-tombstone {
    --fa: "\f720";
  }
  .fa-tombstone-alt {
    --fa: "\f721";
  }
  .fa-tombstone-blank {
    --fa: "\f721";
  }
  .fa-traffic-cone {
    --fa: "\f636";
  }
  .fa-trash {
    --fa: "\f1f8";
  }
  .fa-triangle-exclamation {
    --fa: "\f071";
  }
  .fa-truck {
    --fa: "\f0d1";
  }
  .fa-truck-fast {
    --fa: "\f48b";
  }
  .fa-turtle {
    --fa: "\f726";
  }
  .fa-undo-alt {
    --fa: "\f2ea";
  }
  .fa-university {
    --fa: "\f19c";
  }
  .fa-up-right-from-square {
    --fa: "\f35d";
  }
  .fa-user {
    --fa: "\f007";
  }
  .fa-user-alt {
    --fa: "\f007";
  }
  .fa-user-astronaut {
    --fa: "\f4fb";
  }
  .fa-user-large {
    --fa: "\f007";
  }
  .fa-users {
    --fa: "\f0c0";
  }
  .fa-volume-high {
    --fa: "\f028";
  }
  .fa-volume-mute {
    --fa: "\f6a9";
  }
  .fa-volume-times {
    --fa: "\f6a9";
  }
  .fa-volume-up {
    --fa: "\f028";
  }
  .fa-volume-xmark {
    --fa: "\f6a9";
  }
  .fa-wallet {
    --fa: "\f555";
  }
  .fa-wand-magic-sparkles {
    --fa: "\e2ca";
  }
  .fa-warehouse {
    --fa: "\f494";
  }
  .fa-warning {
    --fa: "\f071";
  }
  .fa-webhook {
    --fa: "\e5d5";
  }
  .fa-weight-hanging {
    --fa: "\f5cd";
  }
  .fa-xmark {
    --fa: "\f00d";
  }
  .fa-xmark-octagon {
    --fa: "\f2f0";
  }
  .fa-zap {
    --fa: "\f0e7";
  }
  /*!
   * Font Awesome Pro 7.3.1 by @fontawesome - https://fontawesome.com
   * License - https://fontawesome.com/license (Commercial License)
   * Copyright 2026 Fonticons, Inc.
   */
  :root, :host {
    --fa-family-classic: 'Font Awesome 7 Pro';
    --fa-font-regular: normal 400 1em/1 var(--fa-family-classic);
    /* deprecated: this older custom property will be removed next major release */
    --fa-style-family-classic: var(--fa-family-classic);
  }
  @font-face {
    font-family: "Font Awesome 7 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-regular-400.woff2?v=1019");
  }
  .far {
    --fa-family: var(--fa-family-classic);
    --fa-style: 400;
  }
  .fa-classic {
    --fa-family: var(--fa-family-classic);
  }
  .fa-regular {
    --fa-style: 400;
  }
  /*!
   * Font Awesome Pro 7.3.1 by @fontawesome - https://fontawesome.com
   * License - https://fontawesome.com/license (Commercial License)
   * Copyright 2026 Fonticons, Inc.
   */
  :root, :host {
    --fa-family-classic: 'Font Awesome 7 Pro';
    --fa-font-solid: normal 900 1em/1 var(--fa-family-classic);
    /* deprecated: this older custom property will be removed next major release */
    --fa-style-family-classic: var(--fa-family-classic);
  }
  @font-face {
    font-family: "Font Awesome 7 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.woff2?v=1019");
  }
  .fas {
    --fa-family: var(--fa-family-classic);
    --fa-style: 900;
  }
  .fa-classic {
    --fa-family: var(--fa-family-classic);
  }
  .fa-solid {
    --fa-style: 900;
  }
  :root, :host {
    --fa-family-brands: 'Font Awesome 7 Brands';
    --fa-font-brands: normal 400 1em/1 var(--fa-family-brands);
  }
  @font-face {
    font-family: "Font Awesome 7 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-brands-400.woff2?v=1019") format("woff2");
  }
  .fab,
  .fa-brands,
  .fa-classic.fa-brands {
    --fa-family: var(--fa-family-brands);
    --fa-style: 400;
  }
  .fa-cc-amex {
    --fa: "\f1f3";
  }
  .fa-cc-discover {
    --fa: "\f1f2";
  }
  .fa-cc-mastercard {
    --fa: "\f1f1";
  }
  .fa-cc-visa {
    --fa: "\f1f0";
  }
  .fa-shopify {
    --fa: "\e057";
  }
  .fa-stripe-s {
    --fa: "\f42a";
  }
  :root, :host {
    --fa-family-duotone: 'Font Awesome 7 Duotone';
    --fa-font-duotone: normal 900 1em/1 var(--fa-family-duotone);
    /* deprecated: this older custom property will be removed next major release */
    --fa-style-family-duotone: var(--fa-family-duotone);
  }
  @font-face {
    font-family: "Font Awesome 7 Duotone";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-duotone-900.woff2?v=1019");
  }
  .fad,
  .fa-duotone {
    --fa-family: var(--fa-family-duotone);
    --fa-style: 900;
    position: relative;
    letter-spacing: normal;
  }
  .fad::before,
  .fa-duotone::before {
    position: absolute;
    color: var(--fa-primary-color, currentColor);
    opacity: var(--fa-primary-opacity, 1);
  }
  .fad::after,
  .fa-duotone::after {
    color: var(--fa-secondary-color, currentColor);
    opacity: var(--fa-secondary-opacity, 0.4);
  }
  .fa-swap-opacity .fad::before,
  .fa-swap-opacity .fa-duotone::before,
  .fad.fa-swap-opacity::before,
  .fa-duotone.fa-swap-opacity::before {
    opacity: var(--fa-secondary-opacity, 0.4);
  }
  .fa-swap-opacity .fad::after,
  .fa-swap-opacity .fa-duotone::after,
  .fad.fa-swap-opacity::after,
  .fa-duotone.fa-swap-opacity::after {
    opacity: var(--fa-primary-opacity, 1);
  }
  .fad.fa-li,
  .fa-duotone.fa-li,
  .fad.fa-stack-1x,
  .fa-duotone.fa-stack-1x,
  .fad.fa-stack-2x,
  .fa-duotone.fa-stack-2x {
    position: absolute;
  }
  .air-datepicker-cell.-year-.-other-decade-, .air-datepicker-cell.-day-.-other-month- {
    color: var(--adp-color-other-month);
  }
  .air-datepicker-cell.-year-.-other-decade-:hover, .air-datepicker-cell.-day-.-other-month-:hover {
    color: var(--adp-color-other-month-hover);
  }
  .-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {
    color: var(--adp-color-other-month);
  }
  .-selected-.air-datepicker-cell.-year-.-other-decade-, .-selected-.air-datepicker-cell.-day-.-other-month- {
    color: #fff;
    background: var(--adp-background-color-selected-other-month);
  }
  .-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {
    background: var(--adp-background-color-selected-other-month-focused);
  }
  .-in-range-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.air-datepicker-cell.-day-.-other-month- {
    background-color: var(--adp-background-color-in-range);
    color: var(--adp-color);
  }
  .-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {
    background-color: var(--adp-background-color-in-range-focused);
  }
  .air-datepicker-cell.-year-.-other-decade-:empty, .air-datepicker-cell.-day-.-other-month-:empty {
    background: none;
    border: none;
  }
  .air-datepicker-cell {
    border-radius: var(--adp-cell-border-radius);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .air-datepicker-cell.-focus- {
    background: var(--adp-cell-background-color-hover);
  }
  .air-datepicker-cell.-current- {
    color: var(--adp-color-current-date);
  }
  .air-datepicker-cell.-current-.-focus- {
    color: var(--adp-color);
  }
  .air-datepicker-cell.-current-.-in-range- {
    color: var(--adp-color-current-date);
  }
  .air-datepicker-cell.-disabled- {
    cursor: default;
    color: var(--adp-color-disabled);
  }
  .air-datepicker-cell.-disabled-.-focus- {
    color: var(--adp-color-disabled);
  }
  .air-datepicker-cell.-disabled-.-in-range- {
    color: var(--adp-color-disabled-in-range);
  }
  .air-datepicker-cell.-disabled-.-current-.-focus- {
    color: var(--adp-color-disabled);
  }
  .air-datepicker-cell.-in-range- {
    background: var(--adp-cell-background-color-in-range);
    border-radius: 0;
  }
  .air-datepicker-cell.-in-range-:hover, .air-datepicker-cell.-in-range-.-focus- {
    background: var(--adp-cell-background-color-in-range-hover);
  }
  .air-datepicker-cell.-range-from- {
    border: 1px solid var(--adp-cell-border-color-in-range);
    background-color: var(--adp-cell-background-color-in-range);
    border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
  }
  .air-datepicker-cell.-range-to- {
    border: 1px solid var(--adp-cell-border-color-in-range);
    background-color: var(--adp-cell-background-color-in-range);
    border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;
  }
  .air-datepicker-cell.-range-to-.-range-from- {
    border-radius: var(--adp-cell-border-radius);
  }
  .air-datepicker-cell.-selected- {
    color: #fff;
    border: none;
    background: var(--adp-cell-background-color-selected);
  }
  .air-datepicker-cell.-selected-.-current- {
    color: #fff;
    background: var(--adp-cell-background-color-selected);
  }
  .air-datepicker-cell.-selected-.-focus- {
    background: var(--adp-cell-background-color-selected-hover);
  }
  .air-datepicker-body {
    transition: all var(--adp-transition-duration) var(--adp-transition-ease);
  }
  .air-datepicker-body.-hidden- {
    display: none;
  }
  .air-datepicker-body--day-names {
    display: grid;
    grid-template-columns: repeat(7, var(--adp-day-cell-width));
    margin: 8px 0 3px;
  }
  .air-datepicker-body--day-name {
    color: var(--adp-day-name-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8em;
  }
  .air-datepicker-body--day-name.-clickable- {
    cursor: pointer;
  }
  .air-datepicker-body--day-name.-clickable-:hover {
    color: var(--adp-day-name-color-hover);
  }
  .air-datepicker-body--cells {
    display: grid;
  }
  .air-datepicker-body--cells.-days- {
    grid-template-columns: repeat(7, var(--adp-day-cell-width));
    grid-auto-rows: var(--adp-day-cell-height);
  }
  .air-datepicker-body--cells.-months- {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: var(--adp-month-cell-height);
  }
  .air-datepicker-body--cells.-years- {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: var(--adp-year-cell-height);
  }
  .air-datepicker-nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--adp-border-color-inner);
    min-height: var(--adp-nav-height);
    padding: var(--adp-padding);
    box-sizing: content-box;
  }
  .-only-timepicker- .air-datepicker-nav {
    display: none;
  }
  .air-datepicker-nav--title, .air-datepicker-nav--action {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  .air-datepicker-nav--action {
    width: var(--adp-nav-action-size);
    border-radius: var(--adp-border-radius);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  .air-datepicker-nav--action:hover {
    background: var(--adp-background-color-hover);
  }
  .air-datepicker-nav--action:active {
    background: var(--adp-background-color-active);
  }
  .air-datepicker-nav--action.-disabled- {
    visibility: hidden;
  }
  .air-datepicker-nav--action svg {
    width: 32px;
    height: 32px;
  }
  .air-datepicker-nav--action path {
    fill: none;
    stroke: var(--adp-nav-arrow-color);
    stroke-width: 2px;
  }
  .air-datepicker-nav--title {
    border-radius: var(--adp-border-radius);
    padding: 0 8px;
  }
  .air-datepicker-nav--title i {
    font-style: normal;
    color: var(--adp-nav-color-secondary);
    margin-left: 0.3em;
  }
  .air-datepicker-nav--title:hover {
    background: var(--adp-background-color-hover);
  }
  .air-datepicker-nav--title:active {
    background: var(--adp-background-color-active);
  }
  .air-datepicker-nav--title.-disabled- {
    cursor: default;
    background: none;
  }
  .air-datepicker-buttons {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }
  .air-datepicker-button {
    display: inline-flex;
    color: var(--adp-btn-color);
    border-radius: var(--adp-btn-border-radius);
    cursor: pointer;
    height: var(--adp-btn-height);
    border: none;
    background: rgba(255, 255, 255, 0);
  }
  .air-datepicker-button:hover {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover);
  }
  .air-datepicker-button:focus {
    color: var(--adp-btn-color-hover);
    background: var(--adp-btn-background-color-hover);
    outline: none;
  }
  .air-datepicker-button:active {
    background: var(--adp-btn-background-color-active);
  }
  .air-datepicker-button span {
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .air-datepicker-time {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 12px;
    align-items: center;
    position: relative;
    padding: 0 var(--adp-time-padding-inner);
  }
  .-only-timepicker- .air-datepicker-time {
    border-top: none;
  }
  .air-datepicker-time--current {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 14px;
    text-align: center;
  }
  .air-datepicker-time--current-colon {
    margin: 0 2px 3px;
    line-height: 1;
  }
  .air-datepicker-time--current-hours, .air-datepicker-time--current-minutes {
    line-height: 1;
    font-size: 19px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    position: relative;
    z-index: 1;
  }
  .air-datepicker-time--current-hours:after, .air-datepicker-time--current-minutes:after {
    content: "";
    background: var(--adp-background-color-hover);
    border-radius: var(--adp-border-radius);
    position: absolute;
    left: -2px;
    top: -3px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    opacity: 0;
  }
  .air-datepicker-time--current-hours.-focus-:after, .air-datepicker-time--current-minutes.-focus-:after {
    opacity: 1;
  }
  .air-datepicker-time--current-ampm {
    text-transform: uppercase;
    align-self: flex-end;
    color: var(--adp-time-day-period-color);
    margin-left: 6px;
    font-size: 11px;
    margin-bottom: 1px;
  }
  .air-datepicker-time--row {
    display: flex;
    align-items: center;
    font-size: 11px;
    height: 17px;
    background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat;
  }
  .air-datepicker-time--row:first-child {
    margin-bottom: 4px;
  }
  .air-datepicker-time--row input[type=range] {
    background: none;
    cursor: pointer;
    flex: 1;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
  }
  .air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  .air-datepicker-time--row input[type=range]::-ms-tooltip {
    display: none;
  }
  .air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
    border-color: var(--adp-time-track-color-hover);
  }
  .air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
    border-color: var(--adp-time-track-color-hover);
  }
  .air-datepicker-time--row input[type=range]:hover::-ms-thumb {
    border-color: var(--adp-time-track-color-hover);
  }
  .air-datepicker-time--row input[type=range]:focus {
    outline: none;
  }
  .air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected);
  }
  .air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected);
  }
  .air-datepicker-time--row input[type=range]:focus::-ms-thumb {
    background: var(--adp-cell-background-color-selected);
    border-color: var(--adp-cell-background-color-selected);
  }
  .air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid var(--adp-time-track-color);
    background: #fff;
    cursor: pointer;
    -webkit-transition: background var(--adp-transition-duration);
    transition: background var(--adp-transition-duration);
  }
  .air-datepicker-time--row input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid var(--adp-time-track-color);
    background: #fff;
    cursor: pointer;
    -moz-transition: background var(--adp-transition-duration);
    transition: background var(--adp-transition-duration);
  }
  .air-datepicker-time--row input[type=range]::-ms-thumb {
    box-sizing: border-box;
    height: 12px;
    width: 12px;
    border-radius: 3px;
    border: 1px solid var(--adp-time-track-color);
    background: #fff;
    cursor: pointer;
    -ms-transition: background var(--adp-transition-duration);
    transition: background var(--adp-transition-duration);
  }
  .air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
    margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);
  }
  .air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track {
    border: none;
    height: var(--adp-time-track-height);
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }
  .air-datepicker-time--row input[type=range]::-moz-range-track {
    border: none;
    height: var(--adp-time-track-height);
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }
  .air-datepicker-time--row input[type=range]::-ms-track {
    border: none;
    height: var(--adp-time-track-height);
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }
  .air-datepicker-time--row input[type=range]::-ms-fill-lower {
    background: rgba(0, 0, 0, 0);
  }
  .air-datepicker-time--row input[type=range]::-ms-fill-upper {
    background: rgba(0, 0, 0, 0);
  }
  .air-datepicker {
    --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --adp-font-size: 14px;
    --adp-width: 246px;
    --adp-z-index: 100;
    --adp-padding: 4px;
    --adp-grid-areas: "nav" "body" "timepicker" "buttons";
    --adp-transition-duration: .3s;
    --adp-transition-ease: ease-out;
    --adp-transition-offset: 8px;
    --adp-background-color: #fff;
    --adp-background-color-hover: #f0f0f0;
    --adp-background-color-active: #eaeaea;
    --adp-background-color-in-range: rgba(92, 196, 239, .1);
    --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
    --adp-background-color-selected-other-month-focused: #8ad5f4;
    --adp-background-color-selected-other-month: #a2ddf6;
    --adp-color: #4a4a4a;
    --adp-color-secondary: #9c9c9c;
    --adp-accent-color: #4eb5e6;
    --adp-color-current-date: var(--adp-accent-color);
    --adp-color-other-month: #dedede;
    --adp-color-disabled: #aeaeae;
    --adp-color-disabled-in-range: #939393;
    --adp-color-other-month-hover: #c5c5c5;
    --adp-border-color: #dbdbdb;
    --adp-border-color-inner: #efefef;
    --adp-border-radius: 4px;
    --adp-border-color-inline: #d7d7d7;
    --adp-nav-height: 32px;
    --adp-nav-arrow-color: var(--adp-color-secondary);
    --adp-nav-action-size: 32px;
    --adp-nav-color-secondary: var(--adp-color-secondary);
    --adp-day-name-color: #ff9a19;
    --adp-day-name-color-hover: #8ad5f4;
    --adp-day-cell-width: 1fr;
    --adp-day-cell-height: 32px;
    --adp-month-cell-height: 42px;
    --adp-year-cell-height: 56px;
    --adp-pointer-size: 10px;
    --adp-poiner-border-radius: 2px;
    --adp-pointer-offset: 14px;
    --adp-cell-border-radius: 4px;
    --adp-cell-background-color-hover: var(--adp-background-color-hover);
    --adp-cell-background-color-selected: #5cc4ef;
    --adp-cell-background-color-selected-hover: #45bced;
    --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
    --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
    --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
    --adp-btn-height: 32px;
    --adp-btn-color: var(--adp-accent-color);
    --adp-btn-color-hover: var(--adp-color);
    --adp-btn-border-radius: var(--adp-border-radius);
    --adp-btn-background-color-hover: var(--adp-background-color-hover);
    --adp-btn-background-color-active: var(--adp-background-color-active);
    --adp-time-track-height: 1px;
    --adp-time-track-color: #dedede;
    --adp-time-track-color-hover: #b1b1b1;
    --adp-time-thumb-size: 12px;
    --adp-time-padding-inner: 10px;
    --adp-time-day-period-color: var(--adp-color-secondary);
    --adp-mobile-font-size: 16px;
    --adp-mobile-nav-height: 40px;
    --adp-mobile-width: 320px;
    --adp-mobile-day-cell-height: 38px;
    --adp-mobile-month-cell-height: 48px;
    --adp-mobile-year-cell-height: 64px;
  }
  .air-datepicker-overlay {
    --adp-overlay-background-color: rgba(0, 0, 0, .3);
    --adp-overlay-transition-duration: .3s;
    --adp-overlay-transition-ease: ease-out;
    --adp-overlay-z-index: 99;
  }
  .air-datepicker {
    background: var(--adp-background-color);
    border: 1px solid var(--adp-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: var(--adp-border-radius);
    box-sizing: content-box;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, max-content);
    grid-template-areas: var(--adp-grid-areas);
    font-family: var(--adp-font-family), sans-serif;
    font-size: var(--adp-font-size);
    color: var(--adp-color);
    width: var(--adp-width);
    position: absolute;
    transition: opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease);
    z-index: var(--adp-z-index);
  }
  .air-datepicker:not(.-custom-position-) {
    opacity: 0;
  }
  .air-datepicker.-from-top- {
    transform: translateY(calc(var(--adp-transition-offset) * -1));
  }
  .air-datepicker.-from-right- {
    transform: translateX(var(--adp-transition-offset));
  }
  .air-datepicker.-from-bottom- {
    transform: translateY(var(--adp-transition-offset));
  }
  .air-datepicker.-from-left- {
    transform: translateX(calc(var(--adp-transition-offset) * -1));
  }
  .air-datepicker.-active-:not(.-custom-position-) {
    transform: translate(0, 0);
    opacity: 1;
  }
  .air-datepicker.-active-.-custom-position- {
    transition: none;
  }
  .air-datepicker.-inline- {
    border-color: var(--adp-border-color-inline);
    box-shadow: none;
    position: static;
    left: auto;
    right: auto;
    opacity: 1;
    transform: none;
  }
  .air-datepicker.-inline- .air-datepicker--pointer {
    display: none;
  }
  .air-datepicker.-is-mobile- {
    --adp-font-size: var(--adp-mobile-font-size);
    --adp-day-cell-height: var(--adp-mobile-day-cell-height);
    --adp-month-cell-height: var(--adp-mobile-month-cell-height);
    --adp-year-cell-height: var(--adp-mobile-year-cell-height);
    --adp-nav-height: var(--adp-mobile-nav-height);
    --adp-nav-action-size: var(--adp-mobile-nav-height);
    position: fixed;
    width: var(--adp-mobile-width);
    border: none;
  }
  .air-datepicker.-is-mobile- * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .air-datepicker.-is-mobile- .air-datepicker--pointer {
    display: none;
  }
  .air-datepicker.-is-mobile-:not(.-custom-position-) {
    transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));
  }
  .air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {
    transform: translate(-50%, -50%);
  }
  .air-datepicker.-custom-position- {
    transition: none;
  }
  .air-datepicker-global-container {
    position: absolute;
    left: 0;
    top: 0;
  }
  .air-datepicker--pointer {
    --pointer-half-size: calc(var(--adp-pointer-size) / 2);
    position: absolute;
    width: var(--adp-pointer-size);
    height: var(--adp-pointer-size);
    z-index: -1;
  }
  .air-datepicker--pointer:after {
    content: "";
    position: absolute;
    background: #fff;
    border-top: 1px solid var(--adp-border-color-inline);
    border-right: 1px solid var(--adp-border-color-inline);
    border-top-right-radius: var(--adp-poiner-border-radius);
    width: var(--adp-pointer-size);
    height: var(--adp-pointer-size);
    box-sizing: border-box;
  }
  .-top-left- .air-datepicker--pointer, .-top-center- .air-datepicker--pointer, .-top-right- .air-datepicker--pointer, [data-popper-placement^=top] .air-datepicker--pointer {
    top: calc(100% - var(--pointer-half-size) + 1px);
  }
  .-top-left- .air-datepicker--pointer:after, .-top-center- .air-datepicker--pointer:after, .-top-right- .air-datepicker--pointer:after, [data-popper-placement^=top] .air-datepicker--pointer:after {
    transform: rotate(135deg);
  }
  .-right-top- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer, [data-popper-placement^=right] .air-datepicker--pointer {
    right: calc(100% - var(--pointer-half-size) + 1px);
  }
  .-right-top- .air-datepicker--pointer:after, .-right-center- .air-datepicker--pointer:after, .-right-bottom- .air-datepicker--pointer:after, [data-popper-placement^=right] .air-datepicker--pointer:after {
    transform: rotate(225deg);
  }
  .-bottom-left- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer, [data-popper-placement^=bottom] .air-datepicker--pointer {
    bottom: calc(100% - var(--pointer-half-size) + 1px);
  }
  .-bottom-left- .air-datepicker--pointer:after, .-bottom-center- .air-datepicker--pointer:after, .-bottom-right- .air-datepicker--pointer:after, [data-popper-placement^=bottom] .air-datepicker--pointer:after {
    transform: rotate(315deg);
  }
  .-left-top- .air-datepicker--pointer, .-left-center- .air-datepicker--pointer, .-left-bottom- .air-datepicker--pointer, [data-popper-placement^=left] .air-datepicker--pointer {
    left: calc(100% - var(--pointer-half-size) + 1px);
  }
  .-left-top- .air-datepicker--pointer:after, .-left-center- .air-datepicker--pointer:after, .-left-bottom- .air-datepicker--pointer:after, [data-popper-placement^=left] .air-datepicker--pointer:after {
    transform: rotate(45deg);
  }
  .-top-left- .air-datepicker--pointer, .-bottom-left- .air-datepicker--pointer {
    left: var(--adp-pointer-offset);
  }
  .-top-right- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer {
    right: var(--adp-pointer-offset);
  }
  .-top-center- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer {
    left: calc(50% - var(--adp-pointer-size) / 2);
  }
  .-left-top- .air-datepicker--pointer, .-right-top- .air-datepicker--pointer {
    top: var(--adp-pointer-offset);
  }
  .-left-bottom- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer {
    bottom: var(--adp-pointer-offset);
  }
  .-left-center- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer {
    top: calc(50% - var(--adp-pointer-size) / 2);
  }
  .air-datepicker--navigation {
    grid-area: nav;
  }
  .air-datepicker--content {
    box-sizing: content-box;
    padding: var(--adp-padding);
    grid-area: body;
  }
  .-only-timepicker- .air-datepicker--content {
    display: none;
  }
  .air-datepicker--time {
    grid-area: timepicker;
  }
  .air-datepicker--buttons {
    grid-area: buttons;
  }
  .air-datepicker--buttons, .air-datepicker--time {
    padding: var(--adp-padding);
    border-top: 1px solid var(--adp-border-color-inner);
  }
  .air-datepicker-overlay {
    position: fixed;
    background: var(--adp-overlay-background-color);
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
    transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;
    transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);
    z-index: var(--adp-overlay-z-index);
  }
  .air-datepicker-overlay.-active- {
    opacity: 1;
    width: 100%;
    height: 100%;
    transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s;
  }
  .tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0;
  }
  [data-tippy-root] {
    max-width: calc(100vw - 10px);
  }
  .tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity;
  }
  .tippy-box[data-placement^=top] > .tippy-arrow {
    bottom: 0;
  }
  .tippy-box[data-placement^=top] > .tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top;
  }
  .tippy-box[data-placement^=bottom] > .tippy-arrow {
    top: 0;
  }
  .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom;
  }
  .tippy-box[data-placement^=left] > .tippy-arrow {
    right: 0;
  }
  .tippy-box[data-placement^=left] > .tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left;
  }
  .tippy-box[data-placement^=right] > .tippy-arrow {
    left: 0;
  }
  .tippy-box[data-placement^=right] > .tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right;
  }
  .tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
  }
  .tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333;
  }
  .tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid;
  }
  .tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1;
  }
  .tippy-box[data-theme~=light-border] {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 8, 16, 0.15);
    color: #333;
    box-shadow: 0 4px 14px -2px rgba(0, 8, 16, 0.08);
  }
  .tippy-box[data-theme~=light-border] > .tippy-backdrop {
    background-color: #fff;
  }
  .tippy-box[data-theme~=light-border] > .tippy-arrow:after, .tippy-box[data-theme~=light-border] > .tippy-svg-arrow:after {
    content: "";
    position: absolute;
    z-index: -1;
  }
  .tippy-box[data-theme~=light-border] > .tippy-arrow:after {
    border-color: transparent;
    border-style: solid;
  }
  .tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-arrow:before {
    border-top-color: #fff;
  }
  .tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-arrow:after {
    border-top-color: rgba(0, 8, 16, 0.2);
    border-width: 7px 7px 0;
    top: 17px;
    left: 1px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-svg-arrow > svg {
    top: 16px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-svg-arrow:after {
    top: 17px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-arrow:before {
    border-bottom-color: #fff;
    bottom: 16px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-arrow:after {
    border-bottom-color: rgba(0, 8, 16, 0.2);
    border-width: 0 7px 7px;
    bottom: 17px;
    left: 1px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-svg-arrow > svg {
    bottom: 16px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-svg-arrow:after {
    bottom: 17px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-arrow:before {
    border-left-color: #fff;
  }
  .tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-arrow:after {
    border-left-color: rgba(0, 8, 16, 0.2);
    border-width: 7px 0 7px 7px;
    left: 17px;
    top: 1px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-svg-arrow > svg {
    left: 11px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-svg-arrow:after {
    left: 12px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-arrow:before {
    border-right-color: #fff;
    right: 16px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-arrow:after {
    border-width: 7px 7px 7px 0;
    right: 17px;
    top: 1px;
    border-right-color: rgba(0, 8, 16, 0.2);
  }
  .tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-svg-arrow > svg {
    right: 11px;
  }
  .tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-svg-arrow:after {
    right: 12px;
  }
  .tippy-box[data-theme~=light-border] > .tippy-svg-arrow {
    fill: #fff;
  }
  .tippy-box[data-theme~=light-border] > .tippy-svg-arrow:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
    background-size: 16px 6px;
    width: 16px;
    height: 6px;
  }
}
:root {
  --font-family-roboto: 'Roboto Mono', monospace;
  --font-family-inter: 'Inter', sans-serif;
  --font-size: 14px;
  --line-height: 20px;
  --index-lowest: 1;
  --index-low: 10;
  --index-middle: 100;
  --index-high: 1000;
  --index-highest: 10000;
  --index-toast: 12000;
  --index-object-flyover: 30000;
  --shadow-highest: 0 4px 8px 0 #0000000f, 0 0 4px 0 #0000000a, 0 0 1px 0 #00000026;
  --shadow-middle: 0 4px 4px 0 #0000000f, 0 0 4px 0 #0000000a, 0 0 1px #00000026;
}

@layer ui {
  @media screen and (hover: hover) {
    time {
      cursor: pointer;
    }
  }
  time {
    text-decoration: dotted underline;
  }
  html {
    font-size: var(--font-size);
    font-family: var(--font-family-inter);
    font-weight: 400;
    line-height: var(--line-height);
  }
  table tbody {
    --color-link: var(--color-blue-lagoon);
  }
  .content .padded {
    padding: 0 24px;
  }
  .tippy-box {
    padding: 5px;
  }
  .image-preview {
    width: 240px;
    height: 240px;
    object-fit: contain;
  }
  .legend {
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
  .legend a {
    color: inherit;
    text-decoration: underline;
  }
  span.muted {
    color: var(--default-text-secondary-color);
  }
  img.integration-icon {
    width: 16px;
    vertical-align: middle;
  }
  i.success {
    color: var(--icon-success-color);
  }
  i.danger {
    color: var(--icon-danger-color);
  }
  i.warning {
    color: var(--icon-warning-color);
  }
  i.info {
    color: var(--icon-info-color);
  }
  i.muted {
    color: var(--icon-muted-color);
  }
  i.permission-status-all {
    color: var(--permission-status-all-color);
  }
  i.permission-status-some {
    color: var(--permission-status-some-color);
  }
  i.permission-status-none {
    color: var(--permission-status-none-color);
  }
  i.super-admin {
    color: var(--super-admin-icon-color);
  }
  .column-badges {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .invisible {
    display: none;
  }
  .clickable {
    cursor: pointer;
  }
  .wrap {
    word-wrap: break-word;
    white-space: wrap;
    overflow: hidden;
  }
  .card-rounded {
    border-radius: 4px;
    background-color: white;
    padding: 16px;
    box-shadow: var(--shadow-highest);
  }
  .toggle-target, .pointer-dialog-target {
    display: none;
  }
  .pointer-dialog-target {
    z-index: var(--index-middle);
  }
  .toggle-target.on, .pointer-dialog-target.on {
    display: initial;
  }
  @media screen and (hover: hover) {
    .hover:hover {
      background: var(--color-mercury);
      border-radius: 4px;
    }
  }
  .align-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .left-aligned {
    justify-content: flex-start;
    text-align: left;
  }
  .center-aligned {
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  .right-aligned {
    justify-content: flex-end;
    text-align: right;
  }
  .horizontal-span {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .columns {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  h1 {
    padding: 20px 24px;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 600;
  }
  h2 {
    font-size: 1.286rem;
    line-height: 1.57rem;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  h3 {
    font-size: 1rem;
    line-height: 1.21rem;
    font-weight: 500;
    letter-spacing: 0.3px;
  }
  @media screen and (width <= 576px) {
    h1 {
      font-size: 1.429rem;
      line-height: 2rem;
    }
    h2 {
      font-size: 1.286rem;
      line-height: 1.57rem;
      font-weight: 500;
    }
    h3 {
      font-size: 1rem;
      line-height: 1.21rem;
      font-weight: 500;
    }
  }
  .flex-order-1 {
    order: 1;
  }
  .flex-order-2 {
    order: 2;
  }
  .flex-order-3 {
    order: 3;
  }
  .flex-order-4 {
    order: 4;
  }
  .flex-order-5 {
    order: 5;
  }
  .flex-order-6 {
    order: 6;
  }
  .flex-order-7 {
    order: 7;
  }
  .flex-order-8 {
    order: 8;
  }
  .flex-order-9 {
    order: 9;
  }
  .flex-order-10 {
    order: 10;
  }
  .flex-order-last {
    order: 100;
  }
  .collapsible {
    transition: height 450ms var(--ease-in-out-expo);
  }
  .collapsing {
    overflow: hidden;
  }
  .collapsible.collapsed {
    height: 0;
    overflow: hidden;
  }
  dl {
    display: grid;
    grid-template-columns: minmax(100px, max-content) 1fr;
    gap: 8px;
  }
  dt {
    color: var(--color-pale-sky);
  }
  dd {
    color: var(--color-nile-blue);
    margin: 0;
  }
  ul.bulleted-list {
    margin: 0;
    padding-left: 20px;
    color: var(--color-nile-blue);
  }
  ul.bulleted-list li {
    list-style-type: disc;
    padding: 4px 0;
  }
  dl.vertical {
    gap: 0;
    grid-template-columns: 1fr;
  }
  dl.vertical dt {
    margin-top: 10px;
  }
  [data-copy-to-clipboard] {
    cursor: pointer;
  }
  [data-copy-to-clipboard] .fa-copy {
    color: var(--copy-icon-color);
    transition: color 150ms;
  }
  [data-copy-to-clipboard]:hover .fa-copy {
    color: var(--copy-icon-hover-color);
  }
  .context-dialog {
    position: fixed;
    border-radius: 8px;
    background-color: white;
    z-index: var(--index-highest);
    box-shadow: var(--shadow-highest);
  }
  .context-dialog.shake {
    animation: shake 0.4s ease-in-out;
  }
  .space-between {
    display: flex;
    justify-content: space-between;
  }
  .flex-end {
    display: flex;
    justify-content: flex-end;
  }
  th input[type=checkbox], td input[type=checkbox] {
    vertical-align: middle;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
@keyframes zap-pulse {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.4);
  }
  60% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@layer theme {
  @media screen and (hover: hover) {
    .copy-info:hover .fa-copy {
      color: var(--icon-info-color);
    }
  }
  .underline {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-iron);
  }
  button:hover .fa-trash,
  a:hover .fa-trash,
  .select-container li:hover .fa-trash,
  .fa-trash:hover {
    animation: fa-jello var(--fa-animation-duration, 0.9s) var(--fa-animation-timing, ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    button:hover .fa-trash,
    a:hover .fa-trash,
    .select-container li:hover .fa-trash,
    .fa-trash:hover {
      animation: none;
    }
  }
  .delete-action {
    color: var(--delete-action-color);
  }
  .delete-action:hover {
    color: var(--delete-action-hover-color);
  }
  .duplicate-action {
    color: var(--duplicate-action-color);
  }
  .duplicate-action:hover {
    color: var(--duplicate-action-hover-color);
  }
}
:root {
  --color-divider: hsla(216, 5%, 80%, 0.4);
  --color-black-10: #0000001a;
  --color-black-25: #00000040;
  --color-black: #000000;
  --color-aliceblue: #f0f8ffff;
  --color-slate-gray: #5f7b84;
  --color-blumine: #215f7b;
  --color-polar: #e5f4f8;
  --color-pattens-blue: #d8ebf6;
  --color-bondi-blue: #008db7;
  --color-bondi-blue-20: #008db733;
  --color-bondi-blue-40: #008db766;
  --color-bondi-blue-75: #008db7bf;
  --color-blue-lagoon: #007192;
  --color-pacific-blue: #029dca;
  --color-deep-cerulean: #0086ad;
  --color-nile-blue: #172b4d;
  --color-nile-blue-40: #172b4d66;
  --color-nile-blue-60: #172b4d99;
  --color-nile-blue-80: #172b4dcc;
  --color-bahama-blue: #057597;
  --color-nepal: #87adb8;
  --color-nepal-20: #87adb833;
  --color-lily-white: #e9f8ff;
  --color-periwinkle: #c8d3f2;
  --color-white: #ffffff;
  --color-white-25: #ffffff40;
  --color-white-70: #ffffffb3;
  --color-midnight: #0b1730;
  --color-golden-tainoi: #fdcd5c;
  --color-alabaster: #fafafa;
  --color-concrete: #f3f3f3;
  --color-gray: #939393;
  --color-manatee: #979a9e;
  --color-gray-chateau: #a1a8ab;
  --color-iron: #cacccf;
  --color-iron-20: #cacccf33;
  --color-iron-40: #cacccf66;
  --color-iron-80: #cacccfcc;
  --color-mercury: #e1e1e1;
  --color-pale-sky: #6a7383;
  --color-pale-sky-25: #6a738340;
  --color-pale-sky-dark: #575e6b;
  --color-oslo-gray: #899295;
  --color-regent-gray-50: #89989d80;
  --color-bon-jour: #e8e5e5;
  --color-gallery: #eeecec;
  --color-seashell: #f1f0f0;
  --color-oyster-bay: #f2f9fb;
  --color-spectra: #355660;
  --color-shark: #262b2d;
  --color-chablis:#fff0f0;
  --color-flamingo: #f14141;
  --color-flamingo-60: #f1414199;
  --color-cinnabar: #e03d3d;
  --color-cinnabar-65: #e03d3da6;
  --color-flush-mahogany: #c13535;
  --color-seashell-peach: #fff7f0;
  --color-tulip-tree: #eda747;
  --color-tulip-tree-80: #eda747cc;
  --color-geebung: #d28720;
  --color-fire-bush: #e69c37;
  --color-fire-bush-80: #e69c37cc;
  --color-willow-brook: #deecdc;
  --color-jade: #03b15e;
  --color-mulberry: #a84479;
  --color-green-haze: #039951;
  --color-green-haze-80: #039951cc;
  --color-jewel: #107544;
  --color-salem-40: #04804466;
  --color-shark-80: #262b2dcc;
  --color-cararra: #f1efe8;
  --color-tundora: #444441;
  --color-link-water: #e6f1fb;
  --color-snowy-mint: #eaf3de;
  --color-verdun-green: #27500a;
  --color-cornsilk: #fefae0;
  --color-misty-rose: #fbe5e5;
  --color-water: #d2eaff;
  --color-tea-green: #dbebc0;
  --color-lemon-chiffon: #fcf5c7;
  --color-light-red: #f3cfcf;
  --color-porcelain: #f2f2f2;
  --color-mischka: #dedfe3;
  --color-silver-sand: #9fa2a6;
  --color-alto: #e4e4e4;
  --color-medium-purple: #532894;
  --color-hot-pink: #d63384;
  --color-sunshine: #ffd60a;
  --color-deep-teal: #008080;
  --color-bondi-blue-light: #008DB70D;
  --color-royal-purple: #6b48ff;
  --color-royal-purple-dark: #5a3bdd;
  --color-royal-purple-medium: #4a30c2;
  --color-violent-violet: #3f2bb8;
  --color-pale-violet: #d6cffd;
  --color-titan-white: #eef0ff;
  --color-magnolia: #f1eefd;
  --color-cosmic-white: #f2efff;
  --color-prelude: #e3dcfb;
  --color-perfume: #b8acf5;
  --color-magnolia-faint: #f4f2fb;
  --color-magnolia-mist: #f6f4fc;
  --color-mischka-purple: #ece9f5;
  --color-titan-mischka: #e6e4ee;
  --color-mercury-purple: #d6d3e2;
  --color-vista-blue: #8a87a2;
  --color-stonewall: #6b6880;
  --color-stonewall-dim: #4a4860;
  --color-iris-blue: #8a8a99;
  --color-quartz-gray: #9a97ad;
  --color-fountain-green: #22683d;
  --color-egg-green: #e8f7ee;
  --color-saffron: #ffe27a;
  --color-tulip: #ffc857;
  --color-bronze: #c48c00;
  --color-bronze-dark: #b07c00;
  --color-spicy-mustard: #6b4e00;
  --color-dark-bronze: #5a3d00;
  --color-deep-bronze: #4a3000;
  --color-mahogany: #b84a0f;
  --color-christine: #e06c12;
  --color-potters-clay: #8a5a2b;
  --color-sienna: #a0522d;
  --color-brick: #945138;
  --color-brick-highlight: #aa6046;
  --color-brick-shadow: #6f3b2a;
  --color-brick-stamp: #eee1be;
  --color-santa-fe: #b16d52;
  --color-vida-loca: #5b9d1a;
  --color-gossamer: #0f9488;
  --color-royal-blue: #2563eb;
  --color-bali-hai: #879aba;
  --color-pastel-gray: #e4e7ec;
  --color-pastel-gray-text: #3f4653;
  --color-pastel-red: #fbdada;
  --color-pastel-red-text: #a12626;
  --color-pastel-orange: #fbe2cf;
  --color-pastel-orange-50: #fbe2cf80;
  --color-pastel-orange-text: #9a4a12;
  --color-pastel-brown: #ece0d3;
  --color-pastel-brown-text: #6f4a24;
  --color-pastel-yellow: #fbeecb;
  --color-pastel-yellow-text: #8a6410;
  --color-pastel-lime: #e3f1cc;
  --color-pastel-lime-text: #4a6f14;
  --color-pastel-green: #cdefdd;
  --color-pastel-green-text: #05683b;
  --color-pastel-teal: #cdeeea;
  --color-pastel-teal-text: #0f6d64;
  --color-pastel-blue: #cfe9f3;
  --color-pastel-blue-text: #075f7a;
  --color-pastel-azure: #dbe6fc;
  --color-pastel-azure-text: #1d4ed8;
  --color-pastel-purple: #e6ddf5;
  --color-pastel-purple-text: #4c1d95;
  --color-pastel-pink: #fbd9ea;
  --color-pastel-pink-text: #9d2360;
  --color-leather: #6f4a2f;
  --color-leather-highlight: #8a5f3d;
  --color-leather-shadow: #4d3423;
  --color-leather-stamp: #e7d3a1;
  --color-leather-stitch: #c9a67a;
  --green: #28a745;
  --red: #dc3545;
  --yellow: #ffc107;
  --primary: var(--text-blue-navy);
  --info: var(--background-blue-light);
  --success: var(--green);
  --danger: var(--red);
  --warning: var(--yellow);
  --light: var(--background-gray-light);
  --default: var(--background-gray-dim);
  --purple: var(--background-purple);
  --orange: var(--background-orange-dark);
}

@font-face {
  font-family: "Inter";
  src: url("/webfonts/Inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/webfonts/Inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/webfonts/Inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/webfonts/RobotoMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/webfonts/RobotoMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --gutter-xxs: 4px;
  --gutter-xs: 8px;
  --gutter-sm: 12px;
  --gutter-md: 20px;
  --gutter-lg: 100px;
  --navbar-height: 56px;
  --padding-default-vertical: .75rem;
  --padding-default-horizontal: 1.25rem;
  --padding-default: var(--padding-default-vertical) var(--padding-default-horizontal);
  --font-size-sm: 12px;
  --border-radius: 4px;
  --form-control-height: 36px;
  --form-control-height-sm: 28px;
}

:root {
  --color-link: inherit;
}

@layer reset {
  html, body {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  body {
    overflow: hidden;
    color: var(--default-text-primary-color);
  }
  * {
    box-sizing: border-box;
  }
  a {
    color: var(--default-link-color);
    text-decoration: none;
  }
  a:visited {
    color: var(--default-link-color);
  }
  p {
    padding: var(--gutter-xxs) 0;
    margin: 0;
  }
  i.fas {
    line-height: inherit;
  }
  kbd {
    cursor: pointer;
  }
  input[type=text], textarea {
    padding: 0;
    margin: 0;
    border: 0;
  }
  ::-ms-reveal {
    display: none;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  hr {
    width: 100%;
    height: 1px;
    color: var(--color-iron-40);
    margin: 16px 0;
  }
  #confirmationModal {
    display: none;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }
  fieldset {
    border: none;
    padding: 0;
  }
  [hidden] {
    display: none;
  }
}
:root {
  --font-family-main: 'Inter', sans-serif;
  --font-family-alternative: 'Roboto Mono', monospace;
  --body-background-color: var(--color-concrete);
  --overlay-background-color: var(--color-regent-gray-50);
  --default-text-primary-color: var(--color-nile-blue);
  --default-text-secondary-color: var(--color-pale-sky);
  --default-text-light-color: var(--color-iron);
  --default-icon-color: var(--color-pale-sky);
  --copy-icon-color: var(--color-gray-chateau);
  --copy-icon-hover-color: var(--color-bondi-blue);
  --super-admin-icon-color: var(--color-fire-bush);
  --icon-success-color: var(--color-green-haze);
  --icon-danger-color: var(--color-cinnabar);
  --icon-warning-color: var(--color-fire-bush);
  --icon-info-color: var(--color-pacific-blue);
  --icon-muted-color: var(--color-oslo-gray);
  --icon-disabled-color: var(--color-iron);
  --permission-status-all-color: var(--color-pacific-blue);
  --permission-status-some-color: color-mix(in srgb, var(--color-pacific-blue) 50%, var(--color-white));
  --permission-status-none-color: var(--color-iron);
  --delete-action-color: var(--color-slate-gray);
  --delete-action-hover-color: var(--color-cinnabar);
  --duplicate-action-color: var(--color-slate-gray);
  --duplicate-action-hover-color: var(--default-text-primary-color);
  --custom-events-edit-action-color: var(--color-bondi-blue);
  --custom-events-edit-action-hover-color: var(--color-blue-lagoon);
  --default-link-color: var(--color-bahama-blue);
  --navbar-text-color: var(--color-white);
  --anonymous-border-color: var(--color-black-10);
  --anonymous-background-color: var(--color-lily-white);
  --anonymous-link-color: var(--color-bahama-blue);
  --anonymous-header-text-color: var(--color-black);
  --anonymous-info-card-background-color: var(--color-white);
  --landing-background-color: var(--color-midnight);
  --landing-background-accent-color: var(--color-nile-blue);
  --landing-glow-primary-color: var(--color-bondi-blue);
  --landing-glow-secondary-color: var(--color-pacific-blue);
  --landing-glow-accent-color: var(--color-golden-tainoi);
  --landing-title-color: var(--color-white);
  --landing-title-highlight-color: var(--color-golden-tainoi);
  --landing-text-color: var(--color-white-70);
  --landing-pulse-color: var(--color-golden-tainoi);
  --mfa-input-default-border-color: var(--color-iron);
  --mfa-input-focus-border-color: var(--color-bondi-blue);
  --mfa-input-focus-box-shadow-color: var(--color-bondi-blue);
  --beacon-close-button-background-color: var(--color-bondi-blue);
  --beacon-close-button-hover-background-color: var(--color-blue-lagoon);
  --beacon-close-button-text-color: var(--color-white);
  --drawer-background-color: var(--color-white);
  --drawer-handle-color: var(--color-iron);
  --upload-dropzone-border-color: var(--color-iron);
  --upload-dropzone-active-border-color: var(--color-bondi-blue);
  --upload-dropzone-background-color: transparent;
  --upload-dropzone-active-background-color: var(--color-polar);
  --upload-dropzone-icon-color: var(--color-bahama-blue);
  --upload-dropzone-text-color: var(--color-nile-blue);
  --upload-dropzone-hint-color: var(--color-pale-sky);
  --upload-dropzone-link-color: var(--color-bahama-blue);
  --field-mapping-scroll-viewport-offset: 460px;
  --field-mapping-scroll-button-background: var(--color-white);
  --field-mapping-scroll-button-icon-color: var(--color-pale-sky);
  --field-mapping-cell-border-color: var(--color-gallery);
  --field-mapping-row-hover-background: var(--color-polar);
  --field-mapping-action-background: var(--color-white);
  --field-mapping-action-icon-color: var(--color-pale-sky);
  --field-mapping-action-icon-hover-color: var(--color-bondi-blue);
  --field-mapping-skipped-row-color: var(--color-iron);
  --field-mapping-skipped-row-background: var(--color-concrete);
  --field-mapping-order-match-color: var(--color-bondi-blue);
  --field-mapping-position-badge-background: var(--color-polar);
  --field-mapping-position-badge-color: var(--color-deep-cerulean);
  --field-mapping-position-badge-border-color: var(--color-periwinkle);
  --field-mapping-skipped-accent: var(--color-iron);
  --field-mapping-unmapped-accent: var(--color-iron);
  --field-mapping-skipped-column-header-background: color-mix(in srgb, var(--color-nile-blue) 7%, var(--color-white));
  --field-mapping-skipped-column-background: color-mix(in srgb, var(--color-nile-blue) 4%, var(--color-white));
  --field-mapping-skipped-column-text: var(--color-gray-chateau);
  --field-mapping-skipped-column-icon: var(--color-gray-chateau);
  --field-mapping-skipped-badge-background: color-mix(in srgb, var(--color-nile-blue) 11%, var(--color-white));
  --field-mapping-skipped-badge-color: var(--color-gray-chateau);
  --transformation-changed-cell-background: var(--color-polar);
  --transformation-changed-cell-color: var(--color-deep-cerulean);
  --transformation-badge-background: var(--color-polar);
  --transformation-badge-color: var(--color-deep-cerulean);
  --transformation-badge-border-color: var(--color-periwinkle);
  --transformation-rule-border-color: var(--color-periwinkle);
  --transformation-rule-background: var(--color-aliceblue);
  --file-summary-background: color-mix(in srgb, var(--color-nile-blue) 2%, var(--color-white));
  --file-summary-border-color: var(--color-mercury);
  --file-summary-sub-color: var(--color-oslo-gray);
  --file-summary-icon-background: var(--color-polar);
  --file-summary-icon-color: var(--color-deep-cerulean);
  --file-summary-icon-border-color: var(--color-periwinkle);
  --file-summary-chip-background: var(--color-white);
  --file-summary-chip-hover-background: var(--color-concrete);
  --file-summary-chip-clear-background: var(--color-concrete);
  --file-summary-chip-clear-hover-color: var(--color-bondi-blue);
  --file-summary-chip-invalid-border-color: var(--color-flamingo);
  --file-summary-chip-invalid-icon-color: var(--color-flamingo);
  --products-custom-card-background-color: var(--color-concrete);
  --products-custom-card-tag-x-color: var(--color-oslo-gray);
  --products-alternate-sku-disabled-background-color: var(--color-mercury);
  --products-thumbnail-placeholder-color: var(--color-gray-chateau);
  --products-bundle-landed-background: var(--callout-info-background-color);
  --products-untitled-title-color: var(--color-pale-sky);
  --products-bundle-total-color: var(--color-nile-blue);
  --products-bundle-picker-color: var(--color-pale-sky);
  --products-bundle-picker-hover-color: var(--color-nile-blue);
  --products-bundle-picker-hover-background-color: var(--color-concrete);
  --products-bundle-picker-selected-color: var(--color-bondi-blue);
  --products-bundle-chip-background-color: var(--color-white);
  --products-bundle-chip-border-color: var(--color-iron);
  --products-bundle-chip-quantity-color: var(--color-oslo-gray);
  --products-bundle-chip-hover-background-color: var(--color-pattens-blue);
  --scope-filter-border-color: var(--color-iron);
  --scope-filter-text-color: var(--default-text-secondary-color);
  --scope-filter-active-background-color: var(--color-bondi-blue);
  --scope-filter-active-text-color: var(--color-white);
  --submission-zone-border-color: var(--color-iron);
  --submission-zone-header-background-color: var(--color-iron-20);
  --submission-zone-muted-background-color: var(--color-iron-20);
  --submission-line-background-color: var(--color-white);
  --submission-zone-muted-text-color: var(--color-oslo-gray);
  --submission-line-border-color: var(--color-gallery);
  --submission-line-handle-color: var(--color-oslo-gray);
  --submission-line-placeholder-border-color: var(--color-iron);
  --stepped-integer-glyph-size: 16px;
  --stepped-integer-button-background-color: var(--color-concrete);
  --stepped-integer-button-color: var(--color-oslo-gray);
  --sidebar-background-color: var(--color-concrete);
  --sidebar-group-icon-color: var(--color-oslo-gray);
  --sidebar-group-title-color: var(--color-spectra);
  --sidebar-group-selected-title-color: var(--color-blue-lagoon);
  --sidebar-folder-group-border-color: var(--color-iron);
  --sidebar-folder-group-selected-border-color: var(--color-bondi-blue);
  --sidebar-hover-background-color: var(--color-mercury);
  --sidebar-folder-edit-add-background-color: var(--color-white);
  --sidebar-folder-edit-add-hover-background-color: var(--color-porcelain);
  --sidebar-folder-edit-add-icon-color: var(--color-bondi-blue);
  --sidebar-folder-edit-muted-text-color: var(--color-pale-sky);
  --sidebar-folder-edit-action-color: var(--color-pale-sky);
  --sidebar-folder-edit-action-hover-icon-color: var(--color-blue-lagoon);
  --sidebar-folder-edit-action-danger-icon-color: var(--color-danger);
  --sidebar-folder-edit-ghost-background-color: var(--color-white);
  --sidebar-folder-edit-placeholder-background-color: var(--color-bondi-blue-light);
  --sidebar-folder-edit-mask-color: var(--color-regent-gray-50);
  --sidebar-menu-item-default-border-color: var(--color-iron);
  --sidebar-menu-item-hover-border-color: var(--color-oslo-gray);
  --sidebar-menu-item-active-border-color: var(--color-bondi-blue);
  --sidebar-collapse-icon-color: var(--color-oslo-gray);
  --sidebar-order-count-color: var(--color-oslo-gray);
  --sidebar-shared-view-text-color: var(--color-pale-sky);
  --sidebar-store-icon-color: var(--color-bondi-blue);
  --sidebar-store-switcher-background-color: var(--color-white);
  --sidebar-store-switcher-border-color: var(--color-iron-80);
  --sidebar-bottom-background-color: var(--color-mercury);
  --sidebar-bottom-text-color: var(--color-abbey);
  --sidebar-bottom-muted-color: var(--color-oslo-gray);
  --sidebar-bottom-link-color: var(--color-blue-lagoon);
  --sidebar-expand-background-color: var(--color-white);
  --sidebar-expand-border-color: var(--color-iron-80);
  --sidebar-expand-icon-color: var(--color-iron-80);
  --sidebar-store-type-icon-color: var(--color-bondi-blue);
  --sidebar-store-type-trial-icon-color: var(--color-bondi-blue-40);
  --sidebar-store-result-locked-color: var(--color-oslo-gray);
  --sidebar-store-result-trashed-color: var(--color-oslo-gray);
  --content-background-color-desktop: var(--color-white);
  --content-foreground-color-desktop: var(--color-white);
  --content-background-color-mobile: var(--color-concrete);
  --content-foreground-color-mobile: var(--color-white);
  --tabs-font-color: var(--color-slate-gray);
  --tabs-active-font-color: var(--color-spectra);
  --tabs-hover-border-color: var(--color-bondi-blue-75);
  --tabs-active-border-color: var(--color-bondi-blue);
  --table-credentials-icon-color: var(--color-oslo-gray);
  --table-no-records-row-background-color: var(--color-concrete);
  --table-untitled-cell-color: var(--color-iron);
  --warehouse-mapping-direction-mapped-color: var(--color-bondi-blue);
  --form-field-background-default-color: white;
  --form-field-placeholder-default-color: var(--color-gray);
  --form-field-border-default-color: var(--color-iron);
  --form-field-border-active-color: var(--color-blue-lagoon);
  --form-field-border-active-shadow-color: var(--color-bondi-blue-40);
  --form-field-border-error-color: var(--color-flamingo);
  --form-field-border-disabled-color: var(--color-concrete);
  --form-field-text-error-color: var(--color-flamingo);
  --form-radio-toggle-default-text-color: var(--color-pale-sky);
  --form-radio-toggle-hover-color: var(--color-iron-20);
  --form-radio-toggle-selected-text-color: white;
  --form-radio-toggle-selected-background-color: var(--color-bondi-blue);
  --form-radio-toggle-selected-border-color: var(--color-bondi-blue);
  --form-radio-checked-color: var(--color-bondi-blue);
  --form-radio-card-background-color: var(--form-field-background-default-color);
  --form-radio-card-border-color: var(--form-field-border-default-color);
  --form-radio-card-hover-background-color: var(--form-radio-toggle-hover-color);
  --form-radio-card-selected-border-color: var(--color-bondi-blue);
  --form-radio-card-selected-background-color: var(--color-link-water);
  --form-radio-card-dot-border-color: var(--color-pale-sky);
  --schedule-controls-background: var(--color-concrete);
  --form-select-option-hover: var(--color-iron-20);
  --form-select-option-selected: var(--color-polar);
  --form-select-option-tag-selected: var(--color-concrete);
  --form-select-option-tag-hover-color: var(--color-pale-sky-25);
  --form-select-confirm-change-color: var(--color-bondi-blue);
  --form-select-confirm-run-color: var(--color-fire-bush);
  --form-select-placeholder-color: var(--color-oslo-gray);
  --grouped-label-group-color: var(--color-oslo-gray);
  --input-suggestions-option-hover-background-color: var(--color-concrete);
  --store-tag-color: var(--color-white);
  --store-tag-gray-background: var(--color-bali-hai);
  --store-tag-red-background: var(--color-cinnabar);
  --store-tag-orange-background: var(--color-christine);
  --store-tag-brown-background: var(--color-potters-clay);
  --store-tag-yellow-background: var(--color-tulip-tree);
  --store-tag-lime-background: var(--color-vida-loca);
  --store-tag-green-background: var(--color-green-haze);
  --store-tag-teal-background: var(--color-gossamer);
  --store-tag-blue-background: var(--color-bondi-blue);
  --store-tag-azure-background: var(--color-royal-blue);
  --store-tag-purple-background: var(--color-medium-purple);
  --store-tag-pink-background: var(--color-hot-pink);
  --store-tag-pastel-gray-background: var(--color-pastel-gray);
  --store-tag-pastel-gray-color: var(--color-pastel-gray-text);
  --store-tag-pastel-red-background: var(--color-pastel-red);
  --store-tag-pastel-red-color: var(--color-pastel-red-text);
  --store-tag-pastel-orange-background: var(--color-pastel-orange);
  --store-tag-pastel-orange-color: var(--color-pastel-orange-text);
  --store-tag-pastel-brown-background: var(--color-pastel-brown);
  --store-tag-pastel-brown-color: var(--color-pastel-brown-text);
  --store-tag-pastel-yellow-background: var(--color-pastel-yellow);
  --store-tag-pastel-yellow-color: var(--color-pastel-yellow-text);
  --store-tag-pastel-lime-background: var(--color-pastel-lime);
  --store-tag-pastel-lime-color: var(--color-pastel-lime-text);
  --store-tag-pastel-green-background: var(--color-pastel-green);
  --store-tag-pastel-green-color: var(--color-pastel-green-text);
  --store-tag-pastel-teal-background: var(--color-pastel-teal);
  --store-tag-pastel-teal-color: var(--color-pastel-teal-text);
  --store-tag-pastel-blue-background: var(--color-pastel-blue);
  --store-tag-pastel-blue-color: var(--color-pastel-blue-text);
  --store-tag-pastel-azure-background: var(--color-pastel-azure);
  --store-tag-pastel-azure-color: var(--color-pastel-azure-text);
  --store-tag-pastel-purple-background: var(--color-pastel-purple);
  --store-tag-pastel-purple-color: var(--color-pastel-purple-text);
  --store-tag-pastel-pink-background: var(--color-pastel-pink);
  --store-tag-pastel-pink-color: var(--color-pastel-pink-text);
  --store-tag-divider-color: var(--color-white-25);
  --store-tag-remove-hover-background: var(--color-black-10);
  --catalog-swatch-border: var(--color-black-10);
  --tags-cell-action-color: var(--color-pale-sky);
  --tags-cell-action-hover-color: var(--color-bondi-blue);
  --tags-cell-glow-color: var(--color-black-25);
  --stock-cell-save-color: var(--color-pale-sky);
  --stock-cell-save-hover-color: var(--color-nile-blue);
  --stock-cell-saved-color: var(--color-green-haze);
  --stock-cell-failed-color: var(--color-flamingo);
  --integration-action-background-color: var(--color-white);
  --integration-action-border-color: var(--color-iron);
  --integration-action-divider-color: var(--color-divider);
  --integration-action-gray-background: var(--color-pastel-gray);
  --integration-action-gray-color: var(--color-pastel-gray-text);
  --integration-action-red-background: var(--color-pastel-red);
  --integration-action-red-color: var(--color-pastel-red-text);
  --integration-action-orange-background: var(--color-pastel-orange);
  --integration-action-orange-color: var(--color-pastel-orange-text);
  --integration-action-brown-background: var(--color-pastel-brown);
  --integration-action-brown-color: var(--color-pastel-brown-text);
  --integration-action-yellow-background: var(--color-pastel-yellow);
  --integration-action-yellow-color: var(--color-pastel-yellow-text);
  --integration-action-lime-background: var(--color-pastel-lime);
  --integration-action-lime-color: var(--color-pastel-lime-text);
  --integration-action-green-background: var(--color-pastel-green);
  --integration-action-green-color: var(--color-pastel-green-text);
  --integration-action-teal-background: var(--color-pastel-teal);
  --integration-action-teal-color: var(--color-pastel-teal-text);
  --integration-action-blue-background: var(--color-pastel-blue);
  --integration-action-blue-color: var(--color-pastel-blue-text);
  --integration-action-azure-background: var(--color-pastel-azure);
  --integration-action-azure-color: var(--color-pastel-azure-text);
  --integration-action-purple-background: var(--color-pastel-purple);
  --integration-action-purple-color: var(--color-pastel-purple-text);
  --integration-action-pink-background: var(--color-pastel-pink);
  --integration-action-pink-color: var(--color-pastel-pink-text);
  --form-password-reveal-color: var(--color-gray-chateau);
  --form-password-reveal-active-color: var(--color-nile-blue);
  --form-button-default-default-background-color: var(--color-bon-jour);
  --form-button-default-default-text-color: var(--color-nile-blue);
  --form-button-default-hover-background-color: var(--color-gallery);
  --form-button-default-active-background-color: var(--color-iron-80);
  --form-button-default-disabled-background-color: var(--color-seashell);
  --form-button-default-disabled-text-color: var(--color-oslo-gray);
  --form-button-primary-default-background-color: var(--color-bondi-blue);
  --form-button-primary-default-text-color: var(--color-white);
  --form-button-primary-hover-background-color: var(--color-pacific-blue);
  --form-button-primary-active-background-color: var(--color-deep-cerulean);
  --form-button-primary-disabled-background-color: var(--color-bondi-blue-40);
  --form-button-success-default-background-color: var(--color-green-haze);
  --form-button-success-default-text-color: var(--color-white);
  --form-button-success-hover-background-color: var(--color-green-haze-80);
  --form-button-success-active-background-color: var(--color-jewel);
  --form-button-success-disabled-background-color: var(--color-salem-40);
  --form-button-warning-default-background-color: var(--color-fire-bush);
  --form-button-warning-default-text-color: var(--color-white);
  --form-button-warning-hover-background-color: var(--color-tulip-tree);
  --form-button-warning-active-background-color: var(--color-geebung);
  --form-button-warning-disabled-background-color: var(--color-tulip-tree-80);
  --form-button-danger-default-background-color: var(--color-flamingo);
  --form-button-danger-default-text-color: var(--color-white);
  --form-button-danger-hover-background-color: var(--color-cinnabar);
  --form-button-danger-active-background-color: var(--color-flush-mahogany);
  --form-button-danger-disabled-background-color: var(--color-flamingo-60);
  --form-button-text-default-text-color: var(--color-blue-lagoon);
  --form-button-text-hover-text-color: var(--color-bondi-blue);
  --form-button-text-active-text-color: var(--color-blumine);
  --form-button-text-disabled-text-color: var(--color-nepal);
  --form-button-destructive-default-background-color: var(--color-shark);
  --form-button-destructive-default-text-color: var(--color-white);
  --form-button-destructive-hover-background-color: var(--color-black);
  --form-button-destructive-active-background-color: var(--color-black);
  --form-button-destructive-disabled-background-color: var(--color-shark-80);
  --form-checkbox-default-color: var(--color-gray-chateau);
  --form-checkbox-hover-color: var(--color-pale-sky);
  --form-checkbox-disabled-color: var(--color-seashell);
  --form-checkbox-active-color: var(--color-iron-80);
  --form-checkbox-checked-color: var(--color-bondi-blue);
  --form-checkbox-checked-hover-color: var(--color-pacific-blue);
  --form-checkbox-checked-disabled-color: var(--color-bondi-blue-40);
  --form-checkbox-checked-active-color: var(--color-deep-cerulean);
  --form-toggle-off: var(--color-iron-40);
  --form-toggle-on: var(--color-green-haze);
  --form-toggle-on-hover: var(--color-green-haze-80);
  --form-toggle-knob: var(--form-field-background-default-color);
  --form-toggle-focus-ring: var(--color-jade);
  --form-toggle-knob-shadow: 0 1px 2px var(--color-black-10);
  --toast-border-color: var(--color-iron-40);
  --toast-box-shadow-color: var(--color-black);
  --toast-background-color: var(--color-white);
  --toast-success-icon-background-color: var(--color-jade);
  --toast-success-icon-color: var(--color-white);
  --toast-success-title-color: var(--color-green-haze);
  --toast-info-icon-background-color: var(--color-bondi-blue);
  --toast-info-icon-color: var(--color-white);
  --toast-info-title-color: var(--color-blue-lagoon);
  --toast-warning-icon-background-color: var(--color-tulip-tree);
  --toast-warning-icon-color: var(--color-white);
  --toast-warning-title-color: var(--color-geebung);
  --toast-error-icon-background-color: var(--color-flamingo);
  --toast-error-icon-color: var(--color-white);
  --toast-error-title-color: var(--color-cinnabar);
  --toast-text-color: var(--color-pale-sky);
  --toast-close-button-color: var(--color-gray-chateau);
  --callout-default-icon-color: var(--color-oslo-gray);
  --callout-default-border-color: var(--color-oslo-gray);
  --callout-default-background-color: var(--color-concrete);
  --callout-info-muted-icon-color: color-mix(in srgb, var(--callout-info-icon-color) 30%, transparent);
  --callout-info-icon-color: var(--color-bondi-blue);
  --callout-info-border-color: var(--color-bondi-blue);
  --callout-info-background-color: var(--color-aliceblue);
  --callout-warning-icon-color: var(--color-tulip-tree);
  --callout-warning-border-color: var(--color-tulip-tree);
  --callout-warning-background-color: var(--color-seashell-peach);
  --callout-error-icon-color: var(--color-flamingo);
  --callout-error-border-color: var(--color-flamingo);
  --callout-error-background-color: var(--color-chablis);
  --callout-success-icon-color: var(--color-green-haze);
  --callout-success-border-color: var(--color-green-haze);
  --callout-success-background-color: var(--color-egg-green);
  --callout-text-color: var(--color-pale-sky);
  --callout-paused-icon-color: var(--color-santa-fe);
  --callout-paused-border-color: var(--color-santa-fe);
  --callout-paused-background-color: var(--color-pastel-orange-50);
  --parked-workflow-accent-color: var(--color-sienna);
  --parked-workflow-chip-hover-background-color: var(--color-pastel-orange);
  --parked-workflow-divider-color: var(--color-tulip-tree);
  --parked-workflow-waiting-color: var(--color-potters-clay);
  --parked-workflow-failing-color: var(--color-flamingo);
  --parked-workflow-resuming-color: var(--color-pastel-green-text);
  --card-warning-icon-color: var(--color-tulip-tree);
  --card-warning-border-color: var(--color-tulip-tree);
  --card-warning-background-color: var(--color-seashell-peach);
  --card-footer-info-text-color: var(--color-oslo-gray);
  --card-footer-info-text-font-size: 12px;
  --integration-card-background-color: var(--color-concrete);
  --integration-card-enabled-background-color: var(--color-white);
  --integration-card-dev-border-color: var(--super-admin-icon-color);
  --integration-card-dev-marker-icon-color: var(--super-admin-icon-color);
  --integration-card-retired-border-color: var(--color-leather-stitch);
  --integration-card-new-ribbon-background-color: var(--color-tulip);
  --integration-card-new-ribbon-text-color: var(--color-dark-bronze);
  --integration-new-filter-background-color: var(--color-tulip);
  --integration-new-filter-hover-background-color: var(--color-tulip-tree);
  --integration-new-filter-text-color: var(--color-dark-bronze);
  --integration-new-filter-focus-ring-color: var(--color-bronze);
  --integration-card-retired-ribbon-background-color: var(--color-leather);
  --integration-card-retired-ribbon-highlight-color: var(--color-leather-highlight);
  --integration-card-retired-ribbon-shadow-color: var(--color-leather-shadow);
  --integration-card-retired-ribbon-text-color: var(--color-leather-stamp);
  --integration-card-beta-ribbon-background-color: var(--color-brick);
  --integration-card-beta-ribbon-highlight-color: var(--color-brick-highlight);
  --integration-card-beta-ribbon-shadow-color: var(--color-brick-shadow);
  --integration-card-beta-ribbon-text-color: var(--color-brick-stamp);
  --integration-card-active-bar-color: var(--color-green-haze);
  --integration-card-needs-setup-bar-color: var(--color-bondi-blue);
  --integration-card-chip-background-color: var(--color-mercury);
  --integration-card-chip-text-color: var(--color-pale-sky-dark);
  --integration-card-count-text-color: var(--color-oslo-gray);
  --select-plan-estimate-background-color: var(--color-concrete);
  --select-plan-label-color: var(--color-oslo-gray);
  --select-plan-accent-color: var(--color-bondi-blue);
  --select-plan-accent-hover-color: var(--color-blue-lagoon);
  --select-plan-price-color: var(--color-bondi-blue);
  --select-plan-recommended-border-color: var(--color-bondi-blue);
  --select-plan-recommended-value-color: var(--color-green-haze);
  --select-plan-product-box-background-color: var(--color-concrete);
  --select-plan-no-fee-color: var(--color-green-haze);
  --select-plan-footer-note-color: var(--color-oslo-gray);
  --select-plan-max-width: calc(400px * 3 + var(--gutter-md) * 2);
  --select-plan-half-width: calc((var(--select-plan-max-width) - var(--gutter-md)) / 2);
  --banner-text-color: var(--color-nile-blue);
  --banner-title-color: var(--color-nile-blue);
  --banner-error-text-color: var(--color-cinnabar);
  --banner-success-background-color: var(--color-willow-brook);
  --banner-success-icon-color: var(--color-green-haze);
  --banner-success-title-color: var(--color-green-haze);
  --banner-info-background-color: var(--color-water);
  --banner-info-icon-color: var(--color-bondi-blue);
  --banner-info-title-color: var(--color-bondi-blue);
  --banner-warning-background-color: var(--color-cornsilk);
  --banner-warning-icon-color: var(--color-tulip-tree);
  --banner-warning-title-color: var(--color-tulip-tree);
  --banner-error-background-color: var(--color-misty-rose);
  --banner-error-icon-color: var(--color-flamingo);
  --banner-error-title-color: var(--color-flamingo);
  --badge-font-size: 12px;
  --badge-default-background-color: var(--color-concrete);
  --badge-default-icon-color: var(--color-oslo-gray);
  --badge-success-background-color: var(--color-tea-green);
  --badge-success-icon-color: var(--color-green-haze);
  --badge-info-background-color: var(--color-polar);
  --badge-info-icon-color: var(--color-bondi-blue);
  --badge-warning-background-color: var(--color-lemon-chiffon);
  --badge-warning-icon-color: var(--color-tulip-tree);
  --badge-error-background-color: var(--color-light-red);
  --badge-error-icon-color: var(--color-cinnabar);
  --badge-muted-background-color: var(--color-mercury);
  --integration-report-stub-background-color: var(--color-concrete);
  --integration-report-stub-text-color: var(--color-manatee);
  --badge-muted-color: var(--color-nile-blue);
  --header-badge-info-background-color: var(--color-pastel-orange);
  --header-badge-info-text-color: var(--color-pastel-orange-text);
  --badge-active-background-color: var(--color-jewel);
  --badge-active-color: var(--color-white);
  --badge-active-icon-color: var(--color-white);
  --badge-danger-background-color: var(--color-shark);
  --badge-danger-color: var(--color-white);
  --table-row-hover-background-color: var(--color-oyster-bay);
  --task-group-count-color: var(--color-oslo-gray);
  --task-row-error-color: var(--color-flamingo);
  --task-row-failed-color: var(--color-shark);
  --tabs-count-background-color: var(--color-concrete);
  --tabs-count-color: var(--color-pale-sky);
  --tabs-count-active-background-color: var(--color-polar);
  --tabs-count-active-color: var(--color-blue-lagoon);
  --tabs-alert-dot-color: var(--color-flamingo);
  --permission-count-background-color: var(--color-white);
  --permission-count-border-color: var(--color-mercury);
  --permission-count-color: var(--color-pale-sky);
  --permission-group-icon-color: var(--color-bondi-blue);
  --permission-group-border-color: var(--color-alto);
  --permission-group-background-color: var(--color-white);
  --permission-group-header-background-color: color-mix(in srgb, var(--color-nile-blue) 3%, var(--color-white));
  --store-user-rail-border-color: var(--color-alto);
  --store-user-rail-background-color: var(--color-white);
  --welcome-card-background-color: var(--color-white);
  --welcome-icon-color: var(--color-bondi-blue);
  --welcome-kicker-color: var(--color-deep-cerulean);
  --welcome-spotlight-background-color: var(--color-oyster-bay);
  --welcome-spotlight-border-color: var(--color-bondi-blue-40);
  --tasks-card-head-background: color-mix(in srgb, var(--color-nile-blue) 3%, var(--color-white));
  --tasks-chip-custom-event-background: var(--color-pastel-purple);
  --tasks-chip-custom-event-color: var(--color-pastel-purple-text);
  --tasks-chip-import-template-background: var(--color-pastel-teal);
  --tasks-chip-import-template-color: var(--color-pastel-teal-text);
  --tasks-secondary-text-color: var(--color-pale-sky);
  --tasks-column-head-color: var(--color-gray-chateau);
  --tasks-stat-alert-background: var(--color-chablis);
  --tasks-stat-alert-color: var(--color-flush-mahogany);
  --tasks-pill-waiting-background: var(--color-concrete);
  --tasks-pill-waiting-color: var(--color-pale-sky);
  --tasks-pill-queued-background: var(--color-pastel-azure);
  --tasks-pill-queued-color: var(--color-pastel-azure-text);
  --tasks-pill-running-background: var(--color-egg-green);
  --tasks-pill-running-color: var(--color-fountain-green);
  --tasks-accent-color: var(--color-blue-lagoon);
  --tasks-processing-toggle-hover-background: var(--color-concrete);
  --tasks-accent-background: var(--color-polar);
  --tasks-stat-queued-color: var(--color-blue-lagoon);
  --tasks-stat-running-color: var(--color-fountain-green);
  --tasks-pill-failing-background: var(--color-misty-rose);
  --tasks-pill-failing-color: var(--color-flush-mahogany);
  --tasks-pill-failed-background: var(--color-shark);
  --tasks-pill-failed-color: var(--color-white);
  --tasks-pill-completed-background: var(--color-egg-green);
  --tasks-pill-completed-color: var(--color-fountain-green);
  --tasks-pill-paused-background: var(--color-lemon-chiffon);
  --tasks-pill-paused-color: var(--color-geebung);
  --tasks-bulk-bar-background: var(--color-polar);
  --group-pager-divider-color: var(--color-divider);
  --group-pager-text-color: var(--color-pale-sky);
  --group-pager-hover-background: var(--color-concrete);
  --group-pager-active-background: var(--color-polar);
  --group-pager-active-color: var(--color-blue-lagoon);
  --group-pager-active-border-color: color-mix(in srgb, var(--color-blue-lagoon) 30%, var(--color-polar));
  --group-pager-error-color: var(--color-flamingo);
  --tasks-switch-on-color: var(--color-green-haze);
  --tasks-switch-off-color: var(--color-gray-chateau);
  --default-store-marker-color: var(--color-bondi-blue);
  --default-store-arrival-background-color: var(--color-polar);
  --current-store-accent-color: var(--color-green-haze);
  --order-details-fulfillment-timeline-dot-color: var(--color-link-water);
  --order-details-fulfillment-status-color: var(--color-pale-sky);
  --order-details-fulfillment-header-background: var(--color-concrete);
  --order-details-unfulfilled-header-background: var(--color-aliceblue);
  --order-details-fulfillment-actions-background: var(--color-seashell);
  --order-details-fulfillment-actions-text: var(--color-pale-sky);
  --order-details-fulfillment-actions-link: var(--color-bondi-blue);
  --order-details-note-delete-color: var(--icon-danger-color);
  --history-source-user-icon-color: var(--color-bondi-blue);
  --history-source-system-icon-color: var(--color-slate-gray);
  --order-details-order-date-color: var(--color-gray);
  --order-list-source-icon-color: var(--color-bondi-blue-40);
  --table-expandable-row-background-color: var(--color-aliceblue);
  --row-preview-hover-background: var(--color-concrete);
  --row-preview-active-background: var(--color-polar);
  --row-preview-active-accent: var(--color-bondi-blue);
  --row-preview-nav-color: var(--color-bondi-blue);
  --row-preview-nav-hover-color: var(--color-blue-lagoon);
  --row-preview-chip-background: var(--color-concrete);
  --row-preview-thumb-background: var(--color-concrete);
  --order-preview-item-border-color: var(--color-divider);
  --order-preview-dock-background: var(--color-concrete);
  --order-preview-dock-border-color: var(--color-iron-40);
  --order-preview-date-icon-color: var(--color-gray-chateau);
  --product-preview-discontinued-background: var(--color-seashell-peach);
  --product-preview-discontinued-border-color: var(--color-tulip-tree);
  --addon-field-default-icon-color: var(--color-black);
  --addon-field-default-background-color: var(--color-concrete);
  --addon-field-success-icon-color: var(--color-jewel);
  --addon-field-success-border-color: var(--color-jade);
  --addon-field-success-background-color: var(--color-willow-brook);
  --addon-field-info-icon-color: var(--color-bondi-blue);
  --addon-field-info-border-color: var(--color-bondi-blue);
  --addon-field-info-background-color: var(--color-aliceblue);
  --addon-field-warning-icon-color: var(--color-tulip-tree);
  --addon-field-warning-border-color: var(--color-tulip-tree);
  --addon-field-warning-background-color: var(--color-seashell-peach);
  --addon-field-error-icon-color: var(--color-flamingo);
  --addon-field-error-border-color: var(--color-flamingo);
  --addon-field-error-background-color: var(--color-chablis);
  --addon-field-text-color: var(--color-pale-sky);
  --addon-field-read-only-background-color: var(--color-concrete);
  --field-mapping-border-color: var(--color-gallery);
  --field-mapping-header-background-color: var(--color-concrete);
  --field-mapping-header-text-color: var(--color-pale-sky);
  --field-mapping-sticky-cell-background: var(--color-white);
  --filter-card-active-background-color: var(--color-aliceblue);
  --filter-card-active-border-color: var(--color-bondi-blue);
  --settings-row-border-color: var(--color-iron);
  --settings-row-divider-color: var(--color-divider);
  --settings-row-background-color: var(--color-white);
  --integration-settings-max-width: 880px;
  --drawer-header-border-color: var(--color-iron-40);
  --drawer-footer-border-color: var(--color-iron-40);
  --drawer-table-heading-color: var(--color-pale-sky);
  --drawer-table-data-color: var(--color-nile-blue);
  --status-message-success: var(--color-green-haze);
  --status-message-warning: var(--color-fire-bush);
  --status-message-error: var(--color-cinnabar);
  --status-message-waiting: var(--color-oslo-gray);
  --modal-background-color: var(--color-white);
  --modal-text-color: var(--color-pale-sky);
  --sidepanel-text-secondary-color: var(--color-oslo-gray);
  --sidepanel-background-color: var(--color-white);
  --sidepanel-header-background-color: var(--color-concrete);
  --sidepanel-header-border-color: var(--color-iron-40);
  --sidepanel-header-title-color: var(--color-nile-blue);
  --sidepanel-header-control-color: var(--color-oslo-gray);
  --sidepanel-header-control-hover-color: var(--color-nile-blue);
  --sidepanel-header-control-hover-background-color: var(--color-mercury);
  --sidepanel-header-control-focus-color: var(--color-bondi-blue);
  --sidepanel-header-control-disabled-color: var(--color-iron-80);
  --sidepanel-section-header-border-color: var(--color-iron-40);
  --sidepanel-table-heading-color: var(--color-pale-sky);
  --sidepanel-table-data-color: var(--color-nile-blue);
  --sidepanel-footer-border-color: var(--color-iron-40);
  --recently-deleted-list-border-color: var(--color-iron-40);
  --automation-builder-card-background-color: color-mix(in srgb, var(--color-alabaster) 85%, var(--color-white));
  --automation-builder-card-border-color: var(--color-alto);
  --automation-builder-card-divider-color: var(--color-iron-40);
  --automation-builder-card-untitled-title-color: var(--color-pale-sky);
  --automation-action-added-flash-color: var(--color-lemon-chiffon);
  --automation-card-action-color: var(--color-slate-gray);
  --automation-card-action-hover-color: var(--color-bondi-blue);
  --automation-filter-connector-background-color: var(--color-porcelain);
  --automation-filter-match-all-color: var(--color-deep-teal);
  --automation-filter-match-any-color: var(--color-medium-purple);
  --automation-builder-card-hover-border-color: var(--color-bondi-blue-40);
  --automation-builder-card-preview-border-color: var(--color-bondi-blue);
  --automation-card-disabled-title-color: var(--color-nile-blue-80);
  --automation-card-position-background-color: var(--color-mischka);
  --automation-card-position-text-color: var(--color-nile-blue);
  --automation-card-drag-handle-color: var(--color-silver-sand);
  --automation-card-disabled-background-color: var(--color-porcelain);
  --automation-action-selector-border-color: var(--color-iron-40);
  --automation-action-selector-selected-background-color: color-mix(in srgb, var(--color-bondi-blue) 10%, var(--color-white));
  --automation-action-selector-description-color: var(--color-pale-sky);
  --automation-action-selector-muted-color: var(--color-gray-chateau);
  --automation-action-category-folders-color: var(--color-bondi-blue);
  --automation-action-category-stores-color: var(--color-bahama-blue);
  --automation-action-category-tags-color: var(--color-medium-purple);
  --automation-action-category-orderFields-color: var(--color-green-haze);
  --automation-action-category-productFields-color: var(--color-jewel);
  --automation-action-category-productStatus-color: var(--color-christine);
  --automation-action-category-email-color: var(--color-hot-pink);
  --automation-action-category-pricing-color: var(--color-geebung);
  --automation-action-category-notes-color: var(--color-spectra);
  --automation-action-category-shipping-color: var(--color-deep-teal);
  --automation-action-category-address-color: var(--color-mulberry);
  --automation-action-category-fulfillment-color: var(--color-blumine);
  --automation-action-category-items-color: var(--color-mahogany);
  --automation-action-category-inventory-color: var(--color-potters-clay);
  --automation-action-category-variables-color: var(--color-royal-purple);
  --automation-action-category-webhooks-color: var(--color-royal-blue);
  --automation-action-category-stop-color: var(--color-cinnabar);
  --automation-action-category-integration-color: var(--color-pale-sky);
  --automation-action-category-messaging-color: var(--color-violent-violet);
  --automation-event-category-order-color: var(--target-color-order);
  --automation-event-category-orderItem-color: var(--target-color-orderItem);
  --automation-event-category-shipment-color: var(--target-color-shipment);
  --automation-event-category-fulfillment-color: var(--target-color-fulfillment);
  --automation-event-category-product-color: var(--target-color-product);
  --custom-event-accent-color: var(--color-medium-purple);
  --automation-event-category-manualTrigger-color: var(--custom-event-accent-color);
  --automation-event-category-scheduledTrigger-color: var(--custom-event-accent-color);
  --automation-preview-action-icon-color: var(--color-bondi-blue);
  --automation-preview-pause-color: var(--color-potters-clay);
  --target-picker-heading-color: var(--color-bondi-blue);
  --target-card-background-color: var(--color-white);
  --target-card-text-color: var(--color-nile-blue);
  --panel-summary-background-color: var(--color-white);
  --panel-summary-title-color: var(--color-nile-blue);
  --target-card-subtitle-color: var(--color-nile-blue-80);
  --split-button-divider-color: var(--color-white);
  --target-color-order: var(--color-jade);
  --target-color-orderItem: var(--color-hot-pink);
  --target-color-shipment: var(--color-sunshine);
  --target-color-fulfillment: var(--color-fire-bush);
  --target-color-product: var(--color-pacific-blue);
  --run-detail-border-color: var(--color-iron);
  --run-detail-label-color: var(--color-pale-sky);
  --run-detail-success-color: var(--color-jade);
  --run-detail-error-color: var(--color-flamingo);
  --run-detail-muted-color: var(--color-pale-sky);
  --run-detail-warning-color: var(--color-tulip-tree);
  --run-detail-progress-track-color: var(--color-iron);
  --run-detail-progress-bar-color: var(--color-bondi-blue);
  --run-detail-live-color: var(--color-bondi-blue);
  --run-detail-issue-color: var(--color-flamingo);
  --run-detail-counter-hover-background: color-mix(in srgb, var(--color-nile-blue) 5%, transparent);
  --run-detail-counter-selected-background: color-mix(in srgb, var(--color-bondi-blue) 10%, transparent);
  --run-detail-counter-selected-border-color: var(--color-bondi-blue);
  --import-type-selected-color: var(--color-bondi-blue);
  --import-template-favorite-active-color: var(--color-tulip-tree);
  --import-template-type-icon-color: var(--color-pale-sky);
  --import-type-orders-icon-color: var(--color-jade);
  --import-type-products-icon-color: var(--color-pacific-blue);
  --import-type-shipments-icon-color: var(--color-sunshine);
  --import-source-chip-on-background: var(--color-tea-green);
  --import-source-chip-on-color: var(--color-green-haze);
  --import-source-chip-off-border-color: var(--color-iron);
  --import-source-chip-off-color: var(--color-oslo-gray);
  --import-last-import-color: var(--color-pale-sky);
  --import-last-import-never-color: var(--color-silver-sand);
  --import-template-favorite-inactive-color: var(--color-silver-sand);
  --import-dropzone-border-color: var(--color-iron);
  --import-landing-card-background: var(--color-white);
  --import-landing-card-border-color: var(--color-divider);
  --import-template-dropzone-background: var(--color-white);
  --import-template-row-hover-background: var(--color-concrete);
  --import-template-selected-background: var(--color-aliceblue);
  --import-template-selected-accent: var(--color-bondi-blue);
  --import-file-bar-background: var(--color-white);
  --import-file-bar-border-color: var(--color-mercury);
  --import-manual-strip-background: var(--color-white);
  --import-manual-strip-hover-background: var(--color-aliceblue);
  --import-shipment-sample-background: var(--color-concrete);
  --import-shipment-counter-warning-color: var(--color-tulip-tree);
  --import-shipment-counter-over-color: var(--color-flamingo);
  --export-type-orders-icon-color: var(--color-jade);
  --export-type-order-items-icon-color: var(--color-hot-pink);
  --export-type-shipments-icon-color: var(--color-sunshine);
  --export-wizard-settings-max-width: 760px;
  --export-column-background: var(--color-white);
  --export-column-border-color: var(--color-gallery);
  --export-column-invalid-accent: var(--color-danger);
  --export-column-unavailable-background: var(--color-concrete);
  --export-column-unavailable-color: var(--color-danger);
  --export-column-ghost-shadow-color: rgba(0, 0, 0, 0.15);
  --export-column-action-color: var(--color-pale-sky);
  --export-column-action-hover-color: var(--color-bondi-blue);
  --export-column-position-background: var(--color-polar);
  --export-column-position-color: var(--color-deep-cerulean);
  --export-column-position-border-color: var(--color-periwinkle);
  --export-column-title-color: var(--color-nile-blue);
  --export-column-add-border-color: var(--color-iron);
  --export-column-add-color: var(--color-bondi-blue);
  --export-column-add-disabled-color: var(--color-pale-sky);
  --export-preview-label-color: var(--color-pale-sky);
  --export-preview-error-color: var(--color-danger);
  --export-next-file-color: var(--color-green-haze);
  --export-filename-part-background: var(--color-titan-white);
  --export-filename-part-color: var(--color-royal-purple);
  --export-filename-part-border-color: var(--color-royal-purple-medium);
  --export-filename-part-active-background: var(--color-royal-purple);
  --export-filename-part-active-color: var(--color-white);
  --workflow-filters-summary-color: var(--color-bondi-blue);
  --workflow-variables-summary-color: var(--color-bondi-blue);
  --workflow-variable-card-background-color: var(--color-porcelain);
  --workflow-variable-card-border-color: var(--color-iron);
  --workflow-variable-card-icon-color: var(--color-oslo-gray);
  --workflow-variable-card-name-color: var(--color-nile-blue);
  --workflow-dimension-icon-color: var(--color-bondi-blue);
  --workflow-setup-button-border-color: var(--color-iron);
  --workflow-setup-button-color: var(--color-oslo-gray);
  --workflow-setup-button-hover-border-color: var(--color-bondi-blue-40);
  --workflow-setup-button-hover-color: var(--color-bondi-blue);
  --workflow-setup-button-configured-background-color: color-mix(in srgb, var(--color-bondi-blue) 10%, var(--color-white));
  --workflow-setup-button-configured-border-color: var(--color-bondi-blue-40);
  --workflow-setup-button-configured-color: var(--color-bondi-blue);
  --automation-filter-ghost-background-color: color-mix(in srgb, var(--color-oyster-bay) 95%, var(--color-nile-blue));
  --automation-filter-preview-tag-background-color: var(--color-bondi-blue-20);
  --automation-filter-preview-tag-text-color: var(--color-blumine);
  --automation-filter-preview-invalid-color: var(--color-danger);
  --workflow-run-panel-icon-color: var(--color-bondi-blue);
  --workflow-run-target-background-color: var(--color-polar);
  --workflow-run-target-border-color: var(--color-iron-40);
  --workflow-run-disabled-badge-background-color: var(--color-seashell-peach);
  --workflow-run-disabled-badge-text-color: var(--color-geebung);
  --workflow-run-disabled-badge-border-color: color-mix(in srgb, var(--color-geebung) 45%, var(--color-white));
  --workflow-list-border-color: var(--color-iron-40);
  --workflow-list-ghost-shadow-color: rgba(0, 0, 0, 0.15);
  --workflow-group-header-color: var(--color-nile-blue);
  --workflow-group-header-icon-color: var(--color-nile-blue-60);
  --workflow-group-header-background-color: var(--color-iron-20);
  --workflow-group-header-hover-background-color: var(--color-iron-40);
  --workflow-item-hover-background-color: var(--color-iron-20);
  --workflow-item-active-color: var(--color-bahama-blue);
  --workflow-item-active-background-color: var(--color-polar);
  --workflow-item-active-hover-background-color: color-mix(in srgb, var(--color-bondi-blue) 16%, var(--color-white));
  --workflow-item-active-accent-color: var(--color-bondi-blue);
  --workflow-item-disabled-color: var(--color-nile-blue-60);
  --workflow-untitled-title-color: var(--color-pale-sky);
  --workflow-status-enabled-icon-color: var(--color-green-haze);
  --workflow-status-disabled-color: var(--color-geebung);
  --workflow-item-toggle-color: var(--color-iron);
  --workflow-item-toggle-enabled-color: var(--color-green-haze-80);
  --workflow-scope-utility-color: var(--color-oslo-gray);
  --workflow-scope-utility-hover-color: var(--color-bondi-blue);
  --workflow-scope-utility-hover-background-color: var(--color-iron-20);
  --workflow-list-footer-background-color: var(--color-mercury);
  --workflow-list-footer-color: var(--color-oslo-gray);
  --workflow-list-footer-hover-background-color: var(--color-iron);
  --workflow-drop-target-hover-glow-color: var(--color-bondi-blue-40);
  --workflow-drop-target-hover-background-color: var(--color-polar);
  --workflow-drop-blocked-stripe-color: var(--color-iron-40);
  --workflow-drop-accepted-flash-color: var(--color-bondi-blue);
  --automation-builder-action-link-color: var(--color-oslo-gray);
  --automation-builder-action-link-hover-color: var(--default-text-primary-color);
  --content-header-border-color: var(--color-mercury);
  --content-header-icon-color: var(--color-bondi-blue-40);
  --content-header-super-icon-color: var(--super-admin-icon-color);
  --pagination-text-color: var(--color-shark);
  --pagination-disabled-text-color: var(--color-oslo-gray);
  --pagination-active-background-color: var(--color-bondi-blue);
  --pagination-active-text-color: var(--color-white);
  --pagination-hover-color: var(--color-bondi-blue);
  --pagination-per-page-background-color: var(--color-porcelain);
  --pagination-per-page-label-color: var(--color-pale-sky);
  --plan-badge-default-background-color: var(--color-concrete);
  --plan-badge-default-text-color: var(--color-pale-sky);
  --plan-badge-locked-background-color: var(--color-black);
  --plan-badge-locked-text-color: var(--color-white);
  --plan-badge-child-background-color: var(--color-slate-gray);
  --plan-badge-child-text-color: var(--color-white);
  --plan-badge-paid-background-color: var(--color-bondi-blue);
  --plan-badge-paid-text-color: var(--color-white);
  --plan-badge-paid-header-background-color: var(--color-nile-blue);
  --plan-badge-paid-header-hover-background-color: var(--color-nile-blue-80);
  --plan-badge-dev-background-color: var(--super-admin-icon-color);
  --plan-badge-dev-hover-background-color: var(--color-fire-bush-80);
  --plan-badge-dev-text-color: var(--color-white);
  --empty-explainer-icon-color: var(--color-bondi-blue-40);
  --automation-empty-state-flame-color: var(--color-fire-bush);
  --integration-install-create-icon-color: var(--color-bondi-blue);
  --sequence-odometer-digit-color: var(--color-bondi-blue);
  --sequence-odometer-card-background-color: var(--color-white);
  --sequence-odometer-card-border-color: var(--color-iron);
  --sequence-odometer-card-shade-color: var(--color-iron-40);
  --billing-service-credit-color: var(--color-green-haze);
  --billing-empty-state-timeline-color: var(--color-bondi-blue);
  --billing-empty-state-timeline-track-color: var(--color-bondi-blue-40);
  --billing-empty-state-dot-background-color: var(--color-white);
  --notification-badge-background-color: var(--color-flamingo);
  --notification-badge-text-color: var(--color-white);
  --notification-row-unread-background-color: var(--color-white);
  --notification-row-read-background-color: var(--color-concrete);
  --notification-type-border-color: var(--color-divider);
  --notification-type-background-color: var(--color-white);
  --notification-type-icon-color: color-mix(in srgb, var(--color-pacific-blue) 30%, var(--color-white));
  --notification-popup-text-color: var(--color-shark);
  --notification-popup-secondary-text-color: var(--color-oslo-gray);
  --notification-popup-link-color: var(--color-blue-lagoon);
  --email-preview-headers-background-color: var(--color-concrete);
  --action-bar-background-color: var(--color-bondi-blue);
  --action-bar-text-color: var(--color-white);
  --action-bar-badge-background-color: var(--color-blue-lagoon);
  --action-bar-select-background-color: var(--color-polar);
  --action-bar-select-border-color: var(--color-blue-lagoon);
  --action-bar-select-text-color: var(--default-text-primary-color);
  --action-bar-delete-background-color: transparent;
  --action-bar-delete-hover-background-color: var(--color-white-25);
  --action-bar-delete-icon-color: var(--color-white);
  --action-bar-delete-option-icon-color: var(--color-cinnabar-65);
  --new-order-accent-color: var(--color-bondi-blue);
  --new-order-progress-track-color: var(--color-iron);
  --new-order-progress-bar-color: var(--color-bondi-blue);
  --new-order-step-done-icon-color: var(--color-green-haze);
  --new-order-step-upcoming-color: var(--color-pale-sky);
  --new-order-empty-text-color: var(--default-text-secondary-color);
  --new-order-item-delete-color: var(--color-pale-sky);
  --new-order-item-delete-hover-color: var(--color-flamingo);
  --color-danger: var(--color-flamingo);
}

body.locked {
  --navbar-background-color: var(--color-shark);
}

body {
  --navbar-background-color: var(--color-blumine);
}

:root {
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-out-expo: cubic-bezier(0, 0, 0.13, 1);
  --wizard-transition-duration: 400ms;
  --loading-indicator-color: var(--color-deep-teal);
  --loading-indicator-delay: 500ms;
  --loading-indicator-duration: 150ms;
  --loading-indicator-overlay-background-color: var(--color-white);
  --main-header-background-color: var(--color-white);
  --twig-builder-primary-color: var(--color-royal-purple);
  --twig-builder-primary-hover-color: var(--color-royal-purple-dark);
  --twig-builder-primary-medium-color: var(--color-royal-purple-medium);
  --twig-builder-primary-deep-color: var(--color-violent-violet);
  --twig-builder-on-primary-color: var(--color-white);
  --twig-builder-text-color: var(--default-text-primary-color);
  --twig-builder-selection-bg-color: color-mix(in srgb, Highlight 40%, transparent);
  --twig-builder-var-bg-color: var(--color-titan-white);
  --twig-builder-var-text-color: var(--color-violent-violet);
  --twig-builder-brace-color: var(--color-gray);
  --twig-builder-inline-tag-bg-color: var(--color-iron-20);
  --twig-builder-inline-tag-border-color: var(--color-iron-80);
  --twig-builder-ctrl-bg-color: var(--color-egg-green);
  --twig-builder-ctrl-text-color: var(--color-fountain-green);
  --twig-builder-filter-color: var(--color-mahogany);
  --twig-builder-comment-color: var(--color-iris-blue);
  --twig-builder-pending-bg-color: var(--color-lemon-chiffon);
  --twig-builder-pending-text-color: var(--color-dark-bronze);
  --twig-builder-pending-border-color: var(--color-saffron);
  --twig-builder-active-bg-color: var(--color-lemon-chiffon);
  --twig-builder-active-text-color: var(--color-dark-bronze);
  --twig-builder-active-border-color: var(--color-saffron);
  --twig-builder-active-glow-color: rgba(255, 200, 87, 0.35);
  --twig-builder-hotspot-hover-bg-color: rgba(255, 165, 0, 0.12);
  --twig-builder-btn-shadow-color: rgba(16, 24, 40, 0.12);
  --twig-builder-btn-hover-shadow-color: rgba(16, 24, 40, 0.16);
  --twig-builder-btn-secondary-bg-color: var(--color-magnolia);
  --twig-builder-btn-secondary-text-color: var(--color-royal-purple-medium);
  --twig-builder-btn-secondary-border-color: var(--color-pale-violet);
  --twig-builder-btn-secondary-hover-bg-color: var(--color-prelude);
  --twig-builder-btn-secondary-hover-border-color: var(--color-perfume);
  --twig-builder-btn-secondary-hover-shadow-color: rgba(16, 24, 40, 0.10);
  --twig-builder-btn-focus-ring-color: rgba(107, 72, 255, 0.14);
  --twig-builder-chip-bg-color: var(--color-white);
  --twig-builder-chip-text-color: var(--color-royal-purple-medium);
  --twig-builder-chip-border-color: var(--color-royal-purple);
  --twig-builder-chip-shadow-color: rgba(16, 24, 40, 0.14);
  --twig-builder-chip-hover-bg-color: var(--color-royal-purple);
  --twig-builder-chip-hover-text-color: var(--color-white);
  --twig-builder-chip-hover-shadow-color: rgba(107, 72, 255, 0.3);
  --twig-builder-dropdown-bg-color: var(--color-white);
  --twig-builder-dropdown-border-color: var(--color-titan-mischka);
  --twig-builder-dropdown-separator-color: var(--color-mischka-purple);
  --twig-builder-dropdown-hover-bg-color: var(--color-cosmic-white);
  --twig-builder-dropdown-hover-text-color: var(--color-royal-purple-medium);
  --twig-builder-dropdown-label-color: var(--color-quartz-gray);
  --twig-builder-dropdown-preview-color: var(--color-vista-blue);
  --twig-builder-dropdown-input-border-color: var(--color-mercury-purple);
  --twig-builder-dropdown-heading-color: var(--color-stonewall);
  --twig-builder-dropdown-shadow-outer-color: rgba(16, 24, 40, 0.08);
  --twig-builder-dropdown-shadow-inner-color: rgba(16, 24, 40, 0.04);
  --twig-builder-listbuilder-list-text-color: var(--color-spicy-mustard);
  --twig-builder-key-toggle-text-color: var(--color-stonewall-dim);
  --twig-builder-key-toggle-hint-bg-color: var(--color-magnolia-mist);
  --twig-builder-back-color: var(--color-vista-blue);
  --twig-builder-back-hover-bg-color: var(--color-magnolia-faint);
  --twig-builder-pending-shadow-color: rgba(16, 24, 40, 0.18);
  --code-editor-error-line-bg-color: rgba(220, 53, 69, 0.12);
  --code-editor-error-line-marker-color: var(--form-field-border-error-color);
  --query-profile-border-color: var(--color-mercury);
  --query-profile-selected-background-color: var(--color-aliceblue);
  --profiler-bar-height: 44px;
  --profiler-bar-background-color: var(--color-nile-blue);
  --profiler-bar-text-color: var(--color-white);
  --profiler-bar-repeats-color: var(--color-tulip-tree);
  --profiler-bar-path-color: color-mix(in srgb, var(--color-white) 70%, var(--color-nile-blue));
  --profiler-bar-separator-color: color-mix(in srgb, var(--color-white) 30%, var(--color-nile-blue));
  --profiler-bar-shadow-color: var(--color-nile-blue-40);
}

@media screen and (width <= 576px) {
  :root {
    --main-header-background-color: var(--color-concrete);
  }
}
@layer theme {
  body {
    background-color: var(--body-background-color);
  }
  body main {
    z-index: var(--index-lowest);
  }
  body main:has(.preview) {
    z-index: auto;
  }
  @media screen and (width > 576px) {
    body main > .content {
      background-color: var(--content-background-color-desktop);
    }
  }
  @media screen and (width <= 576px) {
    body main > .content {
      background-color: var(--content-background-color-mobile);
    }
  }
  .user-select-all {
    cursor: pointer;
  }
  .card .card-body {
    padding: 2rem;
  }
  .dotted-hidden {
    letter-spacing: 2px;
  }
  .header-actions {
    display: flex;
    gap: 10px;
    margin-right: var(--gutter-md);
    align-items: center;
  }
  .header-actions form {
    display: inline-flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
  }
  .header-actions button, .header-actions .button {
    align-self: center;
  }
  .header-actions,
  .section-header .actions {
    flex: none;
  }
  .header-actions button, .header-actions .button,
  .section-header .actions button,
  .section-header .actions .button {
    white-space: nowrap;
  }
}
@layer override {
  .hidden {
    display: none;
  }
  @media screen and (width > 576px) {
    .mobile-only {
      display: none;
    }
  }
  @media screen and (width <= 576px) {
    .desktop-only {
      display: none;
    }
  }
  body.super-admin-hidden .super-admin,
  body.super-admin-hidden .admin-item,
  body.super-admin-hidden .admin-store-switcher {
    display: none;
  }
  body.super-admin-hidden .admin-store-switcher + .menu {
    margin-top: 20px;
  }
}
@layer ui {
  html:not(.anonymous) body {
    --header-height: 56px;
    --banner-height: 0px;
    --sidebar-width: 235px;
    --sidebar-collapsed-width: 62px;
    --sidebar-transition: 0.4s var(--ease-in-out-expo);
    --sidebar-opacity-transition: 0.25s ease;
    display: block;
    overflow: auto;
    height: 100dvh;
  }
  html:not(.anonymous) body > header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
  }
  html:not(.anonymous) body nav.sidebar {
    position: fixed;
    width: var(--sidebar-width);
    height: calc(100dvh - var(--header-height) - var(--banner-height));
    top: calc(var(--header-height) + var(--banner-height));
    left: 0;
    display: flex;
    flex-direction: column;
  }
  html:not(.anonymous) body main {
    position: relative;
    height: 100%;
    padding-top: calc(var(--header-height) + var(--banner-height));
    margin-left: var(--sidebar-width);
    --action-bar-offset: var(--sidebar-width);
  }
  html:not(.anonymous) body .mask {
    position: fixed;
    inset: 0;
    touch-action: none;
  }
  @media screen and (width > 576px) {
    html:not(.anonymous) body nav.sidebar.collapsed {
      width: var(--sidebar-collapsed-width);
    }
    html:not(.anonymous) body nav.sidebar.sidebar-transitioning {
      transition: width var(--sidebar-transition);
    }
    html:not(.anonymous) body nav.sidebar.collapsed + main {
      margin-left: var(--sidebar-collapsed-width);
      --action-bar-offset: var(--sidebar-collapsed-width);
    }
    html:not(.anonymous) body nav.sidebar.sidebar-transitioning + main {
      transition: margin-left var(--sidebar-transition);
    }
  }
  @media screen and (width <= 576px) {
    html:not(.anonymous) body nav.sidebar {
      height: 100dvh;
      top: 0;
    }
    html:not(.anonymous) body main {
      margin-left: 0;
      --action-bar-offset: 0px;
    }
  }
}
html.anonymous {
  min-height: 100%;
}
html.anonymous body {
  --automation-background-position: bottom left;
  display: grid;
  grid-template-columns: none;
  grid-template-rows: var(--navbar-height) min-content 1fr;
  min-height: 100dvh;
  overflow: visible;
  background: url(/img/automation-bg.svg) var(--automation-background-position) no-repeat, var(--anonymous-background-color);
}
html.anonymous body:has(> main.content-container)::after {
  content: "";
  height: var(--gutter-lg);
}
@media screen and (width <= 576px) {
  html.anonymous body {
    grid-template-rows: var(--navbar-height) 1fr;
  }
}
html.anonymous main {
  --otto-background-size: 350px auto;
  --otto-background-image: url(/img/hello-signup.png);
  display: grid;
  grid-template-columns: none;
  grid-row: 2/4;
  background: var(--otto-background-image) bottom right/var(--otto-background-size) no-repeat;
}
html.anonymous main.anonymous-auth {
  --otto-background-image: url(/img/hello-login.svg);
}
html.anonymous main.anonymous-auth:has(> #anonymous-content.otto-halloween) {
  --otto-background-image: url(/img/hello-login-halloween.svg);
}
html.anonymous main.content-container {
  grid-row: 2;
  background: none;
  background-color: var(--color-white);
  padding: var(--gutter-md);
  border-radius: var(--border-radius);
  border: 1px solid var(--badge-info-icon-color);
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  margin: var(--gutter-md);
}
html.anonymous main.content-container h1 {
  padding-bottom: var(--gutter-md);
}
html.anonymous main.content-container section {
  margin-top: var(--gutter-md);
}
html.anonymous main.content-container section:first-child {
  margin-top: 0;
}
html.anonymous main.content-container section.secondary-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: var(--gutter-md);
  border-top: 1px solid var(--anonymous-border-color);
  font-size: 13px;
}
html.anonymous main.content-container section.stacked-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gutter-sm);
}
html.anonymous .container .legend {
  font-size: 14px;
}
html.anonymous header {
  grid-row: 1/2;
  grid-column: 1/-1;
  background-color: var(--color-white);
  border-bottom: solid 1px var(--anonymous-border-color);
}
html.anonymous header img.navbar-brand {
  height: 17px;
}
@media screen and (width > 576px) {
  html.anonymous header img.navbar-brand {
    height: 24px;
  }
}
@media screen and (width <= 576px) {
  html.anonymous header a {
    top: 1px;
    position: relative;
  }
}
html.anonymous h1 {
  font-family: var(--font-family-main);
  font-weight: 600;
  font-size: 28px;
  line-height: 28px;
  padding: 0;
}
html.anonymous a:not(.button) {
  color: var(--anonymous-link-color);
}
html.anonymous p {
  padding: 0;
}
html.anonymous button.link-button {
  background: transparent;
  border: 0;
  color: var(--anonymous-link-color);
  cursor: pointer;
  padding: 0;
  font-size: inherit;
}
html.anonymous .grecaptcha-badge {
  z-index: var(--index-middle);
}
html.anonymous .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 420px;
  align-self: center;
  position: relative;
  place-self: center;
  padding: 24px;
}
html.anonymous .container .legend {
  margin-top: 12px;
}
html.anonymous .container p {
  color: var(--default-text-secondary-color);
}
html.anonymous .container .invalid-feedback p {
  color: inherit;
}
html.anonymous .container.info-card {
  background: var(--anonymous-info-card-background-color);
  border-radius: var(--border-radius);
}
@media screen and (width < 1080px) {
  html.anonymous main:not(.content-container) {
    --otto-background-size: 250px auto;
  }
}
@media screen and (width < 800px) {
  html.anonymous body {
    --automation-background-position: top calc(var(--navbar-height) + 32px) left;
  }
  html.anonymous main:not(.content-container) {
    --otto-background-size: 150px auto;
  }
}
@media screen and (width <= 576px) {
  html.anonymous body {
    background: url(/img/gear-top.svg) -100px -118px/450px auto no-repeat, url(/img/gear-bottom.svg) bottom left no-repeat, var(--color-white);
  }
  html.anonymous main:not(.content-container) {
    background: none;
  }
  html.anonymous main.content-container {
    padding: var(--gutter-md);
    margin: var(--gutter-md);
    max-width: calc(100% - var(--gutter-md) * 2);
  }
  html.anonymous header {
    background: transparent;
    border-bottom: 0;
  }
  html.anonymous .container {
    top: -20px;
  }
}

@layer theme {
  @media screen and (width > 576px) {
    html.anonymous main > .container {
      background: var(--color-white);
      border-radius: var(--border-radius);
    }
  }
  html.anonymous .anonymous-name-fields {
    display: grid;
    grid-template-columns: auto repeat(2, minmax(0, 1fr));
  }
  html.anonymous .anonymous-name-fields input + input {
    border-left: 1px solid var(--form-field-border-default-color);
  }
  html.anonymous .list-overflow summary {
    margin-left: 6px;
    padding: 4px 0;
    cursor: pointer;
    list-style: none;
    color: var(--anonymous-link-color);
    -webkit-user-select: none;
    user-select: none;
  }
  html.anonymous .list-overflow summary::-webkit-details-marker {
    display: none;
  }
  html.anonymous .list-overflow[open] > summary {
    display: none;
  }
}
@layer theme {
  .contained {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}
@layer ui {
  .grid-with-panel {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gutter-md);
    padding-top: var(--gutter-sm);
  }
  .grid-with-panel .panel {
    padding: var(--gutter-sm);
  }
  @media screen and (width <= 576px) {
    .grid-with-panel {
      grid-template-columns: 1fr;
    }
  }
}
@layer ui {
  .simple-layout header {
    border-bottom: 1px solid var(--content-header-border-color);
  }
  .simple-layout section {
    margin-top: var(--gutter-md);
    padding: 0 24px;
  }
  .simple-layout section:last-of-type {
    padding-bottom: var(--gutter-md);
  }
  @media screen and (width <= 576px) {
    .simple-layout tbody tr {
      padding: 16px;
    }
  }
}
@layer ui {
  .tabbed-content-container #tab-region {
    display: contents;
  }
  .tabbed-content-container:has(> .tabs-nav:empty) > .content-header {
    border-bottom: 1px solid var(--color-divider);
  }
  .tabbed-content-container .tabs-nav:empty {
    display: none;
  }
  .tabbed-content-container .tabs-nav a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    color: var(--tabs-font-color);
    gap: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .tabbed-content-container .tabs-nav a .icon.warning {
    color: var(--warning);
  }
  .tabbed-content-container .tabs-nav a .icon.danger {
    color: var(--danger);
  }
  .tabbed-content-container .tabs-nav ul {
    display: flex;
    gap: 20px;
    white-space: nowrap;
  }
  .tabbed-content-container .tabs-nav .active a {
    color: var(--tabs-active-font-color);
  }
  .tabbed-content-container .tabs-nav .tab-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--tabs-count-background-color);
    color: var(--tabs-count-color);
  }
  .tabbed-content-container .tabs-nav .active .tab-count {
    background: var(--tabs-count-active-background-color);
    color: var(--tabs-count-active-color);
  }
  .tabbed-content-container .tabs-nav .tab-alert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tabs-alert-dot-color);
    flex: 0 0 auto;
  }
  .tabbed-content-container button {
    white-space: nowrap;
  }
  .tabs-content {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .tabs-content .section,
  .tabs-content section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .tabs-content .section:not(.full-width),
  .tabs-content section:not(.full-width) {
    max-width: 480px;
  }
  .tabs-content .section > .content > table + form,
  .tabs-content section > .content > table + form {
    margin-top: var(--gutter-md);
  }
  .tabs-content .section-header p {
    padding-bottom: 0;
  }
  .tabs-content .action-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tabs-content .action-section hr {
    border: 0;
    border-top: 1px solid var(--color-divider);
    margin: 0;
  }
  .tabs-content .action-section .section-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--default-text-secondary-color);
  }
  @media screen and (width > 576px) {
    .tabs-content .section-header {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    .tabs-content .section-header .actions {
      gap: 10px;
      display: flex;
      align-items: flex-start;
    }
  }
  @media screen and (width <= 576px) {
    .tabs-content .section-header {
      gap: 10px;
      display: flex;
      flex-direction: column;
    }
    .tabs-content .section-header .actions {
      display: flex;
      justify-content: space-evenly;
    }
  }
  @media screen and (hover: hover) and (width > 576px) {
    .tabbed-content-container.vertical .tabs-nav li:hover {
      border-left: 2px solid var(--tabs-hover-border-color);
    }
    .tabbed-content-container.horizontal .tabs-nav li:hover a::after {
      background: var(--tabs-hover-border-color);
    }
  }
  @media screen and (hover: hover) and (width <= 576px) {
    .tabs-nav li:hover {
      border-bottom: 2px solid var(--tabs-hover-border-color);
    }
  }
  @media screen and (width <= 576px) {
    .tabbed-content-container {
      display: grid;
      grid-template-rows: min-content min-content min-content 24px min-content 1fr;
      grid-template-columns: 16px 1fr 16px;
    }
    .tabbed-content-container header {
      grid-row: 1/2;
      grid-column: 1/-1;
    }
    .tabbed-content-container .tab-summary {
      grid-row: 2/3;
      grid-column: 1/-1;
    }
    .tabbed-content-container .tab-summary:empty {
      display: none;
    }
    .tabbed-content-container .tabs-nav {
      grid-row: 3/4;
      grid-column: 1/-1;
      overflow: hidden;
    }
    .tabbed-content-container .tabs-nav a {
      position: relative;
      white-space: nowrap;
    }
    .tabbed-content-container .tabs-nav a .button-spinner {
      position: absolute;
      top: 50%;
      left: 100%;
      margin-left: var(--gutter-xxs);
      transform: translateY(-50%);
    }
    .tabbed-content-container .tabs-nav ul {
      flex-direction: row;
      margin: 0 24px;
      overflow-x: auto;
      overflow-y: hidden;
      border-bottom: 1px solid var(--color-divider);
      scrollbar-width: none;
    }
    .tabbed-content-container .tabs-nav ul ::-webkit-scrollbar {
      display: none;
    }
    .tabbed-content-container .tabs-nav ul li {
      margin-bottom: -1px;
      padding-bottom: 8px;
      border-bottom: 2px solid transparent;
    }
    .tabbed-content-container .tabs-nav ul li.active {
      border-bottom: 2px solid var(--tabs-active-border-color);
    }
    .tabbed-content-container .tabs-content {
      grid-row: 5/6;
      grid-column: 2/3;
      padding: 12px 16px;
      border-radius: var(--border-radius);
      background-color: var(--content-foreground-color-mobile);
    }
  }
  @media screen and (width > 576px) {
    .tabbed-content-container {
      display: grid;
    }
    .tabbed-content-container table {
      width: calc(100% + 48px);
      margin: 0 -24px;
    }
    .tabbed-content-container .tabs-content {
      padding: 24px;
    }
    .tabbed-content-container.vertical {
      grid-template-rows: min-content min-content 1fr;
      grid-template-columns: 200px 1fr;
    }
    .tabbed-content-container.vertical header {
      grid-row: 1/2;
      grid-column: 1/-1;
      border-bottom: 1px solid var(--color-divider);
    }
    .tabbed-content-container.vertical .tab-summary {
      grid-row: 2/3;
      grid-column: 1/-1;
      border-bottom: 1px solid var(--color-divider);
    }
    .tabbed-content-container.vertical .tab-summary:empty {
      display: none;
    }
    .tabbed-content-container.vertical .tabs-nav {
      grid-row: 3/4;
      grid-column: 1/2;
      padding: 24px 0;
      border-right: 1px solid var(--color-divider);
      font-size: 13px;
    }
    .tabbed-content-container.vertical .tabs-nav ul {
      flex-direction: column;
    }
    .tabbed-content-container.vertical .tabs-nav ul li {
      position: relative;
      padding: 0 24px 0 21px;
      border-left: 2px solid var(--content-background-color-desktop);
    }
    .tabbed-content-container.vertical .tabs-nav ul li .button-spinner {
      position: absolute;
      top: 50%;
      right: var(--gutter-xxs);
      transform: translateY(-50%);
    }
    .tabbed-content-container.vertical .tabs-nav ul li.active {
      font-size: 14px;
      border-left: 2px solid var(--tabs-active-border-color);
    }
    .tabbed-content-container.vertical .tabs-content {
      grid-row: 3/4;
      grid-column: 2/3;
    }
    .tabbed-content-container.horizontal {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-columns: 1fr;
    }
    .tabbed-content-container.horizontal header {
      grid-row: 1/2;
      grid-column: 1/-1;
    }
    .tabbed-content-container.horizontal .tab-summary {
      grid-row: 2/3;
      grid-column: 1/-1;
    }
    .tabbed-content-container.horizontal .tab-summary:empty {
      display: none;
    }
    .tabbed-content-container.horizontal .tabs-nav {
      grid-row: 3/4;
      grid-column: 1/-1;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: var(--gutter-sm);
      padding: 0 24px;
      border-bottom: 1px solid var(--color-divider);
    }
    .tabbed-content-container.horizontal .tabs-nav:empty {
      display: none;
    }
    .tabbed-content-container.horizontal .tabs-nav > .header-actions {
      align-self: center;
      margin-right: 0;
    }
    .tabbed-content-container.horizontal .tabs-nav .tab-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 24ch;
    }
    .tabbed-content-container.horizontal .tabs-nav ul {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 18px 0;
      margin-left: -10px;
    }
    .tabbed-content-container.horizontal .tabs-nav ul li {
      display: flex;
      margin-bottom: -1px;
      border-bottom: 2px solid transparent;
    }
    .tabbed-content-container.horizontal .tabs-nav ul li a {
      position: relative;
      padding: 0 10px 8px;
    }
    .tabbed-content-container.horizontal .tabs-nav ul li a .button-spinner {
      position: absolute;
      top: calc(50% - var(--gutter-xxs));
      right: calc(-1 * var(--gutter-xs));
      transform: translateY(-50%);
    }
    .tabbed-content-container.horizontal .tabs-nav ul li a::after {
      content: "";
      position: absolute;
      inset: auto 10px -2px;
      height: 2px;
    }
    .tabbed-content-container.horizontal .tabs-nav ul li.active a::after {
      background: var(--tabs-active-border-color);
    }
    .tabbed-content-container.horizontal .tabs-content {
      grid-row: 4/5;
      grid-column: 1/-1;
    }
  }
}
@layer theme {
  body.locked > header form {
    color: var(--color-gray-chateau);
  }
  body > header {
    color: var(--color-white);
    z-index: var(--index-high);
  }
  body > header > *:first-child {
    margin-right: auto;
  }
  body > header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--gutter-md);
    align-items: center;
    justify-content: space-between;
    background-color: var(--navbar-background-color);
    padding: 0 var(--gutter-sm);
  }
  body > header i {
    color: var(--color-white);
  }
  body > header .navbar-logo {
    display: flex;
    align-items: center;
  }
  body > header img.navbar-brand {
    display: block;
    height: 22px;
  }
  body > header .header-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gutter-xs);
  }
  body > header .header-badges .badge {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  body > header .header-badges .badge > i {
    color: inherit;
    font-size: 10px;
  }
  body > header .header-badges .badge.info {
    background-color: var(--header-badge-info-background-color);
    color: var(--header-badge-info-text-color);
  }
  body > header .order-search {
    max-width: 260px;
    flex-grow: 1;
    gap: 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--form-field-border-default-color);
  }
  body > header .order-search > .icon-swap {
    padding-left: var(--gutter-sm);
  }
  body > header .order-search i {
    color: var(--color-gray-chateau);
    transition: color 0.2s ease;
  }
  body > header .order-search:focus-within i {
    color: var(--color-white);
  }
  body > header .order-search.htmx-request .icon-swap > i:first-child {
    opacity: 0;
  }
  body > header .order-search.htmx-request .icon-swap > i:last-child {
    opacity: 1;
  }
  body > header .order-search input[type=text] {
    width: 100%;
    background-color: inherit;
    color: inherit;
    border: none;
    padding: 8px 10px 8px 20px;
  }
  body > header .order-search input[type=text]:focus {
    outline: none;
  }
  body > header .nav-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gutter-xs);
  }
  body > header .nav-controls .text-warning {
    color: var(--super-admin-icon-color);
  }
  body > header .nav-controls .user-info {
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    white-space: nowrap;
    max-width: 200px;
  }
  body > header .nav-controls .user-info .user-name,
  body > header .nav-controls .user-info .store-name {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 2px;
  }
  body > header .nav-controls .user-info .user-name {
    color: var(--color-iron);
    font-size: 12px;
    line-height: 12px;
  }
  @media screen and (width <= 576px) {
    body > header .navbar-mobile-logo {
      display: none;
    }
    body:has(> .sidebar.active) > header .navbar-mobile-logo {
      display: block;
      animation: fadeIn 0.35s var(--ease-in-out-expo);
    }
    body:has(> .sidebar.active) > header .order-search {
      display: none;
    }
  }
  html.anonymous > body > header p {
    color: var(--anonymous-header-text-color);
  }
  html.anonymous > body > header i.super-admin {
    color: var(--super-admin-icon-color);
  }
  img.avatar {
    border-radius: 50%;
    width: 32px;
  }
  @media screen and (width <= 576px) {
    img.avatar {
      border: 1px solid var(--color-pacific-blue);
    }
  }
}
@layer theme {
  .user-settings-toggle {
    transition: background-color 0.19s var(--ease-in-out-expo);
    border-radius: 4px;
    padding: var(--gutter-xxs) var(--gutter-xs);
  }
  @media screen and (hover: hover) {
    .user-settings-toggle:hover {
      background-color: var(--color-white-25);
      cursor: pointer;
    }
  }
  .user-menu .dropdown-menu {
    color: var(--color-nile-blue);
    max-width: 250px;
  }
  .user-menu .dropdown-menu i {
    color: var(--icon-muted-color);
  }
  .user-menu .dropdown-menu .admin-item i {
    color: var(--super-admin-icon-color);
  }
  .user-menu .dropdown-menu li a,
  .user-menu .dropdown-menu li button,
  .user-menu .dropdown-menu li form,
  .user-menu .dropdown-menu li form button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .user-menu .dropdown-menu li a i,
  .user-menu .dropdown-menu li button i,
  .user-menu .dropdown-menu li form i,
  .user-menu .dropdown-menu li form button i {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: var(--gutter-xs);
  }
}
@layer theme {
  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .content-header:has(.header-row) {
    flex-direction: column;
    padding: 20px 24px;
  }
  .content-header:has(.header-row) h1 {
    padding: 0;
  }
  .content-header .header-actions {
    display: flex;
    gap: 8px;
    margin-right: var(--gutter-md);
    align-items: center;
  }
  .content-header .header-actions form {
    gap: 0;
  }
  .content-header .header-actions form.search {
    gap: var(--gutter-xs);
    align-items: center;
  }
  .content-header .header-actions form.search button[type=submit] {
    display: flex;
    align-items: center;
    min-height: 36px;
  }
  .content-header .header-actions form.search a {
    color: var(--default-icon-color);
    margin-right: var(--gutter-xs);
  }
  .content-header .header-row {
    padding: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .content-header .header-row .header-actions {
    margin-right: 0;
    padding: 0;
  }
  @media screen and (width <= 576px) {
    .content-header .header-actions {
      width: 100%;
      padding: 0 24px 12px;
      margin-right: 0;
    }
    .content-header .header-actions form.search {
      width: 100%;
    }
  }
  h1:has(.icon),
  h1:has(.page-icon) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  h1:has(.icon) img,
  h1:has(.page-icon) img {
    width: 30px;
  }
  h1:has(.icon) .settings-store-id.plan-badge,
  h1:has(.page-icon) .settings-store-id.plan-badge {
    margin-left: 2px;
    cursor: pointer;
  }
  h1 .dropdown-menu {
    font-size: var(--font-size);
    font-weight: 400;
  }
  h1 .custom-view-shared-by {
    font-weight: 400;
  }
  h1:has(> .dropdown-container) {
    align-items: baseline;
  }
  h1:has(> .dropdown-container) .page-icon {
    align-self: center;
  }
  h1:has(> .dropdown-container) > .dropdown-container {
    margin-left: -6px;
  }
  h1:has(> .dropdown-container) > .dropdown-container .dropdown-trigger {
    padding-inline: 4px;
  }
  h1:has(> .dropdown-container) > .dropdown-container .dropdown-trigger i {
    margin-right: 0;
  }
  .page-icon {
    color: var(--content-header-icon-color);
  }
  .page-icon.super {
    color: var(--content-header-super-icon-color);
  }
  h1:hover:not(:has(.settings-store-id:hover)) .fa-gear.page-icon {
    animation: fa-spin 0.5s var(--ease-in-out-expo);
  }
  h1:hover .fa-box-isometric-tape.page-icon {
    animation: fa-jello 0.9s ease-out 1;
  }
  h1:hover .fa-party-horn.page-icon {
    animation: party-horn-wag 0.3s ease-in-out infinite;
    transform-origin: bottom center;
  }
  .fa-merge.page-icon {
    transition: rotate 0.5s var(--ease-in-out-expo);
  }
  h1:hover .fa-merge.page-icon {
    rotate: y 180deg;
  }
  @keyframes party-horn-wag {
    0%, 100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(12deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    h1:hover .fa-gear.page-icon,
    h1:hover .fa-party-horn.page-icon {
      animation: none;
    }
    .fa-merge.page-icon {
      transition: none;
    }
  }
}
@layer theme {
  .badge.integration-stub {
    --badge-muted-color: var(--integration-report-stub-text-color);
    --badge-muted-background-color: var(--integration-report-stub-background-color);
    font-weight: 400;
  }
  .live-table-scroll {
    overflow-x: auto;
  }
  @media screen and (width <= 576px) {
    .live-table-scroll table {
      min-width: 34rem;
    }
    .live-table-scroll thead {
      display: table-header-group;
    }
    .live-table-scroll tbody tr {
      display: table-row;
    }
    .live-table-scroll th, .live-table-scroll td {
      display: table-cell;
      padding: var(--gutter-xs) var(--gutter-md);
      vertical-align: middle;
    }
  }
  [data-live-table-row][hidden], [data-live-table-empty][hidden] {
    display: none;
  }
  [data-live-table-sort] {
    padding: 0;
    margin: 0;
    min-height: 0;
    font: inherit;
    color: inherit;
  }
  .live-table-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gutter-sm) var(--gutter-md);
    padding-bottom: 0;
    margin-bottom: var(--gutter-md);
  }
  .live-table-search .integration-report-totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-xs) var(--gutter-md);
  }
  .live-table-search .integration-report-totals button {
    padding: var(--gutter-xxs) var(--gutter-xs);
    margin: 0;
    min-height: 0;
    border-radius: var(--border-radius);
  }
  .live-table-search .integration-report-totals button[aria-pressed=true] {
    background-color: var(--badge-muted-background-color);
    color: var(--badge-muted-color);
  }
  .live-table-search .search-field {
    flex-shrink: 0;
    position: relative;
    width: 20rem;
    max-width: 100%;
  }
  .live-table-search .search-field > i {
    position: absolute;
    top: 50%;
    left: var(--gutter-sm);
    transform: translateY(-50%);
    color: var(--default-icon-color);
    pointer-events: none;
  }
  .live-table-search .search-field input {
    width: 100%;
    padding-left: calc(var(--gutter-md) * 2);
  }
  .integration-report-group .plan-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 2px var(--gutter-xxs);
    vertical-align: middle;
  }
  .integration-report-group:last-child {
    padding-bottom: var(--gutter-md);
  }
  .integration-report-group + .integration-report-group {
    margin-top: calc(var(--gutter-md) * 2);
  }
  .integration-report-group .integration-report-group-header {
    padding: var(--gutter-sm) var(--gutter-md);
  }
  .integration-report-group .integration-report-group-header h2 {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    margin: 0;
  }
  .integration-report-group .integration-report-group-header h2 .badge {
    margin: 0;
  }
}
#beacon-container button[data-cy=beacon-close-button] .TSYHV {
  background-color: var(--beacon-close-button-background-color);
}
#beacon-container button[data-cy=beacon-close-button] .TSYHV:hover {
  background-color: var(--beacon-close-button-hover-background-color);
}
#beacon-container button[data-cy=beacon-close-button] .TSYHV span {
  color: var(--beacon-close-button-text-color);
}
#beacon-container button[data-cy=beacon-close-button] .TSYHV path {
  color: var(--beacon-close-button-text-color);
}

@layer theme {
  .simple-layout:has(> .parked-workflows) {
    display: flex;
    flex-direction: column;
  }
  .parked-workflows {
    margin: 24px 24px 0;
  }
  .parked-workflows .content {
    gap: 2px;
  }
  .parked-workflows .callout-title {
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--parked-workflow-accent-color);
  }
  .parked-workflows .parked-workflow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
  .parked-workflows .parked-workflow:first-of-type {
    padding-top: 4px;
    margin-top: -10px;
  }
  .parked-workflows .parked-workflow:last-of-type {
    padding-bottom: 0;
  }
  .parked-workflows .parked-workflow:not(:last-child) {
    border-bottom: 1px solid var(--parked-workflow-divider-color);
  }
  .parked-workflows .parked-workflow .summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .parked-workflows .parked-workflow .detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .parked-workflows .parked-workflow .progress {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--parked-workflow-waiting-color);
    font-size: var(--font-size-sm);
  }
  .parked-workflows .parked-workflow .titles {
    font-weight: 600;
    color: var(--parked-workflow-accent-color);
  }
  .parked-workflows .parked-workflow .dots {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .parked-workflows .parked-workflow .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
  }
  .parked-workflows .parked-workflow .dot--done {
    background: var(--parked-workflow-accent-color);
  }
  .parked-workflows .parked-workflow .dot--blocked {
    border: 2px solid var(--parked-workflow-accent-color);
    animation: parked-workflow-pulse 2s ease-in-out infinite;
  }
  .parked-workflows .parked-workflow .dot--upcoming {
    border: 1px solid var(--parked-workflow-accent-color);
    opacity: 0.35;
  }
  .parked-workflows .parked-workflow .state {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    gap: 2px;
  }
  .parked-workflows .parked-workflow .status {
    font-size: var(--font-size-sm);
  }
  .parked-workflows .parked-workflow .status--waiting,
  .parked-workflows .parked-workflow .status--running {
    color: var(--parked-workflow-waiting-color);
  }
  .parked-workflows .parked-workflow .status--failing {
    color: var(--parked-workflow-failing-color);
  }
  .parked-workflows .parked-workflow .status--resuming {
    color: var(--parked-workflow-resuming-color);
  }
  .parked-workflows .parked-workflow .task-chip {
    background: none;
    border: 1px solid var(--parked-workflow-accent-color);
    border-radius: var(--border-radius);
    color: var(--parked-workflow-accent-color);
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
  }
  @media screen and (hover: hover) {
    .parked-workflows .parked-workflow .task-chip:hover {
      background: var(--parked-workflow-chip-hover-background-color);
    }
  }
  .parked-workflows .parked-workflow .button.text {
    color: var(--parked-workflow-accent-color);
    margin-top: auto;
    padding-right: 0;
  }
  .parked-workflows .parked-workflow .button.text i {
    margin-right: 0;
  }
  @media screen and (hover: hover) {
    .parked-workflows .parked-workflow .button.text:hover span {
      text-decoration: underline;
    }
  }
  .parked-dot {
    display: inline-block;
    width: calc(0.5rem + 6px);
    height: calc(0.5rem + 6px);
    padding: 3px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--parked-workflow-accent-color);
    background-clip: content-box;
    animation: parked-dot-pulse 2s ease-in-out infinite;
  }
  .parked-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--callout-paused-background-color);
    border: 1px solid var(--callout-paused-border-color);
    border-radius: var(--border-radius);
    color: var(--parked-workflow-accent-color);
    font-weight: 600;
    margin: 0 var(--panel-gutter) var(--panel-gutter);
    padding: 0.5rem 0.75rem;
  }
  @keyframes parked-workflow-pulse {
    50% {
      opacity: 0.4;
    }
  }
  @keyframes parked-dot-pulse {
    50% {
      opacity: 0.75;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .parked-workflows .dot--blocked,
    .parked-dot {
      animation: none;
    }
  }
}
@layer theme {
  .labeled-store-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .labeled-store-name .badge {
    margin: 0;
  }
  .labeled-store-name .badge > .fa-circle-check {
    color: var(--icon-success-color);
  }
  @media screen and (width > 576px) {
    tr.current-store > td:first-child {
      box-shadow: inset 3px 0 0 var(--current-store-accent-color);
    }
  }
  @media screen and (width <= 576px) {
    tr.current-store {
      box-shadow: inset 3px 0 0 var(--current-store-accent-color);
    }
  }
}
@keyframes sidebar-count-hide {
  to {
    visibility: hidden;
  }
}
@layer theme {
  @media screen and (width <= 576px) {
    body > .sidebar.active {
      transform: translateX(0);
    }
    body > .sidebar {
      transform: translateX(-100%);
    }
  }
  .sidebar .group-link {
    --label-width: 150px;
  }
  @media screen and (width > 576px) {
    .sidebar.collapsed {
      z-index: 0;
    }
    .sidebar.collapsed .store-switcher,
    .sidebar.collapsed .sidebar-bottom,
    .sidebar.collapsed .menu {
      display: none;
    }
    .sidebar.collapsed .menu-collapsed {
      display: block;
      opacity: 1;
    }
    nav.sidebar.collapsed + main .expand-sidebar {
      display: block;
    }
    nav.sidebar.collapsed:has(.menu-collapsed > li.flyout-open) ~ main .expand-sidebar {
      display: none;
    }
    .sidebar.sidebar-transitioning.collapsed .menu {
      display: block;
      opacity: 0;
    }
    .sidebar.sidebar-transitioning:not(.collapsed):not(.menu-revealed) .menu {
      opacity: 0;
    }
    .sidebar.sidebar-transitioning:not(.collapsed):not(.menu-revealed) .menu-collapsed {
      display: block;
      opacity: 1;
    }
    .sidebar.sidebar-transitioning:not(.menu-revealed) .menu,
    .sidebar.sidebar-transitioning:not(.menu-revealed) .menu-collapsed {
      pointer-events: none;
    }
    .sidebar.sidebar-transitioning .menu {
      min-width: var(--sidebar-width);
    }
    .sidebar.sidebar-transitioning .menu,
    .sidebar.sidebar-transitioning .menu-collapsed {
      transition: opacity var(--sidebar-opacity-transition);
    }
    .sidebar.sidebar-transitioning .store-switcher,
    .sidebar.sidebar-transitioning .sidebar-bottom {
      visibility: hidden;
    }
    .sidebar.sidebar-transitioning.menu-revealed .store-switcher,
    .sidebar.sidebar-transitioning.menu-revealed .sidebar-bottom {
      visibility: visible;
    }
  }
  .sidebar {
    --animation-time: 0.2s;
    --item-border-width: 2px;
    --row-end-inset: 10px;
  }
  .sidebar a {
    color: inherit;
  }
  .sidebar a:has(> .button-spinner) {
    position: relative;
  }
  .sidebar a > .button-spinner {
    position: absolute;
    top: 50%;
    right: var(--row-end-inset);
    transform: translateY(-50%);
  }
  .sidebar a.htmx-request .order-count {
    animation: sidebar-count-hide 0s var(--loading-indicator-delay) both;
  }
  .sidebar.animate {
    transition: transform 0.45s var(--ease-in-out-expo);
  }
  .sidebar {
    background-color: var(--sidebar-background-color);
    z-index: calc(var(--index-low) - 1);
  }
  @media screen and (width <= 576px) {
    .sidebar {
      z-index: var(--index-middle);
      padding-top: var(--header-height);
    }
  }
  .sidebar i.chevron {
    font-size: 10px;
  }
  .sidebar .store-switcher + .menu {
    margin-top: 0;
  }
  .sidebar .menu {
    margin-top: 20px;
    padding-bottom: 12px;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;
  }
  .sidebar .menu-collapsed {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 20px;
    opacity: 0;
  }
  .sidebar .menu-collapsed > li {
    position: relative;
  }
  .sidebar .menu-collapsed .collapsed-icon {
    display: block;
    padding: 8px 0 8px 24px;
    line-height: 20px;
    color: var(--sidebar-group-icon-color);
  }
  @media screen and (hover: hover) {
    .sidebar .menu-collapsed .collapsed-icon:hover {
      background: var(--sidebar-hover-background-color);
    }
    .sidebar .menu-collapsed .collapsed-icon:hover i {
      animation: fa-spin 0.5s var(--ease-in-out-expo);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar .menu-collapsed .collapsed-icon:hover i {
      animation: none;
    }
  }
  .sidebar .menu-collapsed .collapsed-icon.current, .sidebar .menu-collapsed .collapsed-icon.current i {
    color: var(--sidebar-group-selected-title-color);
  }
  .sidebar .menu-collapsed .collapsed-flyout {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    margin-left: 4px;
    background: var(--sidebar-background-color);
    border: 1px solid var(--sidebar-folder-group-border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    z-index: var(--index-high);
    pointer-events: none;
  }
  .sidebar .menu-collapsed > li.flyout-open .collapsed-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
  }
  .sidebar .menu-collapsed .collapsed-flyout-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: calc(100dvh - var(--header-height) - 80px);
    overflow-y: auto;
  }
  .sidebar .menu-collapsed .collapsed-flyout-items a {
    display: block;
    padding: 6px 16px;
    color: var(--sidebar-group-title-color);
    white-space: nowrap;
  }
  @media screen and (hover: hover) {
    .sidebar .menu-collapsed .collapsed-flyout-items a:hover {
      background: var(--sidebar-hover-background-color);
    }
  }
  .sidebar .menu-collapsed .collapsed-flyout-items .flyout-group-title {
    padding: 6px 16px 2px;
    color: var(--sidebar-group-icon-color);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .sidebar .menu-collapsed .collapsed-flyout-items .shared > a {
    color: var(--sidebar-shared-view-text-color);
  }
  .sidebar .menu-collapsed .collapsed-flyout-items .active > a {
    color: var(--sidebar-group-selected-title-color);
    font-weight: 500;
  }
  .sidebar.collapsed:has(.menu-collapsed > li.flyout-open) {
    z-index: var(--index-middle);
  }
  .sidebar .menu-group {
    color: var(--sidebar-group-title-color);
    font-weight: 500;
  }
  .sidebar .menu-group:not(:last-child) {
    margin-bottom: 6px;
  }
  .sidebar .menu-group i {
    color: var(--sidebar-group-icon-color);
  }
  .sidebar .menu-group .group-link.current > i {
    color: var(--sidebar-group-selected-title-color);
  }
  .sidebar .menu-group .group-link {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    position: relative;
    padding: 8px 0 8px 24px;
    line-height: 20px;
    display: grid;
    grid-template-columns: min-content minmax(0, var(--label-width)) 1fr min-content;
    gap: 4px;
    align-items: center;
    transition: background-color var(--animation-time) ease-in, 0.4s var(--ease-in-out-expo);
  }
  @media screen and (hover: hover) {
    .sidebar .menu-group .group-link:hover {
      background: var(--sidebar-hover-background-color);
    }
  }
  .sidebar .menu-group .group-link span {
    overflow: hidden;
    white-space: nowrap;
  }
  .sidebar .menu-group .group-link i:last-child,
  .sidebar .menu-group .group-link .order-count {
    grid-column: -2/-1;
  }
  .sidebar .menu-group .group-link .order-count {
    align-self: center;
  }
  .sidebar .menu-group-row {
    display: flex;
    align-items: center;
    position: relative;
  }
  .sidebar .menu-group-row .group-link,
  .sidebar .menu-group-row .folders-group-header {
    flex: 1;
    min-width: 0;
  }
  .sidebar .menu-group-row .menu-collapse-toggle,
  .sidebar .menu-group-row .folder-edit-mode-enter {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 var(--row-end-inset);
    color: var(--sidebar-group-icon-color);
  }
  @media screen and (hover: hover) {
    .sidebar .menu-group-row .menu-collapse-toggle:hover,
    .sidebar .menu-group-row .folder-edit-mode-enter:hover {
      color: var(--default-link-color);
    }
  }
  .sidebar .menu-group-row .folder-edit-mode-enter {
    right: -5px;
    font-size: var(--font-size-sm);
  }
  .sidebar .menu-group-row .folder-edit-mode-done {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: none;
  }
  .sidebar .menu-group-row .folder-edit-mode-done i {
    color: inherit;
  }
  @media screen and (hover: hover) {
    .sidebar .menu-group-row:has(.menu-collapse-toggle, .folder-edit-mode-enter):hover .group-link {
      background: var(--sidebar-hover-background-color);
    }
  }
  .sidebar .menu-group-row .collapse-sidebar {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 0;
    margin-right: 7px;
  }
  .sidebar .menu-group-row .collapse-sidebar i.chevron {
    color: var(--sidebar-collapse-icon-color);
  }
  .sidebar .menu-group-row .collapse-sidebar:hover i.chevron {
    color: var(--default-link-color);
  }
  .sidebar .folders-group-header .group-link i.chevron {
    display: none;
    margin-right: var(--row-end-inset);
  }
  .sidebar .folders-group-header .group-link.collapsed i.chevron {
    display: block;
  }
  .sidebar .folders-group-header .group-link.collapsed ~ .folder-edit-mode-enter {
    display: none;
  }
  .sidebar .menu-group:has(.folder-edit-mode) .folders-group-header .folder-edit-mode-enter {
    display: none;
  }
  .sidebar .menu-group:has(.folder-edit-mode) .folders-group-header .folder-edit-mode-done {
    display: block;
  }
  .sidebar .menu-group:has(.folder-edit-mode) .folders-group-header .group-link {
    pointer-events: none;
    background: none;
  }
  .sidebar .menu-group:has(.folder-edit-mode) .folders-group-header .group-link i.chevron {
    display: none;
  }
  .sidebar .menu-item {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-left: var(--item-border-width) solid var(--sidebar-menu-item-default-border-color);
    font-weight: 400;
    transition: background-color var(--animation-time) ease-in, border-left-color var(--animation-time) ease-in;
  }
  .sidebar .menu-item.all-orders {
    font-weight: 500;
  }
  @media screen and (hover: hover) {
    .sidebar .menu-item:hover {
      border-left-color: var(--sidebar-menu-item-hover-border-color);
      font-weight: 500;
      background: var(--sidebar-hover-background-color);
    }
  }
  .sidebar .menu-item.active {
    border-left-color: var(--sidebar-menu-item-active-border-color);
    font-weight: 500;
  }
  .sidebar .menu-item.is-disconnected {
    opacity: 0.55;
  }
  .sidebar .menu-item a {
    line-height: 28px;
    display: flex;
    position: relative;
    margin-left: -44px;
    padding-left: 54px;
    word-wrap: anywhere;
    justify-content: space-between;
  }
  .sidebar .sub-group-title {
    position: relative;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .sidebar .sub-group-title:last-child {
    margin-bottom: 0;
  }
  .sidebar .sub-group-title > a {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-left: var(--item-border-width) solid var(--sidebar-folder-group-border-color);
    line-height: 28px;
    margin-left: 0;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: padding var(--animation-time) ease-in, border-left-width var(--animation-time) ease-in, border-color var(--animation-time) ease-in, background-color var(--animation-time) ease-in;
  }
  @media screen and (hover: hover) {
    .sidebar .sub-group-title > a:hover {
      font-weight: 500;
      background: var(--sidebar-hover-background-color);
    }
  }
  .sidebar .sub-group-title > a:not(.collapsed) {
    border-left-width: 0;
    padding-left: 0;
    border-color: var(--sidebar-background-color);
  }
  .sidebar .menu-sub-groups {
    overflow: hidden;
    margin-left: 22px;
    padding-left: 10px;
    transition: margin var(--animation-time) ease-in, height 450ms var(--ease-in-out-expo);
  }
  .sidebar .menu-sub-groups:not(.collapsed) {
    transition: margin var(--animation-time) ease-out, height 450ms var(--ease-in-out-expo);
  }
  .sidebar a.current {
    color: var(--sidebar-group-selected-title-color);
  }
  .sidebar [data-collapse] i.chevron {
    transition: transform var(--animation-time) ease-in-out;
    transform: rotate(-90deg);
  }
  .sidebar [data-collapse]:not(.collapsed) i.chevron {
    transform: rotate(0deg);
  }
  .sidebar .sub-group-title > a[data-collapse] i.chevron {
    margin-right: 7px;
  }
  .sidebar .order-count {
    margin-right: var(--row-end-inset);
    font-weight: 500;
    font-family: var(--font-family-alternative);
    font-size: 12px;
    color: var(--sidebar-order-count-color);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .sidebar .order-count.search-count {
    color: var(--color-blue-lagoon);
  }
  .sidebar .store-switcher {
    flex-shrink: 0;
    padding: 20px 5px 10px 10px;
  }
  .sidebar .store-switcher:has(.options a.htmx-request) .store-switcher-label .icon-swap > i:first-child {
    opacity: 0;
  }
  .sidebar .store-switcher:has(.options a.htmx-request) .store-switcher-label .icon-swap > i:last-child {
    opacity: 1;
  }
  .sidebar .store-switcher .store-icon {
    color: var(--sidebar-store-icon-color);
  }
  .sidebar .store-switcher .store-switcher-label {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
  }
  .sidebar .store-switcher .store-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar .store-switcher .select-container {
    border: none;
    background: none;
  }
  .sidebar .store-switcher .select-container .selection {
    padding: 10px 12px;
    background: var(--sidebar-store-switcher-background-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--sidebar-store-switcher-border-color);
  }
  .sidebar .store-switcher .select-container .dropdown {
    width: calc(var(--sidebar-width) - 20px);
  }
  .sidebar .admin-store-switcher .admin-store-switcher-row {
    display: flex;
    background: var(--sidebar-store-switcher-background-color);
    border: 1px solid var(--sidebar-store-switcher-border-color);
    border-radius: var(--border-radius);
  }
  .sidebar .admin-store-switcher .select-container {
    flex: 1;
    min-width: 0;
  }
  .sidebar .admin-store-switcher .select-container .toggle-container {
    min-height: auto;
  }
  .sidebar .admin-store-switcher .select-container .selection {
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 0;
    min-height: auto;
  }
  .sidebar .admin-store-switcher .select-container .dropdown {
    width: calc(var(--sidebar-width) + 70px);
  }
  .sidebar .admin-store-switcher .admin-tools-link {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    background: none;
    border: none;
    border-left: 1px solid var(--sidebar-store-switcher-border-color);
    border-radius: 0;
    cursor: pointer;
    color: var(--super-admin-icon-color);
  }
  @media screen and (hover: hover) {
    .sidebar .admin-store-switcher .admin-tools-link:hover {
      background: var(--sidebar-hover-background-color);
    }
  }
  .sidebar .admin-store-switcher .options {
    max-height: calc(var(--option-height) * var(--viewable-option-count) + 100px);
  }
  .sidebar .admin-store-switcher .options .store-status-icon i {
    border: none;
    width: auto;
    height: auto;
    font-size: 16px;
  }
  .sidebar .admin-store-switcher li a {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sidebar .admin-store-switcher .store-status-icon {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    color: var(--sidebar-group-icon-color);
  }
  .sidebar .admin-store-switcher .store-status-icon .fa-link,
  .sidebar .admin-store-switcher .store-status-icon .fa-circle-check,
  .sidebar .admin-store-switcher .store-status-icon .fa-circle-plus,
  .sidebar .admin-store-switcher .store-status-icon .fa-circle-heart {
    color: var(--sidebar-store-type-icon-color);
  }
  .sidebar .admin-store-switcher .store-status-icon .fa-circle-bolt {
    color: var(--super-admin-icon-color);
  }
  .sidebar .admin-store-switcher .store-status-icon .fa-circle-question {
    color: var(--sidebar-store-type-trial-icon-color);
  }
  .sidebar .admin-store-switcher .store-result-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar .admin-store-switcher .store-result-id {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--sidebar-group-icon-color);
  }
  .sidebar .admin-store-switcher li.locked a {
    color: var(--sidebar-store-result-locked-color);
  }
  .sidebar .admin-store-switcher li.trashed a {
    color: var(--sidebar-store-result-trashed-color);
    text-decoration: line-through;
  }
  .sidebar .admin-store-switcher li.no-results {
    padding: 12px;
    color: var(--sidebar-group-icon-color);
    text-align: center;
    cursor: default;
  }
  .sidebar .sidebar-bottom {
    flex-shrink: 0;
    margin-right: -4px;
  }
  .sidebar .sidebar-bottom .store-footer {
    padding: 12px 15px 12px 10px;
    background: var(--sidebar-bottom-background-color);
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sidebar .sidebar-bottom .store-footer.trial-ending {
    background: var(--callout-error-background-color);
    border-top: 1px solid var(--callout-error-border-color);
  }
  .sidebar .sidebar-bottom .store-footer .trial-info {
    display: flex;
    flex-direction: column;
    color: var(--sidebar-bottom-text-color);
  }
  .sidebar .sidebar-bottom .store-footer .trial-info .trial-status {
    font-weight: bold;
  }
  .sidebar .sidebar-bottom .store-footer .trial-info .trial-billing-link {
    color: var(--sidebar-bottom-link-color);
  }
  .sidebar .sidebar-bottom .store-footer .linked-store-link,
  .sidebar .sidebar-bottom .store-footer .manage-billing-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--sidebar-bottom-link-color);
  }
  .sidebar .sidebar-bottom .store-footer .linked-store-link span,
  .sidebar .sidebar-bottom .store-footer .manage-billing-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar .sidebar-bottom .store-footer .legal-text {
    margin-top: 2px;
    font-size: 10px;
    color: var(--sidebar-bottom-muted-color);
  }
  main .expand-sidebar {
    display: none;
    position: absolute;
    left: 0;
    top: calc(var(--header-height) + var(--banner-height) + 28px);
    transform: translateX(-50%);
    z-index: calc(var(--index-low) - 1);
    background: var(--sidebar-expand-background-color);
    border: 1px solid var(--sidebar-expand-border-color);
    border-radius: 50%;
    cursor: pointer;
    height: 20px;
    width: 20px;
    padding: 0;
  }
  main .expand-sidebar i.chevron {
    position: relative;
    top: -1px;
    font-size: 10px;
    color: var(--sidebar-expand-icon-color);
  }
  main .expand-sidebar:hover i.chevron {
    color: var(--default-link-color);
  }
}
@layer theme {
  .sidebar .custom-views {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .sidebar .custom-view.shared a {
    color: var(--sidebar-shared-view-text-color);
  }
  .sidebar .custom-view:not(.shared) + .custom-view.shared {
    margin-top: 10px;
  }
  .custom-view-share {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .custom-view-share-store {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-sm);
  }
  .custom-view-share-stock {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    padding-left: calc(var(--checkbox-size) + 11px);
    font-size: var(--font-size-sm);
  }
  .custom-view-share-stock [data-tippy-content] {
    cursor: help;
  }
  .custom-view-share-store:has(.form-check-input:not(:checked)) + .custom-view-share-stock {
    opacity: 0.5;
    pointer-events: none;
  }
}
@layer ui {
  .side-panel {
    --panel-gutter: 15px;
  }
  .side-panel .panel-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sidepanel-table-heading-color);
  }
  .side-panel .panel-header__title {
    flex-grow: 1;
    min-width: 0;
  }
  .side-panel .panel-header__control {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius);
    background: transparent;
    font-size: 15px;
    color: var(--sidepanel-header-control-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .side-panel .panel-header__control:hover:not(:disabled) {
    background: var(--sidepanel-header-control-hover-background-color);
    color: var(--sidepanel-header-control-hover-color);
  }
  .side-panel .panel-header__control:focus-visible {
    outline: 2px solid var(--sidepanel-header-control-focus-color);
    outline-offset: 1px;
  }
  .side-panel .panel-header__control:disabled {
    color: var(--sidepanel-header-control-disabled-color);
    cursor: default;
  }
  .side-panel .panel-header__close {
    margin-left: var(--gutter-xs);
  }
  @media screen and (width > 576px) {
    :root {
      --panel-width: 476px;
    }
    .side-panel.animate {
      transition: transform 0.45s var(--ease-in-out-expo);
    }
    .side-panel.active {
      transform: translateX(calc(var(--panel-width) * -1));
    }
    .side-panel {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      bottom: 0;
      right: calc(var(--panel-width) * -1);
      width: var(--panel-width);
      z-index: var(--index-highest);
      background: var(--sidepanel-background-color);
    }
    .side-panel > header.panel-header {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      gap: var(--gutter-xxs);
      min-height: var(--navbar-height);
      padding: 0 var(--panel-gutter);
      background: var(--sidepanel-header-background-color);
      border-bottom: 1px solid var(--sidepanel-header-border-color);
    }
    .side-panel > header.panel-header .panel-header__title {
      margin: 0;
      line-height: 24px;
      font-weight: 600;
      font-size: 18px;
      font-family: var(--font-family-main);
      color: var(--sidepanel-header-title-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .side-panel > header.panel-header .panel-header__title:has(.integration-icon) {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .side-panel > header.panel-header .panel-header__title:has(.integration-icon) .integration-icon {
      width: 28px;
    }
    .side-panel > header.panel-header + .content {
      padding-top: var(--panel-gutter);
    }
    .side-panel .content {
      flex-grow: 1;
      overflow-y: auto;
    }
    .side-panel .content .section, .side-panel .content section {
      padding: 0 var(--panel-gutter) var(--panel-gutter);
    }
    .side-panel .content .section h3, .side-panel .content section h3 {
      font-weight: 500;
      font-size: 16px;
      font-family: var(--font-family-inter);
      border-bottom: 1px solid var(--sidepanel-section-header-border-color);
      padding-bottom: 8px;
      margin-bottom: var(--panel-gutter);
    }
    .side-panel .content .section h4, .side-panel .content section h4 {
      font-weight: 500;
      font-size: 14px;
      font-family: var(--font-family-inter);
      margin-bottom: 8px;
    }
    .side-panel .content .section h4:not(:first-child), .side-panel .content section h4:not(:first-child) {
      margin-top: 12px;
    }
    .side-panel .content .section th, .side-panel .content .section td, .side-panel .content section th, .side-panel .content section td {
      font-size: 14px;
      font-weight: 400;
      font-family: var(--font-family-inter);
      line-height: 20px;
      padding-bottom: 8px;
    }
    .side-panel .content .section th, .side-panel .content section th {
      color: var(--sidepanel-table-heading-color);
    }
    .side-panel .content .section td, .side-panel .content section td {
      color: var(--sidepanel-table-data-color);
    }
    .side-panel .content .section button, .side-panel .content section button {
      width: 100%;
      max-width: 100%;
      display: flex;
      justify-content: center;
      gap: 5px;
      align-items: center;
    }
    .side-panel footer {
      gap: 5px;
      border-top: 1px solid var(--sidepanel-footer-border-color);
      padding: var(--panel-gutter);
      display: flex;
      justify-content: flex-end;
    }
    .side-panel footer[hidden] {
      display: none;
    }
    .side-panel footer.shake {
      animation: shake 0.4s ease-in-out;
    }
    .side-panel footer .add-another {
      display: flex;
      align-items: center;
      gap: var(--gutter-xxs);
      margin-right: auto;
      font-size: var(--font-size-sm);
      cursor: pointer;
    }
  }
}
@layer theme {
  .panel-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--gutter-sm);
  }
  .panel-summary .panel-summary-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: var(--gutter-xxs);
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--panel-summary-color) 12%, var(--panel-summary-background-color));
    font-size: 18px;
    color: var(--panel-summary-color);
  }
  .panel-summary .panel-summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .panel-summary .panel-summary-title {
    font-weight: 600;
    color: var(--panel-summary-title-color);
  }
  .panel-summary .panel-summary-subtitle {
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  @media screen and (width > 576px) {
    .side-panel .content .panel-summary {
      padding: 0 var(--panel-gutter) var(--panel-gutter);
    }
  }
}
@layer theme {
  .target-themed--order {
    --target-color: var(--target-color-order);
  }
  .target-themed--orderItem {
    --target-color: var(--target-color-orderItem);
  }
  .target-themed--shipment {
    --target-color: var(--target-color-shipment);
  }
  .target-themed--fulfillment {
    --target-color: var(--target-color-fulfillment);
  }
  .target-themed--product {
    --target-color: var(--target-color-product);
  }
}
@layer theme {
  tr.preview-row {
    cursor: pointer;
  }
  tr.preview-row .no-row-preview {
    cursor: default;
  }
  tr.preview-row .eye-con i {
    visibility: hidden;
  }
  @media screen and (hover: hover) {
    tr.preview-row:hover {
      background: var(--row-preview-hover-background);
    }
    tr.preview-row:has(td:not(.no-row-preview):hover) .eye-con i {
      visibility: visible;
    }
  }
  tr.preview-row.previewing, tr.preview-row.previewing:hover {
    background: var(--row-preview-active-background);
    box-shadow: inset 3px 0 0 var(--row-preview-active-accent);
  }
  .side-panel.row-preview .panel-header__control[data-preview-nav] {
    --sidepanel-header-control-color: var(--row-preview-nav-color);
    --sidepanel-header-control-hover-color: var(--row-preview-nav-hover-color);
  }
  body:has(.preview-swap.htmx-request) .side-panel.row-preview[data-preview-direction=previous] [data-preview-nav=previous] .icon-swap > i:first-child, body:has(.preview-swap.htmx-request) .side-panel.row-preview[data-preview-direction=next] [data-preview-nav=next] .icon-swap > i:first-child {
    opacity: 0;
  }
  body:has(.preview-swap.htmx-request) .side-panel.row-preview[data-preview-direction=previous] [data-preview-nav=previous] .icon-swap > i:last-child, body:has(.preview-swap.htmx-request) .side-panel.row-preview[data-preview-direction=next] [data-preview-nav=next] .icon-swap > i:last-child {
    opacity: 1;
  }
  .side-panel.row-preview .panel-header__title {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .side-panel.row-preview .content .section {
    padding-top: var(--panel-gutter);
  }
  .side-panel.row-preview .row-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xxs);
    padding: 3px var(--gutter-xs);
    border-radius: var(--border-radius);
    background: var(--row-preview-chip-background);
    font-family: var(--font-family-roboto);
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--sidepanel-text-secondary-color);
  }
  .side-panel.row-preview details > summary {
    cursor: pointer;
    color: var(--sidepanel-text-secondary-color);
  }
  .side-panel.row-preview details dl {
    display: grid;
    grid-template-columns: minmax(90px, 30%) minmax(0, 1fr);
    gap: var(--gutter-xxs) var(--gutter-sm);
    margin: var(--gutter-xs) 0 0;
  }
  .side-panel.row-preview details dl dt {
    font-family: var(--font-family-roboto);
    font-size: var(--font-size-sm);
    color: var(--sidepanel-table-heading-color);
    overflow-wrap: anywhere;
  }
  .side-panel.row-preview details dl dd {
    margin: 0;
    word-break: break-word;
    color: var(--default-text-primary-color);
  }
  .side-panel.row-preview details dl dd a {
    color: var(--default-link-color);
  }
}
@layer theme {
  .side-panel.order-preview .panel-header__title img {
    height: 22px;
    width: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .side-panel.order-preview .panel-header__title i {
    font-size: 20px;
    line-height: 1;
    color: var(--content-header-icon-color);
    flex-shrink: 0;
  }
  .side-panel.order-preview .order-preview-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-xs);
  }
  @media screen and (width > 576px) {
    .side-panel.order-preview .order-preview-meta {
      padding: 0 var(--panel-gutter);
    }
  }
  .side-panel.order-preview .order-preview-date i {
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--order-preview-date-icon-color);
  }
  .side-panel.order-preview .order-preview-tags .tags-cell {
    flex-wrap: wrap;
  }
  .side-panel.order-preview .order-preview-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gutter-xs);
    padding: var(--gutter-xxs) 0;
  }
  .side-panel.order-preview .order-preview-item + .order-preview-item {
    border-top: 1px solid var(--order-preview-item-border-color);
  }
  .side-panel.order-preview .order-preview-thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--row-preview-thumb-background);
  }
  .side-panel.order-preview .order-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .side-panel.order-preview .order-preview-thumb.order-preview-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .side-panel.order-preview .order-preview-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .side-panel.order-preview .order-preview-item-name {
    display: block;
    color: var(--default-text-primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .side-panel.order-preview .order-preview-item-sku {
    font-family: var(--font-family-roboto);
    font-size: var(--font-size-sm);
    color: var(--sidepanel-text-secondary-color);
  }
  .side-panel.order-preview .order-preview-item-custom-fields {
    font-size: var(--font-size-sm);
    color: var(--sidepanel-text-secondary-color);
  }
  .side-panel.order-preview .order-preview-item-qty {
    color: var(--sidepanel-text-secondary-color);
    white-space: nowrap;
  }
  .side-panel.order-preview .order-preview-item-price {
    min-width: 64px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .side-panel.order-preview .order-preview-totals {
    margin-top: var(--gutter-xs);
    padding-top: var(--gutter-xs);
    border-top: 1px solid var(--sidepanel-section-header-border-color);
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .side-panel.order-preview .order-preview-total-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--sidepanel-text-secondary-color);
    font-variant-numeric: tabular-nums;
  }
  .side-panel.order-preview .order-preview-total-row.order-preview-total-row--grand {
    font-size: var(--font-size);
    font-weight: 600;
    color: var(--default-text-primary-color);
  }
  .side-panel.order-preview .order-preview-ship-grid {
    display: flex;
    gap: var(--gutter-md);
  }
  .side-panel.order-preview .order-preview-ship-grid > div {
    flex: 1;
    min-width: 0;
  }
  .side-panel.order-preview .order-preview-ship-to h4,
  .side-panel.order-preview .order-preview-ship-meta h4,
  .side-panel.order-preview .order-preview-tracking h4 {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    margin-bottom: var(--gutter-xxs);
  }
  .side-panel.order-preview .order-preview-ship-to h4:not(:first-child),
  .side-panel.order-preview .order-preview-ship-meta h4:not(:first-child),
  .side-panel.order-preview .order-preview-tracking h4:not(:first-child) {
    margin-top: var(--gutter-sm);
  }
  .side-panel.order-preview .order-preview-ship-meta p {
    margin: 0;
    font-size: var(--font-size);
    line-height: 1.3;
  }
  .side-panel.order-preview .order-preview-ship-meta p.order-preview-message {
    overflow-wrap: anywhere;
    white-space: pre-line;
  }
  .side-panel.order-preview .order-preview-address p {
    margin: 0;
    font-size: var(--font-size);
    line-height: 1;
  }
  .side-panel.order-preview .order-preview-contact {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    margin-top: var(--gutter-sm);
  }
  .side-panel.order-preview .order-preview-contact-line {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    min-width: 0;
    font-size: var(--font-size);
    line-height: 1.3;
  }
  .side-panel.order-preview .order-preview-contact-line i {
    flex-shrink: 0;
  }
  .side-panel.order-preview .order-preview-contact-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .side-panel.order-preview .order-preview-copy {
    width: auto;
    max-width: none;
    border: 0;
    background: none;
    padding: 0;
    display: inline-flex;
    font-size: var(--font-size);
    cursor: pointer;
  }
  .side-panel.order-preview .order-preview-tracking {
    margin-top: var(--gutter-sm);
  }
  .side-panel.order-preview .order-preview-tracking-row {
    display: flex;
    gap: var(--gutter-xs);
    font-size: var(--font-size-sm);
  }
  .side-panel.order-preview .order-preview-tracking-row a {
    color: var(--default-link-color);
    text-decoration: none;
  }
  .side-panel.order-preview .order-preview-tracking-carrier {
    color: var(--sidepanel-text-secondary-color);
  }
  .side-panel.order-preview .order-preview-note {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    margin-top: var(--gutter-xs);
  }
  .side-panel.order-preview .order-preview-note-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--gutter-xs);
    font-size: var(--font-size-sm);
    color: var(--sidepanel-text-secondary-color);
  }
  .side-panel.order-preview .order-preview-note-content {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--default-text-primary-color);
  }
  .side-panel.order-preview .order-preview-dock {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    padding: var(--gutter-xs) var(--panel-gutter);
    background: var(--order-preview-dock-background);
    border-top: 1px solid var(--order-preview-dock-border-color);
  }
  .side-panel.order-preview .order-preview-quick {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-xs);
    margin: 0;
  }
  .side-panel.order-preview .order-preview-quick input {
    flex: 1;
    min-width: 0;
  }
  .side-panel.order-preview .order-preview-quick input[name=carrier] {
    flex: 0 0 96px;
  }
  .side-panel.order-preview .order-preview-quick .button {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .side-panel.order-preview .order-preview-quick .invalid-feedback {
    flex: 0 0 100%;
  }
}
@layer theme {
  .side-panel.product-preview .product-preview-thumb {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--row-preview-thumb-background);
  }
  .side-panel.product-preview .product-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .side-panel.product-preview .product-preview-thumb[data-image-preview] {
    cursor: pointer;
  }
  .side-panel.product-preview .product-preview-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .side-panel.product-preview .product-preview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-xs);
  }
  @media screen and (width > 576px) {
    .side-panel.product-preview .product-preview-meta {
      padding: 0 var(--panel-gutter);
    }
  }
  .side-panel.product-preview .product-preview-discontinued {
    border: 1px solid var(--product-preview-discontinued-border-color);
    background: var(--product-preview-discontinued-background);
    font-family: var(--font-family-main);
    color: var(--default-text-primary-color);
  }
  .side-panel.product-preview .product-preview-discontinued i {
    color: var(--callout-warning-icon-color);
  }
  .side-panel.product-preview .product-preview-tags,
  .side-panel.product-preview .product-preview-bundles {
    flex: 0 0 100%;
  }
  .side-panel.product-preview .product-preview-tags .tags-cell {
    flex-wrap: wrap;
  }
  .side-panel.product-preview .product-preview-bundles ul {
    list-style: none;
    margin: var(--gutter-xs) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .side-panel.product-preview .product-preview-bundles li {
    display: flex;
    justify-content: space-between;
    gap: var(--gutter-xs);
  }
  .side-panel.product-preview .product-preview-bundles a {
    color: var(--default-link-color);
    text-decoration: none;
  }
  .side-panel.product-preview .product-preview-stock {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    padding: var(--gutter-xs) var(--gutter-sm);
    border-radius: var(--border-radius);
    background: var(--callout-default-background-color);
  }
  .side-panel.product-preview .product-preview-stock-row {
    display: flex;
    justify-content: space-between;
    gap: var(--gutter-xs);
    font-variant-numeric: tabular-nums;
  }
  .side-panel.product-preview .product-preview-stock-row.product-preview-stock-row--total {
    margin-top: var(--gutter-xxs);
    padding-top: var(--gutter-xs);
    border-top: 1px solid var(--sidepanel-section-header-border-color);
    font-weight: 600;
  }
  .side-panel.product-preview .product-preview-stock-quantity {
    flex-shrink: 0;
  }
  .side-panel.product-preview .product-preview-details dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter-sm) var(--gutter-md);
    margin: 0;
  }
  .side-panel.product-preview .product-preview-details dt {
    margin-bottom: var(--gutter-xxs);
  }
  .side-panel.product-preview .product-preview-details dd {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--default-text-primary-color);
  }
  .side-panel.product-preview .product-preview-mono {
    font-family: var(--font-family-roboto);
    font-size: var(--font-size-sm);
  }
  .side-panel.product-preview .integration-icon {
    width: 16px;
  }
  .side-panel.product-preview .product-preview-integration-fields details + details {
    margin-top: var(--gutter-xs);
  }
  .side-panel.product-preview .product-preview-integration-fields summary .integration-icon {
    vertical-align: middle;
    margin-right: var(--gutter-xxs);
  }
  .side-panel.product-preview .product-preview-alternate-sku-list {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    margin-top: var(--gutter-xs);
  }
  .side-panel.product-preview .product-preview-alternate-sku {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
}
@layer theme {
  .item-coverage {
    border: 1px solid var(--submission-zone-border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  .item-coverage .item-coverage-heading {
    padding: 8px 12px;
    border-bottom: 1px solid var(--submission-zone-border-color);
    font-weight: 600;
    font-size: var(--font-size-sm);
    background: var(--submission-zone-header-background-color);
  }
  .item-coverage .item-coverage-heading:has(.badge) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-sm);
  }
  .item-coverage-body {
    padding: 12px;
  }
  .item-coverage-lines {
    padding: 6px 0;
  }
  .item-coverage-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
  }
  .item-coverage-line .item-thumbnail {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--color-concrete);
    object-fit: cover;
    flex-shrink: 0;
  }
  .item-coverage-line .item-name {
    flex: 1;
    min-width: 0;
  }
  .item-coverage-line .item-coverage-quantity {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--submission-zone-muted-text-color);
  }
  .item-coverage-empty {
    margin: 0;
    padding: 4px 12px;
    font-size: var(--font-size-sm);
    color: var(--submission-zone-muted-text-color);
  }
}
@layer theme {
  .label-purchase {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .label-parcel {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .label-dimensions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .label-rate-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
  }
  .label-rate-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--submission-line-border-color);
    border-radius: var(--border-radius);
    background: var(--submission-line-background-color);
    cursor: pointer;
  }
  .label-rate-option .rate-service {
    flex: 1;
    min-width: 0;
  }
  .label-rate-option .rate-transit,
  .label-rate-option .rate-amount {
    font-size: var(--font-size-sm);
  }
  .label-rate-option .rate-amount {
    font-weight: 600;
  }
  .label-rates-actions {
    display: flex;
    align-items: center;
  }
  .label-rates-actions .loading-indicator {
    padding: 0;
  }
  .label-rates-actions .loading-indicator i {
    font-size: inherit;
  }
  #label-rate-list .callout {
    margin-top: 10px;
  }
}
@layer theme {
  .order-labels .label-entry {
    padding: 6px 0;
  }
  .order-labels .label-entry + .label-entry {
    border-top: 0.5px solid var(--color-divider);
  }
  .order-labels .label-title {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .order-labels .label-name {
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-labels .unavailable {
    color: var(--default-text-secondary-color);
  }
  .order-labels .badge {
    flex-shrink: 0;
  }
  .order-labels .label-void {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--order-details-note-delete-color);
    padding: 0;
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: opacity 150ms;
  }
  .order-labels .label-entry:hover .label-void,
  .order-labels .label-entry:focus-within .label-void {
    opacity: 1;
  }
  @media (hover: none) {
    .order-labels .label-void {
      opacity: 1;
    }
  }
  .order-labels .label-meta {
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }
}
@layer theme {
  .submission-preview {
    position: relative;
  }
  .submission-zone {
    border: 1px solid var(--submission-zone-border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  .submission-zone > header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    background: var(--submission-zone-header-background-color);
  }
  .submission-zone.not-sending {
    border-style: dashed;
    background: var(--submission-zone-muted-background-color);
  }
  .submission-zone.not-sending > header {
    color: var(--submission-zone-muted-text-color);
    background: none;
  }
  .submission-zone:has([data-submission-zone-items] > .submission-line) .submission-zone-empty {
    display: none;
  }
  .submission-zone-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    min-height: 56px;
  }
  .submission-zone-empty {
    margin: 0;
    padding: 6px 4px;
    font-size: var(--font-size-sm);
    color: var(--submission-zone-muted-text-color);
  }
  .submission-zone-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    font-size: var(--font-size-sm);
    color: var(--submission-zone-muted-text-color);
  }
  .submission-zone-divider i {
    color: var(--submission-zone-muted-text-color);
  }
  .submission-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--submission-line-border-color);
    border-radius: var(--border-radius);
    background: var(--submission-line-background-color);
  }
  .submission-line .reorder-handle {
    cursor: grab;
    align-self: center;
  }
  .submission-line .reorder-handle i {
    color: var(--submission-zone-muted-text-color);
  }
  .submission-line .item-info {
    flex: 1;
    min-width: 0;
  }
  .submission-line .item-info > .badge {
    align-self: flex-start;
    margin: 2px 0 0;
  }
  .submission-line .submission-line-components {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--submission-zone-muted-text-color);
  }
}
@layer override {
  .rearranging > .submission-line.placeholder {
    visibility: visible;
    background: none;
    border: 1px dashed var(--submission-line-placeholder-border-color);
  }
  .rearranging > .submission-line.placeholder > * {
    visibility: hidden;
  }
  .submission-line.ghost {
    pointer-events: none;
  }
}
@layer ui {
  .recently-deleted-templates-link {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    margin-top: var(--gutter-sm);
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--default-text-secondary-color);
    background: none;
    border: none;
    cursor: pointer;
  }
  .recently-deleted-templates-link:hover {
    color: var(--default-text-primary-color);
  }
  .recently-deleted-templates-link[hidden] {
    display: none;
  }
  .recently-deleted-templates-link .icon-swap {
    font-size: 11px;
  }
  .side-panel .recently-deleted-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .side-panel .recently-deleted-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--recently-deleted-list-border-color);
    font-size: 13px;
  }
  .side-panel .recently-deleted-list .title {
    flex: 1;
    color: var(--default-text-primary-color);
    overflow-wrap: anywhere;
  }
  .side-panel .recently-deleted-list .actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .side-panel .recently-deleted-list button.delete {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
  }
  .side-panel .recently-deleted-list button.delete.confirming {
    color: var(--delete-action-hover-color);
  }
}
@layer theme {
  .document-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gutter-xs);
    padding: 6px 0;
  }
  .document-row > :first-child {
    margin-right: auto;
  }
  .document-row + .document-row {
    border-top: 0.5px solid var(--color-divider);
  }
  .document-row i {
    color: inherit;
  }
  .document-row button {
    width: auto;
  }
  .document-row a,
  .document-row .document-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .document-row .document-name {
    color: var(--default-text-secondary-color);
  }
  .document-row .document-meta {
    display: grid;
    grid-template-columns: auto 92px;
    align-items: center;
    gap: var(--gutter-xs);
    flex-shrink: 0;
  }
  .document-row .document-date {
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .document-row .badge {
    justify-content: center;
  }
}
@layer ui {
  .upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-sm);
    padding: var(--gutter-sm) var(--gutter-lg);
    border: 2px dashed var(--upload-dropzone-border-color);
    border-radius: var(--border-radius);
    background-color: var(--upload-dropzone-background-color);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    min-height: 220px;
  }
  .upload-dropzone:hover, .upload-dropzone.is-dragover {
    background-color: var(--upload-dropzone-active-background-color);
    border-color: var(--upload-dropzone-active-border-color);
  }
  .upload-dropzone .upload-dropzone-idle,
  .upload-dropzone .upload-dropzone-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-sm);
    width: 100%;
  }
  .upload-dropzone .upload-dropzone-progress,
  .upload-dropzone .upload-dropzone-selected {
    display: none;
  }
  .upload-dropzone.has-file .upload-dropzone-idle {
    display: none;
  }
  .upload-dropzone.has-file .upload-dropzone-selected {
    display: flex;
  }
  .htmx-request .upload-dropzone:has(.upload-dropzone-progress) .upload-dropzone-idle,
  .htmx-request .upload-dropzone:has(.upload-dropzone-progress) .upload-dropzone-selected {
    display: none;
  }
  .htmx-request .upload-dropzone:has(.upload-dropzone-progress) .upload-dropzone-progress {
    display: flex;
  }
  .upload-dropzone.is-compact {
    min-height: 120px;
    padding: var(--gutter-sm);
  }
  .upload-dropzone.is-compact .upload-dropzone-icon {
    font-size: 22px;
  }
  .upload-dropzone .upload-dropzone-icon {
    font-size: 32px;
    color: var(--upload-dropzone-icon-color);
  }
  .upload-dropzone .upload-dropzone-primary {
    margin: 0;
    font-size: 15px;
    color: var(--upload-dropzone-text-color);
  }
  .upload-dropzone .upload-dropzone-primary .upload-dropzone-link {
    color: var(--upload-dropzone-link-color);
    font-weight: 500;
  }
  .upload-dropzone .upload-dropzone-hint {
    margin: 0;
    font-size: 13px;
    color: var(--upload-dropzone-hint-color);
  }
  .upload-dropzone .upload-dropzone-selected {
    flex-direction: column;
    align-items: center;
    gap: var(--gutter-xxs);
    max-width: 100%;
  }
  .upload-dropzone .upload-dropzone-file-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    color: var(--upload-dropzone-text-color);
  }
  .upload-dropzone .upload-progress-ring {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
  }
  .upload-dropzone .upload-progress-track {
    fill: none;
    stroke: var(--upload-dropzone-border-color);
    stroke-width: 6;
  }
  .upload-dropzone .upload-progress-bar {
    fill: none;
    stroke: var(--upload-dropzone-active-border-color);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s linear;
  }
  .upload-dropzone .upload-progress-value {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--upload-dropzone-text-color);
  }
  .upload-dropzone .upload-progress-label {
    margin: 0;
    font-size: 13px;
    color: var(--upload-dropzone-hint-color);
  }
}
@layer ui {
  .select-container li.selected {
    background-color: var(--form-select-option-selected);
  }
  .store-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: white;
  }
  od-select {
    display: block;
  }
  .select-container {
    --viewable-option-count: 8;
    --option-height: 36px;
    --control-row-height: calc(var(--form-control-height) - 2px);
    border-radius: 4px;
    min-height: var(--form-control-height);
    border: 1px solid var(--form-field-border-default-color);
    position: relative;
    background-color: var(--form-field-background-default-color);
  }
  .select-container:focus {
    outline: none;
    border: 1px solid var(--form-field-border-active-color);
  }
  .select-container select {
    display: none;
  }
  .select-container select[autocomplete] {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }
  .select-container.active {
    border: 1px solid var(--form-field-border-active-color);
  }
  .select-container.active .dropdown {
    display: initial;
  }
  .select-container.active .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
  }
  .select-container .toggle-container {
    min-height: var(--control-row-height);
    cursor: pointer;
  }
  .select-container.has-selection .placeholder {
    display: none;
  }
  .select-container.has-selection .selection {
    display: flex;
  }
  .select-container:not(.multiple).has-selection .selection {
    flex-wrap: nowrap;
  }
  .select-container:not(.multiple).has-selection .selection .label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .select-container.multiple.has-selection .selection {
    padding: 6px 12px;
  }
  .select-container .placeholder {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 12px;
    color: var(--form-select-placeholder-color);
    min-height: var(--control-row-height);
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
  }
  .select-container .placeholder .label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .select-container .placeholder i {
    color: var(--default-icon-color);
  }
  .select-container .placeholder i.fa-chevron-down {
    font-size: 10px;
  }
  .select-container.multiple .selection {
    justify-content: flex-start;
  }
  .select-container.multiple .selection > span {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--default-text-primary-color);
    background-color: var(--form-select-option-tag-selected);
    padding: 2px 12px;
    border-radius: 4px;
  }
  .select-container.multiple .selection > span.store-tag {
    padding: 2px 8px;
    color: white;
  }
  .select-container .selection {
    padding: 0 12px;
    display: none;
    min-height: var(--control-row-height);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .select-container .selection i {
    color: var(--default-icon-color);
  }
  .select-container .selection i.fa-chevron-down {
    font-size: 10px;
  }
  .select-container .selection i.fa-xmark {
    font-size: 14px;
    line-height: 14px;
    padding: 1px 2px;
    border-radius: 2px;
  }
  @media screen and (hover: hover) {
    .select-container .selection i.fa-xmark:hover {
      background-color: var(--form-select-option-tag-hover-color);
    }
  }
  .select-container .selection i.clear-selection {
    margin-inline-start: auto;
  }
  @media screen and (width > 576px) {
    .select-container .dropdown {
      z-index: var(--index-middle);
      display: none;
      position: absolute;
      width: max-content;
      min-width: calc(100% + 2px);
      max-width: 320px;
      top: calc(100% + 4px);
      left: -1px;
      border: 1px solid var(--form-field-border-default-color);
      border-radius: 4px;
      box-shadow: var(--shadow-highest);
      background-color: white;
      overflow: hidden;
    }
    .select-container .dropdown.inverted {
      bottom: calc(100% + 4px);
      top: auto;
    }
    .select-container .dropdown.right-aligned {
      left: auto;
      right: -1px;
    }
  }
  @media screen and (width <= 576px) {
    .select-container .dropdown:not(.drawer) {
      z-index: var(--index-middle);
      display: none;
      position: absolute;
      width: max-content;
      min-width: calc(100% + 2px);
      max-width: 320px;
      top: calc(100% + 4px);
      left: -1px;
      border: 1px solid var(--form-field-border-default-color);
      border-radius: 4px;
      box-shadow: var(--shadow-highest);
      background-color: white;
      overflow: hidden;
    }
    .select-container .dropdown:not(.drawer).inverted {
      bottom: calc(100% + 4px);
      top: auto;
    }
    .select-container .dropdown:not(.drawer).right-aligned {
      left: auto;
      right: -1px;
    }
    .select-container.active .dropdown {
      display: initial;
    }
  }
  .select-container .options {
    max-height: calc(var(--option-height) * var(--viewable-option-count));
    overflow-y: auto;
  }
  .select-container ul {
    outline: none;
  }
  .select-container ul:focus {
    outline: 1px solid var(--form-field-border-active-color);
    outline-offset: -1px;
  }
  @media screen and (hover: hover) {
    .select-container:not(.keyboard-navigation) li:not(.disabled):hover {
      background-color: var(--form-select-option-hover);
    }
  }
  .select-container .focus:not(.disabled) {
    background-color: var(--form-select-option-hover);
  }
  .select-container li.no-results {
    color: var(--form-select-placeholder-color);
    pointer-events: none;
  }
  .select-container.is-searching .search i {
    opacity: 0.4;
  }
  .select-container li {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    padding: 8px 12px;
    gap: 9px;
    justify-content: flex-start;
    align-items: center;
  }
  .select-container li a {
    color: inherit;
    display: block;
    width: 100%;
    padding: 8px 12px;
  }
  .select-container li i {
    color: var(--form-select-placeholder-color);
  }
  .select-container li.disabled {
    cursor: default;
    color: var(--icon-muted-color);
  }
  .select-container li .option-hint {
    color: var(--icon-muted-color);
  }
  .select-container li.action {
    border-top: 1px solid var(--form-field-border-default-color);
  }
  .select-container li.action + .action {
    border-top: 0;
  }
  .select-container.multiple li > i:first-child {
    border: 1px solid var(--form-select-placeholder-color);
    border-radius: 3px;
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
  }
  .select-container.multiple li.selected > i:first-child {
    border: 0;
    font-size: 8px;
    background-color: var(--form-radio-toggle-selected-background-color);
    color: var(--form-select-option-selected);
  }
  .select-container.multiple li.action > i:first-child {
    border: 0;
    font-size: 14px;
  }
  .select-container.confirming .options li:not(.pending) {
    opacity: 0.35;
    pointer-events: none;
  }
  .select-container.confirming li.pending {
    background-color: var(--form-select-option-selected);
  }
  .select-container.confirming li.pending .confirm-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .select-container.confirming li.pending .confirm-actions button {
    margin-block: -3px;
  }
  .select-container.confirming li.pending .confirm-actions .confirm-no {
    padding-inline-end: 0;
  }
  .select-container.confirming li.pending .confirm-actions .confirm-no i {
    color: inherit;
  }
  .select-container .dropdown-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--form-field-border-default-color);
    color: var(--default-link-color);
    font-size: var(--font-size-sm);
  }
  .select-container .dropdown-footer i {
    font-size: 10px;
    transition: transform 0.2s ease;
  }
  @media screen and (hover: hover) {
    .select-container .dropdown-footer:hover {
      background-color: var(--form-select-option-hover);
    }
    .select-container .dropdown-footer:hover i {
      transform: translateX(1px);
    }
  }
  .select-container .search {
    display: flex;
    flex-direction: row;
    padding: 8px;
    height: 44px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    color: var(--form-select-placeholder-color);
    border-bottom: 1px solid var(--form-field-border-default-color);
  }
  .select-container input[type=text] {
    flex-grow: 1;
    border: none;
    padding-left: 0;
  }
  .select-container img.select-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }
  .select-container .label .select-icon {
    margin-inline-end: 8px;
  }
  .select-container .label img.select-icon {
    margin-top: -2px;
  }
  .select-container .selection i.select-icon,
  .select-container .placeholder i.select-icon,
  .select-container li i.select-icon {
    color: var(--icon-muted-color);
  }
  .select-container.links li {
    padding: 0;
  }
}
@layer theme {
  .select-container .dropdown-footer,
  .select-container .dropdown-footer i {
    color: var(--default-link-color);
  }
  .select-container .dropdown li {
    min-width: 0;
  }
  .select-container .dropdown li > .name,
  .select-container .placeholder .label > .name,
  .select-container .selection .label > .name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .select-container .select-icon {
    flex: 0 0 auto;
  }
  .select-container .selection .select-icon.zap {
    animation: zap-pulse 0.35s ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .select-container .selection .select-icon.zap {
      animation: none;
    }
  }
  .select-container[data-confirm-accent=change] .selection i.select-icon.zap {
    color: var(--form-select-confirm-change-color);
  }
  .select-container[data-confirm-accent=run] .selection i.select-icon.zap {
    color: var(--form-select-confirm-run-color);
  }
  .select-container .dropdown .search input[type=text] {
    font-family: var(--font-family-main);
  }
}
@layer theme {
  .dropdown-container {
    --vertical-gap-from-trigger: 2px;
    position: relative;
    display: inline-block;
    width: fit-content;
  }
  .dropdown-container .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dropdown-container .dropdown-trigger .chevron {
    transition: transform 150ms ease;
  }
  .dropdown-container .dropdown-menu {
    z-index: var(--index-middle);
    display: none;
    position: absolute;
    min-width: 160px;
    width: max-content;
    top: calc(100% + var(--vertical-gap-from-trigger));
    left: 0;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-middle);
    background-color: var(--color-white);
  }
  .dropdown-container .dropdown-menu.inverted {
    bottom: calc(100% + var(--vertical-gap-from-trigger));
    top: auto;
  }
  .dropdown-container .dropdown-menu.right-aligned {
    right: 0;
    left: auto;
  }
  .dropdown-container .dropdown-menu li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 20px;
    cursor: pointer;
  }
  .dropdown-container .dropdown-menu li.section-start:not(:first-child) {
    border-top: 1px solid var(--content-header-border-color);
  }
  .dropdown-container .dropdown-menu li:hover {
    background-color: var(--form-select-option-hover);
  }
  .dropdown-container .dropdown-menu li a, .dropdown-container .dropdown-menu li button, .dropdown-container .dropdown-menu li form {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
  }
  .dropdown-container .dropdown-menu li.danger a, .dropdown-container .dropdown-menu li.danger button, .dropdown-container .dropdown-menu li.danger i {
    color: var(--color-danger);
  }
  .dropdown-container .dropdown-menu i, .dropdown-container .dropdown-menu .integration-icon {
    width: 16px;
    flex-shrink: 0;
  }
  .dropdown-container .dropdown-menu i {
    color: var(--icon-muted-color);
  }
  .dropdown-container .dropdown-menu i.super-admin {
    color: var(--super-admin-icon-color);
  }
  .dropdown-container .dropdown-menu .integration-icon {
    height: 16px;
    object-fit: contain;
  }
  .dropdown-container.active .dropdown-menu {
    display: block;
  }
  .dropdown-container.active .chevron {
    transform: rotate(180deg);
  }
}
@layer theme {
  .split-button {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
  }
  .split-button > button.primary:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .split-button .dropdown-container {
    display: flex;
  }
  .split-button .dropdown-container .dropdown-trigger.primary {
    align-self: stretch;
    border-left: 1px solid color-mix(in srgb, var(--split-button-divider-color) 25%, transparent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 var(--gutter-sm);
  }
}
@layer theme {
  .orders-table-wrapper {
    overflow-x: auto;
  }
  .list-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gutter-md);
    margin: var(--gutter-md) var(--gutter-md) var(--gutter-xs);
  }
  .list-actions .search-filters {
    flex: 1;
  }
  .columns-selector-trigger {
    position: relative;
  }
  .columns-selector-trigger > button {
    white-space: nowrap;
  }
  .columns-selector-trigger #columns-selector-mount {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: var(--index-middle);
  }
  .columns-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 320px;
    padding: 12px;
    margin-top: 4px;
    background: var(--color-white);
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-middle);
  }
  .columns-selector-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
  }
  .columns-selector-list {
    list-style: none;
    margin: 0;
    padding: 0 8px 0 0;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .columns-selector-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
  }
  .columns-selector-row.placeholder {
    opacity: 0.3;
  }
  .columns-selector-row.ghost {
    position: absolute;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-middle);
    pointer-events: none;
  }
  .columns-selector-row label {
    flex: 1;
    cursor: pointer;
  }
  .columns-selector-row input[type=checkbox]:disabled ~ label {
    color: var(--icon-muted-color);
    cursor: default;
  }
  .columns-selector-handle {
    cursor: grab;
    color: var(--icon-muted-color);
  }
  .columns-selector-handle:active {
    cursor: grabbing;
  }
  .columns-selector-expanders {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--content-header-border-color);
    padding-top: 8px;
  }
  .columns-selector-expander {
    all: unset;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-link-color);
  }
  .columns-selector-expander:disabled {
    color: var(--icon-muted-color);
    cursor: not-allowed;
  }
  .columns-selector-expander-input {
    display: flex;
    padding: 4px 8px;
  }
  .columns-selector-expander-input input {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
  }
  .columns-selector-expander-input .columns-selector-expander-commit {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    cursor: pointer;
    color: var(--form-button-primary-default-text-color);
    background: var(--form-button-primary-default-background-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
  }
  .columns-selector-expander-input .columns-selector-expander-commit:hover {
    background: var(--form-button-primary-hover-background-color);
  }
  .columns-selector-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--content-header-border-color);
    padding-top: 8px;
  }
  .columns-selector-counter {
    font-size: 0.85em;
    color: var(--icon-muted-color);
  }
  .columns-selector-counter.over-limit {
    color: var(--color-red);
  }
  .columns-selector-limit-message {
    margin: 0;
    font-size: 0.85em;
    color: var(--color-red);
    text-align: center;
  }
  .columns-selector-actions {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}
@layer theme {
  .search-filters {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-xs);
    margin-right: auto;
  }
  .search-filter-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-xs);
  }
  .search-filter-rows:not(:has(*)) {
    display: none;
  }
  .search-filter {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
  }
  .search-filter .remove-filter {
    padding: 0 4px;
    color: var(--form-field-placeholder-default-color);
  }
  .search-filter .remove-filter:hover {
    color: inherit;
  }
  .search-filter .filter-conjunction {
    display: none;
  }
  .search-filter:not(:last-child) .filter-conjunction {
    display: inline-flex;
  }
  .search-filter-controls {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background: var(--color-white);
  }
  .search-filter-controls > :not(:first-child) {
    border-left: 1px solid var(--form-field-border-default-color);
  }
  .search-filter-controls .select-container {
    display: flex;
    align-items: center;
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .search-filter-controls .select-container:focus, .search-filter-controls .select-container.active {
    border: none;
  }
  .search-filter-controls .select-container .toggle-container {
    min-height: 0;
  }
  .search-filter-controls .select-container .placeholder,
  .search-filter-controls .select-container .selection {
    min-height: 0;
    padding: 5px 8px;
    font-size: 14px;
    gap: 8px;
  }
  .search-filter-controls > .select-container:not(:first-child) {
    border-left: 1px solid var(--form-field-border-default-color);
  }
  .search-filter-controls .search-filter-field .dropdown,
  .search-filter-controls .search-filter-value-select .dropdown {
    min-width: 220px;
  }
  .search-filter-controls .search-filter-operator .dropdown {
    min-width: max-content;
  }
  .search-filter-actions {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .filter-scope-toggle {
    position: relative;
    display: flex;
    align-self: flex-start;
  }
  .filter-scope-toggle a, .filter-scope-toggle .current {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    color: var(--form-radio-toggle-default-text-color);
    border: 1px solid var(--form-field-border-default-color);
  }
  .filter-scope-toggle a:first-child, .filter-scope-toggle .current:first-child {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
  }
  .filter-scope-toggle a:last-child, .filter-scope-toggle .current:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
  }
  .filter-scope-toggle a:not(:first-child), .filter-scope-toggle .current:not(:first-child) {
    border-left: none;
  }
  .filter-scope-toggle .current {
    color: var(--form-radio-toggle-selected-text-color);
    background-color: var(--form-radio-toggle-selected-background-color);
    border-color: var(--form-radio-toggle-selected-border-color);
  }
  .filter-scope-toggle a:hover {
    background-color: var(--form-radio-toggle-hover-color);
  }
  .search-filter-key,
  .search-filter-value {
    display: flex;
    align-items: center;
  }
  .search-filter-key input,
  .search-filter-value input {
    border: none;
    background: transparent;
    padding: 5px 8px;
    min-height: 0;
    width: 21ch;
    font-size: 14px;
  }
  @supports (field-sizing: content) {
    .search-filter-key > input,
    .search-filter-value > input {
      field-sizing: content;
      width: auto;
      min-width: 21ch;
      max-width: 60ch;
      padding-right: calc(8px + 2ch);
    }
  }
  .search-filter-key input {
    width: 14ch;
  }
  @supports (field-sizing: content) {
    .search-filter-key > input {
      min-width: 14ch;
      max-width: 40ch;
    }
  }
  .search-filter-relative-date {
    display: none;
    align-items: stretch;
  }
  .search-filter-relative-date > input {
    width: 7ch;
    text-align: center;
    border-right: 1px solid var(--form-field-border-default-color);
    border-radius: 0;
  }
  .search-filter:has(.search-filter-operator option:checked:is([value=relativeMoreThan], [value=relativeLessThan])) .search-filter-date {
    display: none;
  }
  .search-filter:has(.search-filter-operator option:checked:is([value=relativeMoreThan], [value=relativeLessThan])) .search-filter-relative-date {
    display: flex;
  }
  .search-filter-value .addon-field {
    border: none;
    background: transparent;
  }
  .search-filter-value .addon-field input {
    width: 14ch;
  }
  .search-filter-value .addon-field .suffix {
    cursor: pointer;
    border-left: none;
  }
  .search-filter-value .addon-field .suffix i {
    color: var(--form-field-placeholder-default-color);
  }
}
@layer theme {
  .scope-filter {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 var(--gutter-sm);
    border: 1px solid var(--scope-filter-border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  .scope-filter a {
    padding: var(--gutter-xxs) var(--gutter-sm);
    color: var(--scope-filter-text-color);
    font-size: var(--font-size-sm);
    text-decoration: none;
  }
  .scope-filter a:not(:first-child) {
    border-left: 1px solid var(--scope-filter-border-color);
  }
  .scope-filter a.active {
    background-color: var(--scope-filter-active-background-color);
    color: var(--scope-filter-active-text-color);
  }
}
@layer theme {
  main > div.content {
    margin: var(--gutter-md) var(--gutter-md) 0 5px;
    min-height: calc(100% - var(--gutter-md));
    border-radius: 8px 8px 0 0;
    box-shadow: var(--shadow-middle);
  }
  @media screen and (width <= 576px) {
    main > div.content {
      margin: 0;
      min-height: 100%;
      border-radius: 0;
    }
  }
  main > div.content:has(.action-bar) {
    padding-bottom: calc(var(--gutter-md) * 4);
  }
  main > div.content h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  main > div.content h1.opened {
    white-space: normal;
    word-break: break-word;
  }
  main > div.content h1:has(.fa-float), main > div.content h1:has(.dropdown-container) {
    overflow: visible;
  }
}
.g-recaptcha-container {
  margin: auto;
}

@layer theme {
  [data-address-lines] {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  [data-address-lines] [data-address-line] > .twig-builder-wrapper {
    display: block;
  }
  [data-address-lines] [data-add-address-line] {
    align-self: center;
    width: fit-content;
  }
  [data-address-lines] [data-add-address-line][hidden] {
    display: none;
  }
  .address-form-row {
    display: grid;
    gap: var(--gutter-xs);
    align-items: start;
  }
  .address-form-row > * {
    min-width: 0;
  }
  .address-form-row .label-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .address-form-row.two-up {
    grid-template-columns: 1fr 1fr;
  }
  .address-form-row.three-up {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .address-form-row.four-up {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }
  .address-form-row .select-container {
    height: var(--form-control-height);
  }
  .address-form-row .select-container .placeholder,
  .address-form-row .select-container .selection {
    min-height: 0;
    padding: 7px 12px;
  }
}
@layer ui {
  body {
    --checkbox-size: 13px;
    --correction-value: 7px;
  }
  .checkbox-with-legend {
    display: grid;
    grid-template-columns: min-content 11px 1fr;
    grid-template-rows: min-content 1fr;
  }
  .checkbox-with-legend input[type=checkbox] {
    grid-row: 1/2;
    grid-column: 1/2;
  }
  .checkbox-with-legend label {
    grid-row: 1/2;
    grid-column: 3/4;
  }
  .checkbox-with-legend p {
    grid-row: 2/3;
    grid-column: 3/4;
  }
  .checkbox-with-legend .invalid-feedback {
    grid-column: 3/4;
  }
  .form-switch {
    display: grid;
    grid-template-columns: min-content 11px 1fr;
    align-items: center;
  }
  .form-switch input[type=checkbox] {
    grid-column: 1/2;
  }
  .form-switch label {
    grid-column: 3/4;
  }
  .conditional-input {
    display: grid;
    grid-template-columns: min-content 11px 1fr;
    grid-template-rows: min-content min-content 1fr;
  }
  .conditional-input label {
    display: inline;
  }
  .conditional-input .checkbox-container {
    grid-row: 1/2;
    grid-column: 1/2;
    display: flex;
    align-items: center;
  }
  .conditional-input input[type=text] {
    width: 50px;
    height: 24px;
    min-height: 24px;
    display: inline;
    padding: 2px 4px;
  }
  .conditional-input .label-container {
    grid-row: 1/2;
    grid-column: 3/4;
  }
  .conditional-input p, .conditional-input .invalid-feedback {
    grid-column: 3/4;
  }
  input[type=checkbox] {
    appearance: none;
    position: relative;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    line-height: var(--checkbox-size);
  }
  input[type=checkbox]:focus {
    outline: none;
  }
  input[type=checkbox]:before {
    content: "";
    position: absolute;
    top: var(--correction-value);
    left: var(--correction-value);
    transform: translate(-50%, -50%);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: 0;
    border: 1px solid var(--form-checkbox-default-color);
    border-radius: 3px;
  }
  input[type=checkbox]:after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    width: calc(var(--checkbox-size) - 2px);
    height: calc(var(--checkbox-size) - 2px);
    border: 0;
    margin: 0;
    top: var(--correction-value);
    left: var(--correction-value);
    border-radius: 2px;
  }
  input[type=checkbox]:indeterminate:before {
    border: 1px solid var(--form-checkbox-checked-color);
  }
  input[type=checkbox]:indeterminate:after {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    content: "‒";
    color: white;
    background-color: var(--form-checkbox-checked-color);
  }
  input[type=checkbox]:indeterminate:hover:not(:disabled):before, input[type=checkbox]:indeterminate:focus:not(:disabled):before {
    border: 1px solid var(--form-checkbox-checked-hover-color);
  }
  input[type=checkbox]:indeterminate:hover:not(:disabled):after, input[type=checkbox]:indeterminate:focus:not(:disabled):after {
    background-color: var(--form-checkbox-checked-hover-color);
  }
  input[type=checkbox]:indeterminate:active:not(:disabled):before {
    border: 1px solid var(--form-checkbox-checked-active-color);
  }
  input[type=checkbox]:indeterminate:active:not(:disabled):after {
    background-color: var(--form-checkbox-checked-active-color);
  }
  input[type=checkbox]:hover:before, input[type=checkbox]:focus:before {
    border: 1px solid var(--form-checkbox-hover-color);
  }
  input[type=checkbox]:checked:before {
    border: 1px solid var(--form-checkbox-checked-color);
  }
  input[type=checkbox]:checked:after {
    background-color: var(--form-checkbox-checked-color);
  }
  input[type=checkbox]:checked:disabled:before {
    border: 1px solid var(--form-checkbox-checked-disabled-color);
  }
  input[type=checkbox]:checked:disabled:after {
    background-color: var(--form-checkbox-checked-disabled-color);
  }
  input[type=checkbox]:checked:hover:not(:disabled):before, input[type=checkbox]:checked:focus:not(:disabled):before {
    border: 1px solid var(--form-checkbox-checked-hover-color);
  }
  input[type=checkbox]:checked:hover:not(:disabled):after, input[type=checkbox]:checked:focus:not(:disabled):after {
    background-color: var(--form-checkbox-checked-hover-color);
  }
  input[type=checkbox]:checked:active:not(:disabled):before {
    border: 1px solid var(--form-checkbox-checked-active-color);
  }
  input[type=checkbox]:checked:active:not(:disabled):after {
    background-color: var(--form-checkbox-checked-active-color);
  }
  input[type=checkbox]:active:not(:disabled):before {
    border: 1px solid var(--form-checkbox-active-color);
  }
  input[type=checkbox]:disabled:before {
    border: 1px solid var(--form-checkbox-disabled-color);
  }
}
@layer ui {
  .air-datepicker-global-container {
    z-index: calc(var(--index-highest) + 1);
  }
  .air-datepicker {
    --adp-font-family: var(--font-family-main);
    --adp-color: var(--default-text-primary-color);
    --adp-color-secondary: var(--default-text-secondary-color);
    --adp-accent-color: var(--color-bondi-blue);
    --adp-color-current-date: var(--color-blue-lagoon);
    --adp-border-color: var(--form-field-border-default-color);
    --adp-border-radius: var(--border-radius);
    --adp-cell-border-radius: var(--border-radius);
    --adp-background-color: var(--color-white);
    --adp-background-color-hover: var(--color-concrete);
    --adp-background-color-active: var(--color-bondi-blue);
    --adp-nav-arrow-color: var(--default-text-secondary-color);
    --adp-nav-color-secondary: var(--default-text-secondary-color);
    --adp-day-name-color: var(--default-text-secondary-color);
    --adp-cell-background-color-selected: var(--color-bondi-blue);
    --adp-cell-background-color-selected-hover: var(--color-blue-lagoon);
  }
  .air-datepicker-cell.-current-:not(.-selected-):not(.-focus-) {
    background: var(--color-polar);
  }
  .date-field-container .suffix {
    cursor: pointer;
  }
}
@layer ui {
  :root {
    --dirty-ring-width: 2px;
  }
  .dirty-form-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-xs);
  }
  .unsaved-indicator {
    display: none;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .unsaved-indicator::before {
    content: "";
    width: var(--gutter-xs);
    height: var(--gutter-xs);
    border-radius: 50%;
    background: var(--icon-warning-color);
  }
  .dirty-form-actions.is-dirty .unsaved-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xxs);
  }
  .dirty-form-actions.is-dirty button[type=submit]:not(:disabled),
  .dirty-form-actions.is-dirty input[type=submit]:not(:disabled) {
    box-shadow: 0 0 0 var(--dirty-ring-width) var(--icon-warning-color);
    transition: box-shadow 0.2s ease;
  }
  [data-shake-when-dirty].shake {
    animation: shake 0.4s ease-in-out;
  }
}
@layer ui {
  .editable-tags.is-invalid .input-area {
    border: 1px solid var(--form-field-border-error-color);
  }
  .editable-tags select {
    display: none;
  }
  .editable-tags .input-area {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--form-field-border-default-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  .editable-tags .input-area.focus {
    border: 1px solid var(--form-field-border-active-color);
  }
  .editable-tags input[type=text] {
    max-width: 100%;
    border-radius: initial;
    border: none;
    min-height: initial;
    padding: 0;
    height: 24px;
  }
  .editable-tags .tag {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    width: fit-content;
    font-size: 12px;
    color: var(--default-text-primary-color);
    background-color: var(--form-select-option-tag-selected);
    padding: 2px 12px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .editable-tags i {
    color: var(--default-icon-color);
    font-size: 14px;
    line-height: 14px;
    padding: 1px 2px;
    border-radius: 2px;
  }
  @media screen and (hover: hover) {
    .editable-tags i:hover {
      background-color: var(--form-select-option-tag-hover-color);
      cursor: pointer;
    }
  }
}
@layer ui {
  .editable-store-tags {
    position: relative;
  }
  .editable-store-tags.is-invalid .input-area {
    border-color: var(--form-field-border-error-color);
  }
  .editable-store-tags.active .dropdown {
    display: block;
  }
  .editable-store-tags.active.has-no-matches .dropdown {
    display: none;
  }
  .editable-store-tags.active .input-area {
    border-color: var(--form-field-border-active-color);
  }
  .editable-store-tags .input-area.has-pending-tag {
    border-color: var(--form-field-border-error-color);
  }
  .editable-store-tags:not(:has(.input-area .store-tag)) .remove-all-tags {
    display: none;
  }
  .editable-store-tags .remove-all-tags {
    margin-top: var(--gutter-xxs);
    font-size: var(--font-size-sm);
  }
  .editable-store-tags select {
    display: none;
  }
  .editable-store-tags .input-area {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--form-field-border-default-color);
    background: white;
    cursor: text;
    transition: border-color 0.15s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .editable-store-tags .input-area .store-tag {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-highest);
  }
  .editable-store-tags .input-area .store-tag .store-tag-label {
    padding: 2px 6px;
  }
  .editable-store-tags .input-area .store-tag .store-tag-remove {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    border-left: 1px solid var(--store-tag-divider-color);
    color: inherit;
    cursor: pointer;
  }
  .editable-store-tags .input-area .store-tag .store-tag-remove i {
    font-size: 10px;
  }
  @media screen and (hover: hover) {
    .editable-store-tags .input-area .store-tag .store-tag-remove:hover {
      background-color: var(--store-tag-remove-hover-background);
    }
  }
  .editable-store-tags .input-area input[type=text] {
    flex: 1;
    min-width: 180px;
    max-width: 100%;
    border: none;
    border-radius: 0;
    min-height: initial;
    padding: 0;
    height: 24px;
    outline: none;
  }
  .editable-store-tags .dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 4px;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background: white;
    box-shadow: var(--shadow-highest);
    max-height: 240px;
    overflow-y: auto;
  }
  .editable-store-tags .dropdown ul.options {
    list-style: none;
    margin: 0;
    padding: 4px 0;
  }
  .editable-store-tags .dropdown li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
  }
  @media screen and (hover: hover) {
    .editable-store-tags .dropdown li:hover {
      background-color: var(--form-select-option-hover);
      cursor: pointer;
    }
  }
  .editable-store-tags .dropdown li.focus {
    background-color: var(--form-select-option-hover);
  }
  .editable-store-tags .dropdown li.selected i {
    color: var(--form-button-primary-default-background-color);
  }
  .editable-store-tags .dropdown li i {
    width: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--default-icon-color);
  }
  .editable-store-tags .dropdown .empty-message {
    padding: 12px;
    margin: 0;
    color: var(--default-icon-color);
    font-size: 13px;
  }
  .editable-store-tags .dropdown .create-tag-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--form-field-border-default-color);
    font-size: 13px;
  }
  @media screen and (hover: hover) {
    .editable-store-tags .dropdown .create-tag-option:hover {
      background-color: var(--form-select-option-hover);
      cursor: pointer;
    }
  }
  .editable-store-tags .dropdown .create-tag-option.focus {
    background-color: var(--form-select-option-hover);
  }
  .editable-store-tags .dropdown .create-tag-option i {
    width: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--default-icon-color);
  }
}
@layer ui {
  .filter-card {
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background-color: var(--form-field-background-default-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .filter-card.active {
    background-color: var(--filter-card-active-background-color);
    border-color: var(--filter-card-active-border-color);
  }
  .filter-card > .header {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
    padding: 10px 14px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .filter-card > .header input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
  }
  .filter-card > .header .filter-label {
    font-size: var(--font-size);
    font-weight: 500;
    color: var(--default-text-color);
  }
  .filter-card > .body {
    padding: 12px 14px;
    border-top: 1px solid var(--form-field-border-default-color);
    overflow: hidden;
    transition: max-height 0.3s ease, padding-block 0.3s ease, border-top-width 0.3s ease;
  }
  .filter-card > .body.open-complete {
    overflow: visible;
  }
  .filter-card > .body .mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-sm);
    margin-bottom: var(--gutter-sm);
  }
  .filter-card > .body .mode-row .radio-cards {
    flex-shrink: 0;
  }
  .filter-card > .body .mode-row .radio-cards .radio-card {
    height: 28px;
    padding: 0 10px;
    font-size: var(--font-size-sm);
  }
  .filter-card .hint {
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
    text-wrap: balance;
  }
  @media screen and (width <= 576px) {
    .filter-card .hint {
      display: none;
    }
  }
}
@layer ui {
  .folder-scope {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    align-items: stretch;
    text-align: left;
  }
  .folder-scope .folder-scope-folders {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .folder-scope .folder-scope-folders[hidden] {
    display: none;
  }
  .folder-scope .folder-scope-folders .legend {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
}
@layer ui {
  .form-toggle {
    --form-toggle-geom-w: 28px;
    --form-toggle-geom-h: 16px;
    --form-toggle-geom-r: 8px;
    --form-toggle-geom-pad: 2px;
    --form-toggle-geom-inner-w: calc(var(--form-toggle-geom-w) - 2px);
    --form-toggle-geom-inner-h: calc(var(--form-toggle-geom-h) - 2px);
    --form-toggle-geom-knob: calc(
        var(--form-toggle-geom-inner-h) - 2 * var(--form-toggle-geom-pad)
    );
    --form-toggle-geom-travel: calc(
        var(--form-toggle-geom-inner-w) - 2 * var(--form-toggle-geom-pad) - var(--form-toggle-geom-knob)
    );
    appearance: none;
    position: relative;
    display: block;
    margin: 0;
    box-sizing: border-box;
    width: var(--form-toggle-geom-w);
    height: var(--form-toggle-geom-h);
    padding: 0;
    line-height: 0;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--form-toggle-geom-r);
    background: var(--form-toggle-off);
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  @media screen and (hover: hover) {
    .form-toggle:not(.enabled):not(:disabled):hover {
      background: var(--form-radio-toggle-hover-color);
    }
    .form-toggle.enabled:not(:disabled):hover {
      background: var(--form-toggle-on-hover);
      border-color: var(--form-toggle-on-hover);
    }
  }
  .form-toggle:focus-visible {
    border-color: var(--form-toggle-focus-ring);
    box-shadow: 0 0 0 1px var(--form-toggle-focus-ring);
  }
  .form-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .form-toggle__knob {
    position: absolute;
    top: 50%;
    left: var(--form-toggle-geom-pad);
    width: var(--form-toggle-geom-knob);
    height: var(--form-toggle-geom-knob);
    border-radius: 50%;
    background: var(--form-toggle-knob);
    box-shadow: var(--form-toggle-knob-shadow);
    pointer-events: none;
    transition: transform 0.2s ease;
    transform: translate3d(0, -50%, 0);
  }
  .form-toggle.enabled,
  .form-toggle-input:checked + .form-toggle {
    border-color: var(--form-toggle-on);
    background: var(--form-toggle-on);
  }
  .form-toggle.enabled .form-toggle__knob,
  .form-toggle-input:checked + .form-toggle .form-toggle__knob {
    transform: translate3d(var(--form-toggle-geom-travel), -50%, 0);
  }
  input[type=checkbox].form-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .form-toggle-input:focus-visible + .form-toggle {
    border-color: var(--form-toggle-focus-ring);
    box-shadow: 0 0 0 1px var(--form-toggle-focus-ring);
  }
  .toggle-field {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    cursor: pointer;
  }
  .toggle-field .form-toggle {
    flex: none;
  }
  @media screen and (hover: hover) {
    .toggle-field:hover .form-toggle-input:not(:checked):not(:disabled) + .form-toggle {
      background: var(--form-radio-toggle-hover-color);
    }
    .toggle-field:hover .form-toggle-input:checked:not(:disabled) + .form-toggle {
      border-color: var(--form-toggle-on-hover);
      background: var(--form-toggle-on-hover);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-toggle,
    .form-toggle__knob {
      transition: none;
    }
  }
}
@layer ui {
  input[type=text],
  input[type=search],
  input[type=password],
  input[type=email],
  input[type=number],
  textarea {
    width: 100%;
    border-radius: var(--border-radius);
    border: 1px solid var(--form-field-border-default-color);
    outline: none;
    padding: 8px 12px;
    min-height: var(--form-control-height);
    font-family: inherit;
    font-size: inherit;
  }
  input[type=text]:not(:disabled):active, input[type=text]:not(:disabled):focus,
  input[type=search]:not(:disabled):active,
  input[type=search]:not(:disabled):focus,
  input[type=password]:not(:disabled):active,
  input[type=password]:not(:disabled):focus,
  input[type=email]:not(:disabled):active,
  input[type=email]:not(:disabled):focus,
  input[type=number]:not(:disabled):active,
  input[type=number]:not(:disabled):focus,
  textarea:not(:disabled):active,
  textarea:not(:disabled):focus {
    border-color: var(--form-field-border-active-color);
  }
  input[type=text].error,
  input[type=search].error,
  input[type=password].error,
  input[type=email].error,
  input[type=number].error,
  textarea.error {
    border-color: var(--form-field-border-error-color);
  }
  input[type=text]::placeholder,
  input[type=search]::placeholder,
  input[type=password]::placeholder,
  input[type=email]::placeholder,
  input[type=number]::placeholder,
  textarea::placeholder {
    color: var(--form-field-placeholder-default-color);
  }
  textarea {
    min-height: 102px;
  }
  .textarea-billing-notes textarea {
    height: 300px;
  }
  form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  form button:focus-visible {
    outline: 1px solid var(--form-field-border-active-color);
  }
  form:has(label:not(input ~ label) + .legend:not(.detail),
  label > .legend:first-child,
  label > .label-text + .legend) label {
    font-weight: 500;
  }
  form:has(label:not(input ~ label) + .legend:not(.detail),
  label > .legend:first-child,
  label > .label-text + .legend) label:has(> input:is([type=checkbox], [type=radio])) {
    font-weight: 400;
  }
  form:has(label:not(input ~ label) + .legend:not(.detail),
  label > .legend:first-child,
  label > .label-text + .legend) label:not(:has(> input:is([type=checkbox], [type=radio]))) > :not(i, .label-text, .label-with-tooltip, span:not([class])) {
    font-weight: 400;
  }
  form:has(label:not(input ~ label) + .legend:not(.detail),
  label > .legend:first-child,
  label > .label-text + .legend) input:is([type=checkbox], [type=radio]) ~ label {
    font-weight: 400;
  }
  form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  form label:has(> input[type=checkbox]), form label:has(> input[type=radio]) {
    flex-direction: row;
  }
  form .input-group,
  form .field-group {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  form .password-container {
    position: relative;
  }
  form .password-container input {
    padding-right: 25px;
  }
  form .password-container .reveal-password {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--form-password-reveal-color);
    cursor: pointer;
  }
  form .password-container .reveal-password.revealed {
    color: var(--form-password-reveal-active-color);
  }
  form .password-container .reveal-password i {
    color: inherit;
  }
  @media screen and (hover: hover) {
    form .password-container .reveal-password i:hover {
      color: var(--form-password-reveal-active-color);
    }
  }
  button.default, button.primary, button.success, button.warning, button.danger, button.text, button.destructive, input[type=submit].default, input[type=submit].primary, input[type=submit].success, input[type=submit].warning, input[type=submit].danger, input[type=submit].text, input[type=submit].destructive, input[type=button].default, input[type=button].primary, input[type=button].success, input[type=button].warning, input[type=button].danger, input[type=button].text, input[type=button].destructive, a.button.default, a.button.primary, a.button.success, a.button.warning, a.button.danger, a.button.text, a.button.destructive {
    padding: 6px 14px;
    width: auto;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    font-family: var(--font-family-main);
    border-radius: var(--border-radius);
    border: 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    max-width: fit-content;
    display: inline-block;
  }
  button.default i, button.primary i, button.success i, button.warning i, button.danger i, button.text i, button.destructive i, input[type=submit].default i, input[type=submit].primary i, input[type=submit].success i, input[type=submit].warning i, input[type=submit].danger i, input[type=submit].text i, input[type=submit].destructive i, input[type=button].default i, input[type=button].primary i, input[type=button].success i, input[type=button].warning i, input[type=button].danger i, input[type=button].text i, input[type=button].destructive i, a.button.default i, a.button.primary i, a.button.success i, a.button.warning i, a.button.danger i, a.button.text i, a.button.destructive i {
    margin-right: 2px;
  }
  button.default.small, button.primary.small, button.success.small, button.warning.small, button.danger.small, button.text.small, button.destructive.small, input[type=submit].default.small, input[type=submit].primary.small, input[type=submit].success.small, input[type=submit].warning.small, input[type=submit].danger.small, input[type=submit].text.small, input[type=submit].destructive.small, input[type=button].default.small, input[type=button].primary.small, input[type=button].success.small, input[type=button].warning.small, input[type=button].danger.small, input[type=button].text.small, input[type=button].destructive.small, a.button.default.small, a.button.primary.small, a.button.success.small, a.button.warning.small, a.button.danger.small, a.button.text.small, a.button.destructive.small {
    font-size: 13px;
    line-height: 13px;
    padding-left: 8px;
    padding-right: 8px;
  }
  button.full-width, input[type=submit].full-width, input[type=button].full-width, a.button.full-width {
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
  }
  button.large, input[type=submit].large, input[type=button].large, a.button.large {
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
    padding: 10px;
    line-height: 20px;
  }
  button:disabled, button.disabled, input[type=submit]:disabled, input[type=submit].disabled, input[type=button]:disabled, input[type=button].disabled, a.button:disabled, a.button.disabled {
    cursor: default;
  }
  button.default, input[type=submit].default, input[type=button].default, a.button.default {
    background: var(--form-button-default-default-background-color);
    color: var(--form-button-default-default-text-color);
  }
  button.default i, input[type=submit].default i, input[type=button].default i, a.button.default i {
    color: var(--icon-muted-color);
  }
  @media screen and (hover: hover) {
    button.default:hover, input[type=submit].default:hover, input[type=button].default:hover, a.button.default:hover {
      background: var(--form-button-default-hover-background-color);
    }
  }
  button.default:active, input[type=submit].default:active, input[type=button].default:active, a.button.default:active {
    background: var(--form-button-default-active-background-color);
  }
  button.default:disabled, button.default.disabled, input[type=submit].default:disabled, input[type=submit].default.disabled, input[type=button].default:disabled, input[type=button].default.disabled, a.button.default:disabled, a.button.default.disabled {
    background: var(--form-button-default-disabled-background-color);
    color: var(--form-button-default-disabled-text-color);
  }
  button.primary, input[type=submit].primary, input[type=button].primary, a.button.primary {
    background: var(--form-button-primary-default-background-color);
    color: var(--form-button-primary-default-text-color);
  }
  @media screen and (hover: hover) {
    button.primary:hover, input[type=submit].primary:hover, input[type=button].primary:hover, a.button.primary:hover {
      background: var(--form-button-primary-hover-background-color);
    }
  }
  button.primary:active, input[type=submit].primary:active, input[type=button].primary:active, a.button.primary:active {
    background: var(--form-button-primary-active-background-color);
  }
  button.primary:disabled, button.primary.disabled, input[type=submit].primary:disabled, input[type=submit].primary.disabled, input[type=button].primary:disabled, input[type=button].primary.disabled, a.button.primary:disabled, a.button.primary.disabled {
    background: var(--form-button-primary-disabled-background-color);
  }
  button.primary i, input[type=submit].primary i, input[type=button].primary i, a.button.primary i {
    color: inherit;
  }
  button.success, input[type=submit].success, input[type=button].success, a.button.success {
    background: var(--form-button-success-default-background-color);
    color: var(--form-button-success-default-text-color);
  }
  @media screen and (hover: hover) {
    button.success:hover, input[type=submit].success:hover, input[type=button].success:hover, a.button.success:hover {
      background: var(--form-button-success-hover-background-color);
    }
  }
  button.success:active, input[type=submit].success:active, input[type=button].success:active, a.button.success:active {
    background: var(--form-button-success-active-background-color);
  }
  button.success:disabled, button.success.disabled, input[type=submit].success:disabled, input[type=submit].success.disabled, input[type=button].success:disabled, input[type=button].success.disabled, a.button.success:disabled, a.button.success.disabled {
    background: var(--form-button-success-disabled-background-color);
  }
  button.warning, input[type=submit].warning, input[type=button].warning, a.button.warning {
    background: var(--form-button-warning-default-background-color);
    color: var(--form-button-warning-default-text-color);
  }
  button.warning i, input[type=submit].warning i, input[type=button].warning i, a.button.warning i {
    color: var(--form-button-warning-default-text-color);
  }
  @media screen and (hover: hover) {
    button.warning:hover, input[type=submit].warning:hover, input[type=button].warning:hover, a.button.warning:hover {
      background: var(--form-button-warning-hover-background-color);
    }
  }
  button.warning:active, input[type=submit].warning:active, input[type=button].warning:active, a.button.warning:active {
    background: var(--form-button-warning-active-background-color);
  }
  button.warning:disabled, button.warning.disabled, input[type=submit].warning:disabled, input[type=submit].warning.disabled, input[type=button].warning:disabled, input[type=button].warning.disabled, a.button.warning:disabled, a.button.warning.disabled {
    background: var(--form-button-warning-disabled-background-color);
  }
  button.danger, input[type=submit].danger, input[type=button].danger, a.button.danger {
    background: var(--form-button-danger-default-background-color);
    color: var(--form-button-danger-default-text-color);
  }
  @media screen and (hover: hover) {
    button.danger:hover, input[type=submit].danger:hover, input[type=button].danger:hover, a.button.danger:hover {
      background: var(--form-button-danger-hover-background-color);
    }
  }
  button.danger:active, input[type=submit].danger:active, input[type=button].danger:active, a.button.danger:active {
    background: var(--form-button-danger-active-background-color);
  }
  button.danger:disabled, button.danger.disabled, input[type=submit].danger:disabled, input[type=submit].danger.disabled, input[type=button].danger:disabled, input[type=button].danger.disabled, a.button.danger:disabled, a.button.danger.disabled {
    background: var(--form-button-danger-disabled-background-color);
  }
  button.text, input[type=submit].text, input[type=button].text, a.button.text {
    background: none;
    color: var(--form-button-text-default-text-color);
  }
  button.text.inline, input[type=submit].text.inline, input[type=button].text.inline, a.button.text.inline {
    padding: 0;
    min-height: auto;
  }
  @media screen and (hover: hover) {
    button.text:hover, input[type=submit].text:hover, input[type=button].text:hover, a.button.text:hover {
      color: var(--form-button-text-hover-text-color);
    }
  }
  button.text:active, input[type=submit].text:active, input[type=button].text:active, a.button.text:active {
    color: var(--form-button-text-active-text-color);
  }
  button.text:disabled, button.text.disabled, input[type=submit].text:disabled, input[type=submit].text.disabled, input[type=button].text:disabled, input[type=button].text.disabled, a.button.text:disabled, a.button.text.disabled {
    color: var(--form-button-text-disabled-text-color);
  }
  button.destructive, input[type=submit].destructive, input[type=button].destructive, a.button.destructive {
    background: var(--form-button-destructive-default-background-color);
    color: var(--form-button-destructive-default-text-color);
  }
  button.destructive i, input[type=submit].destructive i, input[type=button].destructive i, a.button.destructive i {
    color: inherit;
  }
  @media screen and (hover: hover) {
    button.destructive:hover, input[type=submit].destructive:hover, input[type=button].destructive:hover, a.button.destructive:hover {
      background: var(--form-button-destructive-hover-background-color);
    }
  }
  button.destructive:active, input[type=submit].destructive:active, input[type=button].destructive:active, a.button.destructive:active {
    background: var(--form-button-destructive-active-background-color);
  }
  button.destructive:disabled, button.destructive.disabled, input[type=submit].destructive:disabled, input[type=submit].destructive.disabled, input[type=button].destructive:disabled, input[type=button].destructive.disabled, a.button.destructive:disabled, a.button.destructive.disabled {
    background: var(--form-button-destructive-disabled-background-color);
  }
  form.horizontal {
    flex-direction: row;
    align-items: center;
    gap: var(--gutter-sm);
  }
  form.quick-search {
    display: flex;
    flex-direction: row;
  }
  form.quick-search button[type=submit] {
    display: flex;
    align-items: center;
    margin: 0 0 0 -2px;
  }
  form.quick-search button[type=submit]:not(:nth-child(1)) {
    margin-top: 0;
  }
  form.inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  form.inline > input[type=text],
  form.inline > input[type=search] {
    width: auto;
  }
  form.inline > .addon-field.date-field-container {
    max-width: 160px;
  }
  form.inline .invalid-feedback {
    flex: 0 0 100%;
  }
  form.inline > input + .invalid-feedback,
  form.inline > .addon-field + .invalid-feedback {
    display: none;
  }
  form.inline button[type=submit] {
    margin: 0;
  }
  form.inline > div {
    padding-left: 0;
  }
  form.single-field {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  form.single-field > input[type=text],
  form.single-field > textarea {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }
  form.single-field > .addon-field {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    order: 1;
  }
  form.single-field > .addon-field.date-field-container {
    max-width: 160px;
  }
  form.single-field .select-container {
    min-width: 250px;
  }
  form.single-field button[type=submit] {
    order: 2;
  }
  form.single-field .invalid-feedback {
    flex: 0 0 100%;
    order: 3;
  }
  .input-narrow {
    max-width: 160px;
  }
}
@layer theme {
  .is-invalid {
    border-color: var(--form-field-border-error-color);
  }
}
.invalid-feedback {
  color: var(--form-field-text-error-color);
  font-size: 13px;
  word-break: break-word;
}
.invalid-feedback p {
  color: inherit;
}

@layer theme {
  :has(> ul.input-suggestions) {
    position: relative;
  }
  .addon-field > input:has(+ ul.input-suggestions) {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
  ul.input-suggestions {
    --option-height: 36px;
    --viewable-option-count: 8;
    z-index: var(--index-middle);
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: max-content;
    max-height: calc(var(--option-height) * var(--viewable-option-count));
    overflow-y: auto;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-highest);
    background-color: var(--form-field-background-default-color);
  }
  ul.input-suggestions li {
    min-height: var(--option-height);
    display: flex;
    align-items: center;
    padding: 8px 12px;
  }
  ul.input-suggestions li[role=option] {
    gap: 4px;
    cursor: pointer;
  }
  ul.input-suggestions li[role=option] .option-hint {
    color: var(--icon-muted-color);
  }
  ul.input-suggestions li[role=option].is-active {
    background-color: var(--input-suggestions-option-hover-background-color);
  }
  @media screen and (hover: hover) {
    ul.input-suggestions li[role=option]:hover {
      background-color: var(--input-suggestions-option-hover-background-color);
    }
  }
  ul.input-suggestions .input-suggestions-loading {
    justify-content: center;
  }
  ul.input-suggestions .input-suggestions-loading i {
    color: var(--loading-indicator-color);
  }
}
@layer theme {
  [data-optional-fields] {
    display: contents;
  }
  [data-optional-field][hidden] {
    display: none;
  }
  [data-optional-field-links] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gutter-xs);
  }
  [data-optional-field-links] [data-reveal-optional-field] {
    flex: 0 0 auto;
    width: auto;
  }
  [data-optional-field-links][hidden], [data-optional-field-links] [hidden] {
    display: none;
  }
}
@layer ui {
  .setting-toggle {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    align-items: flex-start;
  }
  .setting-toggle .setting-toggle__detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-sm);
    margin: 0;
    padding: 0;
    border: 0;
  }
  .setting-toggle .setting-toggle__detail[hidden], .setting-toggle .setting-toggle__detail:not(:has(> :not([type=hidden]))) {
    display: none;
  }
  .setting-toggle .setting-toggle__detail .select-container {
    min-width: 145px;
  }
  .setting-toggle .setting-toggle__notice {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .setting-toggle .setting-toggle__next-run {
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
    white-space: nowrap;
  }
}
@layer theme {
  .permissions {
    container: permissions/inline-size;
  }
  .permissions > ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .permissions > ul > li {
    border: 1px solid var(--permission-group-border-color);
    border-radius: var(--border-radius);
    background: var(--permission-group-background-color);
  }
  .permissions .item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px 10px 44px;
    border-bottom: 1px solid var(--color-divider);
  }
  .permissions .item > input[type=checkbox] {
    margin-top: calc((var(--line-height) - var(--checkbox-size)) / 2);
  }
  .permissions .item > input[aria-disabled=true] {
    cursor: not-allowed;
  }
  .permissions .item > input[aria-disabled=true]:checked:before {
    border-color: var(--form-checkbox-checked-disabled-color);
  }
  .permissions .item > input[aria-disabled=true]:checked:after {
    background-color: var(--form-checkbox-checked-disabled-color);
  }
  .permissions .item > input + i {
    width: 16px;
    line-height: var(--line-height);
    text-align: center;
    color: var(--permission-group-icon-color);
  }
  .permissions .item > .clickable,
  .permissions .item > .permission-count {
    align-self: center;
  }
  .permissions .item label {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
  }
  .permissions .item.group {
    padding: 12px 16px;
    border-bottom: 1px solid var(--permission-group-border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: var(--permission-group-header-background-color);
  }
  .permissions .item.group label {
    font-weight: 500;
  }
  .permissions .needed-by {
    grid-column: 2;
    font-size: var(--font-size-sm);
    color: var(--icon-muted-color);
  }
  .permissions .children li:last-child .item {
    border-bottom: none;
  }
  .permissions .permission-count {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    border: 1px solid var(--permission-count-border-color);
    background: var(--permission-count-background-color);
    color: var(--permission-count-color);
  }
  .permissions .toggle-handle {
    transition: transform 0.2s ease;
  }
  .permissions .toggle-handle.collapsed {
    transform: rotate(180deg);
  }
  @container permissions (width < 680px) {
    .permissions .item {
      padding-left: 16px;
    }
    .permissions .item label {
      grid-template-columns: 1fr;
      gap: 2px;
    }
    .permissions .needed-by {
      grid-column: 1;
    }
  }
  .other-stores label {
    margin-top: 10px;
    min-width: 0;
  }
  .other-stores label .store-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .select-all-header .select-all,
  .side-panel .section .select-all-header .select-all {
    display: inline;
    width: auto;
    margin-left: var(--gutter-xs);
    padding: 0;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: inherit;
  }
}
@layer ui {
  input[type=radio] {
    width: 16px;
    accent-color: var(--form-radio-checked-color);
  }
  .radio-with-legend label {
    gap: 8px;
    flex-direction: row;
    margin: 10px 0 0;
  }
  .radio-with-legend p {
    padding: 0;
  }
  .radio-with-legend .legend {
    padding: var(--gutter-xs) 0 0;
  }
  .radio-with-legend .legend.detail {
    padding: 4px 0 0 24px;
  }
  .radio-with-legend input {
    margin: 0;
  }
  .radio-with-legend .invalid-feedback p {
    margin-top: 8px;
  }
  .radio-cards {
    --radio-card-count: 1;
    --radio-card-index: 0;
    --radio-card-gap: var(--gutter-sm);
    --radio-card-radius: var(--border-radius);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--radio-card-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
  }
  .radio-cards:has(> .radio-card:nth-of-type(2)) {
    --radio-card-count: 2;
  }
  .radio-cards:has(> .radio-card:nth-of-type(3)) {
    --radio-card-count: 3;
  }
  .radio-cards:has(> .radio-card:nth-of-type(4)) {
    --radio-card-count: 4;
  }
  .radio-cards:has(> .radio-card:nth-of-type(2) > input:checked) {
    --radio-card-index: 1;
  }
  .radio-cards:has(> .radio-card:nth-of-type(3) > input:checked) {
    --radio-card-index: 2;
  }
  .radio-cards:has(> .radio-card:nth-of-type(4) > input:checked) {
    --radio-card-index: 3;
  }
  .radio-cards:not(:has(input:checked)) .radio-cards-indicator {
    opacity: 0;
  }
  .radio-cards .radio-cards-indicator {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: calc((100% - (var(--radio-card-count) - 1) * var(--radio-card-gap)) / var(--radio-card-count));
    height: 100%;
    border: 1px solid var(--form-radio-card-selected-border-color);
    border-radius: var(--radio-card-radius);
    background-color: var(--form-radio-card-selected-background-color);
    transform: translateX(calc(var(--radio-card-index) * (100% + var(--radio-card-gap))));
    transition: transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .radio-cards .radio-cards-indicator {
      transition: none;
    }
  }
  .radio-cards .radio-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--gutter-sm);
    box-sizing: border-box;
    min-height: 64px;
    padding: var(--gutter-sm);
    border: 1px solid var(--form-radio-card-border-color);
    border-radius: var(--radio-card-radius);
    cursor: pointer;
  }
  .radio-cards .radio-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--form-radio-card-background-color);
  }
  .radio-cards .radio-card:has(> input:checked) {
    border-color: transparent;
  }
  .radio-cards .radio-card:has(> input:focus-visible) {
    outline: 2px solid var(--form-field-border-active-color);
    outline-offset: 2px;
  }
  .radio-cards .radio-card:has(> input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
  }
  @media screen and (hover: hover) {
    .radio-cards .radio-card:hover:not(:has(> input:checked)):not(:has(> input:disabled)) {
      background-color: var(--form-radio-card-hover-background-color);
    }
  }
  .radio-cards .radio-card input[type=radio] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .radio-cards .radio-card-dot {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 2px solid var(--form-radio-card-dot-border-color);
    border-radius: 50%;
    background-color: var(--form-field-background-default-color);
    transition: border-color 160ms ease;
  }
  .radio-cards .radio-card-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--form-radio-card-selected-border-color);
    transform: scale(0);
    transition: transform 200ms ease;
  }
  .radio-cards .radio-card:has(> input:checked) .radio-card-dot {
    border-color: var(--form-radio-card-selected-border-color);
  }
  .radio-cards .radio-card:has(> input:checked) .radio-card-dot::after {
    transform: scale(1);
  }
  .radio-cards .radio-card-text {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    min-width: 0;
  }
  .radio-cards .radio-card-title {
    font-weight: 600;
    color: var(--default-text-primary-color);
  }
  .radio-cards .radio-card-description {
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
    overflow-wrap: anywhere;
  }
  .radio-cards.compact {
    --radio-card-gap: var(--gutter-xs);
    grid-auto-columns: 1fr;
    width: fit-content;
  }
  .radio-cards.compact .radio-card {
    align-items: center;
    gap: var(--gutter-xs);
    min-height: 0;
    height: var(--form-control-height);
    padding: 0 var(--gutter-sm);
  }
  .radio-cards.compact .radio-card-dot {
    width: 16px;
    height: 16px;
    margin-top: 0;
  }
  .radio-cards.compact .radio-card-dot::after {
    width: 6px;
    height: 6px;
  }
  .radio-cards.compact .radio-card-title {
    font-weight: 500;
    white-space: nowrap;
  }
  .radio-cards.is-invalid .radio-card {
    border-color: var(--form-field-border-error-color);
  }
  .segmented-with-nested {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .segmented-with-nested .radio-cards.compact {
    grid-auto-columns: auto;
  }
  .segmented-with-nested .radio-cards.compact .radio-cards-indicator {
    display: none;
  }
  .segmented-with-nested .radio-cards.compact .radio-card {
    padding: 0 var(--gutter-xs);
  }
  .segmented-with-nested .radio-cards.compact .radio-card:has(> input:checked) {
    border-color: var(--form-radio-card-selected-border-color);
    background-color: var(--form-radio-card-selected-background-color);
  }
  .segmented-with-nested .radio-cards.compact .radio-card-title {
    font-size: var(--font-size-sm);
  }
  .segmented-with-nested .legend {
    padding: 0;
  }
  .segmented-with-nested__label {
    font-weight: 500;
  }
  .segmented-with-nested__choice {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--gutter-xs) var(--gutter-sm);
    margin-top: var(--gutter-xxs);
  }
  .segmented-with-nested__nested {
    flex: 0 1 260px;
  }
  .segmented-with-nested__nested-option {
    display: none;
  }
  .segmented-with-nested__nested-option .field-group {
    flex: 1;
    min-width: 0;
  }
  .segmented-with-nested__details {
    margin-top: var(--gutter-xxs);
  }
  .segmented-with-nested__detail {
    display: none;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(1) > input:checked) :is(.segmented-with-nested__detail, .segmented-with-nested__nested-option):nth-of-type(1) {
    display: flex;
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(1) > input:checked) .segmented-with-nested__nested:not(:has(> :nth-of-type(1) .field-group)) {
    display: none;
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(2) > input:checked) :is(.segmented-with-nested__detail, .segmented-with-nested__nested-option):nth-of-type(2) {
    display: flex;
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(2) > input:checked) .segmented-with-nested__nested:not(:has(> :nth-of-type(2) .field-group)) {
    display: none;
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(3) > input:checked) :is(.segmented-with-nested__detail, .segmented-with-nested__nested-option):nth-of-type(3) {
    display: flex;
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(3) > input:checked) .segmented-with-nested__nested:not(:has(> :nth-of-type(3) .field-group)) {
    display: none;
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(4) > input:checked) :is(.segmented-with-nested__detail, .segmented-with-nested__nested-option):nth-of-type(4) {
    display: flex;
  }
  .segmented-with-nested:has(.radio-card:nth-of-type(4) > input:checked) .segmented-with-nested__nested:not(:has(> :nth-of-type(4) .field-group)) {
    display: none;
  }
}
@layer ui {
  .schedule-field {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .schedule-builder {
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background-color: var(--schedule-controls-background);
  }
  .schedule-builder.is-invalid {
    border-color: var(--form-field-border-error-color);
  }
  .schedule-freq {
    margin: var(--gutter-sm) var(--gutter-sm) 0;
  }
  .schedule-freq-btn {
    flex: 1 1 0;
  }
  .schedule-panel {
    display: none;
    padding: var(--gutter-sm);
  }
  .schedule-panel.is-active {
    display: block;
  }
  .schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-xs);
    font-size: var(--font-size);
    color: var(--default-text-primary-color);
  }
  .schedule-row--spaced {
    margin-top: var(--gutter-sm);
  }
  .schedule-colon {
    margin: 0 calc(var(--gutter-xxs) * -1);
    color: var(--default-text-secondary-color);
  }
  .schedule-builder od-select {
    display: inline-flex;
    width: auto;
    min-width: 60px;
  }
  .schedule-dow,
  .schedule-dom {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--gutter-xxs);
  }
  .schedule-dow-btn,
  .schedule-dom-btn {
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background: var(--form-field-background-default-color);
    color: var(--default-text-primary-color);
    font-weight: 600;
    cursor: pointer;
  }
  .schedule-dow-btn[aria-pressed=true],
  .schedule-dom-btn[aria-pressed=true] {
    background: var(--form-radio-toggle-selected-background-color);
    border-color: var(--form-radio-toggle-selected-border-color);
    color: var(--form-radio-toggle-selected-text-color);
  }
  @media screen and (hover: hover) {
    .schedule-dow-btn:hover:not([aria-pressed=true]),
    .schedule-dom-btn:hover:not([aria-pressed=true]) {
      border-color: var(--form-radio-toggle-selected-background-color);
    }
  }
  .schedule-dow-btn {
    aspect-ratio: 1;
    font-size: var(--font-size-sm);
  }
  .schedule-dom-btn {
    padding: var(--gutter-xxs) 0;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }
  .schedule-monthly-label {
    margin: 0 0 var(--gutter-sm);
    font-size: var(--font-size);
    color: var(--default-text-primary-color);
  }
  .schedule-preview {
    padding: var(--gutter-sm);
    border-top: 1px solid var(--form-field-border-default-color);
    border-radius: 0 0 calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px);
    background-color: var(--form-field-background-default-color);
  }
  .schedule-sentence {
    margin: 0 0 var(--gutter-sm);
    font-size: var(--font-size);
    font-weight: 600;
    color: var(--default-text-primary-color);
  }
  .schedule-highlight {
    color: var(--default-link-color);
  }
  .schedule-next-label {
    margin: 0 0 var(--gutter-xs);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--default-text-secondary-color);
  }
  .schedule-next {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .schedule-next li {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    font-size: var(--font-size-sm);
  }
  .schedule-next i {
    color: var(--icon-success-color);
  }
  .schedule-next-when {
    color: var(--default-text-primary-color);
    font-variant-numeric: tabular-nums;
  }
  .schedule-next-rel {
    margin-left: auto;
    color: var(--default-text-secondary-color);
  }
  .schedule-next-empty {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .schedule-timezone {
    margin: var(--gutter-sm) 0 0;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
}
@layer theme {
  .stepped-integer {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex: none;
  }
  .stepped-integer input {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
  }
  .stepped-integer input::-webkit-outer-spin-button, .stepped-integer input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
  .stepped-integer input {
    appearance: textfield;
  }
  .stepped-integer.disabled {
    opacity: 0.5;
  }
  .stepped-integer.disabled button {
    pointer-events: none;
  }
}
@layer override {
  .stepped-integer button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--form-control-height);
    max-width: none;
    padding: 0;
    align-self: stretch;
    font-size: var(--stepped-integer-glyph-size);
    line-height: 1;
    border: 1px solid var(--form-field-border-default-color);
    color: var(--stepped-integer-button-color);
    background: var(--stepped-integer-button-background-color);
  }
  .stepped-integer button:first-child {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-right: 0;
  }
  .stepped-integer button:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border-left: 0;
  }
  .stepped-integer button:hover {
    color: var(--default-text-primary-color);
  }
  .stepped-integer input {
    flex: none;
    width: 60px;
    border-radius: 0;
  }
}
@layer theme {
  .tag-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .tag-color-picker legend {
    padding: 0;
    margin-bottom: 4px;
  }
  .tag-color-swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px var(--color-black-10);
    cursor: pointer;
  }
  .tag-color-swatch input[type=radio] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .tag-color-swatch i {
    font-size: 13px;
    opacity: 0;
  }
  .tag-color-swatch:has(input:checked) i {
    opacity: 1;
  }
  .tag-color-swatch.pop {
    animation: tag-swatch-pop 0.25s var(--ease-out-expo);
  }
  @media (prefers-reduced-motion: reduce) {
    .tag-color-swatch.pop {
      animation: none;
    }
  }
  .tag-color-swatch:has(input:focus-visible) {
    box-shadow: 0 0 0 2px var(--form-field-border-active-color);
  }
  @keyframes tag-swatch-pop {
    50% {
      transform: scale(1.2);
    }
  }
  .tag-preview {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tag-preview .legend {
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
}
@layer theme {
  .tags-editor {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .tags-editor .editable-store-tags {
    flex: 1;
    min-width: 0;
  }
  .tags-editor .editable-store-tags .input-area {
    min-height: 76px;
    align-content: flex-start;
  }
  .tags-editor .tags-editor-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .tags-editor .tags-editor-actions button {
    padding: 6px 10px;
  }
  .tags-editor .tags-editor-actions button i {
    margin-right: 0;
  }
  .tags-editor .tags-editor-actions button.primary i {
    color: var(--form-button-primary-default-text-color);
  }
}
@layer ui {
  input[type=text]:disabled,
  input[type=number]:disabled {
    background-color: var(--form-field-border-disabled-color);
  }
}
@layer ui {
  .addon-field {
    display: flex;
    border-radius: var(--border-radius);
    border: 1px solid var(--form-field-border-default-color);
    align-items: stretch;
  }
  .addon-field input {
    border: 0;
    border-radius: 0;
  }
  .addon-field.date-field-container {
    max-width: 160px;
  }
  .addon-field > input:first-child .select-container, .addon-field > div:first-child .select-container {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .addon-field > input:first-child, .addon-field > div:first-child {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }
  .addon-field > input:last-child .select-container, .addon-field > div:last-child .select-container {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .addon-field > input:last-child, .addon-field > div:last-child {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
  .addon-field > div {
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
  .addon-field .prefix {
    border-right: 1px solid var(--form-field-border-default-color);
  }
  .addon-field .suffix {
    border-left: 1px solid var(--form-field-border-default-color);
  }
  .addon-field .divider {
    border-left: 1px solid var(--form-field-border-default-color);
    border-right: 1px solid var(--form-field-border-default-color);
  }
  .addon-field .prefix, .addon-field .suffix {
    gap: 6px;
  }
  .addon-field .prefix i, .addon-field .suffix i {
    color: var(--icon-muted-color);
  }
  .addon-field .prefix img, .addon-field .suffix img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  .addon-field .prefix:has(.select-container), .addon-field .suffix:has(.select-container) {
    padding: 0;
    flex-shrink: 0;
    min-width: 0;
    max-width: 50%;
  }
  .addon-field .prefix.wide-select, .addon-field .suffix.wide-select {
    width: 40%;
  }
  .addon-field .prefix.wide-select > .select-container, .addon-field .suffix.wide-select > .select-container {
    flex: 1 1 auto;
  }
  .addon-field .prefix > .select-container, .addon-field .suffix > .select-container {
    border: 0;
    min-width: 0;
  }
  .addon-field .prefix > .select-container .placeholder, .addon-field .prefix > .select-container .selection, .addon-field .suffix > .select-container .placeholder, .addon-field .suffix > .select-container .selection {
    flex-wrap: nowrap;
  }
  .addon-field .prefix > .select-container .selection, .addon-field .suffix > .select-container .selection {
    align-items: center;
  }
  .addon-field .prefix > .select-container.active .dropdown, .addon-field .suffix > .select-container.active .dropdown {
    width: fit-content;
    min-width: calc(100% + 2px);
  }
  .addon-field .prefix > .select-container.active .dropdown .options, .addon-field .suffix > .select-container.active .dropdown .options {
    white-space: nowrap;
  }
  .addon-field .prefix .toggle-container, .addon-field .suffix .toggle-container {
    white-space: nowrap;
  }
  .addon-field .prefix.read-only, .addon-field .suffix.read-only, .addon-field .divider.read-only {
    color: var(--addon-field-text-color);
    background-color: var(--addon-field-read-only-background-color);
  }
  .addon-field.default {
    background: var(--addon-field-default-background-color);
  }
  .addon-field.default > .prefix i, .addon-field.default .suffix i {
    color: var(--addon-field-default-icon-color);
  }
  .addon-field.success {
    background: var(--addon-field-success-background-color);
  }
  .addon-field.success > .prefix i, .addon-field.success .suffix i {
    color: var(--addon-field-success-icon-color);
  }
  .addon-field.info {
    background: var(--addon-field-info-background-color);
  }
  .addon-field.info > .prefix i, .addon-field.info .suffix i {
    color: var(--addon-field-info-icon-color);
  }
  .addon-field.warning {
    background: var(--addon-field-warning-background-color);
  }
  .addon-field.warning > .prefix i, .addon-field.warning .suffix i {
    color: var(--addon-field-warning-icon-color);
  }
  .addon-field.error {
    border-color: var(--form-field-border-error-color);
    background: var(--addon-field-error-background-color);
  }
  .addon-field.error > .prefix i, .addon-field.error .suffix i {
    color: var(--addon-field-error-icon-color);
  }
  .sample-order-field {
    background-color: var(--color-white);
  }
  .sample-order-field .prefix {
    color: var(--default-text-secondary-color);
    white-space: nowrap;
    background-color: var(--color-concrete);
  }
}
@layer theme {
  .addon-field > input {
    min-width: 0;
  }
  .password-container.addon-field > input {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
}
@layer theme {
  .password-length-feedback {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    font-size: var(--font-size-sm);
  }
  .password-length-feedback .password-length-icon i {
    color: var(--icon-muted-color);
  }
  .password-length-feedback.incomplete .password-length-icon i {
    color: var(--icon-danger-color);
  }
  .password-length-feedback.complete .password-length-icon i {
    color: var(--icon-success-color);
  }
}
@layer ui {
  .mask {
    grid-row: 1/-1;
    grid-column: 1/-1;
    opacity: 0;
    z-index: var(--index-low);
    display: none;
    background-color: var(--overlay-background-color);
  }
  .mask.show {
    animation: fadeIn 0.6s var(--ease-in-out-expo);
    display: block;
  }
  .mask.hide {
    animation: fadeOut 0.6s var(--ease-in-out-expo);
    display: block;
    pointer-events: none;
  }
  .mask.active {
    display: block;
    opacity: 1;
  }
}
@layer ui {
  @media screen and (width > 576px) {
    .modal-dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 420px;
      z-index: var(--index-highest);
      background: var(--modal-background-color);
      box-shadow: var(--shadow-highest);
      border-radius: var(--border-radius);
      display: flex;
      flex-direction: column;
    }
    .modal-dialog .handle {
      display: none;
    }
    .modal-dialog header {
      padding: 16px 24px 0;
      display: flex;
      align-items: center;
      gap: var(--gutter-sm);
    }
    .modal-dialog header h2 {
      font-size: 20px;
      line-height: 28px;
      font-weight: 600;
      font-family: var(--font-family-inter);
    }
    .modal-dialog > .content {
      padding: 16px 24px;
      color: var(--modal-text-color);
      font-size: 14px;
      line-height: 20px;
    }
    .modal-dialog footer {
      padding: 8px 24px 16px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .modal-dialog footer.shake {
      animation: shake 0.4s ease-in-out;
    }
  }
  @media screen and (width <= 576px) {
    .modal-dialog.active {
      height: auto;
      min-height: 200px;
    }
    .modal-dialog > .content {
      color: var(--modal-text-color);
      font-size: 14px;
      line-height: 20px;
    }
    .modal-dialog.drawer footer {
      padding: 10px 24px;
    }
  }
}
@layer ui {
  .form-modal {
    transition: width 300ms ease;
  }
  .form-modal:has(.send-email-expanded) {
    width: min(960px, 92vw);
    max-height: 90dvh;
  }
  .form-modal:has(.send-email-expanded) > .content {
    overflow-y: auto;
    min-height: 0;
  }
  .form-modal:has(.send-email-expanded) .send-email-selector {
    display: none;
  }
  @media screen and (width > 576px) {
    .form-modal:has(.send-email-expanded) {
      height: 90dvh;
    }
    .form-modal:has(.send-email-expanded) > .content {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      overflow: hidden;
    }
    .form-modal:has(.send-email-expanded) .send-email-form,
    .form-modal:has(.send-email-expanded) .send-email-fields,
    .form-modal:has(.send-email-expanded) .send-email-body,
    .form-modal:has(.send-email-expanded) .send-email-preview {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    .form-modal:has(.send-email-expanded) .send-email-expanded {
      flex: 1 1 auto;
      min-height: 0;
    }
    .form-modal:has(.send-email-expanded) .send-email-preview-panel,
    .form-modal:has(.send-email-expanded) .send-email-edit-panel {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
  }
  .form-modal:not(:has(.send-email-expanded)) .send-email-submit,
  .form-modal:not(:has(.send-email-expanded)) .send-email-back {
    display: none;
  }
  .form-modal:has(.merge-errors, #merge-orders) {
    max-height: min(90dvh, 100dvh - 65px);
  }
  .form-modal:has(.merge-errors, #merge-orders) > header,
  .form-modal:has(.merge-errors, #merge-orders) > footer,
  .form-modal:has(.merge-errors, #merge-orders) > .handle {
    flex-shrink: 0;
  }
  .form-modal:has(.merge-errors, #merge-orders) > .content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .form-modal:has(.bulk-pdf-previews) {
    width: min(960px, 92vw);
    max-height: 90dvh;
  }
  .form-modal:has(.bulk-pdf-previews) > .content {
    overflow-y: auto;
    min-height: 0;
  }
  .form-modal .bulk-pdf-previews {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    margin-top: var(--gutter-sm);
  }
  .form-modal .bulk-pdf-previews .document > iframe {
    display: block;
    width: 100%;
    aspect-ratio: 1/1.414;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
  }
  .form-modal .bulk-pdf-previews .preview-more {
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
  }
  .form-modal .send-email-selector {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    padding-block: var(--gutter-xs);
  }
  .form-modal .send-email-expanded {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .form-modal .send-email-back {
    margin-left: auto;
  }
  .form-modal .send-email-envelope {
    display: flex;
    gap: var(--gutter-xs);
    font-size: var(--font-size-sm);
  }
  .form-modal .send-email-envelope .envelope-label {
    color: var(--default-text-secondary-color);
    font-weight: 600;
  }
  .form-modal .send-email-body {
    margin-top: var(--gutter-xs);
  }
  .form-modal .send-email-body .segmented-buttons {
    align-self: flex-start;
    margin-bottom: var(--gutter-xxs);
  }
  .form-modal .send-email-body[data-view-mode=preview] .send-email-edit-panel, .form-modal .send-email-body[data-view-mode=editor] .send-email-preview-panel {
    display: none;
  }
  .form-modal .send-email-body .content-editor {
    min-height: 320px;
  }
}
@layer theme {
  @media screen and (width > 576px) {
    .form-modal .send-email-preview-panel .email-preview-body,
    .form-modal .send-email-preview-panel .preview-iframe {
      min-height: 0;
    }
    .form-modal .send-email-edit-panel .line-numbered-editor {
      min-height: 0;
      resize: none;
    }
    .form-modal .send-email-edit-panel .line-numbered-editor .cm-scroller {
      max-height: none;
    }
  }
}
@layer theme {
  #merge-orders .merge-folder-field .fa-folder-open,
  #merge-orders .merge-details-field .fa-file-lines {
    --fa-primary-color: var(--default-link-color);
    --fa-secondary-color: var(--default-link-color);
    color: var(--default-link-color);
  }
  .merge-errors {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gutter-sm);
    min-width: 0;
  }
  .merge-errors a {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
  }
  .merge-errors a > img,
  .merge-errors a > i {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
  }
  .merge-errors a > img {
    object-fit: contain;
  }
  #merge-orders .merge-details-field .options {
    max-height: min(var(--option-height) * 4, 20dvh);
  }
  #merge-orders .merge-folder-field .options {
    max-height: min(var(--option-height) * 5, 20dvh + var(--option-height));
  }
  #merge-orders .merge-folder-field .dropdown {
    top: auto;
    bottom: calc(100% + 4px);
  }
  #merge-orders .merge-primary-preview {
    position: relative;
    padding: var(--gutter-sm) 15px;
    border: 1px solid var(--callout-default-border-color);
    border-radius: var(--border-radius);
    background: var(--callout-default-background-color);
  }
  #merge-orders .merge-primary-preview > .loading-indicator {
    border-radius: var(--border-radius);
    background: var(--callout-default-background-color);
  }
  #merge-orders .merge-primary-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--gutter-sm);
    margin: 0;
  }
  #merge-orders .merge-primary-details dt {
    color: var(--callout-text-color);
    font-size: var(--font-size-sm);
  }
  #merge-orders .merge-primary-details dd {
    margin: 0;
  }
  #merge-orders .merge-primary-details p {
    margin: 0;
    padding: 0;
  }
  .merge-details-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gutter-sm);
  }
  .merge-details-field od-select {
    flex: 1 1 140px;
    min-width: 0;
  }
}
@layer theme {
  .test-progress {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .test-progress p {
    margin: 0;
  }
  .test-progress .test-progress-bar {
    height: 4px;
    border-radius: var(--border-radius);
    background: var(--loading-indicator-color);
    transform: scaleX(0);
    transform-origin: left;
    animation: test-progress-bar 15s linear forwards;
  }
  .connection-test {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .connection-test .connection-test-trigger {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .connection-test .connection-test-trigger button {
    white-space: nowrap;
  }
  .connection-test .connection-test-trust,
  .connection-test .connection-test-result .connection-test-trust {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
    margin-top: var(--gutter-sm);
  }
  .connection-test .connection-test-result:empty {
    display: none;
  }
  .connection-test .connection-test-result ul {
    margin: 0;
    padding-left: var(--gutter-md);
  }
  .connection-test .test-progress {
    display: none;
  }
  .connection-test.htmx-request .connection-test-trigger button {
    pointer-events: none;
    opacity: 0.6;
  }
  .connection-test.htmx-request .connection-test-result {
    display: none;
  }
  .connection-test.htmx-request .test-progress {
    display: flex;
  }
  @keyframes test-progress-bar {
    to {
      transform: scaleX(1);
    }
  }
}
html.anonymous .container.mfa-container {
  gap: 24px;
}
html.anonymous .container.mfa-container .mfa-input-group {
  justify-content: space-between;
}

p.mfa-instructions {
  font-size: 13px;
}

.input-group.mfa-input-group {
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
}
.input-group.mfa-input-group input.mfa {
  width: 40px;
  height: 48px;
  text-align: center;
  appearance: textfield;
  border: 1px solid var(--mfa-input-default-border-color);
  border-radius: var(--border-radius);
  padding: 8px 12px;
  font-family: var(--font-family-inter);
  font-weight: 500;
  font-size: 18px;
  caret-color: transparent;
}
.input-group.mfa-input-group input.mfa::selection {
  background-color: transparent;
}
.input-group.mfa-input-group input.mfa:focus {
  border: 2px solid var(--mfa-input-focus-border-color);
  box-shadow: 0 0 7px -3px var(--mfa-input-focus-box-shadow-color);
}

@layer ui {
  :root {
    --color-background: var(--color-white);
    --transition-duration: 0.3s;
  }
  thead a {
    color: inherit;
  }
  th {
    text-align: left;
  }
  table {
    --table-cell-padding-block: 7px;
    --table-line-height: 20px;
    --table-avatar-size: 32px;
    width: 100%;
  }
  table .untitled {
    color: var(--default-text-light-color);
  }
  table tfoot tr {
    border-bottom: none;
  }
  @media screen and (width > 576px) {
    main tr {
      border-bottom: 1px solid var(--color-divider);
    }
  }
  @media screen and (width <= 576px) {
    main tbody tr:not(:first-child) {
      border-top: 1px solid var(--color-divider);
    }
  }
  main table, .side-panel table {
    border-collapse: collapse;
  }
  main tr, .side-panel tr {
    background: var(--color-background);
  }
  @media screen and (hover: hover) {
    main tbody tr:hover, .side-panel tbody tr:hover {
      --color-background: var(--table-row-hover-background-color);
    }
  }
  @media screen and (width <= 576px) {
    main thead, .side-panel thead {
      display: none;
    }
    main tbody tr, .side-panel tbody tr {
      transition: background-color var(--transition-duration) var(--ease-in-out-expo);
      display: grid;
      padding: 16px 0;
      gap: var(--gutter-xs);
    }
    main tbody tr > *, .side-panel tbody tr > * {
      order: 20;
    }
    main tbody tr.checked, .side-panel tbody tr.checked {
      --color-background: var(--color-divider);
    }
    main tbody tr.pending-selection, .side-panel tbody tr.pending-selection {
      --color-background: var(--color-concrete);
    }
    main tbody td, .side-panel tbody td {
      display: flex;
      justify-content: space-between;
      gap: 4px;
    }
  }
  main .mobile-label, .side-panel .mobile-label {
    display: none;
  }
  @media screen and (width <= 576px) {
    main .mobile-label, .side-panel .mobile-label {
      display: initial;
      color: var(--default-text-secondary-color);
    }
  }
  @media screen and (width > 576px) {
    main th, .side-panel th {
      padding: 0 var(--gutter-xs);
      font-family: var(--font-family-roboto);
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      line-height: 36px;
      white-space: nowrap;
    }
    main td, .side-panel td {
      padding: var(--table-cell-padding-block) var(--gutter-xs);
      font-family: var(--font-family-inter);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: var(--table-line-height);
      vertical-align: middle;
    }
    main td:has(img.avatar), .side-panel td:has(img.avatar) {
      line-height: var(--table-avatar-size);
    }
    main td:has(img.avatar) img.avatar, .side-panel td:has(img.avatar) img.avatar {
      width: var(--table-avatar-size);
      height: var(--table-avatar-size);
      margin-right: 8px;
      border-radius: 50%;
      vertical-align: top;
    }
    main td:has(img.avatar) .name, .side-panel td:has(img.avatar) .name {
      display: inline-block;
      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align: top;
    }
    main td img.icon, .side-panel td img.icon {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
    main th, main td, .side-panel th, .side-panel td {
      min-height: 36px;
    }
    main th:first-child:has(input[type=checkbox]), main td:first-child:has(input[type=checkbox]), .side-panel th:first-child:has(input[type=checkbox]), .side-panel td:first-child:has(input[type=checkbox]) {
      padding-left: var(--gutter-md);
    }
    main th input[type=checkbox], main td input[type=checkbox], .side-panel th input[type=checkbox], .side-panel td input[type=checkbox] {
      vertical-align: middle;
      margin-top: -4px;
      margin-bottom: 0;
    }
    main th.main-title, main td.main-title, .side-panel th.main-title, .side-panel td.main-title {
      font-weight: bold;
    }
    main th.fit-content, main td.fit-content, .side-panel th.fit-content, .side-panel td.fit-content {
      width: 1px;
      white-space: nowrap;
    }
    main th.image, main td.image, .side-panel th.image, .side-panel td.image {
      width: 1px;
    }
    main th.image img, main td.image img, .side-panel th.image img, .side-panel td.image img {
      display: block;
      height: 24px;
      width: 24px;
      border-radius: 50%;
    }
    main th.timestamp, main td.timestamp, .side-panel th.timestamp, .side-panel td.timestamp {
      width: 1px;
      text-align: right;
      white-space: nowrap;
    }
    main th.actions, main td.actions, .side-panel th.actions, .side-panel td.actions {
      width: 1px;
      white-space: nowrap;
      text-align: right;
    }
    main th.actions form, main td.actions form, .side-panel th.actions form, .side-panel td.actions form {
      display: inline;
    }
    main th.align-left, main td.align-left, .side-panel th.align-left, .side-panel td.align-left {
      text-align: left;
    }
    main th.align-center, main td.align-center, .side-panel th.align-center, .side-panel td.align-center {
      text-align: center;
    }
    main th.align-right, main td.align-right, .side-panel th.align-right, .side-panel td.align-right {
      text-align: right;
    }
    main th.long-string, main td.long-string, .side-panel th.long-string, .side-panel td.long-string {
      max-width: 300px;
      overflow: auto;
      word-break: break-word;
    }
    main th .inline-icon-right, main td .inline-icon-right, .side-panel th .inline-icon-right, .side-panel td .inline-icon-right {
      float: right;
    }
    main table.top-aligned, .side-panel table.top-aligned {
      --first-line-offset: calc((var(--table-avatar-size) - var(--table-line-height)) / 2);
    }
    main table.top-aligned td, .side-panel table.top-aligned td {
      vertical-align: top;
      padding-block: calc(var(--table-cell-padding-block) + var(--first-line-offset));
    }
    main table.top-aligned td:has(img.avatar), .side-panel table.top-aligned td:has(img.avatar) {
      padding-block: var(--table-cell-padding-block);
    }
  }
  @media screen and (width > 576px) {
    main th:first-child, main td:first-child {
      padding-left: 24px;
    }
    main th:last-child, main td:last-child {
      padding-right: 24px;
    }
  }
}
@layer theme {
  main thead th, .side-panel thead th {
    font-family: var(--font-family-main);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--default-text-secondary-color);
  }
  .side-panel td {
    white-space: wrap;
    word-break: break-all;
  }
  .side-panel td.fit-content, .side-panel td.actions {
    width: 1px;
    white-space: nowrap;
    word-break: normal;
  }
  .drawer td.fit-content {
    width: auto;
  }
  table .permission-summary {
    white-space: nowrap;
  }
  table .no-records {
    padding: 20px;
    background-color: var(--body-background-color);
    text-align: center;
  }
  table button:not(.text) {
    font-size: 13px;
    line-height: 13px;
  }
  .action-bar {
    display: none;
    position: fixed;
    bottom: var(--gutter-md);
    left: calc(var(--action-bar-offset, 0px) + var(--gutter-sm));
    right: var(--gutter-sm);
    width: fit-content;
    margin-inline: auto;
    z-index: 100;
  }
  .action-bar.visible {
    display: block;
  }
  .action-bar {
    --padding: calc(var(--gutter-md) * 2);
  }
  .action-bar i {
    color: var(--color-oslo-gray);
  }
  .action-bar .actions {
    box-shadow: var(--shadow-middle);
    border-radius: 10px;
    padding: 8px 8px 8px 0;
    background: var(--action-bar-background-color);
    display: flex;
    flex-flow: row wrap;
    font-weight: 500;
    color: var(--action-bar-text-color);
    gap: 14px;
    align-items: center;
    justify-content: center;
  }
  .action-bar .actions .selected-count-badge {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    margin: -8px 0;
    padding: 0 12px;
    border-radius: 10px 0 0 10px;
    background: var(--action-bar-badge-background-color);
  }
  .action-bar .actions .selected-count-badge .count {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--action-bar-text-color);
  }
  .action-bar .actions od-select {
    color: var(--action-bar-select-text-color);
    background-color: var(--action-bar-select-background-color);
    border-color: var(--action-bar-select-border-color);
  }
  .action-bar .actions od-select .placeholder {
    color: var(--action-bar-select-text-color);
  }
  .action-bar .actions od-select .options .fa-trash {
    color: var(--action-bar-delete-option-icon-color);
  }
  .action-bar .actions od-select .dropdown {
    width: max-content;
    min-width: 100%;
    max-width: 400px;
  }
  .action-bar .actions .dropdown-container .dropdown-trigger {
    color: var(--action-bar-select-text-color);
    background: var(--action-bar-select-background-color);
    border-color: var(--action-bar-select-background-color);
  }
  .action-bar .actions .dropdown-container .dropdown-trigger i {
    color: inherit;
  }
  .action-bar .actions .dropdown-container .dropdown-menu {
    color: var(--default-text-primary-color);
  }
  .action-bar .actions .dropdown-container .dropdown-menu i {
    color: var(--icon-muted-color);
  }
  .action-bar .actions .dropdown-container .dropdown-menu li.danger i {
    color: var(--color-danger);
  }
  .action-bar .actions .buttons {
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
  }
  .action-bar .actions .buttons:has(> form.htmx-request, > [data-bulk-action].htmx-request) > .button-spinner {
    display: inline;
    animation: button-spinner-reveal 0s var(--loading-indicator-delay) both;
  }
  .action-bar .actions .buttons > .button-spinner i {
    color: var(--action-bar-text-color);
  }
  .action-bar .actions .buttons .default.delete {
    background: var(--action-bar-delete-background-color);
  }
  .action-bar .actions .buttons .default.delete i {
    color: var(--action-bar-delete-icon-color);
    margin-right: 0;
  }
  @media screen and (hover: hover) {
    .action-bar .actions .buttons .default.delete:hover {
      background: var(--action-bar-delete-hover-background-color);
    }
  }
}
@keyframes toast-entry {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  25% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(15px);
    opacity: 1;
  }
  75% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-scoot-over {
  0% {
    transform: translateY(100px);
  }
  25% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(15px);
  }
  75% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes toast-exit {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  25% {
    transform: translateX(-15px);
  }
  75% {
    transform: translateX(350px);
  }
  100% {
    transform: translateX(350px);
    opacity: 0;
  }
}
.toast-container {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 15px 11px;
  z-index: var(--index-toast);
  max-width: 335px;
  width: 100%;
  display: none;
  pointer-events: none;
}
.toast-container.active {
  display: block;
}
.toast-container .toast {
  display: flex;
  pointer-events: auto;
  flex-direction: row;
  background: var(--toast-background-color);
  border-radius: var(--border-radius);
  border: 1px solid var(--toast-border-color);
  margin-top: 4px;
  box-shadow: 0 0 5px -3px var(--toast-box-shadow-color);
  padding: 15px;
}
.toast-container .toast a {
  color: var(--default-link-color);
}
.toast-container .toast.show {
  animation: 1s toast-entry;
}
.toast-container .toast.make-space {
  animation: 1s toast-scoot-over;
}
.toast-container .toast.hide {
  animation: 0.7s toast-exit;
  pointer-events: none;
}
.toast-container .toast.touching {
  transition: none;
}
.toast-container .toast.reset-position {
  transition: all 0.1s;
}
.toast-container .toast .icon {
  display: flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 3px;
}
.toast-container .toast .icon i {
  font-size: 12px;
  color: white;
  position: relative;
}
.toast-container .toast.success .icon {
  background: var(--toast-success-icon-background-color);
  color: var(--toast-success-icon-color);
}
.toast-container .toast.success h5 {
  color: var(--toast-success-title-color);
}
.toast-container .toast.info .icon {
  background: var(--toast-info-icon-background-color);
  color: var(--toast-info-icon-color);
  padding: 4px 3px;
}
.toast-container .toast.info .icon i {
  top: -1px;
}
.toast-container .toast.info h5 {
  color: var(--toast-info-title-color);
}
.toast-container .toast.warning .icon {
  background: var(--toast-warning-icon-background-color);
  color: var(--toast-warning-icon-color);
}
.toast-container .toast.warning h5 {
  color: var(--toast-warning-title-color);
}
.toast-container .toast.error .icon {
  background: var(--toast-error-icon-background-color);
  color: var(--toast-error-icon-color);
}
.toast-container .toast.error h5 {
  color: var(--toast-error-title-color);
}
.toast-container .toast .details {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  flex-grow: 2;
  overflow: hidden;
}
.toast-container .toast .details h5 {
  font-family: var(--font-family-inter);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.toast-container .toast .details p {
  color: var(--toast-text-color);
  font-family: var(--font-family-inter);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  overflow-wrap: break-word;
}
.toast-container .toast .details .toast-details {
  margin: 4px 0 0;
  padding: 0;
  color: var(--toast-text-color);
  font-family: var(--font-family-inter);
  font-size: 13px;
  line-height: 18px;
  list-style: none;
  overflow-wrap: break-word;
}
.toast-container .toast .close {
  cursor: pointer;
}
.toast-container .toast .close i {
  color: var(--toast-close-button-color);
  font-size: 14px;
}

@media screen and (width <= 576px) {
  .toast-container {
    left: 50%;
    transform: translateX(-50%);
  }
  .toast-container .close {
    width: 20px;
    height: 20px;
  }
  .toast-container .close i {
    font-size: 16px;
  }
}
@layer ui {
  @media screen and (width <= 576px) {
    .drawer {
      top: auto;
      left: 0;
      height: 0;
      bottom: 0;
      width: 100%;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
      z-index: var(--index-highest);
      background: var(--drawer-background-color);
      position: fixed;
      max-height: calc(100dvh - 65px);
      padding: 0;
      gap: 0;
    }
    .drawer.animate {
      transition: height 0.45s var(--ease-in-out-expo);
    }
    .drawer.animate-swipe {
      transition: height 0.45s var(--ease-out-expo);
    }
    .drawer.active {
      height: 50dvh;
    }
    .drawer.full-height {
      height: calc(100dvh - 65px);
    }
    .drawer .handle {
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 16px;
      cursor: pointer;
    }
    .drawer .handle::before {
      content: "";
      width: 60px;
      height: 8px;
      border-radius: 8px;
      background-color: var(--drawer-handle-color);
    }
    .drawer > header {
      padding: 0 15px 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--drawer-header-border-color);
    }
    .drawer > header h2 {
      display: block;
      margin-bottom: 0;
      font-size: 18px;
      line-height: 18px;
      font-family: var(--font-family-inter);
      font-weight: 500;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .drawer > .content {
      flex-grow: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      padding: 15px;
      gap: 26px;
    }
    .drawer > .content .section header {
      padding: 0 0 15px 0;
    }
    .drawer > .content .section header h3 {
      font-size: 14px;
      font-family: var(--font-family-inter);
      font-weight: 500;
    }
    .drawer > .content .section table {
      border-collapse: collapse;
      display: block;
    }
    .drawer > .content .section table tbody {
      display: block;
    }
    .drawer > .content .section table th, .drawer > .content .section table td {
      text-align: left;
      font-size: 14px;
      font-weight: 400;
      font-family: var(--font-family-inter);
      line-height: 20px;
    }
    .drawer > .content .section table th {
      color: var(--drawer-table-heading-color);
      padding-right: 15px;
    }
    .drawer > .content .section table td {
      color: var(--drawer-table-data-color);
    }
    .drawer footer {
      gap: 5px;
      border-top: 1px solid var(--drawer-footer-border-color);
      padding: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
@layer theme {
  .template-content-label {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .template-content-label .twig-builder-btn-floater {
    margin: 0;
  }
  .template-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-xxs);
    min-height: 30px;
  }
  .content-size-warning {
    margin: 0;
    font-size: 0.85rem;
    color: var(--callout-warning-icon-color);
  }
  .content-size-warning.is-over {
    color: var(--callout-error-icon-color);
  }
  .template-preview-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .template-preview-restoring > * {
    visibility: hidden;
  }
  .line-numbered-editor {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 480px;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    overflow: clip;
    resize: vertical;
  }
  .line-numbered-editor:focus-within {
    border-color: var(--form-field-border-active-color);
  }
  .line-numbered-editor:has(.is-invalid) {
    border-color: var(--form-field-border-error-color);
  }
}
@layer theme {
  .code-editor-source {
    display: none;
  }
  .code-editor-host {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  .code-editor-host > .cm-editor {
    flex: 1 1 auto;
    width: 100%;
    font-family: var(--font-family-alternative);
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: var(--color-white);
    color: var(--default-text-primary-color);
  }
  .code-editor-host > .cm-editor.cm-focused {
    outline: none;
  }
  .code-editor-host > .cm-editor .cm-scroller {
    font-family: inherit;
    max-height: 52.5em;
  }
  .code-editor-host > .cm-editor .cm-gutters {
    border-right: 1px solid var(--form-field-border-default-color);
    background-color: var(--color-concrete);
    color: var(--default-text-secondary-color);
    -webkit-user-select: none;
    user-select: none;
  }
  .code-editor-host > .cm-editor .cm-lineNumbers .cm-gutterElement {
    padding: 0 var(--gutter-xxs);
    min-width: 2ch;
  }
  .code-editor-host > .cm-editor .cm-foldGutter .cm-gutterElement {
    padding: 0 4px;
    cursor: pointer;
    color: var(--default-text-secondary-color);
  }
  .code-editor-host > .cm-editor .cm-foldGutter .cm-gutterElement:hover {
    color: var(--default-text-primary-color);
  }
  .code-editor-host > .cm-editor .cm-activeLineGutter {
    background-color: transparent;
  }
  .code-editor-host > .cm-editor .cm-content {
    padding: var(--gutter-xxs) 0;
    caret-color: var(--default-text-primary-color);
  }
  .code-editor-host > .cm-editor .cm-line {
    padding: 0 var(--gutter-xxs);
  }
  .code-editor-host > .cm-editor .cm-selectionBackground,
  .code-editor-host > .cm-editor ::selection {
    background-color: var(--twig-builder-selection-bg-color);
  }
  .code-editor-host > .cm-editor .cm-cursor {
    border-left-color: var(--default-text-primary-color);
  }
  .code-editor-host > .cm-editor .cm-foldPlaceholder {
    padding: 0 4px;
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
    color: var(--default-text-secondary-color);
    border: 1px solid var(--form-field-border-default-color);
    cursor: pointer;
  }
  .code-editor-host > .cm-editor .cm-error-line {
    background-color: var(--code-editor-error-line-bg-color);
    box-shadow: inset 2px 0 0 0 var(--code-editor-error-line-marker-color);
  }
  .code-editor-host > .cm-editor .cm-gutterElement.cm-error-gutter-line {
    color: var(--form-field-border-error-color);
  }
}
@layer theme {
  .twig-builder-wrapper {
    position: relative;
    display: inline-block;
    font-family: var(--font-family-main);
  }
  .twig-builder-wrapper--textarea {
    display: inline-block;
  }
  .twig-builder-wrapper--input,
  .twig-builder-wrapper--textarea {
    background: var(--form-field-background-default-color);
    border-radius: var(--border-radius);
    cursor: text;
  }
  input[data-templatable],
  input[data-twig-assistant],
  textarea[data-templatable] {
    font-family: var(--font-family-alternative);
    padding-right: 40px;
  }
  input[data-templatable],
  input[data-twig-assistant] {
    line-height: 1.4;
  }
  textarea[data-templatable] {
    resize: none;
    overflow-y: auto;
    min-height: 36px;
    max-height: 220px;
    line-height: 26px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .twig-builder-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--twig-builder-text-color);
    background: transparent;
    border-color: transparent;
    border-style: solid;
    margin: 0;
  }
  .twig-builder-overlay--input {
    white-space: pre;
  }
  .twig-builder-overlay--textarea {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .twig-builder-wrapper--input > input,
  .twig-builder-wrapper--textarea > textarea {
    position: relative;
    z-index: 2;
    display: block;
    background: transparent;
    color: transparent;
    caret-color: var(--twig-builder-text-color);
  }
  .twig-builder-wrapper--input > input::selection,
  .twig-builder-wrapper--textarea > textarea::selection {
    background: var(--twig-builder-selection-bg-color);
    color: transparent;
  }
  .tw-hl {
    border-radius: 3px;
    padding: 0 1px;
  }
  .tw-hl--var {
    background: var(--twig-builder-var-bg-color);
    color: var(--twig-builder-var-text-color);
  }
  .twig-builder-overlay .tw-hl {
    padding: 2px 1px;
    margin: 0 -1px;
  }
  .twig-builder-overlay .tw-hl--var {
    background: var(--twig-builder-inline-tag-bg-color);
    color: var(--twig-builder-var-text-color);
    box-shadow: inset 0 0 0 1px var(--twig-builder-inline-tag-border-color);
  }
  .twig-builder-overlay .tw-hl--ctrl {
    box-shadow: inset 0 0 0 1px var(--twig-builder-inline-tag-border-color);
  }
  .twig-builder-overlay .tw-hl--targeted {
    box-shadow: inset 0 0 0 1px var(--twig-builder-primary-color);
  }
  .twig-builder-overlay .tw-hl--brace {
    color: var(--twig-builder-brace-color);
  }
  .tw-hl--ctrl {
    background: var(--twig-builder-ctrl-bg-color);
    color: var(--twig-builder-ctrl-text-color);
  }
  .tw-hl--pending {
    background: var(--twig-builder-pending-bg-color);
    color: var(--twig-builder-pending-text-color);
    box-shadow: inset 0 0 0 1px var(--twig-builder-pending-border-color), 0 1px 2px var(--twig-builder-pending-shadow-color);
  }
  .tw-hl--filter {
    color: var(--twig-builder-filter-color);
  }
  .tw-hl--active {
    background: var(--twig-builder-active-bg-color);
    color: var(--twig-builder-active-text-color);
    box-shadow: inset 0 0 0 1px var(--twig-builder-active-border-color), 0 0 0 2px var(--twig-builder-active-glow-color);
  }
  .tw-hl--comment {
    color: var(--twig-builder-comment-color);
    font-style: italic;
  }
  .twig-builder-triggers {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }
  .tw-filter-trigger {
    position: absolute;
    pointer-events: auto;
    width: max-content;
    height: 20px;
    padding: 0 8px 0 6px;
    border: 1px solid var(--twig-builder-chip-border-color);
    border-radius: 10px;
    background: var(--twig-builder-chip-bg-color);
    color: var(--twig-builder-chip-text-color);
    font: 600 11px/1 var(--font-family-main);
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 1px 3px var(--twig-builder-chip-shadow-color);
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    animation: tw-filter-trigger-in 100ms ease-out;
  }
  .tw-filter-trigger:hover,
  .tw-filter-trigger:focus-visible {
    background: var(--twig-builder-chip-hover-bg-color);
    color: var(--twig-builder-chip-hover-text-color);
    outline: none;
    box-shadow: 0 2px 6px var(--twig-builder-chip-hover-shadow-color);
  }
  @keyframes tw-filter-trigger-in {
    from {
      opacity: 0;
      transform: translateY(2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .tw-pending-hotspot {
    position: absolute;
    pointer-events: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 100ms ease;
  }
  .tw-pending-hotspot:hover {
    background: var(--twig-builder-hotspot-hover-bg-color);
  }
  .tw-pending-hotspot:focus-visible {
    outline: 2px solid var(--twig-builder-primary-color);
    outline-offset: 1px;
  }
  .twig-builder-btn {
    position: absolute;
    z-index: 4;
    width: max-content;
    padding: 4px 10px;
    border: none;
    border-radius: 5px;
    background: var(--twig-builder-primary-color);
    color: var(--twig-builder-on-primary-color);
    font: 500 11px/1 var(--font-family-main);
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 1px 2px var(--twig-builder-btn-shadow-color);
    transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
  }
  .twig-builder-btn:hover {
    background: var(--twig-builder-primary-hover-color);
    box-shadow: 0 2px 6px var(--twig-builder-btn-hover-shadow-color);
  }
  .twig-builder-btn:active {
    transform: translateY(1px);
  }
  .twig-builder-btn:focus-visible {
    outline: 2px solid var(--twig-builder-primary-color);
    outline-offset: 2px;
  }
  .twig-builder-wrapper--input .twig-builder-btn,
  .twig-builder-wrapper--textarea .twig-builder-btn {
    top: 6px;
    right: 6px;
  }
  .twig-builder-wrapper--input .twig-builder-btn,
  .twig-builder-wrapper--textarea .twig-builder-btn {
    padding: 2px 6px 4px;
    font-family: var(--font-family-alternative);
  }
  .twig-builder-wrapper--code-editor {
    position: relative;
  }
  .twig-builder-btn-floater {
    display: flex;
    pointer-events: auto;
  }
  .twig-builder-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
  }
  .twig-builder-toolbar > .twig-builder-btn {
    position: static;
    margin: 0;
  }
  .twig-builder-wrapper--code-editor > .twig-builder-btn--corner {
    top: 8px;
    right: 8px;
    padding: 3px 6px;
    font-family: var(--font-family-alternative);
  }
  .twig-builder-btn--secondary {
    background: var(--twig-builder-btn-secondary-bg-color);
    color: var(--twig-builder-btn-secondary-text-color);
    box-shadow: inset 0 0 0 1px var(--twig-builder-btn-secondary-border-color);
  }
  .twig-builder-btn--secondary:hover {
    background: var(--twig-builder-btn-secondary-hover-bg-color);
    box-shadow: inset 0 0 0 1px var(--twig-builder-btn-secondary-hover-border-color), 0 1px 2px var(--twig-builder-btn-secondary-hover-shadow-color);
  }
  .twig-builder-btn--filter {
    pointer-events: auto;
  }
  .twig-builder-wrapper--input .twig-builder-btn--filter,
  .twig-builder-wrapper--textarea .twig-builder-btn--filter {
    right: 38px;
  }
  .twig-builder-wrapper--input:has(.twig-builder-btn--filter) > input,
  .twig-builder-wrapper--textarea:has(.twig-builder-btn--filter) > textarea {
    padding-right: 65px;
  }
  .twig-builder-wrapper--code-editor .cm-content .tw-hl--pending {
    cursor: pointer;
  }
  .twig-builder-wrapper--code-editor .cm-content .tw-hl {
    padding: 0;
    border-radius: 2px;
  }
  .twig-builder-dropdown {
    position: absolute;
    z-index: calc(var(--index-highest) + 1);
    background: var(--twig-builder-dropdown-bg-color);
    border: 1px solid var(--twig-builder-dropdown-border-color);
    border-radius: 8px;
    padding: 4px;
    min-width: 180px;
    max-width: min(420px, 100vw - 16px);
    box-shadow: 0 8px 24px var(--twig-builder-dropdown-shadow-outer-color), 0 2px 6px var(--twig-builder-dropdown-shadow-inner-color);
    font: 14px/1.4 var(--font-family-main);
    animation: twig-builder-fade-in 120ms ease-out;
  }
  @keyframes twig-builder-fade-in {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .twig-builder-dropdown__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    text-align: left;
    color: var(--twig-builder-text-color);
    font: inherit;
    cursor: pointer;
  }
  .twig-builder-dropdown__item:focus {
    outline: none;
  }
  .twig-builder-dropdown__item:hover,
  .twig-builder-dropdown__item:focus-visible {
    background: var(--twig-builder-dropdown-hover-bg-color);
    color: var(--twig-builder-dropdown-hover-text-color);
    outline: none;
  }
  .twig-builder-dropdown__item--suggested {
    padding-left: 26px;
    position: relative;
  }
  .twig-builder-dropdown__item--suggested::before {
    content: "›";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-54%);
    color: var(--twig-builder-primary-color);
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
  }
  .twig-builder-dropdown--scroll {
    max-height: 340px;
    overflow-y: auto;
    padding-top: 0;
  }
  .twig-builder-dropdown__header {
    position: sticky;
    top: 0;
    background: var(--twig-builder-dropdown-bg-color);
    z-index: 2;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--twig-builder-dropdown-separator-color);
  }
  .twig-builder-key-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 4px;
    font: 12px/1.3 var(--font-family-main);
    color: var(--twig-builder-key-toggle-text-color);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .twig-builder-key-toggle input[type=checkbox] {
    margin: 0;
    accent-color: var(--twig-builder-primary-color);
    cursor: pointer;
  }
  .twig-builder-key-toggle__hint {
    color: var(--twig-builder-dropdown-label-color);
    font-family: var(--font-family-alternative);
    font-size: 11px;
    background: var(--twig-builder-key-toggle-hint-bg-color);
    padding: 1px 5px;
    border-radius: 3px;
  }
  .twig-builder-dropdown__hint {
    margin: 2px 0 6px;
    padding: 0 4px;
    font: 11px/1.5 var(--font-family-main);
    color: var(--twig-builder-dropdown-label-color);
  }
  .twig-builder-dropdown__search-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .twig-builder-dropdown__search-row .twig-builder-dropdown__search {
    flex: 1 1 50%;
    min-width: 0;
  }
  .twig-builder-dropdown__search-row .twig-builder-dropdown__item--manual {
    flex: 0 0 auto;
    width: max-content;
  }
  .twig-builder-dropdown__search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px solid var(--twig-builder-dropdown-border-color);
    border-radius: 5px;
    font: 13px/1.4 var(--font-family-main);
    color: var(--twig-builder-text-color);
    background: var(--twig-builder-dropdown-bg-color);
    outline: none;
  }
  .twig-builder-dropdown__search:focus {
    border-color: var(--twig-builder-primary-color);
    box-shadow: 0 0 0 3px var(--twig-builder-btn-focus-ring-color);
  }
  .twig-builder-dropdown__item--hidden {
    display: none !important;
  }
  .twig-builder-dropdown__item:disabled {
    cursor: default;
    opacity: 0.65;
  }
  .twig-builder-dropdown__item:disabled:hover,
  .twig-builder-dropdown__item:disabled:focus {
    background: transparent;
    color: inherit;
  }
  .twig-builder-dropdown__path {
    min-width: 0;
    font-family: var(--font-family-alternative);
    font-size: 12.5px;
    color: inherit;
    overflow-wrap: anywhere;
  }
  .twig-builder-dropdown__label {
    font-size: 11px;
    color: var(--twig-builder-dropdown-label-color);
    font-style: italic;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .twig-builder-dropdown__preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-width: 0;
    font-family: var(--font-family-alternative);
    font-size: 11.5px;
    color: var(--twig-builder-dropdown-preview-color);
    overflow-wrap: anywhere;
  }
  .twig-builder-dropdown__item--list .twig-builder-dropdown__path {
    color: var(--twig-builder-listbuilder-list-text-color);
  }
  .twig-builder-dropdown__item--manual {
    color: var(--twig-builder-primary-medium-color);
    font-style: italic;
  }
  .twig-builder-dropdown__section {
    padding: 6px 12px 2px;
    font: 600 10px/1 var(--font-family-main);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--twig-builder-dropdown-label-color);
    -webkit-user-select: none;
    user-select: none;
  }
  .twig-builder-dropdown__section:not(:first-child) {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--twig-builder-dropdown-separator-color);
  }
  .twig-builder-dropdown__empty {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--twig-builder-dropdown-label-color);
    font-style: italic;
  }
  .twig-builder-dropdown--manual {
    min-width: 260px;
    padding: 8px;
  }
  .twig-builder-dropdown__heading {
    padding: 4px 4px 6px;
    font-size: 12px;
    color: var(--twig-builder-dropdown-heading-color);
    font-weight: 500;
  }
  .twig-builder-manual-form {
    display: flex;
    gap: 6px;
  }
  .twig-builder-manual-input {
    flex: 1;
    padding: 6px 9px;
    border: 1px solid var(--twig-builder-dropdown-input-border-color);
    border-radius: 5px;
    font: 13px/1.4 var(--font-family-alternative);
    outline: none;
    color: var(--twig-builder-text-color);
    background: var(--twig-builder-dropdown-bg-color);
  }
  .twig-builder-manual-input:focus {
    border-color: var(--twig-builder-primary-color);
    box-shadow: 0 0 0 3px var(--twig-builder-btn-focus-ring-color);
  }
  .twig-builder-manual-submit {
    padding: 0 12px;
    background: var(--twig-builder-primary-color);
    color: var(--twig-builder-on-primary-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font: 500 12px/1 var(--font-family-main);
  }
  .twig-builder-manual-submit:hover {
    background: var(--twig-builder-primary-hover-color);
  }
  .twig-builder-integration-fields {
    margin: 4px 0 12px;
  }
  .twig-builder-integration-fields .integration-field-picker {
    display: grid;
    gap: 10px;
  }
  .twig-builder-integration-fields .integration-field-parameter {
    display: grid;
    gap: 4px;
    font-size: var(--font-size-sm);
  }
  .twig-builder-integration-fields + .twig-builder-manual-submit {
    padding: 8px 12px;
  }
  .twig-builder-dropdown__back {
    display: inline-block;
    margin: 0 0 6px;
    padding: 3px 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--twig-builder-back-color);
    font: 500 11px/1.2 var(--font-family-main);
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  .twig-builder-dropdown__back:hover,
  .twig-builder-dropdown__back:focus-visible {
    background: var(--twig-builder-back-hover-bg-color);
    color: var(--twig-builder-primary-medium-color);
    outline: none;
  }
}
@layer theme {
  .api-browser {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
  }
  .api-browser-editor {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .api-browser-editor textarea {
    width: 100%;
    resize: vertical;
    font-family: var(--font-family-alternative);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .api-browser-editor label[hidden] {
    display: none;
  }
  .api-browser-preset {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    max-width: 50%;
  }
  @media (max-width: 768px) {
    .api-browser-preset {
      max-width: 100%;
    }
  }
  .api-browser-graphql-line {
    display: flex;
    gap: var(--gutter-sm);
  }
  .api-browser-graphql-line label {
    display: flex;
    flex-direction: column;
  }
  .api-browser-graphql-line .api-browser-query {
    flex: 2 1 0;
  }
  .api-browser-graphql-line .api-browser-variables {
    flex: 1 1 0;
  }
  @media (max-width: 768px) {
    .api-browser-graphql-line {
      flex-direction: column;
    }
  }
  .api-browser-rest-line {
    display: flex;
    gap: var(--gutter-sm);
  }
  .api-browser-rest-line label {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .api-browser-rest-line .api-browser-method {
    flex: 0 0 160px;
  }
  .api-browser-rest-line .api-browser-path {
    flex: 1 1 auto;
  }
  @media (max-width: 768px) {
    .api-browser-rest-line {
      flex-direction: column;
    }
    .api-browser-rest-line .api-browser-method {
      flex-basis: auto;
    }
  }
  .api-browser-actions {
    display: flex;
    justify-content: flex-start;
  }
  .api-browser-result {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .api-browser-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .api-browser-status {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    font-weight: 600;
  }
  .api-browser-status.success {
    color: var(--status-message-success);
  }
  .api-browser-status.warning {
    color: var(--status-message-warning);
  }
  .api-browser-status.error {
    color: var(--status-message-error);
  }
  .api-browser-status-reason,
  .api-browser-duration {
    color: var(--default-text-secondary-color);
    font-weight: 400;
  }
  .api-browser-errors {
    color: var(--status-message-error);
  }
  .api-browser-body {
    max-height: 600px;
    overflow: auto;
    padding: var(--gutter-sm);
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-family-alternative);
    font-size: var(--font-size-sm);
  }
  .api-browser-headers summary {
    cursor: pointer;
  }
}
@layer theme {
  .catalog-swatch {
    display: block;
    width: 20px;
    height: 20px;
  }
  .catalog-swatch-ring {
    fill: none;
    stroke: var(--catalog-swatch-border);
    stroke-width: 1;
  }
}
@layer theme {
  .activity-payload {
    position: relative;
  }
  .activity-payload pre {
    margin: 0;
    padding: var(--gutter-sm);
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-family-alternative);
    font-size: var(--font-size-sm);
  }
  .activity-payload-meta {
    margin-bottom: var(--gutter-md);
  }
  .activity-payload-section {
    margin: var(--gutter-md) 0 var(--gutter-sm);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--default-text-secondary-color);
  }
  .activity-payload-field {
    margin-bottom: var(--gutter-sm);
  }
  .activity-payload-field .labeled-list {
    margin: 0;
    padding: var(--gutter-sm);
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
  }
  .activity-payload-field-label {
    display: block;
    margin-bottom: var(--gutter-xxs);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--default-text-secondary-color);
  }
  .activity-payload-group {
    margin-left: var(--gutter-sm);
    padding-left: var(--gutter-sm);
    border-left: 1px solid var(--color-divider);
  }
  .activity-payload-code {
    position: relative;
  }
  .activity-payload-copy {
    position: absolute;
    top: 0;
    right: 0;
  }
  .activity-payload-code .activity-payload-copy {
    top: var(--gutter-xs);
    right: var(--gutter-xs);
    background-color: var(--color-concrete);
  }
  .webhook-delivery-url {
    display: inline-block;
    max-width: min(40rem, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .webhook-delivery-target-icon {
    color: var(--content-header-icon-color);
  }
  .webhook-delivery-run-history {
    margin-left: var(--gutter-xs);
    font-size: var(--font-size-sm);
  }
  .webhook-delivery-link-icon {
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
  }
  .activity-payload-copy-inline {
    padding: 0 var(--gutter-xxs);
    color: var(--default-text-secondary-color);
  }
  .activity-payload-field--text,
  .activity-payload-details .activity-payload-field {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: baseline;
  }
  .activity-payload-field--text .activity-payload-field-label,
  .activity-payload-details .activity-payload-field .activity-payload-field-label {
    margin-bottom: 0;
  }
  .activity-payload-tabs [data-tab-panel] {
    display: none;
  }
  .activity-payload-tabs [data-tab-panel].active {
    display: block;
  }
}
@layer theme {
  .webhook-url {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    max-width: 100%;
    padding: var(--gutter-xs) var(--gutter-sm);
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
    font-family: var(--font-family-alternative);
    font-size: var(--font-size-sm);
  }
  .webhook-url i {
    flex: 0 0 auto;
  }
  .webhook-url .webhook-url-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .webhook-tester {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
  }
  .webhook-tester-form {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .webhook-tester-form label:not(.radio-card) {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .webhook-tester-form textarea {
    width: 100%;
    resize: vertical;
    font-family: var(--font-family-alternative);
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }
  .webhook-tester-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gutter-md);
  }
  @media (max-width: 768px) {
    .webhook-tester-top {
      flex-direction: column;
      align-items: stretch;
    }
  }
  .webhook-tester-topic {
    flex: 0 1 360px;
  }
  @media (max-width: 768px) {
    .webhook-tester-topic {
      flex-basis: auto;
      max-width: 100%;
    }
  }
  .webhook-tester-load-sample {
    flex: 0 0 clamp(220px, 30%, 300px);
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    padding: var(--gutter-xs) var(--gutter-sm);
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
  }
  .webhook-tester-load-sample .webhook-tester-load-sample-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
  }
  .webhook-tester-load-sample .select-container {
    max-width: 100%;
  }
  @media (max-width: 768px) {
    .webhook-tester-load-sample {
      flex-basis: auto;
      width: 100%;
    }
  }
  .webhook-tester-actions {
    display: flex;
    justify-content: flex-start;
  }
  .webhook-tester-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-sm);
  }
  .webhook-tester-result-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gutter-xs) var(--gutter-sm);
    margin: 0;
    font-size: var(--font-size-sm);
  }
  .webhook-tester-result-detail dt {
    font-weight: 600;
  }
  .webhook-tester-result-detail dd {
    margin: 0;
    font-family: var(--font-family-alternative);
    overflow-wrap: anywhere;
  }
  .webhook-tester-result-note {
    margin: 0;
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
  }
  .webhook-registration-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-sm);
  }
}
@layer theme {
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .filter-bar .select-container {
    min-width: 200px;
    max-width: 260px;
  }
  .filter-bar .date-field-container {
    height: 36px;
    width: 170px;
    max-width: 170px;
  }
  .filter-bar .date-field-container input {
    min-height: 0;
    flex: 1;
    min-width: 0;
  }
}
@layer override {
  .rearranging {
    -webkit-user-select: none;
    user-select: none;
    cursor: grabbing;
    position: relative;
  }
  .rearranging > .ghost {
    position: absolute;
    z-index: var(--index-object-flyover);
  }
  .rearranging > .placeholder {
    visibility: hidden;
  }
}
@layer theme {
  .folder-edit-mode .folder-edit-mode-add {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gutter-sm);
    margin: 2px 0 10px;
  }
  .folder-edit-mode .folder-edit-mode-add-button {
    max-width: none;
    text-align: left;
    white-space: nowrap;
    background: var(--sidebar-folder-edit-add-background-color);
  }
  .folder-edit-mode .folder-edit-mode-add-button i {
    color: var(--sidebar-folder-edit-add-icon-color);
  }
  @media screen and (hover: hover) {
    .folder-edit-mode .folder-edit-mode-add-button:hover {
      background: var(--sidebar-folder-edit-add-hover-background-color);
    }
  }
  .folder-edit-mode .folder-edit-mode-group {
    border-radius: var(--border-radius);
  }
  .folder-edit-mode .folder-edit-mode-group:not(:last-child) {
    margin-bottom: 12px;
  }
  .folder-edit-mode .folder-edit-mode-group.drop-highlight {
    animation: folderDropPulse 0.6s ease-out;
  }
  .folder-edit-mode .folder-edit-mode-group-header,
  .folder-edit-mode .folder-edit-mode-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--animation-time) ease-in;
  }
  @media screen and (hover: hover) {
    .folder-edit-mode .folder-edit-mode-group-header:hover,
    .folder-edit-mode .folder-edit-mode-item:hover {
      background: var(--sidebar-hover-background-color);
    }
  }
  .folder-edit-mode .folder-edit-mode-group-header {
    padding: 0 4px 0 6px;
    border-radius: var(--border-radius);
    font-weight: 500;
  }
  .folder-edit-mode .folder-edit-mode-item {
    padding: 0 var(--row-end-inset) 0 10px;
    border-left: var(--item-border-width) solid var(--sidebar-menu-item-default-border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-weight: 400;
  }
  .folder-edit-mode .folder-edit-mode-item .order-count {
    margin-right: 0;
    align-self: center;
  }
  .folder-edit-mode .folder-edit-mode-name {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .folder-edit-mode .folder-edit-mode-name.unnamed {
    font-style: italic;
    font-weight: 400;
    color: var(--sidebar-folder-edit-muted-text-color);
  }
  .folder-edit-mode .folder-edit-mode-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
  }
  .folder-edit-mode .folder-edit-mode-list:not(:has(.folder-edit-mode-item:not(.ghost)))::after {
    content: attr(data-empty-text);
    display: flex;
    align-items: center;
    height: 30px;
    padding-left: 12px;
    border-left: var(--item-border-width) dashed var(--sidebar-menu-item-default-border-color);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--sidebar-folder-edit-muted-text-color);
  }
  .folder-edit-mode .folder-edit-mode-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }
  @media screen and (hover: hover) {
    .folder-edit-mode .folder-edit-mode-actions {
      opacity: 0;
      transition: opacity var(--animation-time) ease-in;
    }
  }
  @media screen and (hover: hover) {
    .folder-edit-mode .folder-edit-mode-group-header:hover .folder-edit-mode-actions,
    .folder-edit-mode .folder-edit-mode-actions:focus-within {
      opacity: 1;
    }
  }
  .folder-edit-mode .folder-edit-mode-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius);
    background: none;
    cursor: pointer;
    color: var(--sidebar-folder-edit-action-color);
  }
  .folder-edit-mode .folder-edit-mode-action i {
    color: inherit;
    font-size: 12px;
  }
  @media screen and (hover: hover) {
    .folder-edit-mode .folder-edit-mode-action:hover {
      color: var(--sidebar-folder-edit-action-hover-icon-color);
    }
    .folder-edit-mode .folder-edit-mode-action.danger:hover {
      color: var(--sidebar-folder-edit-action-danger-icon-color);
    }
  }
  .folder-edit-mode .folder-edit-mode-action.disabled {
    opacity: 0.35;
    cursor: default;
  }
  .folder-edit-mode .folder-edit-mode-hidden {
    display: none;
  }
  .folder-edit-mode .folder-edit-mode-group.ghost,
  .folder-edit-mode .folder-edit-mode-item.ghost {
    background: var(--sidebar-folder-edit-ghost-background-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-middle);
    cursor: grabbing;
  }
  .folder-edit-mode .folder-edit-mode-mask {
    display: none;
  }
  @media screen and (width > 576px) {
    body:has(.folder-edit-mode) {
      overflow: hidden;
    }
    body:has(.folder-edit-mode) > nav.sidebar {
      z-index: var(--index-high);
    }
    body:has(.folder-edit-mode) > .mask {
      z-index: calc(var(--index-high) + 1);
    }
    .menu-group:has(.folder-edit-mode) {
      position: relative;
      z-index: 1;
      margin-right: -10px;
      border-radius: var(--border-radius);
      overflow: clip;
    }
    .menu-group:has(.folder-edit-mode) .menu-group-row {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--sidebar-background-color);
    }
    .menu-group:has(.folder-edit-mode) .menu-group-row .folder-edit-mode-done {
      right: 4px;
    }
    .sidebar .folder-edit-mode.menu-sub-groups {
      margin-left: 0;
      padding-left: 32px;
      padding-bottom: var(--gutter-sm);
      background: var(--sidebar-background-color);
    }
    .folder-edit-mode .folder-edit-mode-mask {
      display: block;
      position: fixed;
      inset: 0;
      z-index: -1;
      background: var(--sidebar-folder-edit-mask-color);
      animation: fadeIn var(--sidebar-opacity-transition);
    }
    .folder-edit-mode .folder-edit-mode-groups {
      anchor-name: --folder-edit-groups;
    }
    .folder-edit-mode .folder-edit-mode-add {
      --add-top-limit: calc(var(--header-height) + var(--banner-height) + var(--gutter-sm));
      position: fixed;
      top: var(--add-top-limit);
      left: calc(var(--sidebar-width) + var(--gutter-sm));
      margin: 0;
      animation: fadeIn var(--sidebar-opacity-transition);
    }
    @supports (anchor-name: --folder-edit-groups) {
      .folder-edit-mode .folder-edit-mode-add {
        top: max(anchor(--folder-edit-groups top), var(--add-top-limit));
      }
    }
    .folder-edit-mode .folder-edit-mode-add .folder-edit-mode-add-button {
      box-shadow: var(--shadow-middle);
    }
  }
  @keyframes folderDropPulse {
    0% {
      box-shadow: inset 0 0 0 1px var(--sidebar-menu-item-active-border-color);
    }
    100% {
      box-shadow: none;
    }
  }
}
@layer override {
  .folder-edit .folder-edit-mode-group.placeholder,
  .folder-edit .folder-edit-mode-item.placeholder {
    visibility: visible;
    border: 1px dashed var(--sidebar-menu-item-active-border-color);
    border-radius: var(--border-radius);
    background: var(--sidebar-folder-edit-placeholder-background-color);
  }
  .folder-edit .folder-edit-mode-group.placeholder > *,
  .folder-edit .folder-edit-mode-item.placeholder > * {
    visibility: hidden;
  }
}
@layer theme {
  .store-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .tag-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  @media screen and (width <= 576px) {
    .tag-columns {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .tag-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tag-column .header {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tag-column .header .count {
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
  .tag-add summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
  .tag-add .tag-add-heading {
    margin: 0;
    font-size: 14px;
  }
  .tag-add form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }
  .store-tag.is-clickable {
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
  }
  .store-tag.is-clickable .store-tag-label {
    padding: 2px 8px;
    color: inherit;
    text-decoration: none;
  }
  .store-tag.is-clickable .store-tag-remove {
    display: flex;
    align-items: center;
    padding: 2px 6px;
    border-left: 1px solid var(--store-tag-divider-color);
    color: inherit;
    cursor: pointer;
  }
  .store-tag.is-clickable .store-tag-remove i {
    font-size: 10px;
  }
  @media screen and (hover: hover) {
    .store-tag.is-clickable .store-tag-remove:hover {
      background-color: var(--store-tag-remove-hover-background);
    }
  }
  @media screen and (hover: hover) {
    .store-tag.is-clickable:hover {
      box-shadow: var(--shadow-highest);
    }
  }
  .store-tag .store-tag-remove i {
    color: inherit;
  }
  .store-tag--gray {
    background-color: var(--store-tag-gray-background);
    color: var(--store-tag-color);
  }
  .store-tag--red {
    background-color: var(--store-tag-red-background);
    color: var(--store-tag-color);
  }
  .store-tag--orange {
    background-color: var(--store-tag-orange-background);
    color: var(--store-tag-color);
  }
  .store-tag--brown {
    background-color: var(--store-tag-brown-background);
    color: var(--store-tag-color);
  }
  .store-tag--yellow {
    background-color: var(--store-tag-yellow-background);
    color: var(--store-tag-color);
  }
  .store-tag--lime {
    background-color: var(--store-tag-lime-background);
    color: var(--store-tag-color);
  }
  .store-tag--green {
    background-color: var(--store-tag-green-background);
    color: var(--store-tag-color);
  }
  .store-tag--teal {
    background-color: var(--store-tag-teal-background);
    color: var(--store-tag-color);
  }
  .store-tag--blue {
    background-color: var(--store-tag-blue-background);
    color: var(--store-tag-color);
  }
  .store-tag--azure {
    background-color: var(--store-tag-azure-background);
    color: var(--store-tag-color);
  }
  .store-tag--purple {
    background-color: var(--store-tag-purple-background);
    color: var(--store-tag-color);
  }
  .store-tag--pink {
    background-color: var(--store-tag-pink-background);
    color: var(--store-tag-color);
  }
  .store-tag--pastel-gray {
    background-color: var(--store-tag-pastel-gray-background);
    color: var(--store-tag-pastel-gray-color);
  }
  .store-tag--pastel-red {
    background-color: var(--store-tag-pastel-red-background);
    color: var(--store-tag-pastel-red-color);
  }
  .store-tag--pastel-orange {
    background-color: var(--store-tag-pastel-orange-background);
    color: var(--store-tag-pastel-orange-color);
  }
  .store-tag--pastel-brown {
    background-color: var(--store-tag-pastel-brown-background);
    color: var(--store-tag-pastel-brown-color);
  }
  .store-tag--pastel-yellow {
    background-color: var(--store-tag-pastel-yellow-background);
    color: var(--store-tag-pastel-yellow-color);
  }
  .store-tag--pastel-lime {
    background-color: var(--store-tag-pastel-lime-background);
    color: var(--store-tag-pastel-lime-color);
  }
  .store-tag--pastel-green {
    background-color: var(--store-tag-pastel-green-background);
    color: var(--store-tag-pastel-green-color);
  }
  .store-tag--pastel-teal {
    background-color: var(--store-tag-pastel-teal-background);
    color: var(--store-tag-pastel-teal-color);
  }
  .store-tag--pastel-blue {
    background-color: var(--store-tag-pastel-blue-background);
    color: var(--store-tag-pastel-blue-color);
  }
  .store-tag--pastel-azure {
    background-color: var(--store-tag-pastel-azure-background);
    color: var(--store-tag-pastel-azure-color);
  }
  .store-tag--pastel-purple {
    background-color: var(--store-tag-pastel-purple-background);
    color: var(--store-tag-pastel-purple-color);
  }
  .store-tag--pastel-pink {
    background-color: var(--store-tag-pastel-pink-background);
    color: var(--store-tag-pastel-pink-color);
  }
  [class*=store-tag--pastel-] {
    --store-tag-divider-color: var(--color-black-10);
  }
}
@layer theme {
  .tags-cell {
    align-items: center;
  }
  .tags-cell-action {
    padding: 2px 4px;
    border: none;
    background: none;
    font-size: 12px;
    color: var(--tags-cell-action-color);
    cursor: pointer;
  }
  @media screen and (hover: hover) {
    .tags-cell-action {
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    td:hover .tags-cell-action, .tags-cell-action:focus-visible {
      opacity: 1;
    }
    .tags-cell-action:hover {
      color: var(--tags-cell-action-hover-color);
    }
  }
  .context-dialog.tags-cell-editor {
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 12px;
    box-shadow: 0 0 24px 8px var(--tags-cell-glow-color);
  }
  .context-dialog.tags-cell-editor form {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }
  .context-dialog.tags-cell-editor form .editable-store-tags {
    flex: 1;
  }
  .context-dialog.tags-cell-editor form .editable-store-tags .input-area {
    min-height: 76px;
    align-content: flex-start;
  }
  .context-dialog.tags-cell-editor form .tags-editor-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .context-dialog.tags-cell-editor form .tags-editor-actions button {
    padding: 6px 10px;
  }
  .context-dialog.tags-cell-editor form .tags-editor-actions button i {
    margin-right: 0;
  }
}
@layer theme {
  .cell-preview {
    padding: 4px;
  }
  .tippy-box[data-theme~=cell-preview] {
    box-shadow: 0 0 24px 8px var(--tags-cell-glow-color);
  }
}
@layer theme {
  .stock-cell {
    white-space: nowrap;
  }
  @media screen and (width > 576px) {
    .stock-cell {
      padding-top: 3px;
      padding-bottom: 3px;
    }
  }
  .stock-cell-form {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
  }
  .stock-cell-action {
    position: relative;
    display: inline-flex;
  }
  .stock-cell-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--stock-cell-save-color);
    cursor: pointer;
  }
  @media screen and (hover: hover) {
    .stock-cell-save:hover {
      color: var(--stock-cell-save-hover-color);
    }
  }
  .stock-cell-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .stock-cell-saved,
  .stock-cell-failed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stock-cell-saved {
    color: var(--stock-cell-saved-color);
    animation: stock-cell-saved 1.4s ease-out forwards;
  }
  .stock-cell-saved::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--stock-cell-saved-color);
    border-radius: 50%;
    animation: stock-cell-zap 1.4s ease-out forwards;
  }
  .stock-cell-failed {
    width: 100%;
    height: 100%;
    color: var(--stock-cell-failed-color);
    background: var(--color-background);
  }
  @keyframes stock-cell-saved {
    0%, 60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes stock-cell-zap {
    0% {
      opacity: 0.7;
      transform: scale(0.6);
    }
    60% {
      opacity: 0;
      transform: scale(2.6);
    }
    100% {
      opacity: 0;
      transform: scale(2.6);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .stock-cell-saved::after {
      display: none;
    }
  }
}
@layer override {
  .stock-cell-form input[type=text] {
    width: 64px;
    min-height: var(--form-control-height-sm);
    padding: 0 6px;
    text-align: right;
  }
  .stock-cell-form input[type=text]::-webkit-outer-spin-button, .stock-cell-form input[type=text]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
  .stock-cell-form input[type=text] {
    appearance: textfield;
  }
}
@layer theme {
  .grouped-label {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .grouped-label .group,
  .grouped-label .name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .grouped-label .group {
    color: var(--grouped-label-group-color);
    font-weight: normal;
  }
  .grouped-label i.fa-chevron-right {
    flex: 0 0 auto;
    margin: 0 5px;
    color: var(--grouped-label-group-color);
    font-size: 9px;
  }
}
@layer theme {
  .callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: var(--border-radius);
  }
  .callout.default {
    border: 1px solid var(--callout-default-border-color);
    background: var(--callout-default-background-color);
  }
  .callout.default > i {
    color: var(--callout-default-icon-color);
  }
  .callout.info {
    border: 1px solid var(--callout-info-border-color);
    background: var(--callout-info-background-color);
  }
  .callout.info > i {
    color: var(--callout-info-icon-color);
  }
  .callout.warning {
    border: 1px solid var(--callout-warning-border-color);
    background: var(--callout-warning-background-color);
  }
  .callout.warning > i {
    color: var(--callout-warning-icon-color);
  }
  .callout.error {
    flex-wrap: nowrap;
    border: 1px solid var(--callout-error-border-color);
    background: var(--callout-error-background-color);
  }
  .callout.error > i {
    color: var(--callout-error-icon-color);
  }
  .callout.success {
    border: 1px solid var(--callout-success-border-color);
    background: var(--callout-success-background-color);
  }
  .callout.success > i {
    color: var(--callout-success-icon-color);
  }
  .callout.paused {
    border: 1px solid var(--callout-paused-border-color);
    background: var(--callout-paused-background-color);
  }
  .callout.paused > i {
    color: var(--callout-paused-icon-color);
  }
  .callout > i {
    font-size: 18px;
  }
  .callout > p {
    flex: 1;
    min-width: 0;
  }
  .callout p {
    color: var(--callout-text-color);
  }
  .callout dl {
    margin: 0;
  }
  .callout .content {
    flex-basis: 100%;
    gap: 10px;
    display: flex;
    flex-direction: column;
  }
  .callout.prominent {
    flex-wrap: nowrap;
    align-items: center;
  }
  .callout.prominent > i {
    font-size: 36px;
    opacity: 0.3;
  }
  .callout.prominent > p,
  .callout.prominent > .content {
    flex: 1;
  }
  .callout.prominent.icon-top {
    align-items: flex-start;
  }
  .callout.prominent.icon-top > i {
    margin-top: 15px;
  }
  .callout .actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .callout .actions button {
    flex-basis: 0;
  }
  .callout.compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--gutter-sm);
  }
  .callout.compact > i {
    margin-top: var(--gutter-xxs);
    color: var(--callout-info-muted-icon-color);
  }
  .callout.compact .content {
    min-width: 0;
  }
  .callout.compact .actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .callout.compact .actions button {
    flex-basis: auto;
  }
  .callout .callout-title {
    flex-basis: 100%;
    width: 100%;
  }
}
@layer theme {
  .filter-select {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
  }
  .filter-select od-select {
    width: 190px;
  }
}
@layer theme {
  .callout:has(.sending-callout-actions).shake {
    animation: shake 0.4s ease-in-out;
  }
  .callout:has(.sending-callout-actions) > .content {
    align-items: flex-start;
    text-align: left;
  }
  .callout:has(.sending-callout-actions) .sending-callout-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  .callout:has(.sending-callout-actions) .sending-callout-actions button {
    white-space: nowrap;
  }
  .callout:has(.sending-callout-actions) .recheck-swap {
    display: inline-grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: center;
  }
  .callout:has(.sending-callout-actions) .recheck-swap > * {
    grid-area: stack;
  }
  .callout:has(.sending-callout-actions) .recheck-swap > i {
    opacity: 0;
    animation-name: none;
  }
  .callout:has(.sending-callout-actions) [data-recheck-sending].is-checking .recheck-swap > span {
    opacity: 0;
  }
  .callout:has(.sending-callout-actions) [data-recheck-sending].is-checking .recheck-swap > i {
    opacity: 1;
    animation-name: fa-spin;
    --fa-animation-duration: 800ms;
  }
}
@layer override {
  button.resend-waiting {
    color: inherit;
    cursor: default;
    text-decoration: none;
  }
}
@layer theme {
  .integration-actions {
    max-width: var(--integration-settings-max-width);
  }
  .action-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--integration-action-border-color);
    border-radius: var(--border-radius);
    background: var(--integration-action-background-color);
    overflow: hidden;
  }
  .action-list .action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
  }
  .action-list .action-item + .action-item {
    border-top: 1px solid var(--integration-action-divider-color);
  }
  @media screen and (width <= 576px) {
    .action-list .action-item {
      flex-wrap: wrap;
    }
    .action-list .action-item .button {
      max-width: 100%;
      width: 100%;
      text-align: center;
    }
  }
  .action-list .action-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    font-size: 15px;
  }
  .action-list .action-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .action-list .action-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--default-text-primary-color);
  }
  .action-icon--gray {
    background: var(--integration-action-gray-background);
    color: var(--integration-action-gray-color);
  }
  .action-icon--red {
    background: var(--integration-action-red-background);
    color: var(--integration-action-red-color);
  }
  .action-icon--orange {
    background: var(--integration-action-orange-background);
    color: var(--integration-action-orange-color);
  }
  .action-icon--brown {
    background: var(--integration-action-brown-background);
    color: var(--integration-action-brown-color);
  }
  .action-icon--yellow {
    background: var(--integration-action-yellow-background);
    color: var(--integration-action-yellow-color);
  }
  .action-icon--lime {
    background: var(--integration-action-lime-background);
    color: var(--integration-action-lime-color);
  }
  .action-icon--green {
    background: var(--integration-action-green-background);
    color: var(--integration-action-green-color);
  }
  .action-icon--teal {
    background: var(--integration-action-teal-background);
    color: var(--integration-action-teal-color);
  }
  .action-icon--blue {
    background: var(--integration-action-blue-background);
    color: var(--integration-action-blue-color);
  }
  .action-icon--azure {
    background: var(--integration-action-azure-background);
    color: var(--integration-action-azure-color);
  }
  .action-icon--purple {
    background: var(--integration-action-purple-background);
    color: var(--integration-action-purple-color);
  }
  .action-icon--pink {
    background: var(--integration-action-pink-background);
    color: var(--integration-action-pink-color);
  }
}
@layer theme {
  .settings-rows-section {
    max-width: var(--integration-settings-max-width);
  }
  .settings-rows {
    border: 1px solid var(--settings-row-border-color);
    border-radius: var(--border-radius);
    background: var(--settings-row-background-color);
  }
  .settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gutter-sm) 32px;
    align-items: center;
    padding: 14px 16px;
  }
  .settings-row + .settings-row {
    border-top: 1px solid var(--settings-row-divider-color);
  }
  .settings-row[hidden] {
    display: none;
  }
  .settings-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .settings-row__text .legend {
    max-width: 64ch;
    margin: 0;
    padding: 0;
  }
  .settings-row__label {
    font-weight: 500;
  }
  .settings-row__control {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gutter-xxs);
  }
  .settings-row__control--select, .settings-row__control--searchableSelect, .settings-row__control--searchableSelectInput, .settings-row__control--text, .settings-row__control--addonText, .settings-row__control--storeDate, .settings-row__control--remoteSearchableSelect {
    width: 260px;
    align-items: stretch;
  }
  .settings-row__control--storeDate .date-field-container {
    max-width: none;
  }
  @media screen and (width > 576px) {
    .settings-row__control--segmentedWithNested .segmented-with-nested__nested {
      margin-left: auto;
    }
  }
  .settings-row__control--segmentedWithNested .segmented-with-nested__nested label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .settings-row__control--intervalToggle {
    display: contents;
  }
  .settings-row__control--intervalToggle .setting-toggle {
    display: contents;
  }
  .settings-row__control--intervalToggle .toggle-field {
    grid-area: 1/1;
  }
  .settings-row__control--intervalToggle .setting-toggle__detail,
  .settings-row__control--intervalToggle > .invalid-feedback {
    grid-column: 2;
  }
  .settings-row__control--intervalToggle > .invalid-feedback,
  .settings-row__control--intervalToggle .select-container {
    width: 260px;
    max-width: 100%;
  }
  .settings-row__control--intervalToggle .setting-toggle__detail:has(.select-container) {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-xxs);
  }
  @media screen and (width > 576px) {
    .settings-row__control--intervalToggle .setting-toggle__detail:has(.select-container) {
      grid-area: 1/3;
      align-self: center;
      margin-left: var(--gutter-md);
    }
    .settings-row__control--intervalToggle:has(.select-container) > .invalid-feedback {
      grid-column: 3;
    }
  }
  .settings-row--revealed {
    padding-left: calc(16px + var(--gutter-md));
  }
  .settings-row--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-row--wide .settings-row__control {
    justify-self: stretch;
    align-items: stretch;
  }
  @media screen and (width <= 576px) {
    .settings-row {
      grid-template-columns: minmax(0, 1fr);
    }
    .settings-row .settings-row__control {
      justify-self: stretch;
      align-items: flex-start;
      width: auto;
    }
  }
  .settings-row--toggle {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--gutter-sm);
    align-items: start;
  }
  .settings-row--toggle .settings-row__text {
    grid-area: 1/2;
  }
  .settings-row--toggle .settings-row__text .legend {
    max-width: none;
  }
  .settings-row--toggle .settings-row__control {
    grid-area: 1/1;
    justify-self: start;
  }
  .settings-row--toggle .toggle-field {
    height: 1lh;
  }
  @media screen and (width > 576px) {
    .settings-row--toggle:has(.settings-row__control--intervalToggle .select-container) {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }
  }
}
@layer theme {
  .email-preview {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    overflow: hidden;
  }
  .email-preview-stamp {
    position: absolute;
    top: var(--gutter-xs);
    right: var(--gutter-xs);
    font-size: 50px;
    color: var(--default-text-primary-color);
    opacity: 0.14;
    pointer-events: none;
  }
  .email-preview-headers {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    margin: 0;
    padding: var(--gutter-xs);
    border-bottom: 1px solid var(--form-field-border-default-color);
    background-color: var(--email-preview-headers-background-color);
  }
  .email-preview-header {
    display: flex;
    gap: var(--gutter-xs);
    min-width: 0;
    font-size: 0.9rem;
  }
  .email-preview-header dt {
    flex: 0 0 64px;
    color: var(--default-text-secondary-color);
    font-weight: 600;
  }
  .email-preview-header dd {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .email-preview-header--wrap dd {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .email-preview-muted {
    color: var(--default-text-secondary-color);
  }
  .email-preview-tag {
    display: inline-block;
    margin-left: var(--gutter-xxs);
    padding: 0 6px;
    border-radius: 4px;
    background-color: var(--default-text-secondary-color);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .email-preview-error {
    color: var(--callout-error-icon-color);
  }
  .email-preview-body {
    flex: 1 1 auto;
    min-height: 320px;
    background-color: var(--color-white);
    overflow: auto;
  }
  .email-preview-body .preview-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
  }
  .email-preview-body .callout,
  .email-preview-body .legend {
    margin: var(--gutter-xs);
  }
  .email-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-xs);
    padding: var(--gutter-lg, 40px);
    text-align: center;
  }
  .email-preview-empty i {
    font-size: 2rem;
    color: var(--default-text-secondary-color);
    opacity: 0.5;
  }
  .email-preview-empty p {
    margin: 0;
  }
}
@layer ui {
  .segmented-buttons {
    display: flex;
  }
  .segmented-buttons > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0 var(--gutter-sm);
    border: 1px solid var(--form-field-border-default-color);
    border-radius: 0;
    background: var(--form-field-background-default-color);
    color: var(--form-radio-toggle-default-text-color);
    font-size: var(--font-size-sm);
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
  }
  .segmented-buttons > button:not(:first-child) {
    margin-left: -1px;
  }
  .segmented-buttons > button:first-child {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
  }
  .segmented-buttons > button:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
  }
  .segmented-buttons > button[aria-pressed=true] {
    position: relative;
    z-index: 1;
    background: var(--form-radio-toggle-selected-background-color);
    border-color: var(--form-radio-toggle-selected-border-color);
    color: var(--form-radio-toggle-selected-text-color);
  }
  @media screen and (hover: hover) {
    .segmented-buttons > button:hover:not([aria-pressed=true]) {
      background: var(--form-radio-toggle-hover-color);
    }
  }
}
@layer theme {
  .simple-layout:has(.template-editor) {
    display: flex;
    flex-direction: column;
    min-height: calc(100% - var(--gutter-md));
  }
  @media screen and (width <= 576px) {
    .simple-layout:has(.template-editor) {
      min-height: 100%;
    }
  }
  .simple-layout:has(.template-editor) > :has(.template-editor) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  form:has(> .template-editor) {
    --template-pane-gap: calc(var(--gutter-lg) / 2);
    flex: 1 1 auto;
  }
  .template-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--gutter-xs);
    min-width: 0;
  }
  .template-editor .template-content-label {
    flex: 1 1 auto;
  }
  .template-editor .template-content-header {
    flex-wrap: wrap;
  }
  .template-editor .preview-callout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--gutter-xs);
    min-height: 0;
    padding: var(--gutter-md);
    border: 1px solid var(--callout-info-border-color);
    border-radius: var(--border-radius);
    background-color: var(--callout-info-background-color);
  }
  .template-editor :has(> .preview-iframe) {
    position: relative;
    overflow: hidden;
  }
  .template-editor [data-preview-min-width] .preview-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--preview-scale, 1));
    height: calc(100% / var(--preview-scale, 1));
    min-height: 0;
    transform: scale(var(--preview-scale, 1));
    transform-origin: top left;
  }
  .template-editor-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gutter-md);
    align-items: start;
  }
  .template-editor-fields > label {
    min-width: 0;
  }
  .template-content-title {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
  }
  .template-content-title > .twig-builder-btn {
    position: static;
    margin: 0;
  }
  .template-content-tools {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .template-content-tools [data-twig-toolbar-slot]:not(:has(.twig-builder-btn)) {
    display: none;
  }
  .template-editor-panes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    flex: 1 1 0;
    gap: var(--template-pane-gap);
    min-height: 480px;
    contain: size;
  }
  .template-editor-pane,
  .preview-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }
  .template-editor-pane {
    gap: var(--gutter-xxs);
  }
  .template-editor-pane .line-numbered-editor {
    min-height: 0;
    resize: none;
  }
  .template-editor-pane .line-numbered-editor .cm-editor .cm-scroller {
    max-height: none;
  }
  .template-editor[data-view-mode=editor] .preview-pane {
    display: none;
  }
  .template-editor[data-view-mode=preview] .template-editor-pane {
    display: none;
  }
  .template-editor[data-view-mode=preview] [data-format-code] {
    visibility: hidden;
  }
  form:has(> .template-editor[data-view-mode=preview]) > .form-actions,
  form:has(> .template-editor[data-view-mode=preview]) > .template-editor-footer > .form-actions {
    display: none;
  }
  @media screen and (width <= 1350px) {
    .template-view-mode [data-view-mode-option=split] {
      display: none;
    }
    .template-editor[data-view-mode=split] .preview-pane {
      display: none;
    }
    .template-editor[data-view-mode=split] [data-view-mode-option=editor] {
      position: relative;
      z-index: 1;
      background: var(--form-radio-toggle-selected-background-color);
      border-color: var(--form-radio-toggle-selected-border-color);
      color: var(--form-radio-toggle-selected-text-color);
    }
  }
}
@layer theme {
  html:not(.anonymous) body:has(#banner-container .banner) {
    --banner-height: 40px;
  }
  html:not(.anonymous) body:has(#banner-container .banner + .banner) {
    --banner-height: 80px;
  }
  #banner-container {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: var(--index-low);
  }
  .banner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 0.25rem 1rem;
    font-weight: 500;
  }
  @media screen and (width <= 576px) {
    .banner {
      text-align: center;
    }
    .banner > p > i {
      display: none;
    }
  }
  .banner > .close {
    cursor: pointer;
  }
  .banner.hide {
    display: none;
  }
  .banner.success {
    background-color: var(--banner-success-background-color);
  }
  .banner.success > p > i {
    color: var(--banner-success-icon-color);
  }
  .banner.success > p > strong {
    color: var(--banner-success-title-color);
  }
  .banner.info {
    background-color: var(--banner-info-background-color);
  }
  .banner.info > p > i {
    color: var(--banner-info-icon-color);
  }
  .banner.info > p > strong {
    color: var(--banner-info-title-color);
  }
  .banner.warning {
    background: var(--banner-warning-background-color);
  }
  .banner.warning > p > i {
    color: var(--banner-warning-icon-color);
  }
  .banner.warning > p > strong {
    color: var(--banner-warning-title-color);
  }
  .banner.error {
    background: var(--banner-error-background-color);
  }
  .banner.error > p > i {
    color: var(--banner-error-icon-color);
  }
  .banner.error > p > strong {
    color: var(--banner-error-title-color);
  }
  .banner.error > p > .error-highlight {
    color: var(--banner-error-text-color);
  }
  .banner > p {
    color: var(--banner-text-color);
    flex: 1;
    text-align: center;
  }
  .banner > p > strong {
    color: var(--banner-title-color);
  }
  .banner:last-child {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .banner .link-button {
    background: none;
    border: none;
    color: var(--default-link-color);
    cursor: pointer;
    font: inherit;
    padding: 0;
  }
}
@layer theme {
  .notification-bell {
    all: unset;
    position: relative;
    display: inline-flex;
    cursor: pointer;
    color: inherit;
  }
  .notification-badge {
    position: absolute;
    top: -15px;
    right: -5px;
    background-color: var(--notification-badge-background-color);
    color: var(--notification-badge-text-color);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .notification-badge:empty {
    display: none;
  }
  .notification-row.unread {
    background-color: var(--notification-row-unread-background-color);
  }
  .notification-row.read {
    background-color: var(--notification-row-read-background-color);
  }
  .notification-bell-container {
    align-self: stretch;
    display: flex;
    align-items: center;
  }
  .notification-bell-container .notification-popup {
    width: 360px;
    color: var(--notification-popup-text-color);
  }
  .notification-bell-container .notification-popup li {
    padding: 0;
    cursor: default;
  }
  .notification-bell-container .notification-popup li:hover {
    background-color: transparent;
  }
  .notification-bell-container .notification-popup .notification-popup-header {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--content-header-border-color);
  }
  .notification-bell-container .notification-popup .notification-popup-header strong {
    font-size: 1rem;
  }
  .notification-bell-container .notification-popup .notification-popup-item {
    padding: 12px 20px;
    cursor: default;
  }
  .notification-bell-container .notification-popup .notification-popup-item:hover {
    background-color: var(--form-select-option-hover);
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-right {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-right time {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--notification-popup-secondary-text-color);
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-title-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-title-line i {
    font-size: 1rem;
    flex-shrink: 0;
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-title {
    all: unset;
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-title:hover {
    text-decoration: underline;
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-content {
    grid-column: 1/-1;
    font-size: 0.8rem;
    color: var(--notification-popup-secondary-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .notification-bell-container .notification-popup .notification-popup-item .notification-popup-content a {
    display: inline;
    color: var(--notification-popup-link-color);
    text-decoration: underline;
    cursor: pointer;
  }
  .notification-bell-container .notification-popup .notification-popup-item.success .notification-popup-title-line i, .notification-bell-container .notification-popup .notification-popup-item.success .notification-popup-title-line .notification-popup-title {
    color: var(--toast-success-title-color);
  }
  .notification-bell-container .notification-popup .notification-popup-item.info .notification-popup-title-line i, .notification-bell-container .notification-popup .notification-popup-item.info .notification-popup-title-line .notification-popup-title {
    color: var(--toast-info-title-color);
  }
  .notification-bell-container .notification-popup .notification-popup-item.warning .notification-popup-title-line i, .notification-bell-container .notification-popup .notification-popup-item.warning .notification-popup-title-line .notification-popup-title {
    color: var(--toast-warning-title-color);
  }
  .notification-bell-container .notification-popup .notification-popup-item.error .notification-popup-title-line i, .notification-bell-container .notification-popup .notification-popup-item.error .notification-popup-title-line .notification-popup-title {
    color: var(--toast-error-title-color);
  }
  .notification-bell-container .notification-popup .notification-popup-footer {
    border-top: 1px solid var(--content-header-border-color);
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
  }
  .notification-bell-container .notification-popup .notification-popup-footer a, .notification-bell-container .notification-popup .notification-popup-footer button {
    all: unset;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--notification-popup-link-color);
    cursor: pointer;
  }
  .notification-bell-container .notification-popup .notification-popup-footer a:hover, .notification-bell-container .notification-popup .notification-popup-footer button:hover {
    text-decoration: underline;
  }
  @media screen and (width <= 576px) {
    .notification-row td.long-string {
      display: block;
    }
  }
  .notification-title {
    font-weight: 500;
  }
  .notification-title.success {
    color: var(--toast-success-title-color);
  }
  .notification-title.info {
    color: var(--toast-info-title-color);
  }
  .notification-title.warning {
    color: var(--toast-warning-title-color);
  }
  .notification-title.error {
    color: var(--toast-error-title-color);
  }
}
@layer theme {
  .badge {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    line-height: 15px;
    padding: 2px 7px;
    margin: 0 2px;
    border-radius: var(--border-radius);
    font-size: var(--badge-font-size);
  }
  .badge > i {
    line-height: inherit;
  }
  .badge.default {
    background-color: var(--badge-default-background-color);
  }
  .badge.default > i {
    color: var(--badge-default-icon-color);
  }
  .badge.success {
    background-color: var(--badge-success-background-color);
  }
  .badge.success > i {
    color: var(--badge-success-icon-color);
  }
  .badge.info {
    background-color: var(--badge-info-background-color);
  }
  .badge.info > i {
    color: var(--badge-info-icon-color);
  }
  .badge.warning {
    background: var(--badge-warning-background-color);
  }
  .badge.warning > i {
    color: var(--badge-warning-icon-color);
  }
  .badge.error {
    background: var(--badge-error-background-color);
  }
  .badge.error > i {
    color: var(--badge-error-icon-color);
  }
  .badge.muted {
    background-color: var(--badge-muted-background-color);
    color: var(--badge-muted-color);
  }
  .badge.active {
    background-color: var(--badge-active-background-color);
    color: var(--badge-active-color);
  }
  .badge.active > i {
    color: var(--badge-active-icon-color);
  }
  .badge.danger {
    background-color: var(--badge-danger-background-color);
    color: var(--badge-danger-color);
  }
}
@layer theme {
  .section-card {
    border: 1px solid var(--color-divider);
    border-radius: var(--border-radius);
    background: var(--color-white);
    overflow: hidden;
    gap: 0;
    padding: 0;
  }
  .section-card:has(od-select.active), .section-card:has(ul.input-suggestions) {
    overflow: visible;
  }
  .section-card table {
    width: 100%;
    margin: 0;
  }
  .section-card form {
    gap: 0;
  }
  .section-card tbody tr:last-child {
    border-bottom: none;
  }
  .section-card thead th {
    font-family: var(--font-family-main);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--default-text-secondary-color);
    padding: 10px 8px 6px;
  }
  .section-card thead th:first-child {
    padding-left: 16px;
  }
  .section-card thead th:last-child {
    padding-right: 16px;
  }
  .section-card td {
    padding: 6px 8px;
  }
  .section-card td:first-child {
    padding-left: 16px;
  }
  .section-card td:last-child {
    padding-right: 16px;
  }
  .section-card .section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--color-divider);
    background: var(--tasks-card-head-background);
  }
  .section-card .section-head h2 {
    font-size: 14px;
    margin: 0;
  }
  .section-card .section-head .section-head-action {
    margin-left: auto;
  }
  .section-card .section-head .section-head-intro {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .section-card .section-head .section-head-intro .legend {
    margin: 0;
  }
  .section-card .count-chip {
    font-size: var(--badge-font-size);
    font-variant-numeric: tabular-nums;
    color: var(--task-group-count-color);
    background: var(--color-concrete);
    border-radius: 999px;
    padding: 1px 8px;
  }
}
@layer theme {
  .group-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-top: 1px solid var(--group-pager-divider-color);
  }
  @media screen and (width <= 576px) {
    .group-pager {
      flex-wrap: wrap;
    }
  }
  .group-pager .pager-range {
    margin-right: auto;
    font-size: var(--font-size-sm);
    color: var(--group-pager-text-color);
    font-variant-numeric: tabular-nums;
  }
  .group-pager .pager-number {
    min-width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--group-pager-text-color);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }
  .group-pager .pager-number:hover {
    background: var(--group-pager-hover-background);
  }
  .group-pager .pager-number.active {
    background: var(--group-pager-active-background);
    color: var(--group-pager-active-color);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--group-pager-active-border-color);
  }
  .group-pager .pager-number.htmx-request {
    font-size: 0;
  }
  .group-pager .pager-number.htmx-request .button-spinner i {
    font-size: var(--font-size-sm);
  }
  .group-pager .group-pager-jump {
    display: inline-flex;
  }
  .group-pager .group-pager-jump input {
    width: 52px;
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--group-pager-divider-color);
    border-radius: var(--border-radius);
    font-variant-numeric: tabular-nums;
  }
  .group-pager .group-pager-jump input.error {
    border-color: var(--group-pager-error-color);
  }
}
@layer theme {
  @keyframes row-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes row-hide {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .hidden-row {
    display: none;
  }
  .revealing {
    animation: row-reveal 150ms ease-out;
  }
  .hiding {
    animation: row-hide 100ms ease-in;
  }
}
@layer theme {
  .order-history th, .order-history td,
  .product-history th,
  .product-history td {
    padding-left: 0;
    padding-right: 0;
  }
  .order-history tbody tr:last-child,
  .product-history tbody tr:last-child {
    border-bottom: none;
  }
  .order-history .history-source,
  .product-history .history-source {
    padding-right: var(--gutter-md);
  }
  @media screen and (hover: hover) {
    .order-history tbody tr:hover,
    .product-history tbody tr:hover {
      --color-background: var(--color-white);
    }
  }
  .history-source {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 215px;
    white-space: nowrap;
  }
  .history-source span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .history-source.is-user i {
    color: var(--history-source-user-icon-color);
  }
  .history-source.is-system i {
    color: var(--history-source-system-icon-color);
  }
  .history-overflow-toggle td {
    text-align: center;
  }
  .history-overflow-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .history-overflow-toggle .toggle-hide {
    display: none;
  }
  .history-overflow-toggle [data-expanded] .toggle-more {
    display: none;
  }
  .history-overflow-toggle [data-expanded] .toggle-hide {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
}
@layer theme {
  .integration-field-summary {
    --panel-summary-color: var(--target-color);
  }
  .editable-integration-fields {
    grid-template-columns: minmax(100px, 30%) minmax(0, 1fr);
  }
  .editable-integration-fields dt {
    overflow-wrap: anywhere;
  }
  .editable-integration-fields dd {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--gutter-xxs);
  }
  .editable-integration-fields dd.hidden-row {
    display: none;
  }
  .editable-integration-fields dd .integration-field-row-lock {
    color: var(--default-text-secondary-color);
    flex: 0 0 auto;
  }
  .editable-integration-fields dd .integration-field-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .editable-integration-fields dd .integration-field-row-actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--gutter-xxs);
  }
  @media screen and (hover: hover) {
    .editable-integration-fields dd .integration-field-row-actions {
      opacity: 0;
    }
    .editable-integration-fields dd:hover .integration-field-row-actions,
    .editable-integration-fields dd .integration-field-row-actions:focus-within,
    .editable-integration-fields dd .integration-field-row-actions:has(.confirming) {
      opacity: 1;
    }
  }
  .integration-field-note {
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
  }
  .integration-field-container {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  button.text.inline.integration-field-manage-fields {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--gutter-xxs);
    padding: 12px 16px;
    border-radius: var(--border-radius);
    background-color: var(--products-custom-card-background-color);
    width: 100%;
    max-width: 100%;
  }
  button.text.inline.integration-field-manage-fields i {
    color: var(--color-gray);
  }
  button.text.inline.integration-field-manage-fields:hover i {
    color: var(--form-button-text-hover-text-color);
  }
  .integration-field-panel .integration-field-panel-editor button,
  .integration-field-panel .integration-field-panel-groups button {
    width: auto;
    max-width: none;
    display: inline-flex;
  }
  .integration-field-panel .integration-field-panel-groups {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    margin-top: var(--gutter-sm);
  }
  .integration-field-panel-form {
    gap: var(--gutter-xs);
  }
  .integration-field-panel-form label {
    display: block;
    margin-bottom: var(--gutter-xxs);
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .integration-field-panel-form .integration-field-selector {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .integration-field-panel-form .integration-field-selector-field {
    position: relative;
  }
  .integration-field-panel-form .integration-field-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .integration-field-panel-form .integration-field-key-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .integration-field-panel-form .integration-field-key-row > .integration-field-selector-field {
    flex: 1 1 auto;
    min-width: 0;
  }
  .integration-field-panel-form .integration-field-key-parameters {
    display: flex;
    flex: 0 0 100%;
    gap: 16px;
    margin-top: 8px;
  }
  .integration-field-panel-form .integration-field-parameter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
  }
  .integration-field-panel-form .integration-field-parameter input,
  .integration-field-panel-form .integration-field-parameter od-select {
    width: 13ch;
  }
  .integration-field-panel-form .integration-field-parameter.is-text {
    flex: 1;
    margin-bottom: 0;
    font-size: inherit;
  }
  .integration-field-panel-form .integration-field-parameter.is-text input {
    flex: 1;
    width: auto;
  }
  .integration-field-panel-form .integration-field-editing {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .integration-field-panel-form .integration-field-editing-label {
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .integration-field-panel-form .integration-field-editing-field {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    font-weight: 500;
  }
  .integration-field-panel-form .integration-field-editing-field img.icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
  }
  .integration-field-panel-form .integration-field-value-field {
    interpolate-size: allow-keywords;
    transition: height 300ms var(--ease-in-out-expo), opacity 300ms var(--ease-in-out-expo), overflow 0s 300ms allow-discrete;
  }
  @starting-style {
    .integration-field-panel-form .integration-field-value-field {
      height: 0;
      opacity: 0;
      overflow: hidden;
    }
  }
  .integration-field-panel-form-actions {
    display: flex;
    gap: var(--gutter-xs);
  }
}
@layer theme {
  @keyframes inline-confirm-reveal {
    from {
      opacity: 0;
      transform: translateX(6px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  [data-inline-confirm].confirming {
    white-space: nowrap;
  }
  [data-inline-confirm].confirming::after {
    content: attr(data-inline-confirm-text);
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
    animation: inline-confirm-reveal 150ms ease-out;
  }
  [data-inline-confirm].confirming [data-inline-confirm-hide] {
    display: none;
  }
  [data-inline-confirm].confirming:has([data-inline-confirm-hide])::after {
    margin-left: 0;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-inline-confirm].confirming::after {
      animation: none;
    }
  }
}
@layer theme {
  .fulfillment-group {
    border: 0.5px solid var(--color-divider);
    border-radius: var(--border-radius);
    background: var(--content-background-color-desktop);
  }
  .fulfillment-group.unfulfilled-group .fulfillment-group-header {
    background: var(--order-details-unfulfilled-header-background);
  }
  .fulfillment-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--color-divider);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: var(--order-details-fulfillment-header-background);
  }
  .fulfillment-group-title {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    font-size: 13px;
    font-weight: 500;
  }
  .fulfillment-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }
  .fulfillment-reference {
    font-weight: 400;
    color: var(--color-pale-sky);
  }
  .fulfillment-status {
    font-weight: 400;
    font-size: var(--font-size-sm);
    color: var(--order-details-fulfillment-status-color);
  }
  .fulfillment-cancellation-pending {
    color: var(--icon-warning-color);
  }
  .fulfillment-date {
    font-size: var(--font-size-sm);
    color: var(--color-pale-sky);
  }
  .fulfillment-group-actions {
    display: flex;
    align-items: center;
  }
  .fulfillment-group-actions .dropdown-trigger {
    padding-right: 0;
  }
  .fulfillment-group-actions .dropdown-menu a:hover .fa-ban {
    animation: fa-jello var(--fa-animation-duration, 0.9s) var(--fa-animation-timing, ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .fulfillment-group-actions .dropdown-menu a:hover .fa-ban {
      animation: none;
    }
  }
  .fulfillment-shipments {
    padding: 0 16px;
    border-top: 0.5px solid var(--color-divider);
    font-size: 13px;
  }
  .shipments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-pale-sky);
  }
  .shipments-header a {
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--font-size-sm);
    color: var(--form-button-text-default-text-color);
  }
  @media screen and (hover: hover) {
    .shipments-header a:hover {
      color: var(--form-button-text-hover-text-color);
    }
  }
  .shipments-header a:active {
    color: var(--form-button-text-active-text-color);
  }
  .shipments-empty {
    padding: 4px 0 12px;
    font-size: var(--font-size-sm);
    color: var(--color-pale-sky);
  }
  .shipment:last-child {
    padding-bottom: 12px;
  }
  .shipment-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-sm);
    padding: 6px 0;
  }
  .shipment-timeline {
    padding: 8px 0 4px var(--gutter-sm);
  }
  .shipment-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .shipment-info .shipment-edit {
    color: var(--color-bondi-blue);
    overflow-wrap: anywhere;
  }
  .shipment-integration-fields:last-child .shipment-integration-field-group:last-child {
    padding-bottom: 12px;
  }
  .shipment-integration-field-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--gutter-sm);
    padding-bottom: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-pale-sky);
  }
  .shipment-integration-field-group img.icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
  }
  .shipment-carrier {
    font-weight: 500;
  }
  .shipment-track {
    margin-left: var(--gutter-xs);
    white-space: nowrap;
  }
  .shipment-date {
    font-size: var(--font-size-sm);
    color: var(--color-pale-sky);
    white-space: nowrap;
  }
  .shipment-label {
    color: var(--color-pale-sky);
    font-size: var(--font-size-sm);
  }
  .shipment-label:hover {
    color: var(--icon-info-color);
  }
  .shipment-actions {
    display: flex;
    gap: var(--gutter-xs);
  }
  .shipment-actions a {
    color: var(--color-pale-sky);
    font-size: var(--font-size-sm);
  }
  .shipment-actions a.shipment-void:hover, .shipment-actions a.shipment-delete:hover {
    color: var(--delete-action-hover-color);
  }
  .fulfillment-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    border-bottom: 0.5px solid var(--color-divider);
  }
  .fulfillment-group-item:last-child {
    border-bottom: none;
  }
  .item-thumbnail {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--color-concrete);
    object-fit: cover;
    flex-shrink: 0;
  }
  .item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
  }
  .item-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-attrs {
    font-size: var(--font-size-sm);
    color: var(--color-pale-sky);
  }
  .timeline-toggle,
  .sent-lines-toggle {
    padding: 8px 16px;
    border-top: 0.5px solid var(--color-divider);
  }
  .timeline-toggle a,
  .sent-lines-toggle a,
  .shipment-tracking-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-pale-sky);
  }
  .timeline-toggle a .fa-chevron-right,
  .sent-lines-toggle a .fa-chevron-right,
  .shipment-tracking-toggle .fa-chevron-right {
    font-size: 10px;
    transition: transform 150ms ease;
  }
  .timeline-toggle a[data-expanded] .fa-chevron-right,
  .sent-lines-toggle a[data-expanded] .fa-chevron-right,
  .shipment-tracking-toggle[data-expanded] .fa-chevron-right {
    transform: rotate(90deg);
  }
  .fulfillment-timeline,
  .fulfillment-sent-lines {
    padding: 12px 16px;
    border-top: 0.5px solid var(--color-divider);
  }
  .sent-line-group {
    padding-bottom: var(--gutter-sm);
  }
  .sent-line-group:last-child {
    padding-bottom: 0;
  }
  .sent-line-parent {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gutter-xs);
    font-size: 13px;
    font-weight: 500;
  }
  .sent-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gutter-xs);
    padding: 2px 0 0 var(--gutter-md);
    font-size: var(--font-size-sm);
  }
  .sent-line-name,
  .sent-line-label,
  .sent-line-quantity,
  .sent-line-shipped {
    font-weight: 400;
    color: var(--color-pale-sky);
  }
  .timeline-event {
    display: flex;
    align-items: flex-start;
    gap: var(--gutter-sm);
    position: relative;
    padding-bottom: 16px;
  }
  .timeline-event:last-child {
    padding-bottom: 0;
  }
  .timeline-event:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--color-divider);
  }
  .timeline-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--order-details-fulfillment-timeline-dot-color);
  }
  .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .timeline-status {
    font-size: 13px;
    font-weight: 500;
  }
  .timeline-description {
    font-size: var(--font-size-sm);
  }
  .timeline-date {
    font-size: var(--font-size-sm);
    color: var(--color-pale-sky);
  }
  .fulfillment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--order-details-fulfillment-actions-background);
    border-top: 0.5px solid var(--color-divider);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    font-size: 13px;
  }
  .fulfillment-actions span {
    color: var(--order-details-fulfillment-actions-text);
  }
  .fulfillment-actions a {
    color: var(--order-details-fulfillment-actions-link);
    font-weight: 500;
  }
  .fulfillment-actions .fulfill-selection {
    display: none;
  }
  .fulfillment-actions .visible .fulfill-selection {
    display: inline;
  }
  .fulfillment-actions [data-checkbox-group-context] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .fulfillment-actions .dropdown-container i, .fulfillment-actions .dropdown-container .integration-icon {
    width: 18px;
  }
  .fulfillment-actions .dropdown-container .integration-icon {
    height: 18px;
  }
}
@layer theme {
  .plan-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 7px;
    border-radius: var(--border-radius);
    line-height: 1;
    background-color: var(--plan-badge-default-background-color);
    color: var(--plan-badge-default-text-color);
  }
  .plan-badge.locked {
    background-color: var(--plan-badge-locked-background-color);
    color: var(--plan-badge-locked-text-color);
  }
  .plan-badge.child {
    background-color: var(--plan-badge-child-background-color);
    color: var(--plan-badge-child-text-color);
  }
  .plan-badge.starter, .plan-badge.pro, .plan-badge.plus {
    background-color: var(--plan-badge-paid-background-color);
    color: var(--plan-badge-paid-text-color);
  }
  .plan-badge.dev {
    background-color: var(--plan-badge-dev-background-color);
    color: var(--plan-badge-dev-text-color);
  }
  body > header .plan-badge {
    margin: -5px 0 0 8px;
  }
  body > header .plan-badge.starter, body > header .plan-badge.pro, body > header .plan-badge.plus {
    background-color: var(--plan-badge-paid-header-background-color);
  }
  @media screen and (hover: hover) {
    body > header a.plan-badge:hover.starter, body > header a.plan-badge:hover.pro, body > header a.plan-badge:hover.plus {
      background-color: var(--plan-badge-paid-header-hover-background-color);
    }
    body > header a.plan-badge:hover.dev {
      background-color: var(--plan-badge-dev-hover-background-color);
    }
  }
  .store-list .plan-badge {
    margin-left: var(--gutter-xxs);
  }
}
@layer ui {
  .admin-tools .admin-tools-search {
    display: block;
    position: relative;
    width: 280px;
  }
  .admin-tools .admin-tools-search i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--form-field-placeholder-default-color);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .admin-tools .admin-tools-search input[type=search] {
    padding-left: 34px;
  }
  @media screen and (width <= 576px) {
    .admin-tools .admin-tools-search {
      width: 100%;
    }
  }
  .admin-tools .admin-tools-band {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--default-text-secondary-color);
    margin: 0 0 var(--gutter-xs);
  }
  .admin-tools [data-pinned-section] + .admin-tools-panel,
  .admin-tools .admin-tools-panel + .admin-tools-panel {
    margin-top: var(--gutter-md);
  }
  .admin-tools [data-pinned-section][hidden] + .admin-tools-panel {
    margin-top: 0;
  }
  .admin-tools .admin-tools-no-store {
    color: var(--default-text-secondary-color);
    margin: 0;
  }
  .admin-tools .card .icon {
    color: var(--content-header-icon-color);
  }
  .admin-tools .card .tool-link {
    color: inherit;
  }
  .admin-tools .card .tool-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    content: "";
  }
  .admin-tools .card .tool-link:focus-visible::after {
    outline: 2px solid var(--form-field-border-active-color);
    outline-offset: 2px;
  }
  .admin-tools .card .tool-pin {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    border: none;
    background: none;
    padding: 4px;
    font-size: 15px;
    line-height: 1;
    color: var(--color-silver-sand);
    cursor: pointer;
  }
  .admin-tools .card .tool-pin[aria-pressed=true] {
    color: var(--color-tulip-tree);
  }
}
@layer theme {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gutter-md);
  }
  .card-grid .card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-divider);
    border-radius: 4px;
    padding: 16px;
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  .card-grid .card.warning {
    border-color: var(--card-warning-border-color);
    background-color: var(--card-warning-background-color);
  }
  .card-grid .card header {
    margin-bottom: var(--gutter-sm);
    border-bottom: 0 none;
  }
  .card-grid .card header h2:has(.icon) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    line-height: 1.2;
  }
  .card-grid .card header h2:has(.icon) img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: block;
  }
  .card-grid .card > .badge {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .card-grid .card ul {
    padding-left: 20px;
  }
  .card-grid .card ul li {
    list-style: disc;
    display: list-item;
  }
  .card-grid .card footer {
    display: flex;
    flex-direction: column;
    padding-top: var(--gutter-md);
    margin-top: auto;
  }
  .card-grid .card footer .actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .card-grid .card footer .info-text {
    font-size: var(--card-footer-info-text-font-size);
    color: var(--card-footer-info-text-color);
  }
  .card-grid .card footer .info-icon {
    position: absolute;
    bottom: 16px;
    right: 16px;
  }
  .card-grid .card footer .info-icon i {
    color: var(--card-footer-info-text-color);
  }
  [data-controller=card-filter] .card {
    transition: translate 0.15s var(--ease-out-expo), box-shadow 0.15s var(--ease-out-expo);
  }
  [data-controller=card-filter] .card:hover {
    translate: 0 -2px;
    box-shadow: 0 4px 10px var(--color-black-10);
  }
  [data-controller=card-filter] form.filters {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--gutter-md);
  }
  @media screen and (width <= 576px) {
    [data-controller=card-filter] form.filters {
      flex-direction: column;
    }
  }
  [data-controller=card-filter] form.filters input input[type=search], [data-controller=card-filter] form.filters input select, [data-controller=card-filter] form.filters .select-container input[type=search], [data-controller=card-filter] form.filters .select-container select {
    width: 100%;
  }
  @media screen and (width > 576px) {
    [data-controller=card-filter] form.filters input[type=search], [data-controller=card-filter] form.filters .select-container[type=search] {
      width: 350px;
    }
    [data-controller=card-filter] form.filters input.select-container, [data-controller=card-filter] form.filters .select-container.select-container {
      width: 200px;
    }
  }
}
@layer theme {
  .custom-card {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    background-color: var(--products-custom-card-background-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .custom-card h2:has(.icon) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .custom-card h2:has(.icon) img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: block;
  }
  .custom-card dl {
    margin: 0;
  }
  .custom-card dd {
    overflow-wrap: anywhere;
  }
  .custom-card > button i {
    color: var(--color-gray);
  }
  .custom-card > button.text:hover i {
    color: var(--form-button-text-hover-text-color);
  }
  .custom-card > button.text.inline {
    text-align: left;
  }
  .custom-card-row,
  .custom-card > button.text.inline,
  .alternate-sku-field-row,
  .alternate-sku-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 4px;
    align-items: center;
  }
  .custom-card-row .icon,
  .custom-card > button.text.inline .icon,
  .alternate-sku-field-row .icon,
  .alternate-sku-row .icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .custom-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .custom-card-actions .primary {
    white-space: nowrap;
  }
  .custom-card-actions .dirty-form-actions {
    display: contents;
  }
  .custom-card-actions .unsaved-indicator {
    order: 1;
    flex-basis: 100%;
  }
  .custom-card-note {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
  }
  .custom-card-note i {
    color: var(--color-gray);
  }
  details.custom-card {
    interpolate-size: allow-keywords;
    transition: gap 300ms var(--ease-in-out-expo);
  }
  details.custom-card:not([open]) {
    gap: 0;
  }
  details.custom-card summary {
    align-items: center;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid transparent;
    transition: padding-bottom 300ms var(--ease-in-out-expo), border-color 300ms var(--ease-in-out-expo);
  }
  details.custom-card summary::-webkit-details-marker {
    display: none;
  }
  details.custom-card summary .chevron {
    transition: transform 200ms var(--ease-in-out-expo);
  }
  details.custom-card[open] summary {
    padding-bottom: 8px;
    border-bottom-color: var(--color-iron);
  }
  details.custom-card[open] summary .chevron {
    transform: rotate(90deg);
  }
  details.custom-card::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 300ms var(--ease-in-out-expo), content-visibility 300ms allow-discrete;
  }
  details.custom-card[open]::details-content {
    block-size: auto;
  }
  .integration-field-overflow-toggle,
  .custom-fields-overflow-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .integration-field-overflow-toggle .toggle-more,
  .integration-field-overflow-toggle .toggle-hide,
  .custom-fields-overflow-toggle .toggle-more,
  .custom-fields-overflow-toggle .toggle-hide {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .integration-field-overflow-toggle .toggle-hide,
  .custom-fields-overflow-toggle .toggle-hide {
    display: none;
  }
  .integration-field-overflow-toggle[data-expanded] .toggle-more,
  .custom-fields-overflow-toggle[data-expanded] .toggle-more {
    display: none;
  }
  .integration-field-overflow-toggle[data-expanded] .toggle-hide,
  .custom-fields-overflow-toggle[data-expanded] .toggle-hide {
    display: inline-flex;
  }
}
@layer theme {
  .custom-fields-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .custom-fields-header {
    display: grid;
    grid-template-columns: 1fr 1fr 24px;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--sidepanel-text-secondary-color);
  }
  .custom-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr 24px;
    gap: 6px;
    align-items: start;
  }
  .custom-fields-row textarea {
    min-height: var(--form-control-height);
    resize: vertical;
    field-sizing: content;
  }
  .custom-fields-row-errors {
    grid-column: 1/-1;
  }
}
@layer theme {
  .alternate-sku-fields,
  .alternate-sku-list,
  .alternate-sku-generic-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .alternate-sku-list {
    margin-block: 1em;
  }
  .alternate-sku-field-row {
    grid-template-columns: 20px minmax(0, 1fr) 24px;
  }
  .alternate-sku-field-row input {
    width: 100%;
  }
  .alternate-sku-row-errors {
    grid-column: 2/-1;
  }
  .alternate-sku-generic-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 24px;
    gap: 6px;
    align-items: center;
  }
  .alternate-sku-generic-row .alternate-sku-row-errors {
    grid-column: 1/-1;
  }
  .alternate-sku-box {
    font-size: 18px;
    color: var(--default-text-secondary-color);
  }
  .alternate-skus-card [data-clear-field],
  .alternate-skus-card [data-remove-row],
  .alternate-skus-form [data-clear-field],
  .alternate-skus-form [data-remove-row],
  .custom-fields-row [data-clear-field],
  .custom-fields-row [data-remove-row] {
    padding: 0;
    min-height: auto;
    width: 24px;
    height: var(--form-control-height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--products-custom-card-tag-x-color);
    background: none;
    border: none;
    border-radius: var(--border-radius);
  }
  @media screen and (hover: hover) {
    .alternate-skus-card [data-clear-field]:hover,
    .alternate-skus-card [data-remove-row]:hover,
    .alternate-skus-form [data-clear-field]:hover,
    .alternate-skus-form [data-remove-row]:hover,
    .custom-fields-row [data-clear-field]:hover,
    .custom-fields-row [data-remove-row]:hover {
      background-color: var(--form-select-option-tag-hover-color);
      cursor: pointer;
    }
  }
  .alternate-skus-card .is-orphaned,
  .alternate-skus-form .is-orphaned,
  .custom-fields-row .is-orphaned {
    color: var(--default-text-secondary-color);
  }
  .alternate-skus-card .is-orphaned .icon,
  .alternate-skus-form .is-orphaned .icon,
  .custom-fields-row .is-orphaned .icon {
    opacity: 0.45;
  }
  .alternate-skus-card .is-orphaned span,
  .alternate-skus-form .is-orphaned span,
  .custom-fields-row .is-orphaned span {
    text-decoration: line-through;
  }
  .alternate-skus-card .is-orphaned input,
  .alternate-skus-form .is-orphaned input,
  .custom-fields-row .is-orphaned input {
    text-decoration: line-through;
    color: var(--default-text-secondary-color);
    background-color: var(--products-alternate-sku-disabled-background-color);
    pointer-events: none;
  }
}
@layer theme {
  .force-connect {
    margin-top: var(--gutter-md);
  }
  .force-connect form {
    margin-top: var(--gutter-md);
  }
}
@layer theme {
  .clampable-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clampable-toggle .toggle-hide {
    display: none;
  }
  .clampable.is-expanded .clampable-text {
    -webkit-line-clamp: unset;
  }
  .clampable.is-expanded .clampable-toggle .toggle-more {
    display: none;
  }
  .clampable.is-expanded .clampable-toggle .toggle-hide {
    display: inline;
  }
}
@layer theme {
  .labeled-list {
    padding-left: 20px;
  }
  .labeled-list li {
    display: list-item;
    list-style: disc;
    margin-bottom: 4px;
  }
  .labeled-list li .label {
    font-weight: bold;
  }
  .labeled-list.plain {
    padding-left: 0;
  }
  .labeled-list.plain li {
    list-style: none;
    margin-bottom: 0;
  }
  dl.labeled-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    padding-left: 0;
  }
  dl.labeled-list dt {
    font-weight: 500;
  }
  dl.labeled-list dd {
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }
}
@layer theme {
  .template-attachments ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-xs) var(--gutter-sm);
  }
  .template-attachments li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
}
@layer theme {
  .status-message.success {
    color: var(--status-message-success);
  }
  .status-message.warning {
    color: var(--status-message-warning);
  }
  .status-message.error {
    color: var(--status-message-error);
  }
  .status-message.waiting {
    color: var(--status-message-waiting);
  }
}
@layer ui {
  .pagination-footer:not(:has(.pagination-nav)) {
    display: none;
  }
  .pagination-footer {
    margin: var(--gutter-md) var(--gutter-md) 0;
    padding-bottom: var(--gutter-md);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pagination-footer .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
  }
  .pagination-footer .pagination-simple {
    width: 100%;
  }
  .pagination-footer .pagination-simple .previous {
    margin-right: auto;
  }
  .pagination-footer .pagination-simple .next {
    margin-left: auto;
  }
  .pagination-footer .page-link {
    color: var(--pagination-text-color);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    padding: 2px 6px;
    border: 1px solid transparent;
  }
  @media (hover: hover) {
    .pagination-footer .page-link:hover {
      border-color: var(--pagination-hover-color);
      color: var(--pagination-hover-color);
      border-radius: 4px;
    }
  }
  .pagination-footer .page-item.previous .page-link,
  .pagination-footer .page-item.next .page-link {
    white-space: nowrap;
  }
  @media (hover: hover) {
    .pagination-footer .page-item.previous .page-link:hover,
    .pagination-footer .page-item.next .page-link:hover {
      border: 1px solid var(--pagination-hover-color);
      color: var(--pagination-hover-color);
      border-radius: 4px;
    }
  }
  .pagination-footer .page-item.previous.disabled .page-link,
  .pagination-footer .page-item.next.disabled .page-link {
    color: var(--pagination-disabled-text-color);
    font-weight: 400;
  }
  .pagination-footer .page-item.active .page-link {
    background-color: var(--pagination-active-background-color);
    color: var(--pagination-active-text-color);
    font-weight: 700;
    cursor: default;
    border-radius: 4px;
    padding: 2px 6px;
    pointer-events: none;
  }
  .pagination-footer .page-item.disabled .page-link {
    cursor: default;
    pointer-events: none;
  }
  .pagination-footer .page-link-ellipsis {
    color: var(--pagination-disabled-text-color);
    font-weight: 400;
  }
  .pagination-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gutter-sm) var(--gutter-md);
  }
  .pagination-nav:has(.pagination-simple) {
    width: 100%;
  }
  .pagination-nav .pagination-per-page {
    padding: 4px 8px 4px 12px;
    background-color: var(--pagination-per-page-background-color);
    border-radius: 8px;
  }
  .pagination-nav .pagination-per-page label {
    font-weight: 500;
    white-space: nowrap;
    color: var(--pagination-per-page-label-color);
  }
  .pagination-nav .pagination-per-page od-select {
    --form-control-height: 26px;
    font-size: var(--font-sm);
  }
  .pagination-nav .pagination-per-page od-select .toggle-container,
  .pagination-nav .pagination-per-page od-select .selection {
    min-height: 0;
  }
  .pagination-nav .pagination-per-page od-select .selection {
    padding: 3px 10px;
  }
  .pagination-nav .pagination-per-page od-select .dropdown {
    top: auto;
    bottom: calc(100% + 4px);
  }
  .pagination-nav .pagination-jump input {
    width: 50px;
    padding: 2px 6px;
    min-height: auto;
    text-align: center;
    font-size: var(--font-sm);
    line-height: 1;
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    font-family: inherit;
  }
  .pagination-nav button {
    font-family: inherit;
    font-size: var(--font-size);
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 2px 6px;
    cursor: pointer;
    background: none;
    color: var(--pagination-text-color);
  }
  @media (hover: hover) {
    .pagination-nav button:hover {
      border: 1px solid var(--pagination-hover-color);
      color: var(--pagination-hover-color);
      border-radius: 4px;
    }
  }
  .simple-layout .pagination-footer {
    margin-left: var(--gutter-md);
  }
}
@layer theme {
  .selectable-cards {
    display: flex;
    gap: var(--gutter-sm);
  }
  @media screen and (width <= 576px) {
    .selectable-cards {
      gap: var(--gutter-xs);
    }
  }
  .selectable-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    border: 1px solid var(--color-iron);
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: center;
    width: 160px;
  }
  @media screen and (width <= 576px) {
    .selectable-card {
      width: auto;
      flex: 1;
      padding: 14px 12px;
    }
  }
  .selectable-card input[type=radio] {
    display: none;
  }
  .selectable-card .card-icon {
    font-size: 24px;
    color: var(--color-pale-sky);
  }
  .selectable-card .card-title {
    font-size: 14px;
    color: var(--color-nile-blue);
  }
  .selectable-card .card-subtitle {
    font-size: 13px;
    color: var(--color-pale-sky);
  }
  @media screen and (hover: hover) {
    .selectable-card:hover:not(.selected) {
      border-color: var(--color-pale-sky);
    }
  }
  .selectable-card.selected {
    border-color: var(--color-bondi-blue);
    background-color: var(--color-polar);
  }
  .selectable-card.selected .card-icon {
    color: var(--color-bondi-blue);
  }
  .selectable-cards--hover-highlight .selectable-card.selected {
    border-color: var(--color-iron);
    background-color: transparent;
  }
  .selectable-cards--hover-highlight .selectable-card.selected .card-icon {
    color: var(--color-pale-sky);
  }
  @media screen and (hover: hover) {
    .selectable-cards--hover-highlight .selectable-card:hover {
      border-color: var(--color-bondi-blue);
      background-color: var(--color-polar);
    }
    .selectable-cards--hover-highlight .selectable-card:hover .card-icon {
      color: var(--color-bondi-blue);
    }
  }
  .selectable-cards--small .selectable-card {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    padding: 10px 14px;
  }
  .selectable-cards--small .card-icon {
    font-size: 16px;
  }
}
@layer theme {
  .wizard-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
  }
  .wizard-steps .step {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wizard-steps .step.active .step-number {
    background-color: var(--color-nile-blue);
    color: var(--color-white);
  }
  .wizard-steps .step.active .step-label {
    color: var(--color-nile-blue);
    font-weight: 600;
  }
  .wizard-steps .step.completed {
    cursor: pointer;
  }
  .wizard-steps .step.completed .step-number {
    background-color: var(--color-bondi-blue);
    color: var(--color-white);
  }
  .wizard-steps .step.completed .step-label {
    color: var(--color-nile-blue);
  }
  .wizard-steps .step-number {
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    background-color: var(--color-concrete);
    color: var(--color-pale-sky);
  }
  .wizard-steps .step-label {
    font-size: 14px;
    color: var(--color-pale-sky);
  }
  @media screen and (width <= 576px) {
    .wizard-steps .step-label {
      display: none;
    }
  }
  .wizard-steps > i {
    color: var(--color-iron);
    font-size: 12px;
  }
  .wizard-body {
    max-width: 650px;
  }
  @media screen and (width <= 576px) {
    .wizard-body {
      max-width: 100%;
    }
  }
  .wizard-container {
    position: relative;
    overflow-x: clip;
    padding: 1px;
  }
  .wizard-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .wizard-panel.slide-out-left, .wizard-panel.slide-out-right {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .wizard-panel.slide-out-left {
    animation: slideOutLeft var(--wizard-transition-duration) var(--ease-in-out-expo) forwards;
  }
  .wizard-panel.slide-in-right {
    animation: slideInRight var(--wizard-transition-duration) var(--ease-in-out-expo) forwards;
  }
  .wizard-panel.slide-out-right {
    animation: slideOutRight var(--wizard-transition-duration) var(--ease-in-out-expo) forwards;
  }
  .wizard-panel.slide-in-left {
    animation: slideInLeft var(--wizard-transition-duration) var(--ease-in-out-expo) forwards;
  }
  .wizard-footer {
    display: flex;
    align-items: center;
    margin-top: var(--gutter-md);
    padding-top: var(--gutter-md);
    border-top: 1px solid var(--color-divider);
  }
  form > .wizard-footer {
    margin-top: 0;
  }
  .wizard-footer .button.primary {
    margin-left: auto;
  }
  @keyframes slideOutLeft {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slideOutRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
@layer theme {
  .wizard-panel .file-summary-bar {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    padding: var(--gutter-sm) var(--gutter-md);
    margin-bottom: var(--gutter-md);
    border: 1px solid var(--file-summary-border-color);
    border-radius: 6px;
    background: var(--file-summary-background);
  }
  .wizard-panel .file-summary-bar .file-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-md);
    flex-wrap: wrap;
  }
  .wizard-panel .file-summary-bar .file-summary-main {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
    min-width: 0;
  }
  .wizard-panel .file-summary-bar .file-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--file-summary-icon-border-color);
    border-radius: 8px;
    background: var(--file-summary-icon-background);
    color: var(--file-summary-icon-color);
    flex-shrink: 0;
  }
  .wizard-panel .file-summary-bar .file-summary-meta {
    min-width: 0;
  }
  .wizard-panel .file-summary-bar .file-summary-name {
    display: block;
    font-weight: 600;
    color: var(--default-text-primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wizard-panel .file-summary-bar .file-summary-name:is(label, button) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gutter-xs);
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: start;
    cursor: pointer;
  }
  .wizard-panel .file-summary-bar .file-summary-name:is(label, button) .file-summary-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--default-link-color);
  }
  .wizard-panel .file-summary-bar .file-summary-name:is(label, button) i {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--icon-muted-color);
  }
  @media screen and (hover: hover) {
    .wizard-panel .file-summary-bar .file-summary-name:is(label, button) i {
      visibility: hidden;
    }
    .wizard-panel .file-summary-bar .file-summary-name:is(label, button):hover .file-summary-name-text {
      text-decoration: underline;
    }
    .wizard-panel .file-summary-bar .file-summary-name:is(label, button):hover i {
      visibility: visible;
    }
  }
  .wizard-panel .file-summary-bar .file-summary-name:is(label, button):focus-visible i {
    visibility: visible;
  }
  .wizard-panel .file-summary-bar .file-summary-sub {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--file-summary-sub-color);
  }
  .wizard-panel .file-summary-bar .file-summary-controls {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    flex-wrap: wrap;
  }
  .wizard-panel .file-summary-bar .file-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    padding: 7px var(--gutter-sm);
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background: var(--file-summary-chip-background);
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--default-text-primary-color);
    cursor: pointer;
  }
  .wizard-panel .file-summary-bar .file-summary-chip .chip-label {
    color: var(--default-text-secondary-color);
  }
  .wizard-panel .file-summary-bar .file-summary-chip .chip-value {
    font-weight: 600;
  }
  .wizard-panel .file-summary-bar .file-summary-chip i {
    color: var(--icon-muted-color);
  }
  .wizard-panel .file-summary-bar .file-summary-chip.is-invalid {
    border-color: var(--file-summary-chip-invalid-border-color);
  }
  .wizard-panel .file-summary-bar .file-summary-chip.is-invalid i {
    color: var(--file-summary-chip-invalid-icon-color);
  }
  @media screen and (hover: hover) {
    .wizard-panel .file-summary-bar .file-summary-chip:hover {
      background: var(--file-summary-chip-hover-background);
    }
  }
  .wizard-panel .file-summary-bar .file-summary-chip-static {
    cursor: default;
    padding-right: var(--gutter-xs);
  }
  .wizard-panel .file-summary-bar .file-summary-chip-locked {
    cursor: default;
  }
  @media screen and (hover: hover) {
    .wizard-panel .file-summary-bar .file-summary-chip-locked:hover {
      background: var(--file-summary-chip-background);
    }
  }
  .wizard-panel .file-summary-bar .chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: var(--file-summary-chip-clear-background);
    color: var(--default-text-secondary-color);
    cursor: pointer;
  }
  @media screen and (hover: hover) {
    .wizard-panel .file-summary-bar .chip-clear:hover {
      color: var(--file-summary-chip-clear-hover-color);
    }
  }
}
@layer theme {
  .run-detail {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .run-detail .run-live {
    display: contents;
  }
  .run-detail .run-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xxs);
    margin-left: var(--gutter-xs);
    color: var(--run-detail-live-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }
  .run-detail .run-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--run-detail-live-color);
    animation: run-live-pulse 2s ease-in-out infinite;
  }
  @keyframes run-live-pulse {
    50% {
      opacity: 0.4;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .run-detail .run-live-dot {
      animation: none;
    }
  }
  .run-detail .run-overview {
    border: 1px solid var(--run-detail-border-color);
    border-radius: var(--border-radius);
  }
  .run-detail .run-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--gutter-sm) var(--gutter-md);
    margin: 0;
    padding: 10px 16px;
  }
  .run-detail .run-summary .wide {
    grid-column: span 2;
  }
  .run-detail .run-summary .wide dd {
    white-space: nowrap;
  }
  .run-detail .run-summary dt {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--run-detail-label-color);
    margin-bottom: 2px;
  }
  .run-detail .run-summary dd {
    margin: 0;
    font-weight: 500;
  }
  .run-detail .run-counters {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--run-detail-border-color);
  }
  .run-detail .run-counters .counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 16px;
  }
  .run-detail .run-counters .counter + .counter {
    border-left: 1px solid var(--run-detail-border-color);
  }
  .run-detail .run-counters .counter .count {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .run-detail .run-counters .counter .caption {
    font-size: 12px;
    color: var(--run-detail-label-color);
  }
  .run-detail .run-counters .counter.success .count {
    color: var(--run-detail-success-color);
  }
  .run-detail .run-counters .counter.muted .count {
    color: var(--run-detail-muted-color);
  }
  .run-detail .run-counters .counter.warning .count {
    color: var(--run-detail-warning-color);
  }
  .run-detail .run-counters .counter.error .count {
    color: var(--run-detail-error-color);
  }
  .run-detail .run-counters a.counter {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .run-detail .run-counters a.counter.selected {
    background: var(--run-detail-counter-selected-background);
    box-shadow: inset 0 -2px 0 var(--run-detail-counter-selected-border-color);
  }
  @media screen and (hover: hover) {
    .run-detail .run-counters a.counter:hover {
      background: var(--run-detail-counter-hover-background);
    }
  }
  .run-detail .run-counters .counter-note {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 8px 16px;
    font-size: 12px;
    color: var(--run-detail-label-color);
  }
  .run-detail .run-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .run-detail .run-progress progress {
    width: 100%;
    height: 10px;
    appearance: none;
    border: none;
    border-radius: 5px;
    background: var(--run-detail-progress-track-color);
    overflow: hidden;
  }
  .run-detail .run-progress progress::-webkit-progress-bar {
    background: var(--run-detail-progress-track-color);
    border-radius: 5px;
  }
  .run-detail .run-progress progress::-webkit-progress-value {
    background: var(--run-detail-progress-bar-color);
    border-radius: 5px;
  }
  .run-detail .run-progress progress::-moz-progress-bar {
    background: var(--run-detail-progress-bar-color);
    border-radius: 5px;
  }
  .run-detail .run-callout-action {
    padding: 6px 0;
  }
  .run-detail .run-callout-note {
    margin-top: var(--gutter-xxs);
  }
  .run-detail .run-units .filter-bar {
    margin-left: auto;
    margin-bottom: 0;
  }
  .run-detail .run-unit-issues {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--run-detail-issue-color);
  }
  .run-detail .run-unit-issues.warnings {
    color: var(--run-detail-warning-color);
  }
  .run-detail .run-unit-issues .issue-label {
    color: var(--run-detail-label-color);
    font-size: 12px;
    margin-right: 6px;
  }
}
@layer theme {
  .import-wizard .wizard-container {
    overflow: visible;
  }
  .import-wizard .wizard-footer {
    margin-top: 0;
  }
  .import-wizard .wizard-panel[data-wizard-step=confirm] {
    padding-bottom: var(--gutter-md);
  }
  .import-wizard .wizard-panel[data-wizard-step=confirm],
  .import-wizard .wizard-panel .mapping-header {
    max-width: 650px;
  }
  @media screen and (width <= 576px) {
    .import-wizard .wizard-panel[data-wizard-step=confirm],
    .import-wizard .wizard-panel .mapping-header {
      max-width: 100%;
    }
  }
}
@layer ui {
  .import-wizard .wizard-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    margin-left: auto;
  }
  .form-modal .delimiter-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .form-modal .delimiter-field-group .delimiter-row {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .form-modal .delimiter-field-group .delimiter-row .select-container {
    flex: 1;
  }
  .form-modal .delimiter-field-group .delimiter-row .custom-delimiter-input {
    flex: 0 0 96px;
    text-align: center;
  }
  .form-modal .delimiter-field-group .delimiter-row .custom-delimiter-input[hidden] {
    display: none;
  }
  .form-modal .sheet-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
}
@layer ui {
  .import-landing {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
  }
  .import-landing .import-landing-card {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    padding: var(--gutter-md);
    border: 1px solid var(--import-landing-card-border-color);
    border-radius: var(--border-radius);
    background: var(--import-landing-card-background);
  }
  .import-landing .import-landing-intro {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .import-landing .import-landing-intro h2 {
    margin: 0;
  }
  .import-landing .import-landing-intro .legend {
    margin: 0;
  }
  .import-landing .import-landing-bar {
    display: flex;
    align-items: stretch;
    gap: var(--gutter-md);
  }
  .import-landing .import-landing-bar form {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
    min-width: 0;
  }
  .import-landing .import-landing-bar .upload-dropzone {
    flex: 1;
    min-height: 0;
  }
  @media screen and (width <= 576px) {
    .import-landing .import-landing-bar {
      flex-direction: column;
    }
    .import-landing .import-landing-bar .upload-dropzone {
      min-height: 160px;
    }
  }
  .import-landing .import-type-choices {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    flex-shrink: 0;
  }
}
@layer theme {
  .import-landing-bar .import-type-choices .import-type-card {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    flex: 1;
  }
  .import-landing-bar .import-manual-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-xxs);
    padding: var(--gutter-xs);
    border: 2px dashed var(--upload-dropzone-border-color);
    border-top: 0;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background: var(--import-manual-strip-background);
    color: var(--upload-dropzone-link-color);
    cursor: pointer;
  }
  .import-landing-bar .import-manual-strip:hover {
    background: var(--import-manual-strip-hover-background);
  }
  .import-landing-bar .upload-dropzone:has(+ .import-manual-strip) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .selectable-card.import-type-card {
    position: relative;
    display: block;
    width: 200px;
    padding: var(--gutter-sm) var(--gutter-md);
    background-color: transparent;
    text-align: left;
  }
  .selectable-card.import-type-card .card-icon {
    font-size: 16px;
  }
  .selectable-card.import-type-card .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--target-card-text-color);
  }
  .selectable-card.import-type-card .card-check {
    position: absolute;
    top: 50%;
    right: var(--gutter-sm);
    transform: translateY(-50%);
    display: none;
    font-size: var(--font-size);
    color: var(--import-type-selected-color);
  }
  .selectable-card.import-type-card.selected {
    box-shadow: inset 0 0 0 1px var(--import-type-selected-color);
  }
  .selectable-card.import-type-card.selected .card-check {
    display: inline-flex;
  }
  .selectable-card.import-type-card:has(input:disabled) {
    cursor: default;
    opacity: 0.5;
  }
  .import-templates .template-type-badge--orders i {
    color: var(--import-type-orders-icon-color);
  }
  .import-templates .template-type-badge--products i {
    color: var(--import-type-products-icon-color);
  }
  .import-templates .template-type-badge--shipments i {
    color: var(--import-type-shipments-icon-color);
  }
  .import-templates .template-source-chips {
    display: flex;
    gap: var(--gutter-xxs);
  }
  .import-templates .source-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    background: none;
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
    cursor: pointer;
  }
  .import-templates .source-chip.on {
    background: var(--import-source-chip-on-background);
    color: var(--import-source-chip-on-color);
  }
  .import-templates .source-chip.off {
    border-color: var(--import-source-chip-off-border-color);
    border-style: dashed;
    color: var(--import-source-chip-off-color);
  }
  .import-templates .template-last-import {
    font-size: 13px;
    color: var(--import-last-import-color);
    white-space: nowrap;
  }
  .import-templates .template-last-import .never {
    color: var(--import-last-import-never-color);
  }
  .import-templates .template-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
  }
  @media screen and (width <= 1100px) {
    .import-templates .template-column-count {
      display: none;
    }
  }
  .import-templates .import-templates-list {
    overflow-x: auto;
  }
  .import-templates .template-name {
    font-weight: 600;
  }
  .import-templates .template-favorite {
    padding: var(--gutter-xxs);
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--import-template-favorite-inactive-color);
  }
  .import-templates .template-favorite.is-favorite {
    color: var(--import-template-favorite-active-color);
  }
  @media screen and (hover: hover) {
    .import-templates .template-favorite:hover > i {
      --fa-beat-scale: 1.06;
      animation: fa-beat 0.6s ease-in-out 1;
    }
  }
  .import-templates .template-favorite.just-favorited > i {
    animation: fa-bounce 0.7s ease 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .import-templates .template-favorite:hover > i, .import-templates .template-favorite.just-favorited > i {
      animation: none;
    }
  }
  .import-templates .delete-action i {
    color: var(--icon-muted-color);
  }
  .import-templates .delete-action:hover i {
    color: var(--delete-action-hover-color);
  }
  .import-templates .template-row[data-expandable-rows] {
    cursor: pointer;
  }
  @media screen and (hover: hover) {
    .import-templates .template-row[data-expandable-rows]:hover td {
      background: var(--import-template-row-hover-background);
    }
  }
  .import-templates .template-row[data-expanded] td,
  .import-templates .template-row[data-expanded] + .template-dropzone-row td {
    background: var(--import-template-selected-background);
  }
  .import-templates .template-row[data-expanded] td:first-child,
  .import-templates .template-row[data-expanded] + .template-dropzone-row td:first-child {
    box-shadow: inset 3px 0 0 var(--import-template-selected-accent);
  }
  .import-templates .template-row[data-expanded] {
    border-bottom: 0;
  }
  @media screen and (hover: hover) {
    .import-templates .template-row[data-expanded]:hover td {
      background: var(--import-template-selected-background);
    }
  }
  .import-templates .template-dropzone-row {
    border-top: 0;
  }
  .import-templates .template-dropzone-row td {
    padding: 0 16px var(--gutter-sm);
  }
  .import-templates .template-dropzone-row .template-dropzone {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    padding: var(--gutter-sm) var(--gutter-md);
    border: 1px dashed var(--import-dropzone-border-color);
    border-radius: 6px;
    background: var(--import-template-dropzone-background);
  }
  .import-templates .template-dropzone-row .template-dropzone.is-dragover {
    border-color: var(--upload-dropzone-active-border-color);
  }
  .import-templates .template-dropzone-row .template-dropzone.is-uploaded {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .import-templates .template-dropzone-row .template-dropzone .upload-dropzone-link {
    color: var(--upload-dropzone-link-color);
    font-weight: 500;
  }
  .import-templates .template-dropzone-row .template-dropzone .invalid-feedback {
    text-align: center;
  }
  .import-templates .template-dropzone-row .template-dropzone-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gutter-sm) var(--gutter-md);
    cursor: pointer;
  }
  .import-templates .template-dropzone-row .template-dropzone-summary[hidden] {
    display: none;
  }
  .import-templates .template-dropzone-row .template-dropzone-prompt {
    margin: 0;
  }
  .import-templates .template-dropzone-row .template-dropzone-progress {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-xs);
  }
  .import-templates .template-dropzone-row .template-progress-ring {
    width: 24px;
    height: 24px;
    transform: rotate(-90deg);
  }
  .import-templates .template-dropzone-row .template-progress-track {
    fill: none;
    stroke: var(--import-dropzone-border-color);
    stroke-width: 4;
  }
  .import-templates .template-dropzone-row .template-progress-bar {
    fill: none;
    stroke: var(--upload-dropzone-active-border-color);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s linear;
  }
  .import-templates .template-dropzone-row .template-progress-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--upload-dropzone-text-color);
  }
  .import-templates .template-dropzone-row .template-file-bar {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
    padding: var(--gutter-sm) var(--gutter-md);
    border: 1px solid var(--import-file-bar-border-color);
    border-radius: 6px;
    background: var(--import-file-bar-background);
  }
  .import-templates .template-dropzone-row .template-file-icon {
    display: inline-flex;
    font-size: 16px;
    color: var(--import-template-type-icon-color);
  }
  .import-templates .template-dropzone-row .template-file-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .import-templates .template-dropzone-row .template-file-name {
    font-weight: 600;
    color: var(--default-text-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .import-templates .template-dropzone-row .template-file-replace {
    align-self: flex-start;
    color: var(--upload-dropzone-link-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
  }
  .import-templates .template-dropzone-row .template-file-actions {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
    margin-left: auto;
  }
  .import-templates .template-dropzone-row .template-dropzone-form.htmx-request .template-dropzone-summary,
  .import-templates .template-dropzone-row .template-dropzone-form.htmx-request .template-file-actions button {
    display: none;
  }
  .import-templates .template-dropzone-row .template-dropzone-form.htmx-request .template-dropzone-progress {
    display: flex;
  }
}
@layer theme {
  .import-email-address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-xs);
    margin: var(--gutter-sm) 0;
    padding: var(--gutter-xs) var(--gutter-sm);
    border: 1px solid var(--color-divider);
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
  }
  .import-email-address .import-email-address-value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-family-alternative);
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .import-email-address button {
    display: flex;
    flex-shrink: 0;
    /* The side panel stretches every button to the panel width, which here would leave the
       address with no room at all. This is an icon button beside the text, not a form action. */
    width: auto;
    max-width: none;
    padding: 0;
    line-height: inherit;
  }
}
@layer theme {
  .template-panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .template-panel-body > form {
    width: 100%;
  }
  .template-panel-body > button {
    align-self: flex-start;
  }
}
@layer theme {
  .content-header .import-history-actions {
    gap: var(--gutter-md);
  }
}
@layer theme {
  .import-email-panel .import-email-details {
    display: none;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .import-email-panel:has(.form-toggle-input:checked) .import-email-off, .import-email-panel:has(.import-email-details .is-invalid) .import-email-off {
    display: none;
  }
  .import-email-panel:has(.form-toggle-input:checked) .import-email-details, .import-email-panel:has(.import-email-details .is-invalid) .import-email-details {
    display: flex;
  }
  .import-email-rotate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-xxs);
  }
  .import-email-rotate button {
    width: auto;
    padding: 0;
  }
  .side-panel:not(.is-dirty) .import-email-save {
    display: none;
  }
}
@layer theme {
  .template-ftp-manage-link {
    color: var(--default-link-color);
    text-decoration: none;
  }
}
@layer theme {
  .template-ftp-stop {
    margin-right: auto;
  }
}
@layer ui {
  .field-mapping-frame {
    position: relative;
    width: fit-content;
    max-width: 100%;
  }
  .field-mapping-frame .field-mapping-scroll-button {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    background: var(--field-mapping-scroll-button-background);
    border: 1px solid var(--field-mapping-border-color);
    color: var(--field-mapping-scroll-button-icon-color);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 3;
  }
  .field-mapping-frame .field-mapping-scroll-button i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .field-mapping-frame .field-mapping-scroll-button.left {
    left: 0;
  }
  .field-mapping-frame .field-mapping-scroll-button.right {
    right: 0;
  }
  .field-mapping-frame:hover .field-mapping-scroll-button:not([hidden]) {
    opacity: 1;
  }
  .field-mapping-scroll {
    height: clamp(280px, 100dvh - var(--field-mapping-scroll-viewport-offset), 450px);
    overflow: auto;
  }
  .field-mapping {
    display: grid;
    width: max-content;
    grid-template-columns: repeat(var(--column-count), minmax(200px, auto));
  }
  .field-mapping .header-cell {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-xs);
    background: var(--field-mapping-header-background-color);
    border-bottom: 1px solid var(--field-mapping-border-color);
    padding: var(--gutter-xs) var(--gutter-sm);
    font-weight: 500;
    white-space: nowrap;
  }
  .field-mapping .header-cell .header-cell-label {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    min-width: 0;
    overflow: hidden;
  }
  .field-mapping .header-cell .header-cell-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--field-mapping-position-badge-border-color);
    border-radius: 5px;
    background: var(--field-mapping-position-badge-background);
    color: var(--field-mapping-position-badge-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
  }
  .field-mapping .header-cell .header-cell-name {
    font-weight: 600;
    color: var(--default-text-primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .field-mapping .header-cell .order-match-toggle {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--field-mapping-action-icon-color);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: var(--font-size-sm);
    line-height: 1;
  }
  .field-mapping .header-cell:hover .order-match-toggle {
    opacity: 1;
  }
  .field-mapping .header-cell.order-match-active .order-match-toggle {
    opacity: 1;
    color: var(--field-mapping-order-match-color);
  }
  .field-mapping .header-cell.header-cell-mapped {
    box-shadow: inset 0 2px 0 var(--field-mapping-order-match-color);
  }
  .field-mapping .header-cell.header-cell-unmapped {
    box-shadow: inset 0 2px 0 var(--field-mapping-unmapped-accent);
  }
  .field-mapping .header-cell.header-cell-skipped {
    background: var(--field-mapping-skipped-column-header-background);
    box-shadow: inset 0 2px 0 var(--field-mapping-skipped-accent);
  }
  .field-mapping .header-cell.header-cell-skipped .header-cell-position {
    background: var(--field-mapping-skipped-badge-background);
    color: var(--field-mapping-skipped-badge-color);
  }
  .field-mapping .header-cell.header-cell-skipped .header-cell-name {
    color: var(--field-mapping-skipped-column-text);
  }
  .field-mapping .header-cell.header-cell-skipped .header-cell-skip-mark {
    flex-shrink: 0;
    color: var(--field-mapping-skipped-column-icon);
    font-size: var(--font-size-sm);
    line-height: 1;
  }
  .field-mapping .header-cell:not(.header-cell-mapped) .order-match-toggle {
    display: none;
  }
  .field-mapping .header-cell:not(.header-cell-skipped) .header-cell-skip-mark {
    display: none;
  }
  .field-mapping .header-cell .header-cell-hint {
    flex-shrink: 0;
    color: var(--icon-muted-color);
    line-height: 1;
  }
  .field-mapping .mapping-cell.column-mapping-cell {
    position: sticky;
    top: var(--field-mapping-header-height, 2.5rem);
    z-index: 1;
    background: var(--field-mapping-sticky-cell-background);
    padding: var(--gutter-xs) var(--gutter-sm);
    border: 1px dashed var(--field-mapping-cell-border-color);
  }
  .field-mapping .mapping-cell.column-mapping-cell:has(od-select.active) {
    z-index: 2;
  }
  .field-mapping .mapping-cell.column-mapping-cell .subkey {
    width: 100%;
    margin-top: var(--gutter-xs);
  }
  .field-mapping .mapping-cell.column-mapping-cell .subkey[hidden] {
    display: none;
  }
  .field-mapping .mapping-cell.column-mapping-cell .field-arguments {
    display: flex;
    gap: var(--gutter-xs);
    margin-top: var(--gutter-xs);
  }
  .field-mapping .mapping-cell.column-mapping-cell .field-arguments .argument {
    flex: 1 1 0;
    min-width: 0;
  }
  .field-mapping .mapping-cell.column-mapping-cell .field-arguments .argument[hidden] {
    display: none;
  }
  .field-mapping .mapping-cell.column-mapping-cell .field-arguments[hidden] {
    display: none;
  }
  .field-mapping .mapping-cell.column-mapping-cell .date-format {
    margin-top: var(--gutter-xs);
  }
  .field-mapping .mapping-cell.column-mapping-cell .date-format .select-container {
    --viewable-option-count: 5;
  }
  .field-mapping .mapping-cell.column-mapping-cell .date-format[hidden] {
    display: none;
  }
  .field-mapping .mapping-cell.column-mapping-cell .field-slot {
    margin-top: var(--gutter-xs);
  }
  .field-mapping .mapping-cell.column-mapping-cell .field-slot .select-container {
    --viewable-option-count: 5;
  }
  .field-mapping .mapping-cell.column-mapping-cell .field-slot[hidden] {
    display: none;
  }
  .field-mapping .mapping-cell.column-mapping-cell.is-skipped {
    background: var(--field-mapping-skipped-column-background);
  }
  .field-mapping .mapping-cell.column-mapping-cell.is-skipped .select-container {
    background: transparent;
    border-style: dashed;
  }
  .field-mapping .preview-cell {
    padding: var(--gutter-xs) var(--gutter-sm);
    border: 1px dashed var(--field-mapping-cell-border-color);
    color: var(--field-mapping-header-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 100%;
    max-width: 40ch;
  }
  .field-mapping .preview-cell.row-hovered {
    background: var(--field-mapping-row-hover-background);
  }
  .field-mapping .preview-cell.order-match-column {
    font-weight: 700;
  }
  .field-mapping .preview-cell.row-skipped {
    color: var(--field-mapping-skipped-row-color);
    background: var(--field-mapping-skipped-row-background);
    text-decoration: line-through;
  }
  .field-mapping .preview-cell.column-skipped {
    color: var(--field-mapping-skipped-column-text);
    background: var(--field-mapping-skipped-column-background);
    text-decoration: none;
  }
  .field-mapping .invalid-feedback {
    grid-column: 1/-1;
  }
  .field-mapping-frame .preview-row-actions {
    position: absolute;
    right: var(--gutter-xs);
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    z-index: 4;
  }
  .field-mapping-frame .preview-row-actions[hidden] {
    display: none;
  }
  .field-mapping-frame .preview-row-actions .preview-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--field-mapping-border-color);
    border-radius: var(--border-radius);
    background: var(--field-mapping-action-background);
    color: var(--field-mapping-action-icon-color);
    cursor: pointer;
    padding: 0;
    font-size: var(--font-size-sm);
    line-height: 1;
  }
  .field-mapping-frame .preview-row-actions .preview-row-action:hover {
    color: var(--field-mapping-action-icon-hover-color);
    border-color: var(--field-mapping-action-icon-hover-color);
  }
  .field-mapping-frame:has(.field-mapping-scroll-button.right:not([hidden])) .preview-row-actions {
    right: calc(36px + var(--gutter-xs));
  }
  .field-mapping-sample-note {
    margin: 0;
    padding: var(--gutter-sm);
    border-top: 1px solid var(--field-mapping-border-color);
    text-align: center;
    color: var(--field-mapping-header-text-color);
    font-size: var(--font-size-sm);
  }
}
@layer theme {
  .add-shipments {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .add-shipments .legend {
    margin: 0;
  }
  .add-shipments .add-shipments-sample {
    margin: 0;
    padding: var(--gutter-xs) var(--gutter-sm);
    border-radius: var(--border-radius);
    background: var(--import-shipment-sample-background);
    font-size: var(--font-size-sm);
    overflow-x: auto;
  }
  .add-shipments form {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .add-shipments textarea {
    width: 100%;
    resize: vertical;
    font-family: var(--font-family-alternative);
    font-size: var(--font-size-sm);
  }
  .add-shipments .add-shipments-counter {
    align-self: flex-end;
    margin: 0;
    font-size: var(--font-size-sm);
    opacity: 0.6;
  }
  .add-shipments .add-shipments-counter.is-nearing {
    color: var(--import-shipment-counter-warning-color);
    opacity: 1;
  }
  .add-shipments .add-shipments-counter.is-over {
    color: var(--import-shipment-counter-over-color);
    opacity: 1;
  }
}
@layer theme {
  .export-type-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: var(--gutter-md);
  }
  .export-type-cards .selectable-card.target-card {
    position: relative;
    width: auto;
    background-color: transparent;
  }
  @media screen and (hover: hover) {
    .export-type-cards .selectable-card.target-card:hover {
      background-color: color-mix(in srgb, var(--target-color) 8%, var(--target-card-background-color));
    }
  }
  .export-type-cards .selectable-card.target-card .button-spinner {
    position: absolute;
    top: 50%;
    right: var(--gutter-md);
    transform: translateY(-50%);
    font-size: 2em;
    color: color-mix(in srgb, var(--target-color) 85%, var(--target-card-text-color));
  }
  .export-type-cards .selectable-card.target-card .card-heading {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .export-type-cards .selectable-card.target-card .card-icon {
    font-size: 18px;
  }
  .export-type-cards .selectable-card[aria-disabled=true] {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
  }
}
@layer theme {
  .export-start-summary .every-order {
    display: none;
  }
  form:has(.form-toggle-input:checked) .export-start-summary .selected-orders {
    display: none;
  }
  form:has(.form-toggle-input:checked) .export-start-summary .every-order {
    display: inline;
  }
}
@layer theme {
  .export-template-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--gutter-xxs) 16px;
  }
  .export-template-details dt {
    font-weight: 500;
    color: var(--default-text-secondary-color);
  }
  .export-template-details dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}
@layer theme {
  .export-type-badge--orders i {
    color: var(--export-type-orders-icon-color);
  }
  .export-type-badge--order-items i {
    color: var(--export-type-order-items-icon-color);
  }
  .export-type-badge--shipments i {
    color: var(--export-type-shipments-icon-color);
  }
}
@layer theme {
  .template-panel-tabs .tab-bar {
    display: flex;
    margin-bottom: var(--gutter-sm);
    border-bottom: 1px solid var(--color-divider);
  }
  .template-panel-tabs .tab-bar .tab-trigger {
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-pale-sky);
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .template-panel-tabs .tab-bar .tab-trigger.active {
    color: var(--default-text-primary-color);
    border-bottom-color: var(--default-text-primary-color);
  }
  .template-panel-tabs [data-tab-panel] {
    display: none;
  }
  .template-panel-tabs [data-tab-panel].active {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .template-panel-tabs [data-tab-panel] > form {
    width: 100%;
  }
  .template-panel-tabs [data-tab-panel] > button {
    align-self: flex-start;
  }
  .export-wizard .wizard-container {
    overflow: visible;
  }
  .export-wizard label[hidden] {
    display: none;
  }
  .export-wizard .wizard-panel[data-wizard-step=settings] {
    max-width: var(--export-wizard-settings-max-width);
  }
  @media screen and (width <= 576px) {
    .export-wizard .wizard-panel[data-wizard-step=settings] {
      max-width: 100%;
    }
  }
  .export-wizard .file-summary-chip[aria-disabled=true] {
    opacity: 0.5;
  }
  .export-wizard .tab-trigger[aria-disabled=true] {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    cursor: default;
    opacity: 0.5;
  }
  .export-wizard .export-template-type {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .export-wizard .export-template-type p {
    margin: 0;
  }
  .export-wizard .delimiter-row {
    display: flex;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .export-wizard .delimiter-row .select-container {
    flex: 1;
  }
  .export-wizard .delimiter-row .custom-delimiter-input {
    flex: 0 0 96px;
    text-align: center;
  }
  .export-wizard .delimiter-row .custom-delimiter-input[hidden] {
    display: none;
  }
  @media screen and (width <= 576px) {
    .export-wizard .delimiter-row {
      flex-wrap: wrap;
    }
    .export-wizard .delimiter-row .custom-delimiter-input {
      flex-basis: 100%;
    }
  }
  .export-wizard .export-columns-scroll {
    display: flex;
    align-items: flex-start;
    gap: var(--gutter-sm);
    min-height: 440px;
    overflow-x: auto;
    transition: opacity 0.15s ease-out, visibility 0.15s;
  }
  .export-wizard .export-columns-scroll:not(:has([data-export-preview-loaded])) {
    visibility: hidden;
    opacity: 0;
    animation: export-columns-reveal 0s 1s forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .export-wizard .export-columns-scroll {
      transition: none;
    }
  }
  .export-wizard .export-filename {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .export-wizard .export-filename-parts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-xxs);
    margin-top: var(--gutter-sm);
  }
  .export-wizard .export-filename-part {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gutter-xxs);
    padding: 2px var(--gutter-xs);
    border: 1px solid var(--export-filename-part-border-color);
    border-radius: 999px;
    background: var(--export-filename-part-background);
    color: var(--export-filename-part-color);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
  }
  .export-wizard .export-filename-part.is-active {
    border-color: var(--export-filename-part-active-background);
    background: var(--export-filename-part-active-background);
    color: var(--export-filename-part-active-color);
  }
  .export-wizard .export-filename-part-example {
    font-family: var(--font-family-alternative);
    opacity: 0.8;
  }
  .export-wizard .export-next-file-name {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gutter-xxs);
    color: var(--export-next-file-color);
    font-size: var(--font-size-sm);
  }
  .export-wizard .export-next-file-name code {
    font-family: var(--font-family-alternative);
  }
  .export-wizard .export-preview-legend {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 120px;
    padding-bottom: var(--gutter-xs);
  }
  .export-wizard .export-preview-legend[hidden] {
    display: none;
  }
  .export-wizard .export-columns-track:has(> .export-preview-legend[hidden]) .export-column-cells {
    display: none;
  }
  .export-wizard .export-preview-label {
    padding: var(--gutter-xs) 0;
    border-top: 1px solid var(--export-column-border-color);
    color: var(--export-preview-label-color);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .export-wizard .export-columns-track {
    display: flex;
    gap: var(--gutter-sm);
  }
  .export-wizard .export-columns-list {
    position: relative;
    display: flex;
  }
  .export-wizard .export-column-cells {
    margin-top: auto;
  }
  .export-wizard .export-column-errors {
    display: contents;
  }
  .export-wizard .export-column {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    flex-shrink: 0;
    width: 220px;
    padding: var(--gutter-xs) var(--gutter-sm);
    border: 1px dashed var(--export-column-border-color);
    background: var(--export-column-background);
  }
  .export-wizard .export-column:has(> .export-column-errors > .invalid-feedback) {
    box-shadow: inset 0 2px 0 var(--export-column-invalid-accent);
  }
  .export-wizard .export-column:has(> .export-column-errors > .invalid-feedback) > .select-container {
    border-color: var(--form-field-border-error-color);
  }
  .export-wizard .export-column.is-unavailable {
    background: var(--export-column-unavailable-background);
  }
  .export-wizard .export-column.placeholder {
    opacity: 0.3;
  }
  .export-wizard .export-column.ghost {
    position: absolute;
    z-index: 100;
    box-shadow: 0 2px 8px var(--export-column-ghost-shadow-color);
    pointer-events: none;
  }
  .export-wizard .export-column .export-column-date-format .select-container {
    --viewable-option-count: 5;
  }
  .export-wizard .export-column input[hidden],
  .export-wizard .export-column .export-column-date-format[hidden],
  .export-wizard .export-column .export-column-twig[hidden] {
    display: none;
  }
  .export-wizard .export-column textarea {
    resize: vertical;
  }
  .export-wizard .export-column-head {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .export-wizard .export-column .selection .grouped-label {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
  }
  .export-wizard .export-column .selection .grouped-label .group {
    font-size: var(--font-size-sm);
  }
  .export-wizard .export-column .selection .grouped-label i.fa-chevron-right {
    display: none;
  }
  .export-wizard .export-column-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--export-column-position-border-color);
    border-radius: 5px;
    background: var(--export-column-position-background);
    color: var(--export-column-position-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }
  .export-wizard .export-column-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--export-column-title-color);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .export-wizard .export-column-unavailable {
    color: var(--export-column-unavailable-color);
    font-size: var(--font-size-sm);
  }
  .export-wizard .export-column-handle {
    margin-left: auto;
    color: var(--export-column-action-color);
    cursor: grab;
  }
  .export-wizard .export-column-remove {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--export-column-action-color);
    cursor: pointer;
  }
  @media screen and (hover: hover) {
    .export-wizard .export-column-remove:hover {
      color: var(--export-column-action-hover-color);
    }
  }
  .export-wizard .export-column-cell {
    padding: var(--gutter-xs) 0;
    border-top: 1px solid var(--export-column-border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .export-wizard .export-column-cell.is-error {
    color: var(--export-preview-error-color);
  }
  .export-wizard .export-columns-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-xxs);
    flex-shrink: 0;
    width: 220px;
    padding: var(--gutter-xs) var(--gutter-sm);
    border: 1px dashed var(--export-column-add-border-color);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--export-column-add-color);
    font: inherit;
    cursor: pointer;
  }
  .export-wizard .export-columns-add .export-columns-limit {
    display: none;
    font-size: var(--font-size-sm);
    text-align: center;
  }
  .export-wizard .export-columns-add:disabled {
    color: var(--export-column-add-disabled-color);
    cursor: not-allowed;
  }
  .export-wizard .export-columns-add:disabled .export-columns-limit {
    display: block;
  }
  @keyframes export-columns-reveal {
    to {
      visibility: visible;
      opacity: 1;
    }
  }
}
@layer theme {
  .transformations-panel .transformation-rules {
    counter-reset: transformation-number;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
  }
  .transformations-panel .transformation-rule {
    counter-increment: transformation-number;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    border: 1px solid var(--transformation-rule-border-color);
    border-radius: 8px;
    background: var(--transformation-rule-background);
    padding: var(--gutter-sm) var(--gutter-md) var(--gutter-md);
  }
  .transformations-panel .transformation-rule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-sm);
  }
  .transformations-panel .transformation-rule-title {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .transformations-panel .transformation-number::before {
    content: counter(transformation-number);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--gutter-xxs);
    border: 1px solid var(--transformation-badge-border-color);
    border-radius: 6px;
    background: var(--transformation-rule-background);
    color: var(--transformation-badge-color);
    font-weight: 600;
    font-size: var(--font-size-sm);
  }
  .transformations-panel .transformation-keyword-field {
    min-width: 0;
    background: var(--form-field-background-default-color);
  }
  .transformations-panel .transformation-keyword-field .prefix {
    font-weight: 600;
  }
  .transformations-panel .transformation-keyword-field .suffix {
    flex: 1;
    min-width: 0;
    border-left: 0;
  }
  .transformations-panel .transformation-rule-title .transformation-keyword-field {
    display: inline-flex;
  }
  .transformations-panel .transformation-rule-title .transformation-keyword-field od-select {
    min-width: 210px;
  }
  .transformations-panel .transformation-rule-actions {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .transformations-panel .transformation-conditions {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .transformations-panel .transformation-conditions:not(:has([data-condition]))::before {
    content: attr(data-empty-note);
    color: var(--sidepanel-text-secondary-color);
  }
  .transformations-panel .transformation-condition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--gutter-xs);
    align-items: center;
  }
  .transformations-panel .transformation-condition .transformation-value,
  .transformations-panel .transformation-condition .invalid-feedback {
    grid-column: 1/-1;
  }
  .transformations-panel .transformation-action {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--gutter-xs);
    align-items: center;
  }
  .transformations-panel .transformation-action .transformation-value,
  .transformations-panel .transformation-action .invalid-feedback {
    grid-column: 1/-1;
  }
  .transformations-panel .transformation-condition od-select,
  .transformations-panel .transformation-action od-select {
    width: 100%;
    min-width: 0;
  }
  .transformations-panel .transformation-value {
    display: block;
  }
  .transformations-panel .transformation-value input[type=text],
  .transformations-panel .transformation-value .twig-builder-wrapper {
    width: 100%;
  }
  .transformations-panel .transformation-value input[type=text] {
    font-family: var(--font-family-alternative);
    line-height: 1.4;
    padding-right: 40px;
  }
  .transformations-panel .transformation-add-condition {
    align-self: flex-start;
  }
  .transformations-panel .transformation-add-rule {
    margin-top: var(--gutter-sm);
  }
  .transformations-panel od-select[hidden],
  .transformations-panel input[hidden],
  .transformations-panel .transformation-value[hidden],
  .transformations-panel .transformation-add-rule[hidden],
  .transformations-panel .empty-explainer[hidden] {
    display: none;
  }
  .transformations-panel .invalid-feedback p {
    margin: 0;
  }
  .field-mapping .preview-cell.cell-transformed {
    background: var(--transformation-changed-cell-background);
    color: var(--transformation-changed-cell-color);
  }
  .field-mapping .preview-cell.transform-skipped {
    text-decoration: line-through;
  }
  .field-mapping .header-cell .transformation-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--transformation-badge-border-color);
    border-radius: 999px;
    background: var(--transformation-badge-background);
    color: var(--transformation-badge-color);
    font-size: var(--font-size-sm);
    padding: 0 var(--gutter-xxs);
    cursor: pointer;
  }
}
@layer theme {
  .empty-explainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
  }
  .empty-explainer .icon {
    font-size: 48px;
    color: var(--empty-explainer-icon-color);
    margin-bottom: 16px;
  }
  .empty-explainer h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
  }
  .empty-explainer .description {
    max-width: 420px;
    margin: 0 0 24px;
    line-height: 1.5;
    text-wrap: pretty;
    color: var(--default-text-secondary-color);
  }
  .empty-explainer .description a {
    color: var(--default-link-color);
  }
  .empty-explainer .call-to-action {
    margin: 0;
  }
  .empty-explainer .remove-filters {
    margin: 0;
  }
  .empty-explainer .remove-filters a {
    color: var(--default-link-color);
  }
  .empty-explainer .footnote {
    max-width: 420px;
    margin: var(--gutter-xs) 0 0;
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
  .empty-explainer.in-panel {
    padding: 30px var(--panel-gutter);
    gap: 18px;
  }
  .empty-explainer.in-panel .icon {
    margin-bottom: 0;
  }
  .empty-explainer.in-panel .description {
    max-width: 320px;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
  }
  .workflow-empty-state .rocket-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: visible;
  }
  .workflow-empty-state .rocket-icon__fins {
    opacity: 0.4;
  }
  .workflow-empty-state .rocket-icon__flame {
    opacity: 0.6;
    fill: var(--automation-empty-state-flame-color);
    transform-box: view-box;
    transform-origin: 160px 365px;
    animation: rocket-flame-shake 0.9s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .workflow-empty-state .rocket-icon__flame {
      animation: none;
    }
  }
  .order-merge-empty-state .icon {
    font-size: 120px;
  }
  .order-merge-empty-state .merge-files {
    width: 1.33em;
    height: 1em;
    fill: currentColor;
    overflow: visible;
  }
  .order-merge-empty-state .merge-files__file {
    transform-box: fill-box;
    transform-origin: center;
  }
  .order-merge-empty-state .merge-files__file--left {
    --merge-file-travel: 235px;
    animation: merge-file-arrive 10s var(--ease-in-out-expo) infinite;
  }
  .order-merge-empty-state .merge-files__file--right {
    --merge-file-travel: -235px;
    animation: merge-file-arrive 10s var(--ease-in-out-expo) infinite;
  }
  .order-merge-empty-state .merge-files__file--merged {
    animation: merge-file-combine 10s ease-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .order-merge-empty-state .merge-files__file--left,
    .order-merge-empty-state .merge-files__file--right {
      animation: none;
      opacity: 0;
    }
    .order-merge-empty-state .merge-files__file--merged {
      animation: none;
    }
  }
  .invoice-empty-state .mug-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: visible;
  }
  .invoice-empty-state .mug-icon__steam {
    opacity: 0.4;
    animation: mug-steam-rise 9s ease-in-out infinite;
  }
  .invoice-empty-state .mug-icon__steam--2 {
    animation-delay: 4.5s;
  }
  @media (prefers-reduced-motion: reduce) {
    .invoice-empty-state .mug-icon__steam {
      animation: none;
    }
  }
  .invoice-empty-state h3 {
    margin-bottom: 24px;
  }
  .invoice-empty-state .invoice-timeline {
    width: 100%;
    max-width: 320px;
    margin-bottom: 24px;
  }
  @media screen and (width <= 576px) {
    .invoice-empty-state .invoice-timeline {
      max-width: 260px;
    }
  }
  .invoice-empty-state .timeline-track {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 16px;
  }
  .invoice-empty-state .timeline-track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background: var(--billing-empty-state-timeline-track-color);
  }
  .invoice-empty-state .timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--gutter-xs);
  }
  .invoice-empty-state .timeline-labels span {
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
  .invoice-empty-state .timeline-dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }
  .invoice-empty-state .timeline-dot.current {
    background-color: var(--billing-empty-state-timeline-color);
    cursor: pointer;
  }
  .invoice-empty-state .timeline-dot.future {
    border: 2px solid var(--billing-empty-state-timeline-color);
    background-color: var(--billing-empty-state-dot-background-color);
  }
  .sequence-empty-state .sequence-odometer {
    display: flex;
    gap: 5px;
    margin-bottom: 16px;
    font-size: 40px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sequence-odometer-digit-color);
  }
  .sequence-empty-state .odometer-digit {
    position: relative;
    height: 1em;
    padding: 0 0.14em;
    overflow: hidden;
    background: var(--sequence-odometer-card-background-color);
    border: 1px solid var(--sequence-odometer-card-border-color);
    border-radius: 0.12em;
    box-sizing: content-box;
  }
  .sequence-empty-state .odometer-digit::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--sequence-odometer-card-shade-color), transparent 30%, transparent 70%, var(--sequence-odometer-card-shade-color));
  }
  .sequence-empty-state .odometer-reel {
    display: block;
  }
  .sequence-empty-state .odometer-reel span {
    display: block;
    height: 1em;
    line-height: 1;
    text-align: center;
  }
  .sequence-empty-state .units .odometer-reel {
    animation: sequence-odometer-roll-units 20s ease-in-out infinite;
  }
  .sequence-empty-state .tens .odometer-reel {
    animation: sequence-odometer-roll-tens 200s ease-in-out infinite;
  }
  .sequence-empty-state .hundreds .odometer-reel {
    animation: sequence-odometer-roll-hundreds 2000s ease-in-out infinite;
  }
  .sequence-empty-state .thousands .odometer-reel {
    animation: sequence-odometer-roll-thousands 20000s ease-in-out infinite;
  }
  .sequence-empty-state .thousands .odometer-reel {
    animation-delay: -2000s;
  }
  @media (prefers-reduced-motion: reduce) {
    .sequence-empty-state .odometer-reel {
      animation: none;
    }
    .sequence-empty-state .thousands .odometer-reel {
      transform: translateY(-1em);
    }
  }
  @keyframes sequence-odometer-roll-units {
    0%, 8% {
      transform: translateY(-0em);
    }
    10%, 18% {
      transform: translateY(-1em);
    }
    20%, 28% {
      transform: translateY(-2em);
    }
    30%, 38% {
      transform: translateY(-3em);
    }
    40%, 48% {
      transform: translateY(-4em);
    }
    50%, 58% {
      transform: translateY(-5em);
    }
    60%, 68% {
      transform: translateY(-6em);
    }
    70%, 78% {
      transform: translateY(-7em);
    }
    80%, 88% {
      transform: translateY(-8em);
    }
    90%, 98% {
      transform: translateY(-9em);
    }
    100% {
      transform: translateY(-10em);
    }
  }
  @keyframes sequence-odometer-roll-tens {
    0%, 9.8% {
      transform: translateY(-0em);
    }
    10%, 19.8% {
      transform: translateY(-1em);
    }
    20%, 29.8% {
      transform: translateY(-2em);
    }
    30%, 39.8% {
      transform: translateY(-3em);
    }
    40%, 49.8% {
      transform: translateY(-4em);
    }
    50%, 59.8% {
      transform: translateY(-5em);
    }
    60%, 69.8% {
      transform: translateY(-6em);
    }
    70%, 79.8% {
      transform: translateY(-7em);
    }
    80%, 89.8% {
      transform: translateY(-8em);
    }
    90%, 99.8% {
      transform: translateY(-9em);
    }
    100% {
      transform: translateY(-10em);
    }
  }
  @keyframes sequence-odometer-roll-hundreds {
    0%, 9.98% {
      transform: translateY(-0em);
    }
    10%, 19.98% {
      transform: translateY(-1em);
    }
    20%, 29.98% {
      transform: translateY(-2em);
    }
    30%, 39.98% {
      transform: translateY(-3em);
    }
    40%, 49.98% {
      transform: translateY(-4em);
    }
    50%, 59.98% {
      transform: translateY(-5em);
    }
    60%, 69.98% {
      transform: translateY(-6em);
    }
    70%, 79.98% {
      transform: translateY(-7em);
    }
    80%, 89.98% {
      transform: translateY(-8em);
    }
    90%, 99.98% {
      transform: translateY(-9em);
    }
    100% {
      transform: translateY(-10em);
    }
  }
  @keyframes sequence-odometer-roll-thousands {
    0%, 9.998% {
      transform: translateY(-0em);
    }
    10%, 19.998% {
      transform: translateY(-1em);
    }
    20%, 29.998% {
      transform: translateY(-2em);
    }
    30%, 39.998% {
      transform: translateY(-3em);
    }
    40%, 49.998% {
      transform: translateY(-4em);
    }
    50%, 59.998% {
      transform: translateY(-5em);
    }
    60%, 69.998% {
      transform: translateY(-6em);
    }
    70%, 79.998% {
      transform: translateY(-7em);
    }
    80%, 89.998% {
      transform: translateY(-8em);
    }
    90%, 99.998% {
      transform: translateY(-9em);
    }
    100% {
      transform: translateY(-10em);
    }
  }
  @keyframes merge-file-arrive {
    0%, 10% {
      opacity: 1;
      translate: 0;
      scale: 1;
    }
    35%, 94% {
      opacity: 0;
      translate: var(--merge-file-travel) 0;
      scale: 0.7;
    }
    95% {
      opacity: 0;
      translate: 0;
      scale: 1;
    }
    100% {
      opacity: 1;
      translate: 0;
      scale: 1;
    }
  }
  @keyframes merge-file-combine {
    0%, 33% {
      opacity: 0;
      scale: 0;
    }
    37% {
      opacity: 1;
      scale: 1.08;
    }
    39%, 89% {
      opacity: 1;
      scale: 1;
    }
    94%, 100% {
      opacity: 0;
      scale: 0.9;
    }
  }
  @keyframes rocket-flame-shake {
    0%, 100% {
      transform: rotate(-2.5deg) scale(1);
    }
    20% {
      transform: rotate(3.5deg) scale(1.05);
    }
    40% {
      transform: rotate(-4deg) scale(0.97);
    }
    55% {
      transform: rotate(2deg) scale(1.04);
    }
    75% {
      transform: rotate(-1.5deg) scale(1);
    }
    88% {
      transform: rotate(3deg) scale(1.03);
    }
  }
  @keyframes mug-steam-rise {
    0%, 100% {
      opacity: 0.35;
      fill: currentColor;
      transform: translateY(0);
    }
    50% {
      opacity: 0.55;
      fill: var(--color-bondi-blue-75);
      transform: translateY(-9px);
    }
  }
}
@layer theme {
  .usage-list {
    margin-top: 8px;
    margin-bottom: 8px;
    max-height: 240px;
    overflow-y: auto;
    padding-left: 18px;
  }
  .usage-list li {
    padding: 2px 0;
    overflow-wrap: anywhere;
    list-style: disc;
  }
}
@layer theme {
  .address-validation-icon.success {
    color: var(--icon-success-color);
  }
  .address-validation-icon.warning {
    color: var(--icon-warning-color);
  }
  .address-validation-icon.danger {
    color: var(--icon-danger-color);
  }
  .address-validation-icon.muted {
    color: var(--icon-muted-color);
  }
  .address-validations {
    margin-top: 12px;
  }
  .address-validations .address-validations-heading {
    margin: 0 0 6px;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .address-validations .address-validation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .address-validations .provider {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .address-validations .provider .icon {
    width: 16px;
    height: 16px;
  }
  .address-validations .provider .title {
    font-weight: 600;
  }
  .address-validations .provider .status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .address-validations .provider .timestamp {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .address-validations .messages {
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .address-validations .messages .suggestion {
    display: block;
    font-style: italic;
  }
  .address-validations .stale-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .address-validations .address-validation-history {
    margin-top: 8px;
  }
  .address-validations .address-validation-history summary {
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .address-validations .address-validation-history .address-validation-list {
    margin-top: 8px;
  }
}
@keyframes loading-indicator-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes button-spinner-reveal {
  from {
    display: none;
  }
  to {
    display: inline;
  }
}
@keyframes button-spinner-icon-hide {
  from {
    display: inline-block;
  }
  to {
    display: none;
  }
}
@keyframes icon-swap-success-fade {
  to {
    opacity: 0;
  }
}
@layer theme {
  .loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--loading-indicator-duration) ease-in var(--loading-indicator-delay);
  }
  .loading-indicator i {
    font-size: 20px;
    color: var(--loading-indicator-color);
  }
  .loading-indicator.htmx-request, :is(.htmx-request, .loading) > .loading-indicator {
    opacity: 1;
  }
  .loading-indicator--inline {
    display: inline-flex;
    padding: 0;
  }
  .loading-indicator--inline i {
    font-size: inherit;
  }
  .addon-field:has(> .loading-indicator--field) {
    position: relative;
  }
  .loading-indicator--field {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 var(--gutter-xs);
  }
  .loading-indicator--field i {
    font-size: var(--font-size);
  }
  .loading-indicator--overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--loading-indicator-overlay-background-color);
  }
  .loading-indicator--overlay i {
    font-size: 28px;
  }
  .loading-indicator--sticky {
    position: sticky;
    top: 30%;
    z-index: 10;
    height: 0;
    padding: 0;
  }
  .loading-indicator--sticky i {
    font-size: 32px;
  }
  .loading-indicator--placeholder {
    display: none;
    opacity: 1;
    transition: none;
  }
  .loading-indicator--placeholder.htmx-request, :is(.htmx-request, .loading) > .loading-indicator--placeholder {
    display: flex;
    animation: loading-indicator-reveal var(--loading-indicator-duration) ease-in var(--loading-indicator-delay) both;
  }
  .loading-indicator--replace {
    display: none;
    opacity: 1;
    transition: none;
    padding: 80px 0 0;
  }
  .loading-indicator--replace i {
    font-size: 32px;
  }
  .loading-indicator--replace.htmx-request, :is(.htmx-request, .loading) > .loading-indicator--replace {
    display: flex;
  }
  .icon-swap {
    display: inline-grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: center;
  }
  .icon-swap > i {
    grid-area: stack;
    transition: opacity var(--loading-indicator-duration) ease-in var(--loading-indicator-delay);
  }
  .icon-swap > i:last-child {
    opacity: 0;
  }
  .icon-swap > i.success-fade {
    z-index: 1;
    color: var(--icon-success-color);
    animation: icon-swap-success-fade 0.4s ease 1.2s forwards;
  }
  .button-spinner {
    display: none;
  }
  :is(button:is(.htmx-request, .submitting),
  a.htmx-request,
  form.htmx-request :is(button[type=submit], button:not([type])),
  .side-panel:has(form.htmx-request) footer button[type=submit],
  body:has([data-confirm-title].htmx-request) .modal-dialog:not(.form-modal) footer button:not(.cancel)) {
    pointer-events: none;
  }
  :is(button:is(.htmx-request, .submitting),
  a.htmx-request,
  form.htmx-request :is(button[type=submit], button:not([type])),
  .side-panel:has(form.htmx-request) footer button[type=submit],
  body:has([data-confirm-title].htmx-request) .modal-dialog:not(.form-modal) footer button:not(.cancel)) .button-spinner {
    display: inline;
    animation: button-spinner-reveal 0s var(--loading-indicator-delay) both;
  }
  :is(button:is(.htmx-request, .submitting),
  a.htmx-request,
  form.htmx-request :is(button[type=submit], button:not([type])),
  .side-panel:has(form.htmx-request) footer button[type=submit],
  body:has([data-confirm-title].htmx-request) .modal-dialog:not(.form-modal) footer button:not(.cancel)) .button-spinner ~ :is(i, img) {
    display: none;
    animation: button-spinner-icon-hide 0s var(--loading-indicator-delay) both;
  }
  :is(button:is(.htmx-request, .submitting),
  a.htmx-request,
  form.htmx-request :is(button[type=submit], button:not([type])),
  .side-panel:has(form.htmx-request) footer button[type=submit],
  body:has([data-confirm-title].htmx-request) .modal-dialog:not(.form-modal) footer button:not(.cancel)) .icon-swap > i:first-child {
    opacity: 0;
  }
  :is(button:is(.htmx-request, .submitting),
  a.htmx-request,
  form.htmx-request :is(button[type=submit], button:not([type])),
  .side-panel:has(form.htmx-request) footer button[type=submit],
  body:has([data-confirm-title].htmx-request) .modal-dialog:not(.form-modal) footer button:not(.cancel)) .icon-swap > i:last-child {
    opacity: 1;
  }
  .button-spinner--leading {
    position: absolute;
    top: 50%;
    right: calc(100% + var(--gutter-xs));
    transform: translateY(-50%);
  }
  :is(button, a.button).primary .fa-spinner {
    color: var(--form-button-primary-default-text-color);
  }
  .icon-swap.htmx-request > i:first-child,
  :is(label, span, tr).htmx-request .icon-swap > i:first-child {
    opacity: 0;
  }
  .icon-swap.htmx-request > i:last-child,
  :is(label, span, tr).htmx-request .icon-swap > i:last-child {
    opacity: 1;
  }
}
@layer theme {
  body:has(#profiler-bar) {
    padding-bottom: var(--profiler-bar-height);
  }
  #profiler-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    gap: var(--gutter-md);
    align-items: center;
    flex-wrap: nowrap;
    height: var(--profiler-bar-height);
    padding: 0 var(--gutter-md);
    background-color: var(--profiler-bar-background-color);
    color: var(--profiler-bar-text-color);
    font-family: var(--font-family-alternative);
    font-size: var(--font-size-sm);
    box-shadow: 0 -1px 4px var(--profiler-bar-shadow-color);
  }
  #profiler-bar .summary, #profiler-bar #profiler-bar-last {
    display: flex;
    gap: var(--gutter-sm);
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }
  #profiler-bar .summary > span + span, #profiler-bar #profiler-bar-last > span + span {
    padding-left: var(--gutter-sm);
    border-left: 1px solid var(--profiler-bar-separator-color);
  }
  #profiler-bar .summary {
    flex: none;
  }
  #profiler-bar #profiler-bar-last {
    overflow: hidden;
  }
  #profiler-bar .path {
    overflow: hidden;
    color: var(--profiler-bar-path-color);
    text-overflow: ellipsis;
  }
  #profiler-bar .repeats {
    color: var(--profiler-bar-repeats-color);
  }
  #profiler-bar .spacer {
    flex: 1;
  }
  #profiler-bar a {
    color: var(--profiler-bar-text-color);
  }
}
@layer theme {
  tr.selected-route > td {
    background-color: var(--query-profile-selected-background-color);
  }
}
@layer theme {
  .query-profile .query-group {
    border-bottom: 1px solid var(--query-profile-border-color);
  }
  .query-profile .query-group summary {
    display: flex;
    gap: var(--gutter-sm);
    align-items: center;
    padding: var(--gutter-xs) 0;
    cursor: pointer;
  }
  .query-profile .query-group summary .preview {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .query-profile .query-group .detail {
    padding: var(--gutter-sm) 0 var(--gutter-md);
  }
  .query-profile .query-group .detail .frames {
    max-height: 320px;
    overflow-y: auto;
  }
  .query-profile .query-group .detail .frames li {
    padding: 2px 0;
  }
  .query-profile .query-group .detail .runs {
    max-height: 240px;
    margin-top: var(--gutter-sm);
    overflow-y: auto;
  }
  .query-profile .query-group .detail .runs li {
    display: flex;
    gap: var(--gutter-xs);
    align-items: center;
    flex-wrap: wrap;
  }
}
@layer theme {
  @media screen and (width > 576px) {
    .invoice-store-cell {
      width: 100%;
      max-width: 0;
    }
  }
  .invoice-store {
    display: flex;
    align-items: center;
  }
  .invoice-store .inline-icon-right {
    flex-shrink: 0;
    margin-left: auto;
  }
  .invoice-store-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .payment-refund td {
    padding-top: 0;
  }
  .refund-payment-amount {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
@layer theme {
  .api-settings .secret-row, .api-key-created .secret-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 490px;
    padding: 14px 16px;
    border: 1px solid var(--color-divider);
    border-radius: var(--border-radius);
  }
  .api-settings .secret-row .secret-name, .api-key-created .secret-row .secret-name {
    font-weight: 500;
  }
  .api-settings .secret-row .secret-value, .api-key-created .secret-row .secret-value {
    flex-basis: 100%;
    word-break: break-all;
    font-size: var(--font-size-sm);
  }
  #generate-api-keys .section-header {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    margin-bottom: var(--gutter-sm);
  }
  #generate-api-keys .section-header p {
    padding-bottom: 0;
  }
  .api-settings {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .api-settings .section-header .header {
    max-width: 70ch;
  }
  .api-settings .regenerate-secret {
    margin-top: 10px;
    color: var(--default-text-secondary-color);
  }
  @media screen and (hover: hover) {
    .api-settings .regenerate-secret:hover {
      color: var(--default-text-primary-color);
    }
  }
  .api-settings td {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media screen and (width > 576px) {
    .api-settings table {
      white-space: wrap;
      display: grid;
      grid-template-columns: minmax(120px, 1fr) max-content minmax(150px, 2fr) max-content max-content max-content;
    }
    .api-settings thead, .api-settings thead tr {
      width: 100%;
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1/-1;
      grid-row: 1/2;
    }
    .api-settings tbody, .api-settings tbody tr {
      width: 100%;
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1/-1;
    }
    .api-settings tbody {
      width: 100%;
    }
    .api-settings td, .api-settings th {
      display: flex;
      align-items: center;
    }
  }
  .api-settings .credentials {
    display: flex;
    gap: 4px;
    justify-content: center;
    overflow: hidden;
  }
  .api-settings .credentials span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .api-settings .credentials i {
    color: var(--table-credentials-icon-color);
  }
  @media screen and (hover: hover) {
    .api-settings .credentials i:hover {
      color: var(--copy-icon-hover-color);
    }
  }
  .api-settings .no-records {
    grid-column: 1/-1;
  }
  .api-settings i {
    cursor: pointer;
  }
  @media screen and (width <= 576px) {
    .api-settings .mobile-only {
      color: var(--default-text-secondary-color);
    }
    .api-settings td {
      display: flex;
      justify-content: space-between;
      gap: 4px;
    }
    .api-settings .space-between {
      flex-direction: column;
      gap: 10px;
    }
    .api-settings .space-between button {
      min-width: 100%;
    }
  }
}
@layer theme {
  .automation-log-header .header-row + .header-row {
    margin-top: 16px;
  }
}
html.anonymous body:has(> main.create-store) > #banner-container {
  position: static;
  grid-row: 2;
}

html.anonymous main.content-container.create-store {
  grid-row: 3;
}
@media screen and (width > 576px) {
  html.anonymous main.content-container.create-store {
    max-width: calc(650px + var(--gutter-md) * 2);
  }
}

@layer theme {
  .create-store-wizard .wizard-body {
    max-width: 650px;
  }
  @media screen and (width <= 576px) {
    .create-store-wizard .wizard-body {
      max-width: 100%;
    }
  }
  .create-store-wizard .settings-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gutter-md);
    align-items: start;
  }
  @media screen and (width <= 576px) {
    .create-store-wizard .settings-step {
      grid-template-columns: 1fr;
    }
  }
  .create-store-wizard .settings-step .selectable-card-choices {
    display: flex;
    gap: 12px;
  }
  .create-store-wizard .settings-step .store-selector {
    grid-column: 1/-1;
  }
  .create-store-wizard .store-selector {
    max-width: none;
    background-color: var(--color-concrete);
    border-radius: var(--border-radius);
    padding: var(--gutter-md);
  }
  .create-store-wizard .store-selector > label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--gutter-sm);
  }
  .create-store-wizard .store-selector > od-select {
    width: 100%;
    margin-bottom: var(--gutter-md);
  }
  .create-store-wizard .store-selector .store-list {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .create-store-wizard .linked-billing-info {
    background-color: var(--color-concrete);
    border-radius: var(--border-radius);
    padding: var(--gutter-md);
    margin-top: var(--gutter-md);
    text-align: center;
  }
  .create-store-wizard .linked-billing-info > div > p {
    color: var(--color-pale-sky);
  }
  .create-store-wizard .linked-billing-info .store-names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--gutter-sm);
    font-weight: 600;
    color: var(--color-nile-blue);
  }
  .create-store-wizard .linked-billing-info .store-names i {
    color: var(--color-pale-sky);
  }
  .create-store-wizard .linked-billing-info #plan-selector {
    margin-top: var(--gutter-sm);
  }
  .create-store-wizard .linked-billing-info #plan-selector > label > span {
    display: none;
  }
  .create-store-wizard .billing-step .billing-content {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    margin-top: var(--gutter-md);
  }
  .create-store-wizard .billing-step .store-selector {
    margin-top: var(--gutter-md);
  }
}
@layer theme {
  .simple-layout header[data-confetti] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .welcome {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    max-width: 980px;
  }
  .welcome .welcome-intro {
    max-width: 75ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--default-text-secondary-color);
  }
  .welcome .welcome-features,
  .welcome .welcome-requests {
    display: grid;
    gap: var(--gutter-md);
  }
  .welcome .welcome-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .welcome .welcome-requests {
    grid-template-columns: repeat(3, 1fr);
  }
  .welcome .welcome-card {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    padding: 20px;
    border: 1px solid var(--color-divider);
    border-radius: var(--border-radius);
    background: var(--welcome-card-background-color);
  }
  .welcome .welcome-card > i {
    font-size: 22px;
    color: var(--welcome-icon-color);
  }
  .welcome .welcome-card h2,
  .welcome .welcome-card h3 {
    margin: 0;
  }
  .welcome .welcome-card p {
    margin: 0;
    line-height: 1.55;
    color: var(--default-text-secondary-color);
  }
  .welcome .welcome-card.spotlight {
    grid-column: 1/-1;
    border-color: var(--welcome-spotlight-border-color);
    background: var(--welcome-spotlight-background-color);
  }
  .welcome .welcome-kicker {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--welcome-kicker-color);
  }
  .welcome .welcome-requests-heading {
    margin: var(--gutter-xs) 0 0;
  }
  .welcome .welcome-outro > i {
    font-size: 18px;
  }
  @media screen and (width <= 576px) {
    .welcome .welcome-features,
    .welcome .welcome-requests {
      grid-template-columns: 1fr;
    }
  }
}
@layer theme {
  .mailer-integration-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-xxs) var(--gutter-sm);
    margin-top: var(--gutter-xs);
    color: var(--default-text-secondary-color);
  }
  .mailer-integration-offer > span {
    flex-basis: 100%;
  }
  .mailer-integration-offer form {
    display: contents;
  }
  .mailer-callout {
    margin-top: var(--gutter-md);
  }
  .labeled-field-with-action {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .field-with-action {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .field-with-action .field-control {
    flex: 1 1 220px;
  }
  .field-with-action button {
    flex-shrink: 0;
  }
}
@layer ui {
  body.error main .not-found {
    display: flex;
    gap: 50px;
    padding: 24px;
    height: calc(100dvh - var(--header-height));
    align-items: center;
  }
  @media (width > 992px) {
    body.error main .not-found {
      flex-direction: row;
      justify-content: center;
    }
  }
  @media (width <= 992px) {
    body.error main .not-found {
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 50px;
    }
  }
  body.error main .not-found .button {
    margin-top: var(--gutter-md);
  }
  body.error main .not-found img {
    animation: float 3s ease-in-out infinite;
  }
  @media (width > 992px) {
    body.error main .not-found img {
      max-width: 350px;
    }
  }
  @media (width <= 992px) {
    body.error main .not-found img {
      max-width: 300px;
    }
  }
  @keyframes float {
    0% {
      transform: translate(0px, 0px);
    }
    25% {
      transform: translate(-10px, 15px);
    }
    50% {
      transform: translate(-20px, 5px);
    }
    75% {
      transform: translate(-10px, -10px);
    }
    100% {
      transform: translate(0px, 0px);
    }
  }
}
@layer theme {
  .error-log {
    list-style: none;
    padding: 0;
  }
  .error-log > li {
    padding: 8px 24px;
    border-bottom: 1px solid var(--color-divider);
  }
  .error-log .error-entry {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 8px;
  }
  .error-log .error-entry code {
    word-break: break-word;
  }
  .error-log details {
    font-size: 12px;
    color: var(--default-text-secondary-color);
  }
  .error-log details summary {
    cursor: pointer;
  }
  .error-log details ul {
    padding-left: 16px;
    list-style: none;
    font-family: var(--font-family-alternative);
  }
}
@layer theme {
  .integration-connect .actions {
    margin-block: 12px;
  }
  .integration-connection-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .integration-website-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
  }
  .integration-website-controls label {
    display: contents;
  }
  .integration-website-controls label > span, .integration-website-controls .addon-field, .integration-website-controls .invalid-feedback {
    grid-column: 1;
  }
  .integration-website-controls .addon-field input {
    min-width: 0;
  }
  .integration-website-controls button {
    grid-column: 2;
    grid-row: 2;
    height: calc(var(--form-control-height) + 2px);
    white-space: nowrap;
  }
  .integrations form.filters {
    margin-bottom: 0;
  }
  @media screen and (width > 576px) {
    .integrations form.filters {
      align-items: flex-start;
    }
    .integrations form.filters > input[type=search],
    .integrations form.filters .filter-select .select-container {
      width: 280px;
    }
  }
  .integrations .card-count {
    margin-bottom: var(--gutter-sm);
    font-size: var(--font-size-sm);
    color: var(--integration-card-count-text-color);
  }
  .integrations .new-filter-container {
    display: flex;
    position: relative;
    height: 40px;
    margin-left: auto;
  }
  @media screen and (width <= 576px) {
    .integrations .new-filter-container {
      margin-left: 0;
    }
  }
  .integrations .new-filter-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .integrations .new-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 190px;
    height: 100%;
    padding: 0 12px;
    border-radius: var(--border-radius);
    background-color: var(--integration-new-filter-background-color);
    color: var(--integration-new-filter-text-color);
    font-size: var(--font-size-sm);
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
    transition: background-color 0.15s ease;
    cursor: pointer;
  }
  .integrations .new-filter .clear-new {
    display: none;
  }
  @media screen and (hover: hover) {
    .integrations .new-filter:hover {
      background-color: var(--integration-new-filter-hover-background-color);
    }
  }
  @media screen and (width <= 576px) {
    .integrations .new-filter {
      max-width: none;
      text-wrap: normal;
    }
  }
  .integrations .new-filter-toggle:checked + .new-filter .see-new {
    display: none;
  }
  .integrations .new-filter-toggle:checked + .new-filter .clear-new {
    display: inline-flex;
    gap: 5px;
    align-items: center;
  }
  .integrations .new-filter-toggle:focus-visible + .new-filter {
    outline: 2px solid var(--integration-new-filter-focus-ring-color);
    outline-offset: 2px;
  }
  .integrations .card {
    background-color: var(--integration-card-background-color);
  }
  .integrations .card.enabled {
    background-color: var(--integration-card-enabled-background-color);
  }
  .integrations .card header .badge {
    padding-inline: 5px;
  }
  .integrations .card.dev:not(.enabled) {
    border: 1px dashed var(--integration-card-dev-border-color);
  }
  .integrations .card.retired:not(.enabled) {
    border: 1px dashed var(--integration-card-retired-border-color);
  }
  .integrations .card.active::before, .integrations .card.needs-setup::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: 3px 3px 0 0;
  }
  .integrations .card.active::before {
    background-color: var(--integration-card-active-bar-color);
  }
  .integrations .card.needs-setup::before {
    background-color: var(--integration-card-needs-setup-bar-color);
  }
  .integrations .card .dev-marker {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--integration-card-dev-marker-icon-color);
    font-size: 27px;
    line-height: 1;
    opacity: 0.2;
  }
  .integrations .card .corner-ribbon {
    position: absolute;
    inset: 0 0 auto auto;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-top-right-radius: 4px;
    pointer-events: none;
  }
  .integrations .card .corner-ribbon span {
    position: absolute;
    top: 11px;
    left: 0;
    width: 108px;
    padding: 3px 0;
    rotate: 45deg;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
  }
  .integrations .card .corner-ribbon.new span {
    background-color: var(--integration-card-new-ribbon-background-color);
    color: var(--integration-card-new-ribbon-text-color);
  }
  .integrations .card .corner-ribbon.retired span {
    background-color: var(--integration-card-retired-ribbon-background-color);
    background-image: radial-gradient(circle at 25% 15%, var(--integration-card-retired-ribbon-highlight-color), transparent 55%), radial-gradient(circle at 80% 85%, var(--integration-card-retired-ribbon-shadow-color), transparent 60%);
    color: var(--integration-card-retired-ribbon-text-color);
    box-shadow: inset 0 1px 0 var(--integration-card-retired-ribbon-highlight-color), inset 0 -1px 2px var(--integration-card-retired-ribbon-shadow-color);
    text-shadow: 0 1px 0 var(--integration-card-retired-ribbon-shadow-color);
  }
  .integrations .card .corner-ribbon.beta span {
    background-color: var(--integration-card-beta-ribbon-background-color);
    background-image: radial-gradient(circle at 25% 15%, var(--integration-card-beta-ribbon-highlight-color), transparent 55%), radial-gradient(circle at 80% 85%, var(--integration-card-beta-ribbon-shadow-color), transparent 60%);
    color: var(--integration-card-beta-ribbon-text-color);
    box-shadow: inset 0 1px 0 var(--integration-card-beta-ribbon-highlight-color), inset 0 -1px 2px var(--integration-card-beta-ribbon-shadow-color);
    text-shadow: 0 1px 0 var(--integration-card-beta-ribbon-shadow-color);
  }
  .integrations .card footer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--gutter-sm);
  }
  .integrations .card .category-chips {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
  }
  .integrations .card .category-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background-color: var(--integration-card-chip-background-color);
    color: var(--integration-card-chip-text-color);
    font-size: 12px;
  }
  .callout.install-link,
  .callout.connect-notice {
    margin-bottom: var(--gutter-md);
  }
  .custom-app-connect {
    max-width: 480px;
  }
  .custom-app-connect h2 {
    margin-bottom: var(--gutter-xs);
  }
  .custom-app-connect > p {
    margin-bottom: var(--gutter-md);
    color: var(--default-text-secondary-color);
  }
  .custom-app-connect .custom-app-scopes {
    margin-bottom: var(--gutter-md);
    font-size: var(--font-size-sm);
  }
  .custom-app-connect .custom-app-scopes summary {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    cursor: pointer;
    list-style: none;
    color: var(--default-text-secondary-color);
    -webkit-user-select: none;
    user-select: none;
  }
  .custom-app-connect .custom-app-scopes summary::-webkit-details-marker {
    display: none;
  }
  .custom-app-connect .custom-app-scopes summary:hover {
    color: var(--default-text-primary-color);
  }
  .custom-app-connect .custom-app-scopes summary i {
    font-size: 12px;
    transition: transform 0.15s ease;
  }
  .custom-app-connect .custom-app-scopes[open] summary i {
    transform: rotate(90deg);
  }
  .custom-app-connect .custom-app-scopes ul {
    margin-top: var(--gutter-xs);
    padding-left: var(--gutter-md);
    color: var(--default-text-secondary-color);
  }
  .package-dimensions {
    margin: 0;
  }
  .package-dimensions legend {
    padding: 0;
    margin-bottom: var(--gutter-xxs);
    font-weight: 500;
  }
  .package-dimensions label {
    font-weight: 400;
  }
  .package-dimensions__fields {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--gutter-xs);
    align-items: start;
  }
  .package-dimensions__fields > * {
    min-width: 0;
  }
}
@layer theme {
  .linked-store-view section {
    max-width: var(--select-plan-half-width);
    margin-top: 40px;
  }
  .linked-store-view .linked-store-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .linked-store-view .linked-store-form > :not(button) {
    flex: 1;
  }
  .linked-store-managed-by .content {
    gap: var(--gutter-xxs);
  }
  .linked-store-managed-by .content p {
    margin: 0;
  }
  .linked-store-name {
    font-size: 15px;
    font-weight: 600;
  }
  .linked-store-name i {
    margin-left: 6px;
    font-size: 14px;
  }
}
@layer theme {
  .billing-summary-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter-lg);
    padding: 24px;
  }
  @media screen and (width <= 576px) {
    .billing-summary-banner {
      grid-template-columns: 1fr;
      gap: var(--gutter-md);
      padding: 16px 16px 16px 24px;
    }
  }
  .billing-summary-banner .billing-summary-section {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .billing-summary-banner .plan-header {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .billing-summary-banner .plan-header a:hover i {
    color: var(--default-link-color);
  }
  .billing-summary-banner dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gutter-xxs) var(--gutter-md);
    margin: 0;
  }
  .billing-summary-banner dl dt {
    color: var(--default-text-secondary-color);
  }
  .billing-summary-banner dl dd {
    margin: 0;
  }
  .billing-summary-banner dl dd.service-credit {
    color: var(--billing-service-credit-color);
  }
  .billing-summary-banner .payment-method-display {
    display: flex;
    align-items: center;
    gap: var(--gutter-md);
  }
  .billing-summary-banner .payment-method-display .payment-detail {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
  }
  .billing-summary-banner .payment-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .billing-summary-banner .payment-actions .share-update-link {
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
  .billing-summary-banner .payment-actions .share-update-link [data-copy-to-clipboard] {
    color: var(--default-link-color);
    cursor: pointer;
  }
  .billing-summary-banner .payment-actions .share-update-link [data-copy-to-clipboard]:hover {
    text-decoration: underline;
  }
}
@layer theme {
  .notification-type {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
    padding: 15px;
    border: 1px solid var(--notification-type-border-color);
    border-radius: var(--border-radius);
    background: var(--notification-type-background-color);
  }
  .notification-type .notification-type-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 42px;
    line-height: 1;
    color: var(--notification-type-icon-color);
  }
  .notification-type .notification-type-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .notification-type .notification-type-header strong {
    font-size: 16px;
  }
  .notification-type .notification-type-header .legend {
    padding: 0;
  }
  .notification-type .notification-type-users {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
html.anonymous .container.integration-install {
  gap: var(--gutter-md);
  align-self: start;
  margin-top: calc(var(--gutter-md) * 8);
}

@layer theme {
  .container.integration-install {
    align-items: center;
    text-align: center;
  }
  .container.integration-install form {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    width: 18rem;
    max-width: 100%;
  }
  .container.integration-install .select-container {
    text-align: left;
  }
  .integration-install-store {
    width: 18rem;
    max-width: 100%;
  }
  .integration-install-store .store-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .integration-install-store .integration-install-create-option {
    border-bottom: 1px solid var(--form-field-border-default-color);
    font-weight: 500;
  }
  .integration-install-store .integration-install-create-option i, .integration-install-store .integration-install-create-option.selected i {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 16px;
    color: var(--integration-install-create-icon-color);
  }
  .integration-install-store .integration-install-selection-icon {
    display: none;
    order: -1;
    font-size: 16px;
    color: var(--integration-install-create-icon-color);
  }
  .integration-install-store .select-container:has(select option[value=new][selected]) .integration-install-selection-icon {
    display: inline-flex;
  }
}
@layer theme {
  html.landing {
    min-height: 100%;
    background-color: var(--landing-background-color);
  }
  html.landing body {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    background: radial-gradient(ellipse at top, var(--landing-background-accent-color), var(--landing-background-color) 70%);
    color: var(--landing-text-color);
    font-family: var(--font-family-main);
  }
  html.landing header {
    position: relative;
    z-index: 1;
    display: block;
    padding: 40px 48px;
    background: none;
  }
  html.landing header img {
    height: 28px;
  }
  @media screen and (width <= 576px) {
    html.landing header {
      padding: 24px 16px;
    }
    html.landing header img {
      height: 20px;
    }
  }
  html.landing main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px 64px;
  }
  @media screen and (width < 900px) {
    html.landing main {
      grid-template-columns: none;
      justify-items: center;
      text-align: center;
      gap: 32px;
    }
  }
  @media screen and (width <= 576px) {
    html.landing main {
      padding: 0 16px 40px;
    }
  }
  html.landing .landing-hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: landing-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @media screen and (width < 900px) {
    html.landing .landing-hero {
      align-items: center;
    }
  }
  html.landing h1 {
    max-width: 12ch;
    padding: 0 0 0.15em;
    background: linear-gradient(100deg, var(--landing-title-color) 40%, var(--landing-title-highlight-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(40px, 7vw, 84px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  html.landing .landing-subtitle {
    max-width: 34ch;
    padding: 0;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6;
  }
  html.landing .landing-pulse {
    display: flex;
    gap: 10px;
  }
  html.landing .landing-pulse span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--landing-pulse-color);
    animation: landing-pulse 1.4s ease-in-out infinite;
  }
  html.landing .landing-pulse span:nth-child(2) {
    animation-delay: 200ms;
  }
  html.landing .landing-pulse span:nth-child(3) {
    animation-delay: 400ms;
  }
  html.landing .landing-otto {
    width: clamp(220px, 32vw, 440px);
    height: auto;
    filter: drop-shadow(0 24px 48px var(--landing-background-color));
    animation: landing-rise 900ms 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both, landing-float 4s 1050ms ease-out forwards;
  }
  html.landing .landing-glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  html.landing .landing-glow span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.45;
    animation: landing-drift 18s ease-in-out infinite alternate;
  }
  html.landing .landing-glow span:nth-child(1) {
    top: -15%;
    left: -10%;
    width: 55vmax;
    height: 55vmax;
    background-color: var(--landing-glow-primary-color);
  }
  html.landing .landing-glow span:nth-child(2) {
    right: -15%;
    bottom: -25%;
    width: 50vmax;
    height: 50vmax;
    background-color: var(--landing-glow-secondary-color);
    animation-duration: 22s;
    animation-direction: alternate-reverse;
  }
  html.landing .landing-glow span:nth-child(3) {
    top: 30%;
    right: 25%;
    width: 18vmax;
    height: 18vmax;
    background-color: var(--landing-glow-accent-color);
    opacity: 0.18;
    animation-duration: 14s;
  }
  @media (prefers-reduced-motion: reduce) {
    html.landing .landing-hero,
    html.landing .landing-otto,
    html.landing .landing-pulse span,
    html.landing .landing-glow span {
      animation: none;
    }
  }
  @keyframes landing-rise {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes landing-float {
    to {
      transform: translateY(-14px);
    }
  }
  @keyframes landing-pulse {
    0%, 100% {
      opacity: 0.3;
      transform: scale(0.8);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes landing-drift {
    to {
      transform: translate(6vmax, 4vmax) scale(1.1);
    }
  }
}
@layer theme {
  main .action-bar {
    transform: translateY(calc(100% + var(--gutter-md) + 5px));
    transition: transform 0.45s var(--ease-in-out-expo);
  }
  main .action-bar.visible {
    transform: translateY(0);
  }
  table.orders tr:is(.htmx-request, :has(.preview-swap.htmx-request)) .order-id > a > .button-spinner {
    display: inline;
    animation: button-spinner-reveal 0s var(--loading-indicator-delay) both;
  }
  table.orders tr:is(.htmx-request, :has(.preview-swap.htmx-request)) .order-id > a > .button-spinner + :is(img, i) {
    display: none;
    animation: button-spinner-icon-hide 0s var(--loading-indicator-delay) both;
  }
  table.orders .tag {
    font-size: 12px;
    line-height: 20px;
    padding: 4px 12px;
    border-radius: 4px;
  }
  table.orders .order-id {
    display: flex;
    font-size: 14px;
    line-height: 14px;
    font-family: var(--font-family-roboto);
    font-weight: 500;
    align-items: center;
    gap: var(--gutter-xxs);
  }
  table.orders .order-id > a {
    display: flex;
    align-items: center;
    gap: inherit;
  }
  table.orders .order-id img {
    width: var(--fa-width, 1.25em);
    height: 14px;
    object-fit: contain;
  }
  table.orders .order-id .fa-file-lines {
    position: relative;
    top: 1px;
    color: var(--order-list-source-icon-color);
  }
  @media screen and (width <= 576px) {
    table.orders .order-id .fa-chevron-right {
      color: var(--icon-gray);
      margin-left: auto;
      line-height: 14px;
    }
    table.orders .order-total {
      font-weight: 700;
      font-size: 1.143rem;
    }
    table.orders .order-total .label {
      font-weight: 500;
      font-family: var(--font-family-roboto);
      font-size: 0.86rem;
      line-height: 0.86rem;
    }
    table.orders .tags {
      padding: var(--gutter-xxs) 0;
    }
  }
}
@layer theme {
  .order-details header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 24px;
    gap: 15px;
  }
  .order-details header .order-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .order-details header .order-actions:has(> form.htmx-request) > .button-spinner {
    display: inline;
    animation: button-spinner-reveal 0s var(--loading-indicator-delay) both;
  }
  .order-details header .order-actions od-select {
    min-width: 180px;
    max-width: 320px;
  }
  .order-details header .order-actions .dropdown-trigger {
    min-height: var(--form-control-height);
  }
  .order-details header h1 {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0;
  }
  .order-details header h1 img {
    width: 28px;
  }
  .order-details header h1 .order-source-trigger {
    display: inline-flex;
    cursor: pointer;
  }
  .order-details .order-header {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    flex: 1 1 0;
    min-width: 0;
    row-gap: 4px;
    column-gap: 10px;
    padding-left: 38px;
  }
  @media screen and (width <= 576px) {
    .order-details .order-header {
      flex-basis: 100%;
    }
  }
  .order-details .order-header > :not(.badge) {
    padding-left: 0;
    padding-right: 0;
  }
  .order-details .order-header .edit-trigger {
    visibility: hidden;
    color: var(--color-gray);
    font-size: var(--font-size-sm);
    padding: 0 10px;
  }
  @media screen and (hover: hover) {
    .order-details .order-header .edit-trigger:hover {
      color: var(--form-button-text-hover-text-color);
    }
  }
  .order-details .order-header:hover .edit-trigger {
    visibility: visible;
  }
  .order-details .order-header h1 {
    min-width: 0;
    margin-left: -38px;
  }
  .order-details .order-header [data-copy-to-clipboard] {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-details .order-date {
    color: var(--order-details-order-date-color);
    font-size: var(--font-size-sm);
    padding: 0;
  }
  .order-details .legend {
    padding-left: 24px;
  }
  .order-details .address-info {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 5px;
  }
  .order-details .address-info p {
    padding: 0;
  }
  .order-details .side-panel .address-info .actions {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .order-details .side-panel .address-info .actions button {
    max-width: unset;
    width: unset;
  }
  .order-details .side-panel .address-info .actions .button.text {
    padding-left: 0;
    padding-right: 0;
  }
  .order-details .side-panel .address-info p {
    padding: 0;
  }
  .order-notes {
    margin-bottom: var(--gutter-lg);
  }
  .order-notes .order-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .order-notes .order-notes-header .button {
    padding-right: 0;
  }
  .order-notes .order-notes-empty {
    padding: 12px 0;
    color: var(--default-text-secondary-color);
    font-size: 13px;
  }
  .order-notes .order-note {
    padding: 12px 0;
    border-top: 0.5px solid var(--color-divider);
  }
  .order-notes .order-note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .order-notes .order-note-author {
    font-weight: 500;
  }
  .order-notes .order-note-body {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }
  .order-notes .order-note-content {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    white-space: pre-line;
    overflow-wrap: break-word;
  }
  .order-notes .order-note-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--order-details-note-delete-color);
    padding: 0;
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: opacity 150ms;
  }
  .order-notes .order-note:hover .order-note-delete {
    opacity: 1;
  }
  .order-content {
    display: flex;
    gap: 20px;
  }
  .order-content i.order-detail-icon {
    color: var(--color-gray);
  }
  .order-content .button.text:hover i.order-detail-icon {
    color: var(--form-button-text-hover-text-color);
  }
  .order-content .item-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .order-content .item-thumbnail {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
  }
  .order-content .item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .order-content .item-fulfillment-status {
    color: var(--icon-muted-color);
  }
  .order-content .item-fulfillment-status.fulfilled {
    color: var(--icon-success-color);
  }
  .order-content .history-group-row {
    background-color: var(--table-expandable-row-background-color);
  }
  @media screen and (width <= 576px) {
    .order-content {
      flex-wrap: wrap;
    }
  }
  .order-content > div {
    flex: 2;
    min-width: 0;
  }
  .order-content > div section + section {
    margin-top: 40px;
  }
  .order-content section.order-tabs, .order-content section.order-items, .order-content section.order-history, .order-content section.order-notes {
    padding-right: 0;
  }
  .order-content section.order-tabs h2, .order-content section.order-items h2, .order-content section.order-history h2, .order-content section.order-notes h2 {
    padding: 12px 0 0;
  }
  .order-content .order-history td:first-child {
    position: relative;
    padding-right: 24px;
  }
  .order-content .order-history .timestamp {
    position: relative;
  }
  .order-content .order-history .history-permalink {
    position: absolute;
    right: 8px;
    top: 50%;
    translate: 0 -50%;
    opacity: 0;
    color: var(--default-text-secondary-color);
    transition: opacity 0.15s;
  }
  .order-content .order-history tr:hover .history-permalink {
    opacity: 1;
  }
  .order-content .order-history .history-delete {
    position: absolute;
    right: -20px;
    top: 50%;
    translate: 0 -50%;
    opacity: 0;
    transition: opacity 0.15s;
    background-color: var(--color-background);
    padding-left: 4px;
  }
  .order-content .order-history .history-delete button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: var(--font-size-sm);
  }
  .order-content .order-history .history-group-row .history-delete {
    background-color: var(--table-expandable-row-background-color);
  }
  .order-content .order-history tr:hover .history-delete {
    opacity: 1;
  }
  .order-content .order-history .history-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .order-content .order-history .history-group-toggle .toggle-hide {
    display: none;
  }
  .order-content .order-history .history-group-toggle[data-expanded] .toggle-more {
    display: none;
  }
  .order-content .order-history .history-group-toggle[data-expanded] .toggle-hide {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .order-content .order-items-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: var(--gutter-xs);
    background: var(--order-details-fulfillment-actions-background);
    font-size: 13px;
  }
  .order-content .order-items-footer > span {
    color: var(--order-details-fulfillment-actions-text);
  }
  .order-content .order-items-footer a:not(.button) {
    color: var(--order-details-fulfillment-actions-link);
    font-weight: 500;
  }
  .order-content .order-items-footer .item-management,
  .order-content .order-items-footer .fulfillment-management {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .order-content .order-items-footer .fulfillment-management:has(.visible) .fulfillment-nudge {
    display: none;
  }
  .order-content .order-items-footer .fulfillment-nudge,
  .order-content .order-items-footer .fulfill-selection {
    padding-right: var(--gutter-xs);
  }
  .order-content .order-items-footer .fulfill-selection {
    display: none;
  }
  .order-content .order-items-footer .visible .fulfill-selection {
    display: inline;
  }
  .order-content .order-merge-notice {
    margin-bottom: var(--gutter-sm);
  }
  .order-content .order-merge-notice .content {
    gap: 0;
  }
  .order-content .order-merge-notice p {
    margin: 0;
  }
  .order-content .order-merge-notice .callout-title {
    font-size: calc(var(--font-size) * 1.2);
  }
  .order-content .order-tabs th:first-child:has(input[type=checkbox]), .order-content .order-tabs td:first-child {
    padding-left: 8px;
  }
  .order-content .order-tabs td:last-child {
    padding-right: 8px;
  }
  .order-content .order-tabs .order-items td:last-child {
    position: relative;
  }
  .order-content .order-tabs .order-items td:last-child a.clickable i {
    color: var(--icon-muted-color);
  }
  .order-content .order-tabs .order-items td:last-child a.clickable::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  @media screen and (hover: hover) {
    .order-content .order-tabs .order-items td:last-child a.clickable:hover i {
      color: var(--form-button-text-hover-text-color);
    }
  }
  .order-content .order-tabs .tab-bar {
    display: flex;
  }
  .order-content .order-tabs .tab-bar .tab-trigger {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-pale-sky);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 150ms, border-color 150ms;
  }
  .order-content .order-tabs .tab-bar .tab-trigger.active {
    color: var(--default-text-primary-color);
    border-bottom-color: var(--default-text-primary-color);
  }
  .order-content .order-tabs [data-tab-panel] {
    display: none;
  }
  .order-content .order-tabs [data-tab-panel].active {
    display: block;
  }
  .order-content .order-tabs [data-tab-panel][data-tab-panel=fulfillments].active {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .order-data {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .order-data > div,
  .order-data > form {
    background: var(--body-background-color);
    padding: 10px 20px;
    border-radius: var(--border-radius);
  }
  .order-data > .integration-field-container {
    padding: 0;
    background: none;
  }
  .order-data i {
    color: var(--color-gray);
  }
  .order-data .order-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }
  .order-data .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .order-data dl {
    margin: 0;
  }
  .order-data h4 {
    margin-bottom: 0;
  }
  .order-data dt {
    text-align: start;
  }
  .order-data dd {
    text-align: end;
  }
  .order-data dd.email-address {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .order-data .order-addresses dt a {
    padding: 0;
  }
  .order-data .order-addresses dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-data .order-addresses dd.order-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    justify-self: end;
    overflow-wrap: anywhere;
    text-align: start;
    white-space: normal;
  }
  .order-data .linked-orders dl + dl {
    margin-top: var(--gutter-xs);
  }
  .order-data .linked-orders a > img {
    width: 1em;
    height: 1em;
    object-fit: contain;
    vertical-align: -0.125em;
  }
  .order-data .linked-orders a > i {
    color: inherit;
  }
  .order-data .linked-orders dd .store-name {
    display: block;
    color: var(--color-gray);
    font-size: var(--font-size-sm);
  }
  .order-data .shipping-address-block {
    margin-top: var(--gutter-xs);
  }
  .order-data .shipping-address-block .address-info {
    position: relative;
  }
  .order-data .shipping-address-block .address-info p {
    margin: 0;
    padding: 0;
  }
  .order-data .shipping-address-block .address-info .copy-address {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 150ms;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  @media screen and (hover: hover) {
    .order-data .shipping-address-block .address-info .copy-address:hover i {
      color: var(--copy-icon-hover-color);
    }
  }
  .order-data .shipping-address-block .address-info:hover .copy-address {
    opacity: 1;
  }
  .order-data a.button {
    padding: 0;
  }
  .order-data .order-documents i,
  .order-data .order-labels i {
    color: inherit;
  }
  .side-panel .section header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sidepanel-section-header-border-color);
    padding-bottom: 8px;
    margin-bottom: var(--panel-gutter);
  }
  .side-panel .section header h3 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .side-panel .section header .actions {
    display: flex;
    gap: 5px;
  }
  .side-panel .section header .actions button {
    max-width: unset;
    width: unset;
  }
  .side-panel .section .address-info p {
    padding: 0;
  }
  .side-panel .section.order-labels {
    margin-top: var(--panel-gutter);
  }
  .side-panel .section.order-labels .label-entry:first-of-type {
    padding-top: 0;
  }
  .side-panel .section .single-field .select-container {
    flex: 1;
  }
  .side-panel .section .single-field button {
    width: auto;
    max-width: none;
    height: 36px;
  }
  .order-message-view {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
  }
  .order-addresses .section + .section {
    margin-top: var(--panel-gutter);
  }
  .order-addresses .section header {
    margin-bottom: var(--gutter-xs);
  }
  .order-totals {
    gap: var(--gutter-xxs) 16px;
  }
  .order-totals .order-totals-group {
    padding-top: var(--gutter-xxs);
  }
  .order-totals .order-totals-detail {
    padding-inline-start: var(--gutter-sm);
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .order-totals .order-totals-grand {
    padding-top: var(--gutter-xs);
    font-weight: 600;
    border-top: 1px solid var(--color-divider);
  }
  .order-totals .order-totals-code {
    margin-inline-start: var(--gutter-xxs);
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .order-totals .order-totals-code::before {
    content: "· ";
  }
  .line-total-discounted {
    display: inline-flex;
    gap: var(--gutter-xxs);
    align-items: baseline;
  }
  .line-total-discounted s {
    color: var(--default-text-secondary-color);
  }
  .payment-details-summary dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gutter-xxs) 16px;
  }
  .payment-details-summary dl dt {
    font-weight: 500;
    color: var(--default-text-secondary-color);
  }
  .payment-details-summary dl dd {
    text-align: end;
  }
  .payment-details-summary dl dd.payment-details-grand {
    font-weight: 600;
  }
  .payment-form-row.two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter-xs);
  }
  .payment-form-row.two-up > * {
    min-width: 0;
  }
  .payment-read-only {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-divider);
  }
  .payment-read-only dl {
    display: grid;
    grid-template-columns: minmax(100px, max-content) 1fr;
    gap: var(--gutter-xxs) 16px;
    font-size: 13px;
  }
  .payment-read-only dl dt {
    font-weight: 500;
    color: var(--default-text-secondary-color);
  }
  .payment-read-only dl dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .handling-fees-section {
    margin-top: 16px;
  }
  .handling-fees-section [data-collapse] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
  }
  .handling-fees-section [data-collapse] i {
    font-size: 10px;
    transition: transform 150ms ease;
  }
  .handling-fees-section [data-collapse]:not(.collapsed) i {
    transform: rotate(90deg);
  }
  .handling-fees-section .handling-fees-content {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .handling-fees-section .handling-fees-content [data-add-fieldset-row] {
    align-self: center;
    width: fit-content;
  }
  .handling-fees-section .handling-fees-content [data-add-fieldset-row] i {
    color: var(--icon-muted-color);
  }
  @media screen and (hover: hover) {
    .handling-fees-section .handling-fees-content [data-add-fieldset-row]:hover i {
      color: inherit;
    }
  }
  .fieldset-field {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
    min-width: 0;
  }
  .fieldset-field input {
    width: 100%;
  }
  .handling-fee-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--gutter-xs);
    align-items: start;
  }
  .handling-fee-row .remove-field {
    cursor: pointer;
    color: var(--default-text-secondary-color);
    height: 36px;
    display: flex;
    align-items: center;
  }
  .handling-fee-row .remove-field:hover {
    color: var(--default-text-primary-color);
  }
  .handling-fee-row[hidden] {
    display: none;
  }
  .side-panel [data-repeatable-fieldset=discounts] {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .side-panel [data-repeatable-fieldset=discounts] [data-add-fieldset-row] {
    align-self: center;
    width: fit-content;
  }
  .side-panel [data-repeatable-fieldset=discounts] [data-add-fieldset-row] i {
    color: var(--icon-muted-color);
  }
  @media screen and (hover: hover) {
    .side-panel [data-repeatable-fieldset=discounts] [data-add-fieldset-row]:hover i {
      color: inherit;
    }
  }
  .discount-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--gutter-xs);
    align-items: start;
  }
  .discount-row .remove-field {
    cursor: pointer;
    color: var(--default-text-secondary-color);
    height: 36px;
    display: flex;
    align-items: center;
  }
  .discount-row .remove-field:hover {
    color: var(--default-text-primary-color);
  }
  .discount-row[hidden] {
    display: none;
  }
  .refund-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .refund-entry {
    padding: 12px 0;
  }
  .refund-entry + .refund-entry {
    border-top: 1px solid var(--color-divider);
  }
  .refund-entry .refund-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .refund-entry .refund-amount {
    font-weight: 600;
  }
  .refund-entry .refund-date {
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .refund-entry .refund-reason {
    margin-top: 4px;
    font-size: var(--font-size-sm);
    color: var(--default-text-secondary-color);
  }
  .side-panel .item-preview img {
    max-width: 120px;
    border-radius: 4px;
  }
  .side-panel .item-integration-field-box h4,
  .side-panel .shipment-integration-field-box h4,
  .side-panel .item-details-box dd:has(img.icon) {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .side-panel .item-integration-field-box h4 img.icon,
  .side-panel .shipment-integration-field-box h4 img.icon,
  .side-panel .item-details-box dd:has(img.icon) img.icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
  }
}
@layer theme {
  .new-order {
    display: flex;
    flex-direction: row;
    gap: var(--gutter-md);
    align-items: flex-start;
    padding: var(--gutter-md) 24px;
  }
  .new-order section {
    margin-top: 0;
    padding: 0;
  }
  .new-order .section-body {
    padding: 14px 16px;
  }
  @media screen and (width <= 576px) {
    .new-order {
      flex-wrap: wrap;
    }
  }
  .new-order-main {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    flex: 1;
    min-width: 0;
  }
  .new-order-reveal {
    align-self: flex-start;
  }
  .new-order-reveal[hidden] {
    display: none;
  }
  .new-order-customer .section-body {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .new-order-customer .customer-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter-sm);
  }
  @media screen and (width <= 576px) {
    .new-order-customer .customer-fields {
      grid-template-columns: 1fr;
    }
  }
  .new-order-customer .new-order-reveals {
    display: flex;
    gap: var(--gutter-md);
  }
  .new-order-customer .shipping-address-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .new-order-customer .shipping-address-fields[hidden] {
    display: none;
  }
  .new-order-items.awaiting-items {
    border-color: var(--new-order-accent-color);
  }
  .new-order-items .section-head-action {
    min-width: 280px;
    position: relative;
  }
  @media screen and (width <= 576px) {
    .new-order-items .section-head-action {
      min-width: 0;
      width: 100%;
    }
  }
  .new-order-items-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gutter-xxs);
    padding: 32px 16px;
    color: var(--new-order-empty-text-color);
    text-align: center;
  }
  .new-order-item-price input {
    width: 7em;
    text-align: right;
  }
  .new-order-items-footer {
    display: flex;
    padding: 6px 10px;
    border-top: 1px solid var(--color-divider);
  }
  .new-order-items-footer a.button.text {
    padding: 6px 0;
  }
  .new-order-item-errors td {
    padding-top: 0;
    border-top: none;
  }
  .new-order-item-delete {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .new-order-item-delete i {
    color: var(--new-order-item-delete-color);
  }
  @media screen and (hover: hover) {
    .new-order-item-delete:hover i {
      color: var(--new-order-item-delete-hover-color);
    }
  }
  .new-order-notes textarea {
    width: 100%;
  }
  .new-order-notes[hidden] {
    display: none;
  }
  .new-order-rail {
    flex: 0 0 340px;
    max-width: 340px;
  }
  @media screen and (width <= 576px) {
    .new-order-rail {
      flex-basis: 100%;
      max-width: none;
    }
  }
  .new-order-rail .new-order-guide {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .new-order-rail .new-order-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .new-order-rail .new-order-progress h2 {
    font-size: 14px;
    margin: 0;
  }
  .new-order-rail .new-order-progress progress {
    width: 100%;
    height: 4px;
    appearance: none;
    border: none;
    border-radius: 2px;
    background: var(--new-order-progress-track-color);
    overflow: hidden;
  }
  .new-order-rail .new-order-progress progress::-webkit-progress-bar {
    background: var(--new-order-progress-track-color);
    border-radius: 2px;
  }
  .new-order-rail .new-order-progress progress::-webkit-progress-value {
    background: var(--new-order-progress-bar-color);
    border-radius: 2px;
  }
  .new-order-rail .new-order-progress progress::-moz-progress-bar {
    background: var(--new-order-progress-bar-color);
    border-radius: 2px;
  }
  .new-order-rail .new-order-steps {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .new-order-rail .new-order-step {
    margin: 0;
    font-size: 13px;
  }
  .new-order-rail .new-order-step.done {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .new-order-rail .new-order-step.done i {
    color: var(--new-order-step-done-icon-color);
  }
  .new-order-rail .new-order-step.upcoming {
    color: var(--new-order-step-upcoming-color);
  }
  .new-order-rail .new-order-step.current {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .new-order-rail .new-order-step.current h3 {
    font-size: 13px;
    margin: 0;
  }
  .new-order-rail .new-order-step.current p {
    margin: 0;
  }
  .new-order-rail .new-order-step.current .button.text.inline {
    align-self: flex-start;
  }
  .new-order-rail .new-order-save {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .new-order-rail .new-order-save .new-order-tags-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .new-order-rail .new-order-save .button.primary {
    width: 100%;
    max-width: 100%;
  }
  .new-order-rail .new-order-save .legend {
    margin: 0;
  }
}
@layer theme {
  .email-template-edit > form {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    padding: 24px;
  }
  .email-template-edit label {
    min-width: 0;
  }
  .email-template-edit .template-editor-footer {
    display: flex;
    gap: var(--template-pane-gap);
  }
  .email-template-edit .template-editor-footer > * {
    flex: 1;
    min-width: 0;
  }
  .email-template-edit .template-advanced-options summary {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    cursor: pointer;
    color: var(--default-text-secondary-color);
    font-weight: 600;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .email-template-edit .template-advanced-options summary::-webkit-details-marker {
    display: none;
  }
  .email-template-edit .template-advanced-options summary:hover {
    color: var(--default-text-primary-color);
  }
  .email-template-edit .template-advanced-options summary i {
    font-size: 12px;
    transition: transform 0.15s ease;
  }
  .email-template-edit .template-advanced-options[open] summary i {
    transform: rotate(90deg);
  }
  .email-template-edit .template-advanced-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-xs);
    margin-top: var(--gutter-xs);
  }
  .email-template-edit .template-advanced-options-grid .advanced-option-full {
    grid-column: 1/-1;
  }
  .email-template-edit .label-with-tooltip {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xxs);
  }
  .email-template-edit .tooltip-icon {
    cursor: help;
    color: var(--default-text-secondary-color);
  }
  .email-template-edit .tooltip-icon:hover {
    color: var(--default-text-primary-color);
  }
  .email-template-edit .email-template-preview {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--gutter-xs);
    min-height: 0;
  }
  .email-template-edit .send-preview-section {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .email-template-edit .send-preview-result:empty {
    display: none;
  }
  .email-template-edit:not(:has(.preview-iframe)) .send-preview-section, .email-template-edit:has(.template-editor[data-view-mode=editor]) .send-preview-section {
    display: none;
  }
  @media screen and (width <= 1350px) {
    .email-template-edit:has(.template-editor[data-view-mode=split]) .send-preview-section {
      display: none;
    }
  }
  @media screen and (width <= 576px) {
    .email-template-edit .template-advanced-options-grid {
      grid-template-columns: 1fr;
    }
  }
}
@layer theme {
  .order-document-template-edit > form {
    gap: var(--gutter-xs);
    padding: 24px;
  }
  .order-document-template-edit .document-preview {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .order-document-template-edit .document-preview .preview-iframe {
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
  }
  .order-document-template-edit .document-preview-empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gutter-xs);
    min-height: 300px;
    text-align: center;
  }
  .order-document-template-edit .document-preview-empty i {
    font-size: 2rem;
    color: var(--default-text-secondary-color);
    opacity: 0.5;
  }
  .order-document-template-edit .document-preview-empty p {
    margin: 0;
  }
}
@layer theme {
  .product-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px var(--gutter-md);
    align-items: start;
  }
  @media screen and (width <= 576px) {
    .product-details {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .product-tags {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }
  .product-tags .store-tag {
    padding: 2px 8px;
    border-radius: var(--border-radius);
    display: flex;
    gap: 4px;
    box-shadow: var(--shadow-highest);
  }
  .product-tags i {
    color: var(--products-custom-card-tag-x-color);
    border-radius: 2px;
  }
  @media screen and (hover: hover) {
    .product-tags i:hover {
      background-color: var(--form-select-option-tag-hover-color);
      cursor: pointer;
    }
  }
  .tabs-content:has(> #product-list) {
    padding-top: var(--gutter-md);
  }
  #product-list > .list-actions {
    margin: 0 0 var(--gutter-xs);
  }
  #product-list td.main-title .badge {
    margin-left: var(--gutter-xs);
    font-weight: 400;
  }
  .simple-layout section.filter-section {
    padding-bottom: var(--gutter-xs);
  }
  dd.copyable-value {
    display: flex;
    align-items: center;
    gap: var(--gutter-xxs);
    width: fit-content;
  }
  dd.copyable-value button {
    display: flex;
    line-height: inherit;
  }
  dd.copyable-value i {
    margin: 0;
  }
  .product-history {
    margin-bottom: var(--gutter-lg);
  }
  .product-history > header {
    padding-top: var(--gutter-xs);
  }
  .product-view {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(min-content, 1fr) 400px;
    grid-template-rows: min-content 1fr min-content;
  }
  .product-view section > header a {
    color: var(--form-button-text-default-text-color);
  }
  @media screen and (hover: hover) {
    .product-view section > header a:hover {
      color: var(--form-button-text-hover-text-color);
    }
  }
  .product-view:has(> .discontinued-notice, > .product-bundles-callout) {
    grid-template-rows: min-content min-content 1fr;
  }
  .product-view:has(> .discontinued-notice):has(> .product-bundles-callout) {
    grid-template-rows: min-content min-content min-content 1fr;
  }
  .product-view > header {
    padding: 0 24px;
    border-bottom: 1px solid var(--content-header-border-color);
    grid-column: 1/-1;
    grid-row: 1/2;
  }
  .product-view > header .header-actions {
    margin-right: 0;
  }
  @media screen and (width <= 576px) {
    .product-view > header .header-actions {
      padding: 0 0 12px;
    }
  }
  .product-view .left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-column: 1/2;
    padding-left: 24px;
  }
  .product-view .right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-column: 2/3;
    padding-right: 24px;
  }
  .product-view .inventory tbody tr {
    border: none;
  }
  .product-view .inventory td:first-child {
    font-weight: 500;
  }
  .inventory .section-head-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 26px;
  }
  .inventory thead th {
    padding: 1px 8px 0;
  }
  .inventory tbody td {
    box-sizing: content-box;
    height: 28px;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
  }
  .inventory tbody td:first-child {
    line-height: 28px;
  }
  .inventory form {
    overflow-x: auto;
  }
  .inventory form th:nth-child(2),
  .inventory form th:nth-child(3),
  .inventory form th:nth-child(4),
  .inventory form th:last-child {
    width: 1px;
    white-space: nowrap;
  }
  .inventory th:first-child,
  .inventory td:first-child {
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .inventory td.percentage-cell input[type=text] {
    width: 45px;
  }
  .inventory td.quantity-cell:has(+ td.remove-inventory) {
    padding-right: 0;
  }
  .inventory td.remove-inventory {
    padding-left: 0;
    padding-right: 0;
  }
  .inventory .inventory-add button {
    padding-left: 0;
  }
  .inventory .remove-inventory button {
    padding: 6px;
  }
  @media screen and (hover: hover) {
    .inventory .remove-inventory button:hover i {
      color: var(--default-link-color);
    }
  }
  .inventory .unsaved-indicator {
    display: none;
  }
  .inventory tbody tr.no-inventory .inventory-fields {
    display: none;
  }
  .inventory tbody tr:not(.no-inventory) .inventory-add {
    display: none;
  }
  .inventory .stepped-integer {
    display: flex;
  }
  .inventory .stepped-integer input {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 28px;
  }
  .inventory input[type=text] {
    width: 64px;
    min-height: 26px;
    padding: 4px 8px;
    text-align: right;
  }
  .inventory .reporting-fields .addon-field {
    width: fit-content;
  }
  .inventory .inherited {
    color: var(--form-field-placeholder-default-color);
  }
  .product-bundles-callout {
    grid-column: 1/-1;
    margin: 0 24px;
  }
  .product-bundles-callout .callout-title {
    padding: 0;
  }
  .product-bundles-callout .bundle-links {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .product-bundles-callout .bundle-links a {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--products-bundle-chip-border-color);
    border-radius: var(--border-radius);
    background-color: var(--products-bundle-chip-background-color);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 150ms;
  }
  @media screen and (hover: hover) {
    .product-bundles-callout .bundle-links a:hover {
      background-color: var(--products-bundle-chip-hover-background-color);
    }
  }
  .product-bundles-callout .bundle-links .bundle-quantity {
    color: var(--products-bundle-chip-quantity-color);
    font-size: var(--font-size-sm);
    white-space: nowrap;
  }
  .product-bundles-callout .bundle-links .bundle-quantity i {
    font-size: 0.8em;
    --fa-width: 1em;
  }
  @media screen and (width > 576px) {
    .content-header:has(> .product-header) {
      flex-wrap: nowrap;
      gap: var(--gutter-md);
    }
  }
  .content-header:has(> .product-header) > .header-actions {
    position: relative;
  }
  .content-header:has(> .product-header) > .header-actions:has(> form.htmx-request) > .button-spinner {
    display: inline;
    animation: button-spinner-reveal 0s var(--loading-indicator-delay) both;
  }
  .product-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .product-header h1 {
    padding: 20px 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .content-header .product-header h1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    text-wrap: balance;
  }
  .content-header .product-header h1.opened {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
  }
  .product-header h1.untitled {
    color: var(--products-untitled-title-color);
  }
  .discontinued-notice {
    grid-column: 1/-1;
    margin: 0 24px;
  }
  .discontinued-notice .content p {
    padding: 0;
  }
  .discontinued-notice .callout-title {
    font-size: 1.286rem;
    line-height: 1.57rem;
  }
  .discontinued-notice > button {
    flex: none;
  }
  @media screen and (width <= 576px) {
    .discontinued-notice {
      flex-wrap: wrap;
    }
    .discontinued-notice > button {
      width: 100%;
    }
  }
  .product-name {
    display: flex;
    flex-direction: column;
  }
  .product-name p {
    padding: 0;
    color: var(--sidepanel-text-secondary-color);
    font-size: 12px;
  }
  .product-name h1 {
    padding: 0 0 5px;
  }
  .product-name h2 {
    padding: 0;
  }
  .reporting-heading {
    margin-top: 12px;
  }
  .reporting-heading h3 {
    margin-bottom: 4px;
  }
  .addon-field.reporting-defaults {
    width: fit-content;
  }
  .addon-field.reporting-defaults input {
    flex: none;
    width: 72px;
  }
  .bundle > header {
    padding: 0 24px;
    border-bottom: 1px solid var(--content-header-border-color);
  }
  .bundle > header h1 {
    padding: 20px 0;
  }
  .bundle > header .header-actions {
    margin-right: 0;
  }
  .bundle section > h2 {
    margin-bottom: var(--gutter-sm);
  }
  .bundle > section + section {
    margin-top: 24px;
  }
  .bundle .contained {
    max-width: 600px;
  }
  .bundle .bundle-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
  }
  .bundle .bundle-columns .left,
  .bundle .bundle-columns .right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .bundle .bundle-columns .left {
    padding-left: 24px;
  }
  .bundle .bundle-columns .right {
    padding-right: 24px;
  }
  .bundle .bundle-columns section {
    margin-top: 0;
    padding: 0;
  }
  @media screen and (width <= 576px) {
    .bundle .bundle-columns {
      grid-template-columns: minmax(0, 1fr);
    }
    .bundle .bundle-columns .left {
      padding-right: 24px;
    }
    .bundle .bundle-columns .right {
      padding-left: 24px;
    }
  }
  .bundle dl {
    padding-left: 0;
  }
  .bundle section.section-card h2 {
    margin-bottom: 0;
  }
  .bundle .bundle-products-widget {
    max-width: 600px;
  }
  .bundle .bundle-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: var(--gutter-md);
  }
  .bundle .bundle-totals td {
    color: var(--products-bundle-total-color);
    font-weight: 500;
    height: 54px;
  }
  .remove-bundle-item {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--products-bundle-picker-color);
    padding: 4px;
  }
  .remove-bundle-item:hover {
    color: var(--products-bundle-picker-hover-color);
  }
  .bundle-product-rows input[type=text] {
    max-width: 48px;
    min-height: 26px;
    padding: 4px 8px;
    text-align: center;
  }
  .bundle-summary th.align-right,
  .bundle-summary td.align-right {
    white-space: nowrap;
  }
  .bundle-summary tfoot td {
    border-top: 1px solid var(--color-divider);
  }
  .bundle-item-ghost {
    position: fixed;
    z-index: var(--index-highest);
    pointer-events: none;
    overflow: hidden;
    background-color: var(--products-bundle-picker-hover-background-color);
  }
  .bundle-item-ghost table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
  }
  .bundle-item-ghost tr {
    border: none;
    background-color: transparent;
  }
  @keyframes bundle-item-landed {
    from {
      background-color: var(--products-bundle-landed-background);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .bundle-product-rows tr:hover,
    .bundle-available-products .picker-row:hover {
      background-color: var(--products-bundle-picker-hover-background-color);
    }
    .bundle-product-rows tr.is-arriving,
    .bundle-available-products tr.is-arriving {
      display: none;
    }
    .bundle-item-space td {
      padding: 0;
    }
    .bundle-product-rows tr.has-landed,
    .bundle-available-products tr.has-landed {
      animation: bundle-item-landed 0.9s ease-out;
    }
    .remove-bundle-item {
      transition: transform 0.15s var(--ease-in-out-expo);
    }
    .remove-bundle-item:active {
      transform: translateY(3px) scale(0.9);
    }
  }
  .bundle-empty-row td {
    text-align: center;
    color: var(--form-select-placeholder-color);
    padding: 24px 12px;
  }
  .name-and-sku {
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }
  .name-and-sku .name {
    font-weight: 500;
    color: var(--form-button-text-default-text-color);
  }
  .name-and-sku .link-hint {
    font-size: var(--font-size-sm);
    margin-left: 4px;
    color: var(--products-thumbnail-placeholder-color);
  }
  .name-and-sku .sku {
    font-weight: 400;
    color: var(--form-button-default-disabled-text-color);
  }
  @media screen and (hover: hover) {
    a.name-and-sku:hover .name {
      text-decoration: underline;
    }
  }
  .bundle-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .product-thumbnail {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--border-radius);
    background-color: var(--color-concrete);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product-thumbnail i {
    font-size: 16px;
    color: var(--products-thumbnail-placeholder-color);
  }
  .product-thumbnail .edit-icon {
    display: none;
  }
  @media screen and (hover: hover) {
    .product-thumbnail.editable:hover img,
    .product-thumbnail.editable:hover .placeholder-icon {
      display: none;
    }
    .product-thumbnail.editable:hover .edit-icon {
      display: inline-block;
    }
  }
  .product-thumbnail.editable.htmx-request :is(img, .placeholder-icon, .edit-icon) {
    display: none;
  }
  .product-thumbnail.editable.htmx-request .loading-indicator {
    padding: 0;
  }
  .bundle-products-widget {
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  .bundle-products-widget .bundle-products {
    margin: 0;
  }
  .bundle-products thead th {
    font-family: var(--font-family-main);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--default-text-secondary-color);
  }
  .bundle-products th:first-child, .bundle-products td:first-child {
    padding-left: 12px;
  }
  .bundle-products th:last-child, .bundle-products td:last-child {
    padding-right: 12px;
  }
  .bundle-products .bundle-search td {
    padding-left: 0;
    padding-right: 0;
  }
  .bundle-products .bundle-item-grip {
    display: none;
    padding: 4px;
    margin-right: 4px;
    cursor: grab;
    color: var(--products-bundle-picker-color);
  }
  @media screen and (hover: hover) {
    .bundle-products .bundle-item-grip {
      display: inline-block;
    }
  }
  .bundle-products tr.ghost {
    display: flex;
    align-items: center;
    border: 1px solid var(--products-bundle-chip-border-color);
    border-radius: var(--border-radius);
    background-color: var(--products-bundle-chip-background-color);
  }
  .bundle-products tr.ghost td:not(:has(.bundle-product-cell)) {
    display: none;
  }
  .bundle-products .drop-hover {
    background-color: var(--products-bundle-landed-background);
  }
  .bundle-products .bundle-add-zone, .bundle-products .bundle-remove-zone {
    display: none;
  }
  .bundle-products .bundle-add-zone td, .bundle-products .bundle-remove-zone td {
    padding: 8px 12px;
  }
  @media screen and (hover: hover) {
    .bundle-products .bundle-add-zone, .bundle-products .bundle-remove-zone {
      display: table-row-group;
    }
  }
  .bundle-products .drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 2px dashed var(--products-bundle-chip-border-color);
    border-radius: var(--border-radius);
    color: var(--form-select-placeholder-color);
    opacity: 0.5;
  }
  .bundle-products:has(.bundle-available-products.rearranging) .bundle-add-zone .drop-zone, .bundle-products:has(.bundle-product-rows.rearranging) .bundle-remove-zone .drop-zone {
    opacity: 1;
  }
  .bundle-products .drop-hover .drop-zone {
    border-color: var(--products-bundle-picker-selected-color);
    color: var(--products-bundle-picker-selected-color);
  }
  .bundle-search tr {
    border-bottom: none;
  }
  .bundle-search td {
    padding: 0;
  }
  .bundle-search .search {
    padding: 8px;
    display: flex;
    align-items: center;
    color: var(--form-select-placeholder-color);
  }
  .bundle-search input {
    border: none;
    background: none;
  }
  .bundle-search input:not(:disabled):active, .bundle-search input:not(:disabled):focus, .bundle-search input:not(:disabled):hover {
    border: none;
    box-shadow: none;
    outline: none;
  }
  .bundle-available-products tr {
    border-top: 1px solid var(--color-divider);
    border-bottom: none;
  }
  .bundle-available-products .picker-row {
    cursor: pointer;
  }
  .bundle-available-products .picker-row:hover {
    background-color: var(--products-bundle-picker-hover-background-color);
  }
  .bundle-available-products .picker-row.added {
    display: none;
  }
  .bundle-available-products .picker-toggle {
    color: var(--products-bundle-picker-color);
  }
  .bundle-available-products .picker-toggle .icon-added {
    display: none;
  }
  .bundle-available-products .picker-toggle:hover {
    color: var(--products-bundle-picker-hover-color);
  }
}
@layer theme {
  .plan-estimate-strip {
    margin-top: var(--gutter-md);
    padding: var(--gutter-md) 0;
    background-color: var(--select-plan-estimate-background-color);
  }
  .plan-estimate-strip .plan-estimate-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gutter-md);
    flex-wrap: wrap;
    max-width: var(--select-plan-max-width);
    margin: 0 auto;
    padding: 0 24px;
  }
  .plan-estimate-strip .plan-estimate-summary {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    justify-content: center;
    min-height: 5rem;
  }
  .plan-estimate-strip .plan-estimate-description {
    margin: 0;
  }
  .plan-estimate-strip .plan-estimate-fine {
    margin: 4px 0 0;
    font-size: var(--card-footer-info-text-font-size);
    color: var(--select-plan-label-color);
  }
  .plan-estimate-strip .plan-estimate-sliders {
    display: none;
    flex-direction: column;
    gap: 6px;
  }
  .plan-estimate-strip.customizing .plan-estimate-usage {
    display: none;
  }
  .plan-estimate-strip.customizing .plan-estimate-sliders {
    display: flex;
  }
  .plan-estimate-strip.customizing .toggle-customize {
    display: none;
  }
  .plan-estimate-strip:not(.customizing) .toggle-reset {
    display: none;
  }
  .plan-estimate-strip .plan-estimate-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gutter-sm);
  }
  .plan-estimate-strip .plan-estimate-toggle {
    color: var(--select-plan-accent-color);
  }
  .plan-estimate-strip .plan-estimate-toggle i {
    color: inherit;
  }
  .plan-estimate-strip .plan-estimate-toggle:hover {
    color: var(--select-plan-accent-hover-color);
  }
  .plan-estimate-strip .plan-estimate-values {
    display: flex;
    gap: var(--gutter-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .plan-estimate-strip .plan-estimate-values .plan-estimate-value {
    list-style: none;
    text-align: right;
  }
  .plan-estimate-strip .plan-estimate-values .plan-estimate-value .name {
    display: block;
    font-size: var(--card-footer-info-text-font-size);
    text-transform: uppercase;
    color: var(--select-plan-label-color);
  }
  .plan-estimate-strip .plan-estimate-values .plan-estimate-value .value {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 6em;
    font-weight: 600;
  }
  .plan-estimate-strip .plan-estimate-values .plan-estimate-value .estimate-check {
    display: inline-block;
    width: 1em;
    margin-right: 2px;
    visibility: hidden;
    color: var(--select-plan-recommended-value-color);
  }
  .plan-estimate-strip .plan-estimate-values .plan-estimate-value .estimate-amount {
    font-variant-numeric: tabular-nums;
  }
  .plan-estimate-strip .plan-estimate-values .plan-estimate-value.recommended .value {
    color: var(--select-plan-recommended-value-color);
  }
  .plan-estimate-strip .plan-estimate-values .plan-estimate-value.recommended .estimate-check {
    visibility: visible;
  }
  .plan-slider {
    display: grid;
    grid-template-columns: 10em 4.5em 1fr;
    align-items: center;
    gap: var(--gutter-sm);
  }
  .plan-slider .plan-slider-label {
    font-weight: 600;
  }
  .plan-slider .plan-slider-help {
    margin-left: 4px;
    font-size: 12px;
    color: var(--select-plan-label-color);
    cursor: help;
  }
  .plan-slider .plan-slider-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    color: var(--select-plan-accent-color);
  }
  .plan-slider input[type=range] {
    width: 100%;
    margin: 0;
    cursor: pointer;
    accent-color: var(--select-plan-accent-color);
  }
  .plan-cards.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gutter-md);
    max-width: var(--select-plan-max-width);
    margin: var(--gutter-md) auto 0;
  }
  .plan-cards.card-grid .plan-card {
    flex: 1 1 280px;
    min-width: 280px;
    max-width: 400px;
    border: 2px solid var(--color-divider);
  }
  .plan-cards.card-grid .plan-card.recommended {
    border-color: var(--select-plan-recommended-border-color);
  }
  .plan-cards.card-grid .plan-card > .badge {
    display: none;
    top: -10px;
    right: auto;
    left: 16px;
  }
  .plan-cards.card-grid .plan-card.recommended > .badge {
    display: inline-flex;
  }
  .plan-cards.card-grid .plan-card .plan-tier-description {
    margin: 4px 0 0;
    color: var(--select-plan-label-color);
  }
  .plan-cards.card-grid .plan-card .plan-price {
    margin-top: var(--gutter-md);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--select-plan-price-color);
  }
  .plan-cards.card-grid .plan-card .plan-price .per {
    font-size: 14px;
    font-weight: 400;
    color: var(--select-plan-label-color);
  }
  .plan-cards.card-grid .plan-card .plan-per-order {
    margin: 4px 0 0;
    color: var(--select-plan-accent-color);
  }
  .plan-cards.card-grid .plan-card .plan-product-box {
    margin: var(--gutter-md) 0 var(--gutter-sm);
    padding: 10px 12px;
    background-color: var(--select-plan-product-box-background-color);
    border-radius: var(--border-radius);
  }
  .plan-cards.card-grid .plan-card .plan-product-box .label {
    font-size: var(--card-footer-info-text-font-size);
    text-transform: uppercase;
    color: var(--select-plan-label-color);
  }
  .plan-cards.card-grid .plan-card .plan-product-box .amount {
    font-weight: 600;
  }
  .plan-cards.card-grid .plan-card .plan-product-box .amount .unit {
    font-weight: 400;
    color: var(--select-plan-label-color);
  }
  .plan-cards.card-grid .plan-card .plan-product-box .overage {
    margin-top: 4px;
    color: var(--select-plan-accent-color);
  }
  .plan-cards.card-grid .plan-card .plan-store-line {
    margin: 0;
    font-size: var(--card-footer-info-text-font-size);
    color: var(--select-plan-label-color);
  }
  .plan-cards.card-grid .plan-card .plan-store-line.no-fee {
    font-weight: 600;
    color: var(--select-plan-no-fee-color);
  }
  .plan-footer-note {
    max-width: var(--select-plan-max-width);
    margin: var(--gutter-md) auto 0;
    padding: 0 24px;
    text-align: center;
    color: var(--select-plan-footer-note-color);
  }
  .plan-footer-note i {
    color: var(--select-plan-no-fee-color);
  }
  .plan-change-warning {
    max-width: var(--select-plan-half-width);
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
  }
  .plan-trial-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-md);
    max-width: var(--select-plan-max-width);
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
  }
  .plan-trial-options > .plan-trial-option {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 280px;
    max-width: var(--select-plan-half-width);
  }
  .plan-trial-options .plan-trial-option form {
    margin-top: var(--gutter-sm);
  }
}
@layer theme {
  .shopify-subscription-notice {
    max-width: 560px;
  }
  .shopify-subscription-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-sm);
  }
  .shopify-subscription-actions .button.text {
    padding-left: 0;
  }
}
@layer theme {
  @media screen and (width > 576px) {
    main > div.content:has(> .store-user-edit-page) {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      height: calc(100% - var(--gutter-md));
      min-height: 0;
    }
    .store-user-page.store-user-edit-page {
      grid-template-rows: minmax(0, 1fr);
      min-height: 0;
      padding-bottom: 24px;
    }
    .store-user-page.store-user-edit-page .store-user-sidebar,
    .store-user-page.store-user-edit-page .store-user-content {
      min-height: 0;
      max-height: 100%;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }
    .store-user-page.store-user-edit-page .store-user-sidebar {
      padding-inline: var(--dirty-ring-width);
      margin-inline: calc(-1 * var(--dirty-ring-width));
    }
    .store-user-page.store-user-edit-page .store-user-sidebar > *,
    .store-user-page.store-user-edit-page .store-user-content > * {
      flex-shrink: 0;
    }
    .store-user-page.store-user-edit-page .store-user-content {
      padding-bottom: 168px;
    }
  }
  .store-user-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 24px 192px;
    align-items: start;
  }
  @media screen and (width <= 576px) {
    .store-user-page {
      grid-template-columns: 1fr;
      padding: 16px 16px 128px;
    }
  }
  .store-user-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    min-width: 0;
  }
  .store-user-rail {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--store-user-rail-border-color);
    border-radius: var(--border-radius);
    background: var(--store-user-rail-background-color);
  }
  .store-user-rail > * {
    padding: 16px 20px;
  }
  .store-user-rail > * + * {
    border-top: 1px solid var(--color-divider);
  }
  .store-user-rail .select-all-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .store-user-rail .select-all-header .select-all {
    margin-left: 0;
  }
  .store-user-rail .select-all-header .select-all:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
  .store-user-rail .identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
  }
  .store-user-rail .identity .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
  }
  .store-user-rail .identity .name {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .store-user-rail .identity .email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--default-text-secondary-color);
  }
  .store-user-rail dl {
    grid-template-columns: max-content 1fr;
    gap: 12px 8px;
    font-size: 13px;
  }
  .store-user-rail dl dd {
    text-align: right;
  }
  .store-user-rail .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .store-user-rail .actions form {
    display: contents;
  }
  .store-user-rail .field {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .store-user-staff-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gutter-xs);
    margin-top: var(--gutter-md);
  }
  .store-user-staff-links h3 {
    font-size: 13px;
    color: var(--super-admin-icon-color);
  }
  .store-user-staff-links form {
    display: contents;
  }
  .store-user-staff-links a.button.text.inline,
  .store-user-staff-links button.text.inline {
    display: flex;
    align-items: baseline;
    gap: var(--gutter-xs);
    text-align: left;
  }
  .store-user-staff-links a.button.text.inline i,
  .store-user-staff-links button.text.inline i {
    margin-right: 0;
  }
  .store-user-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
  }
  .store-user-content .section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .store-user-content .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
  }
  .store-user-content .section-header p {
    padding-bottom: 0;
  }
  @media screen and (width <= 576px) {
    .store-user-content .section-header {
      flex-direction: column;
    }
  }
}
@layer theme {
  .processing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    background: var(--color-white);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  @media screen and (hover: hover) {
    .processing-toggle:hover {
      background: var(--tasks-processing-toggle-hover-background);
    }
  }
  .processing-toggle .switch-track {
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--tasks-switch-on-color);
    position: relative;
    transition: background-color 0.15s;
  }
  .processing-toggle .switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 15px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-white);
    transition: left 0.15s;
  }
  .processing-toggle.is-paused .switch-track {
    background: var(--tasks-switch-off-color);
  }
  .processing-toggle.is-paused .switch-track::after {
    left: 2px;
  }
  .stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-sm);
    padding: 0 24px;
    margin-bottom: var(--gutter-md);
  }
  .stat-strip .stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border: 1px solid var(--color-divider);
    border-radius: var(--border-radius);
    background: var(--color-white);
  }
  .stat-strip .stat-figures {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
  }
  .stat-strip .stat-number {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .stat-strip .stat-queued .stat-number {
    color: var(--tasks-stat-queued-color);
  }
  .stat-strip .stat-running .stat-number {
    color: var(--tasks-stat-running-color);
  }
  .stat-strip .stat-tile.is-zero .stat-number {
    color: var(--tasks-secondary-text-color);
  }
  .stat-strip .stat-blocked {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.1;
    color: var(--tasks-secondary-text-color);
    font-variant-numeric: tabular-nums;
    cursor: help;
  }
  .stat-strip .stat-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tasks-secondary-text-color);
  }
  .stat-strip .is-alert {
    background: var(--tasks-stat-alert-background);
    border-color: var(--tasks-pill-failing-background);
  }
  .stat-strip .is-alert .stat-number,
  .stat-strip .is-alert .stat-label {
    color: var(--tasks-stat-alert-color);
  }
  .admin-stat-strip {
    grid-template-columns: repeat(5, 1fr);
  }
  @media screen and (width <= 1024px) {
    .admin-stat-strip {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .tasks-admin .store-icon {
    display: inline-block;
    margin-right: 6px;
    color: var(--tasks-accent-color);
  }
  .tasks-admin .store-cell > a {
    display: inline-block;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  .tasks-admin .group-summary {
    cursor: pointer;
  }
  .tasks-admin .task-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tasks-admin .entity-cell {
    font-variant-numeric: tabular-nums;
    color: var(--default-text-primary-color);
  }
  .tasks-admin .entity-none {
    color: var(--color-iron);
  }
  .tasks-admin .group-summary .group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 550;
    white-space: nowrap;
    color: var(--tasks-accent-color);
  }
  .tasks-admin .group-summary .group-toggle i {
    color: var(--tasks-secondary-text-color);
    transition: transform 0.15s;
  }
  .tasks-admin .admin-group.is-open .group-toggle i {
    transform: rotate(90deg);
  }
  .tasks-admin .group-error-chip {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--tasks-pill-failing-background);
    color: var(--tasks-pill-failing-color);
    border-radius: 999px;
    padding: 1px 8px;
  }
  .tasks-admin .subtask-arrow {
    color: var(--tasks-column-head-color);
    margin-left: 8px;
  }
  .tasks-admin .subtask-entity {
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
  }
  .tasks-admin .group-pager-row > td {
    background: var(--tasks-card-head-background);
  }
  .tasks-admin .group-pager-row .group-pager {
    border-top: none;
    padding-left: 0;
    padding-right: 0;
  }
  .tasks-empty {
    color: var(--tasks-secondary-text-color);
    padding: 24px;
  }
  .tasks-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 56px 24px;
  }
  .tasks-empty-state .empty-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--tasks-accent-color);
    cursor: pointer;
    transition: transform 0.15s;
  }
  @media screen and (hover: hover) {
    .tasks-empty-state .empty-icon:hover {
      transform: scale(1.08);
    }
  }
  .tasks-empty-state h2 {
    margin: 0;
    font-size: 17px;
  }
  .tasks-empty-state p {
    margin: 0;
    max-width: 34rem;
    color: var(--tasks-secondary-text-color);
  }
  .tabbed-content-container .tabs-nav {
    position: relative;
  }
  #tasks-tabs-nav {
    display: contents;
  }
  #admin-webhook-stats {
    display: contents;
  }
  #admin-webhook-stats .stat-tile {
    cursor: pointer;
  }
  #admin-webhook-stats.htmx-request .button-spinner {
    display: inline;
    animation: button-spinner-reveal 0s var(--loading-indicator-delay) both;
  }
  .tasks-auto-refresh {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--tasks-secondary-text-color);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .tasks-auto-refresh input {
    margin: 0;
    cursor: pointer;
  }
  @media screen and (width <= 1024px) {
    .tasks-auto-refresh {
      display: none;
    }
  }
  .tasks-page {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
  }
  .tasks-page .view-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -16px;
    color: var(--tasks-secondary-text-color);
    font-size: var(--font-size-sm);
  }
  .tasks-page .section-description {
    color: var(--tasks-secondary-text-color);
    font-size: var(--font-size-sm);
  }
  .tasks-page td.main-title {
    font-weight: 400;
  }
  .tasks-page .task-row-error td:first-child {
    box-shadow: inset 3px 0 var(--task-row-error-color);
  }
  .tasks-page .task-row-failed td:first-child {
    box-shadow: inset 3px 0 var(--task-row-failed-color);
  }
  .tasks-page .task-error-line {
    font-size: var(--font-size-sm);
    color: var(--task-row-error-color);
    margin-top: 2px;
  }
  .tasks-page .next-run-cell {
    font-variant-numeric: tabular-nums;
  }
  .tasks-page .next-run {
    display: flex;
    flex-direction: column;
  }
  .tasks-page .next-run .next-run-secondary {
    font-size: var(--font-size-sm);
    color: var(--tasks-secondary-text-color);
  }
  .tasks-page .interval {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tasks-secondary-text-color);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .tasks-page .interval-text {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tasks-page .interval-none {
    color: var(--color-iron);
  }
  .tasks-page .task-group .group-head {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .tasks-page .task-group .group-toggle {
    color: var(--tasks-secondary-text-color);
  }
  .tasks-page .task-group .group-toggle i {
    transition: transform 0.15s;
  }
  .tasks-page .task-group.collapsed .group-body {
    display: none;
  }
  .tasks-page .task-group.collapsed .section-head {
    border-bottom: none;
  }
  .tasks-page .task-group.collapsed .group-toggle i {
    transform: rotate(-90deg);
  }
  .tasks-page .sum-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .tasks-page .sum-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: var(--tasks-pill-waiting-background);
    color: var(--tasks-pill-waiting-color);
  }
  .tasks-page .sum-pill.sum-queued {
    background: var(--tasks-pill-queued-background);
    color: var(--tasks-pill-queued-color);
  }
  .tasks-page .sum-pill.sum-running {
    background: var(--tasks-pill-running-background);
    color: var(--tasks-pill-running-color);
  }
  .tasks-page .sum-pill.sum-failing {
    background: var(--tasks-pill-failing-background);
    color: var(--tasks-pill-failing-color);
  }
  .tasks-page tfoot tr {
    border-bottom: none;
  }
  .tasks-page tfoot td {
    border-top: 1px solid var(--color-divider);
    background: var(--tasks-card-head-background);
  }
  .tasks-page tfoot .group-pager {
    border-top: none;
    padding: 0;
  }
  .tasks-page .bulk-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--color-divider);
    background: var(--tasks-bulk-bar-background);
    scroll-margin-bottom: 16px;
  }
  .tasks-page .bulk-bar.visible {
    display: flex;
  }
  .tasks-page .bulk-bar .selected-count {
    font-weight: 600;
    color: var(--tasks-accent-color);
    font-variant-numeric: tabular-nums;
  }
  .tasks-page .bulk-bar .bulk-spacer {
    flex: 1;
  }
  .tasks-page .bulk-bar [data-bulk-select-all].active {
    font-weight: 600;
  }
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--badge-font-size);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--tasks-pill-waiting-background);
    color: var(--tasks-pill-waiting-color);
  }
  .status-pill.status-queued, .status-pill.status-waiting.is-due {
    background: var(--tasks-pill-queued-background);
    color: var(--tasks-pill-queued-color);
  }
  .status-pill.status-running {
    background: var(--tasks-pill-running-background);
    color: var(--tasks-pill-running-color);
  }
  .status-pill.status-failing {
    background: var(--tasks-pill-failing-background);
    color: var(--tasks-pill-failing-color);
  }
  .status-pill.status-failed, .status-pill.status-locked {
    background: var(--tasks-pill-failed-background);
    color: var(--tasks-pill-failed-color);
  }
  .status-pill.status-paused, .status-pill.status-throttled {
    background: var(--tasks-pill-paused-background);
    color: var(--tasks-pill-paused-color);
  }
  .status-pill.status-completed {
    background: var(--tasks-pill-completed-background);
    color: var(--tasks-pill-completed-color);
  }
  .status-pill .pill-spinner {
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: task-pill-spin 0.9s linear infinite;
  }
  .status-pill .error-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tasks-pill-failing-color);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  @media screen and (hover: hover) {
    .bulk-bar button:hover .fa-arrows-rotate,
    .bulk-bar button:focus-visible .fa-arrows-rotate {
      animation: task-pill-spin 1.2s linear infinite;
    }
  }
  @keyframes task-pill-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .task-run-flier {
    position: fixed;
    left: var(--flight-left);
    top: var(--flight-top);
    width: var(--flight-width);
    margin: 0;
    pointer-events: none;
    z-index: var(--index-object-flyover);
    transition: transform 320ms cubic-bezier(0.35, 0, 0.6, 1), opacity 320ms ease-in;
  }
  .task-run-flier.is-flying {
    transform: translate(var(--flight-x), var(--flight-y)) scale(0.1);
    opacity: 0;
  }
  .status-pill.is-absorbing {
    animation: task-pill-absorb 320ms ease-out;
  }
  @keyframes task-pill-absorb {
    40% {
      transform: scale(1.12);
    }
    to {
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .status-pill .pill-spinner,
    .bulk-bar button .fa-arrows-rotate {
      animation: none;
    }
    .status-pill.is-absorbing {
      animation: none;
    }
    .task-run-flier {
      display: none;
    }
  }
  .task-name-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .integration-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    background: var(--tasks-pill-queued-background);
    color: var(--tasks-pill-queued-color);
  }
  .integration-chip img {
    width: 12px;
    height: 12px;
  }
  .integration-chip i {
    display: inline-block;
  }
  @media screen and (hover: hover) {
    .integration-chip:hover {
      text-decoration: underline;
    }
  }
  .custom-event-chip,
  .import-template-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    background: var(--tasks-chip-custom-event-background);
    color: var(--tasks-chip-custom-event-color);
  }
  .custom-event-chip.import-template-chip,
  .import-template-chip.import-template-chip {
    background: var(--tasks-chip-import-template-background);
    color: var(--tasks-chip-import-template-color);
  }
  .custom-event-chip .chip-label,
  .import-template-chip .chip-label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media screen and (hover: hover) {
    .custom-event-chip:hover .chip-label,
    .import-template-chip:hover .chip-label {
      text-decoration: underline;
    }
  }
  @media screen and (width <= 1024px) {
    .stat-strip {
      grid-template-columns: repeat(2, 1fr);
      padding: 0 16px;
    }
    .tasks-page table tbody tr {
      display: grid;
      gap: 4px;
      padding: 10px 0;
    }
    .tasks-page .interval-text {
      max-width: none;
    }
    .tasks-page .store-cell > a {
      max-width: none;
    }
    .tasks-page table td {
      display: flex;
      justify-content: flex-start;
    }
    .tasks-page table td:first-child {
      padding-left: 16px;
    }
    .tasks-page table td:last-child {
      padding-right: 16px;
    }
    .tasks-page .section-head {
      flex-wrap: wrap;
    }
    .tasks-page .sum-pills {
      width: 100%;
      order: 10;
    }
    .tasks-page .bulk-bar {
      flex-wrap: wrap;
    }
    .tasks-page td.actions {
      justify-content: flex-end;
    }
  }
}
@layer theme {
  .user-stores {
    --default-store-arrival-duration: 1200ms;
    --default-store-marker-duration: 400ms;
  }
  .user-stores .default-store > :is(.default-store-marker, button) {
    vertical-align: middle;
  }
  .user-stores .default-store-marker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 13px;
    color: var(--default-store-marker-color);
    font-weight: 500;
    transition: opacity var(--default-store-marker-duration) var(--ease-out-expo), transform var(--default-store-marker-duration) var(--ease-out-expo);
  }
  .user-stores tr:has(.default-store-marker) {
    transition: background-color var(--default-store-arrival-duration) var(--ease-out-expo);
  }
  .user-stores.htmx-added tr:has(.default-store-marker) {
    --color-background: var(--default-store-arrival-background-color);
    transition: none;
  }
  .user-stores.htmx-added .default-store-marker {
    opacity: 0;
    transform: scale(0.6);
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .user-stores.htmx-added .default-store-marker {
      transform: none;
    }
  }
}
@layer theme {
  .shipping-method-mappings {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
  }
  .shipping-method-mappings form {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
  }
  .shipping-method-mappings .mapping-rows {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .shipping-method-mappings .mapping-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: var(--gutter-xs);
    align-items: start;
  }
  .shipping-method-mappings .mapping-row[hidden] {
    display: none;
  }
  .shipping-method-mappings .mapping-row.headings {
    font-family: var(--font-family-roboto);
    font-size: 12px;
    font-weight: 500;
    line-height: 36px;
    color: var(--default-text-secondary-color);
  }
  .shipping-method-mappings .column-heading {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
  }
  .shipping-method-mappings .column-heading .icon {
    width: 18px;
    height: 18px;
  }
  .shipping-method-mappings .remove-field {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--default-text-secondary-color);
    display: flex;
    align-items: center;
    height: 36px;
  }
  .shipping-method-mappings .remove-field:hover {
    color: var(--default-text-primary-color);
  }
  .shipping-method-mappings [data-add-fieldset-row] {
    width: fit-content;
  }
  .shipping-method-mappings [data-add-fieldset-row] i {
    color: var(--color-gray);
  }
  .shipping-method-mappings [data-add-fieldset-row]:hover i {
    color: inherit;
  }
  .shipping-method-mappings .mapping-direction {
    display: flex;
    align-items: center;
    height: 36px;
    color: var(--default-text-secondary-color);
  }
  @media screen and (width <= 576px) {
    .shipping-method-mappings .mapping-row.headings {
      display: none;
    }
  }
}
@layer theme {
  .warehouse-icon {
    width: 1.125em;
    height: 1em;
    fill: currentColor;
  }
  .warehouse-icon__door {
    opacity: 0.4;
    transition: transform 380ms cubic-bezier(0.55, 0, 0.85, 0.4);
  }
  h1:hover .warehouse-icon__door {
    transform: translateY(-304px);
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .warehouse-icon__door {
      transition: none;
    }
  }
  .warehouse-mappings {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 0;
    padding-right: 0;
  }
  .warehouse-mappings form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .warehouse-mappings .select-container {
    width: 100%;
  }
  .warehouse-mappings .actions,
  .warehouse-mappings > .description {
    padding-left: 24px;
  }
  .warehouse-mappings .column-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--default-text-secondary-color);
  }
  .warehouse-mappings .column-heading .icon {
    width: 18px;
    height: 18px;
  }
  .warehouse-mappings .sync-direction i {
    color: var(--default-text-secondary-color);
    transition: color 0.3s ease;
  }
  .warehouse-mappings .sync-direction.mapped i {
    color: var(--warehouse-mapping-direction-mapped-color);
  }
  .warehouse-mappings .sync-direction.pop i {
    animation: sync-direction-pop 0.35s ease;
  }
  @keyframes sync-direction-pop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.35);
    }
    100% {
      transform: scale(1);
    }
  }
  @media screen and (width > 576px) {
    .warehouse-mappings th:first-child,
    .warehouse-mappings td:first-child,
    .warehouse-mappings th:last-child,
    .warehouse-mappings td:last-child {
      width: 50%;
    }
  }
  @media screen and (width <= 576px) {
    .warehouse-mappings .sync-direction {
      display: none;
    }
  }
}
@layer ui {
  .automations {
    --automations-list-width: calc(var(--panel-width) - 10px);
  }
  @media screen and (width >= 990px) and (width < 1100px) {
    .automations {
      --automations-list-width: 315px;
    }
  }
  @media screen and (width < 990px) {
    .automations {
      --automations-list-width: 100%;
    }
  }
  @media screen and (width <= 576px) {
    .automations {
      background-color: var(--content-foreground-color-mobile);
    }
  }
  .automations .workflow-list {
    width: var(--automations-list-width);
    height: 100%;
    border-left: 1px solid var(--workflow-list-border-color);
    flex-shrink: 0;
  }
  @media screen and (width <= 576px) {
    .automations .workflow-list {
      border-left: 0 none;
    }
  }
  @media screen and (width > 576px) {
    .automations .workflow-list {
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
  }
  @media screen and (width <= 576px) {
    .automations .workflow-list {
      width: 100%;
      height: auto;
      padding-bottom: 56px;
    }
  }
  .automations .workflow-list .trashed-workflows-footer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    display: flex;
    flex-direction: column;
  }
  .automations .workflow-list .trashed-workflows-footer[hidden] {
    display: none;
  }
  .automations .workflow-list .trashed-workflows-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    font: inherit;
    font-size: 12px;
    color: var(--workflow-list-footer-color);
    background: var(--workflow-list-footer-background-color);
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
  }
  .automations .workflow-list .trashed-workflows-link:hover {
    background: var(--workflow-list-footer-hover-background-color);
  }
  .automations .workflow-list .trashed-workflows-link i {
    font-size: 11px;
  }
  .automations .workflow-list .workflow-group-header {
    padding: 10px 12px 10px 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--workflow-group-header-color);
    border-top: 1px solid var(--workflow-list-border-color);
    border-bottom: 1px solid var(--workflow-list-border-color);
    background: var(--workflow-group-header-background-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .automations .workflow-list .workflow-group-header:hover {
    background: var(--workflow-group-header-hover-background-color);
  }
  .automations .workflow-list .workflow-group-header a {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    color: inherit;
    text-decoration: none;
  }
  .automations .workflow-list .workflow-group-header a:hover span {
    text-decoration: underline;
  }
  .automations .workflow-list .workflow-group-header a .workflow-dimension-icon {
    font-size: 16px;
    color: var(--workflow-dimension-icon-color);
  }
  .automations .workflow-list .workflow-group-header a .workflow-category-icon {
    --fa-width: auto;
    color: var(--custom-event-accent-color);
  }
  .automations .workflow-list .workflow-group-header > i {
    font-size: 10px;
    color: var(--workflow-group-header-icon-color);
  }
  .automations .workflow-list .workflow-group:first-child .workflow-group-header {
    border-top: none;
  }
  .automations .workflow-list .workflow-group:not(:first-child) .workflow-group-header {
    margin-top: -1px;
  }
  .automations .workflow-list .workflow-group-items {
    display: grid;
    grid-template-rows: 1fr;
  }
  .automations .workflow-list .workflow-group-items ul {
    overflow: hidden;
  }
  .automations .workflow-list.animate .workflow-group-items {
    transition: grid-template-rows 0.2s ease;
  }
  .automations .workflow-list.animate .workflow-group-header > i {
    transition: transform 0.2s ease;
  }
  .automations .workflow-list .workflow-group.collapsed .workflow-group-header > i {
    transform: rotate(-90deg);
  }
  .automations .workflow-list .workflow-group.collapsed .workflow-group-items {
    grid-template-rows: 0fr;
  }
  .automations .workflow-list ul {
    position: relative;
  }
  .automations .workflow-list li {
    border-bottom: 1px solid var(--workflow-list-border-color);
    display: flex;
    flex-direction: row;
  }
  .automations .workflow-list li.placeholder {
    opacity: 0.3;
  }
  .automations .workflow-list li.ghost {
    position: absolute;
    background: var(--content-foreground-color-desktop);
    box-shadow: 0 2px 8px var(--workflow-list-ghost-shadow-color);
    z-index: 100;
    pointer-events: none;
  }
  .automations .workflow-list li .form-toggle-wrap {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 44px;
    max-width: 48px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
    cursor: pointer;
    padding: 10px 8px 10px 6px;
  }
  @media screen and (width > 576px) {
    .automations .workflow-list li .form-toggle-wrap {
      border-left: 1px solid var(--workflow-list-border-color);
    }
  }
  @media screen and (width < 990px) {
    .automations .workflow-list li .form-toggle-wrap {
      width: auto;
      min-width: 40px;
      max-width: none;
      padding: 10px 12px 10px 10px;
    }
  }
  .automations .workflow-list li .form-toggle-wrap:hover {
    background: var(--workflow-item-hover-background-color);
  }
  .automations .workflow-list li div.automation-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .automations .workflow-list li div.automation-title:hover {
    background: var(--workflow-item-hover-background-color);
  }
  @media screen and (width >= 990px) {
    .automations .workflow-list li div.open-automation {
      display: none;
    }
  }
  .automations .workflow-list li div.open-automation {
    align-content: center;
    padding: 15px;
  }
  .automations .workflow-list li div.open-automation i {
    color: var(--workflow-item-toggle-color);
  }
  .automations .workflow-list li a {
    padding: 15px;
    display: flex;
    width: 100%;
    overflow-wrap: anywhere;
    align-items: baseline;
    gap: 15px;
    color: var(--default-text-primary-color);
  }
  @media screen and (width > 576px) {
    .automations .workflow-list li.active {
      font-weight: 500;
      background: var(--workflow-item-active-background-color);
      box-shadow: inset 3px 0 0 var(--workflow-item-active-accent-color);
    }
    .automations .workflow-list li.active a {
      color: var(--workflow-item-active-color);
    }
    .automations .workflow-list li.active.disabled a {
      color: var(--workflow-item-active-color);
    }
    .automations .workflow-list li.active .form-toggle-wrap:hover, .automations .workflow-list li.active div.automation-title:hover {
      background: var(--workflow-item-active-hover-background-color);
    }
    .automations .workflow-list li.active div.automation-title:hover {
      box-shadow: inset 3px 0 0 var(--workflow-item-active-accent-color);
    }
  }
  .automations .workflow-list li:not(.enabled) a {
    text-decoration: line-through;
  }
  .automations .workflow-list li:not(.enabled):not(.active) a {
    color: var(--workflow-item-disabled-color);
  }
  .automations .workflow-list li .reorder-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    padding: 0 0 0 var(--gutter-sm);
    flex-shrink: 0;
  }
  @media screen and (width > 576px) {
    .automations .workflow-list li .reorder-handle + a {
      padding-left: var(--gutter-xs);
    }
  }
  @media screen and (width <= 576px) {
    .automations .workflow-list li .reorder-handle {
      display: none;
    }
  }
  .automations .workflow-list li .reorder-handle i {
    color: var(--workflow-item-toggle-color);
  }
  .automations .workflow-list li.drop-target {
    transition: box-shadow 0.15s ease;
  }
  .automations .workflow-list li.drop-target, .automations .workflow-list li.drop-target * {
    cursor: grabbing;
  }
  .automations .workflow-list li.drop-target .form-toggle-wrap:hover,
  .automations .workflow-list li.drop-target div.automation-title:hover {
    background: none;
  }
  .automations .workflow-list li.drop-target.drop-hover {
    box-shadow: inset 0 0 8px var(--workflow-drop-target-hover-glow-color);
    background: var(--workflow-drop-target-hover-background-color);
  }
  .automations .workflow-list li.drop-blocked {
    position: relative;
    filter: grayscale(1);
    opacity: 0.5;
  }
  .automations .workflow-list li.drop-blocked, .automations .workflow-list li.drop-blocked * {
    cursor: not-allowed;
  }
  .automations .workflow-list li.drop-blocked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--workflow-drop-blocked-stripe-color) 9px 12px);
  }
  .automations .workflow-list li.drop-accepted, .automations .workflow-list li.drop-accepted .form-toggle-wrap, .automations .workflow-list li.drop-accepted div.automation-title {
    animation: workflow-drop-accepted 0.6s ease-out;
  }
  @keyframes workflow-drop-accepted {
    from {
      background-color: var(--workflow-drop-accepted-flash-color);
    }
    to {
      background-color: transparent;
    }
  }
  .side-panel .content > .workflow-context {
    margin: 0;
  }
  @media screen and (width > 576px) {
    .side-panel .content > .workflow-context {
      padding: 0 var(--panel-gutter) var(--panel-gutter);
    }
  }
  .side-panel .recently-deleted-list .workflow-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .side-panel .recently-deleted-list .event-name {
    font-size: 11px;
    color: var(--sidepanel-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}
@layer ui {
  .automations-content.htmx-request {
    position: relative;
  }
  .automations-content.htmx-request > .loading-indicator {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
  }
  .automations-content.htmx-request .workflow .custom-scroll {
    display: none;
  }
  .workflow {
    container-type: inline-size;
    container-name: workflow;
  }
  @media screen and (width < 990px) {
    .workflow {
      display: none;
    }
  }
  .workflow {
    width: 100%;
    height: 100%;
    padding: 0 var(--automations-gutter) var(--automations-gutter);
    overflow: hidden auto;
    flex: 1;
    min-height: 0;
    position: relative;
  }
  .workflow .custom-scroll {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 0;
  }
  .workflow .automation-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-sm);
    width: 100%;
  }
  .workflow .automation-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    counter-reset: automation;
  }
  .workflow .automation-list .automation:not(.placeholder) {
    counter-increment: automation;
  }
  .workflow .automation-list .automation:not(.placeholder) .position::before {
    content: counter(automation);
  }
  .workflow .automation {
    background: var(--automation-builder-card-background-color);
    border: 1px solid var(--automation-builder-card-border-color);
    border-radius: 4px;
    width: 100%;
    position: relative;
    margin-bottom: var(--automations-gutter);
  }
  .workflow .automation.preview {
    z-index: var(--index-middle);
    border-color: var(--automation-builder-card-preview-border-color);
  }
  .workflow .automation.preview > header {
    overflow-x: clip;
  }
  .workflow .automation.preview .edit-automation,
  .workflow .automation.preview .card-actions {
    animation: card-controls-exit 220ms ease-in forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .workflow .automation.preview .edit-automation,
    .workflow .automation.preview .card-actions {
      animation: none;
      visibility: hidden;
    }
  }
  .workflow .automation.preview .edit-automation {
    animation-delay: 40ms;
  }
  .workflow .automation.preview > header .form-toggle-wrap {
    animation: card-toggle-exit 260ms ease-in-out forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .workflow .automation.preview > header .form-toggle-wrap {
      animation: none;
      transform: translateX(var(--card-controls-offset));
    }
  }
  .workflow .automation.controls-returning .edit-automation,
  .workflow .automation.controls-returning .card-actions {
    animation: card-controls-enter 220ms ease-out backwards;
  }
  .workflow .automation.controls-returning .card-actions {
    animation-delay: 40ms;
  }
  .workflow .automation.controls-returning > header .form-toggle-wrap {
    animation: card-toggle-enter 260ms ease-in-out backwards;
  }
  .workflow .automation:hover:not(.preview) {
    border-color: var(--automation-builder-card-hover-border-color);
  }
  .workflow .automation.ghost {
    opacity: 0.6;
  }
  .workflow .automation > header {
    --automation-header-gap: 10px;
    margin: 0;
    padding: 12px 15px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--automation-header-gap);
    font-size: 14px;
  }
  .workflow .automation > header h3 {
    font-weight: 600;
    letter-spacing: 0.1px;
    flex: 1;
    line-height: 20px;
    overflow-wrap: anywhere;
  }
  .workflow .automation > header .form-toggle-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 4px;
    margin-right: -4px;
    cursor: pointer;
    position: relative;
  }
  .workflow .automation > header .form-toggle-wrap::before {
    content: "";
    position: absolute;
    inset: -10px -4px -10px -6px;
  }
  .workflow .automation > header button.text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-weight: 400;
  }
  .workflow .automation > header h3.untitled {
    font-weight: 400;
    color: var(--automation-builder-card-untitled-title-color);
  }
  .workflow .automation > header .reorder-handle {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    cursor: grab;
  }
  .workflow .automation > header .reorder-handle i {
    --fa-width: auto;
    position: relative;
    color: var(--automation-card-drag-handle-color);
  }
  .workflow .automation > header .position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--automation-card-position-background-color);
    color: var(--automation-card-position-text-color);
    font-size: 12px;
    font-weight: 600;
  }
  .workflow .automation > header .target-icon {
    margin-right: calc(var(--gutter-xxs) - var(--automation-header-gap));
    font-size: 14px;
    color: var(--target-color);
  }
  .workflow .automation .edit-automation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
  }
  .workflow .automation .edit-automation::before {
    content: "";
    position: absolute;
    inset: -8px 0;
  }
  @media (hover: hover) {
    .workflow .automation:not(.preview, :hover, :has(:focus-visible, .confirming, .htmx-request)) > header .form-toggle-wrap,
    .workflow .automation:not(.preview, :hover, :has(:focus-visible, .confirming, .htmx-request)) > header .edit-automation,
    .workflow .automation:not(.preview, :hover, :has(:focus-visible, .confirming, .htmx-request)) > header .card-actions {
      opacity: 0;
    }
  }
  .workflow .automation > header :is(.form-toggle-wrap, .edit-automation, .card-actions) {
    transition: opacity 150ms ease;
  }
  .workflow .automation .card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .workflow .automation .card-actions button.text {
    padding: 4px 6px;
    color: var(--automation-card-action-color);
  }
  .workflow .automation .card-actions button.text:hover {
    color: var(--automation-card-action-hover-color);
  }
  .workflow .automation .card-actions button.text.delete-action:hover {
    color: var(--delete-action-hover-color);
  }
  .workflow .automation:not(.collapsed):has(.content li) > header {
    border-bottom: 1px solid var(--automation-builder-card-divider-color);
  }
  .workflow .automation .content {
    font-size: 12px;
  }
  .workflow .automation .content:has(li) {
    padding: 12px 0 var(--gutter-xs);
  }
  .workflow .automation .content dl {
    display: block;
    padding: 0 15px;
    margin: 0;
  }
  .workflow .automation .content dd ol {
    padding: 0;
  }
  .workflow .automation .content li {
    padding: var(--gutter-xxs) 0;
  }
  .workflow .automation .content .filters:not(:has(.filter-preview-group)) {
    display: none;
  }
  .workflow .automation .content :is(.filter-label, .action-label) {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--default-text-secondary-color);
  }
  .workflow .automation .content .filters .filter-preview-groups {
    --group-connector-color: var(--automation-filter-match-all-color);
  }
  .workflow .automation .content .filters .filter-preview-groups[data-match=any] {
    --group-connector-color: var(--automation-filter-match-any-color);
  }
  .workflow .automation .content .filters:has(+ .actions li) .filter-preview-groups {
    margin-bottom: var(--gutter-md);
  }
  .workflow .automation .content .filters .filter-preview-group {
    --connector-label: 'AND';
    --connector-color: var(--automation-filter-match-all-color);
    border-left: 1px solid var(--connector-color);
    padding-left: 8px;
  }
  .workflow .automation .content .filters .filter-preview-group[data-match=any] {
    --connector-label: 'OR';
    --connector-color: var(--automation-filter-match-any-color);
  }
  .workflow .automation .content .filters .filter-preview-group:only-child {
    border-left: none;
    padding-left: 0;
  }
  .workflow .automation .content .filters .filter-preview-group ol {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
  .workflow .automation .content .filters .filter-preview-group ol li span:not(.operator, .field-name) {
    font-weight: bold;
  }
  .workflow .automation .content .filters .filter-preview-group ol li span.field-key,
  .workflow .automation .content .filters .filter-preview-group ol li span.field-value-tag {
    display: inline-block;
    padding: 1px var(--gutter-xs);
    border-radius: var(--border-radius);
    background: var(--automation-filter-preview-tag-background-color);
    color: var(--automation-filter-preview-tag-text-color);
  }
  .workflow .automation .content .filters .filter-preview-group ol li span.field-value-tag:has(> i) {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    max-width: 260px;
    vertical-align: bottom;
  }
  .workflow .automation .content .filters .filter-preview-group ol li span:has(> span.field-value-tag),
  .workflow .automation .content .filters .filter-preview-group ol li span:has(> span.store-tag) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--gutter-xs);
  }
  .workflow .automation .content .filters .filter-preview-group ol li span.field-value-invalid {
    color: var(--automation-filter-preview-invalid-color);
  }
  .workflow .automation .content .filters .filter-preview-group ol li:not(:last-child)::after {
    content: var(--connector-label);
    display: inline-block;
    margin-left: var(--gutter-xs);
    padding: 0 6px;
    border: 1px solid var(--connector-color);
    border-radius: 99px;
    background: var(--automation-filter-connector-background-color);
    font-size: 9px;
    font-weight: 600;
    color: var(--connector-color);
    line-height: 14px;
    vertical-align: middle;
  }
  .workflow .automation .content .filters .filter-preview-group ol:has(.ghost) li::after {
    display: none;
  }
  .workflow .automation .content .filters .filter-preview-group.connector-flip ol li::after {
    transform: rotateY(90deg);
    transition: transform 0.2s;
  }
  .workflow .automation .content .filters .filter-preview-group.connector-flip-in ol li::after {
    animation: connector-flip-in 0.2s forwards;
  }
  .workflow .automation .content .filters .filter-preview-group-connector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0;
  }
  .workflow .automation .content .filters .filter-preview-group-connector span {
    padding: 1px 8px;
    border: 1px solid var(--group-connector-color);
    border-radius: 0 99px 99px 0;
    background: var(--automation-filter-connector-background-color);
    font-size: 9px;
    font-weight: 600;
    color: var(--group-connector-color);
    line-height: 14px;
    transition: transform 0.2s;
  }
  .workflow .automation .content .filters .filter-preview-group-connector span.connector-tag-flip {
    transform: rotateY(90deg);
  }
  .workflow .automation .content .actions .action-label:empty, .workflow .automation .content .actions .action-label[hidden] {
    display: none;
  }
  .workflow .automation .content .actions ol {
    margin: 0;
  }
  .workflow .automation .content .actions li:has(> :is(.pause-indicator, .background-indicator):not([hidden])) {
    padding-bottom: var(--gutter-xs);
  }
  .workflow .automation .content .actions li i {
    color: var(--automation-preview-action-icon-color);
  }
  .workflow .automation .content .actions li span {
    font-weight: bold;
  }
  .workflow .automation .content .actions li span:empty::before {
    content: attr(data-empty);
  }
  .workflow .automation .content .actions li span.address-part:not(:empty) ~ span.address-part:not(:empty)::before {
    content: ", ";
  }
  .workflow .automation .content .actions li span.field-key,
  .workflow .automation .content .actions li span.field-value-tag {
    display: inline-block;
    padding: 1px var(--gutter-xs);
    border-radius: var(--border-radius);
    background: var(--automation-filter-preview-tag-background-color);
    color: var(--automation-filter-preview-tag-text-color);
  }
  .workflow .automation .content .actions li span.field-value-tag:has(> i) {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    max-width: 260px;
    vertical-align: bottom;
  }
  .workflow .automation .content .actions li :is(.pause-indicator, .background-indicator) {
    margin: 0;
    color: var(--automation-preview-pause-color);
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }
  .workflow .automation .content .actions li :is(.pause-indicator, .background-indicator) i {
    --fa-width: auto;
    margin-right: var(--gutter-xxs);
    color: var(--automation-preview-pause-color);
  }
  .workflow .automation .content .actions li :is(.pause-indicator, .background-indicator)[hidden] {
    display: none;
  }
  .workflow .automation.disabled > header {
    background: var(--automation-card-disabled-background-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }
  .workflow .automation.disabled .content {
    opacity: 0.6;
  }
  .workflow .automation.disabled h3 {
    color: var(--automation-card-disabled-title-color);
    text-decoration: line-through;
  }
  .workflow .automation:not(.preview) > header {
    cursor: pointer;
  }
  .workflow .automation.collapsed > header {
    border-radius: var(--border-radius);
  }
  .workflow .automation.collapsed .content {
    display: none;
  }
  @container workflow (width < 680px) {
    .workflow .automation > header h3 {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  @keyframes card-controls-exit {
    to {
      visibility: hidden;
      opacity: 0;
      transform: translateX(240px);
    }
  }
  @keyframes card-controls-enter {
    from {
      opacity: 0;
      transform: translateX(240px);
    }
  }
  @keyframes card-toggle-exit {
    to {
      transform: translateX(var(--card-controls-offset));
    }
  }
  @keyframes card-toggle-enter {
    from {
      transform: translateX(var(--card-controls-offset));
    }
  }
  @keyframes connector-flip-in {
    from {
      transform: rotateY(90deg);
    }
    to {
      transform: rotateY(0deg);
    }
  }
}
@layer ui {
  .workflow-run {
    --workflow-run-section-gap: 32px;
  }
  .workflow-run-target {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--workflow-run-section-gap);
    padding: 14px 16px;
    border: 1px solid var(--workflow-run-target-border-color);
    border-radius: var(--border-radius);
    background: var(--workflow-run-target-background-color);
  }
  .workflow-run-target > i {
    --fa-float-height: 3px;
    --fa-float-drift: 0px;
    --fa-float-tilt: 0deg;
    font-size: 24px;
    color: var(--workflow-run-panel-icon-color);
    animation: fa-float 5s ease-in-out infinite;
  }
  .workflow-run-target .details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .workflow-run-target .event-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sidepanel-text-secondary-color);
  }
  .workflow-run-target .workflow-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--default-text-primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .workflow-run-disabled-badge {
    width: min-content;
    margin-left: auto;
    padding: 4px 7px;
    border: 1px solid var(--workflow-run-disabled-badge-border-color);
    border-radius: var(--border-radius);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    background-color: var(--workflow-run-disabled-badge-background-color);
    color: var(--workflow-run-disabled-badge-text-color);
    cursor: default;
  }
  .side-panel .content .section.workflow-run-section h3 {
    margin-bottom: var(--gutter-sm);
    font-size: 18px;
  }
  .side-panel .content .section.workflow-run-section h3 i {
    color: var(--workflow-run-panel-icon-color);
  }
  .side-panel .content .section.workflow-run-section p {
    margin-bottom: var(--gutter-xs);
    font-size: 14px;
    color: var(--sidepanel-text-secondary-color);
  }
  .side-panel .content .section.workflow-run-section form {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gutter-xs);
  }
  .side-panel .content .section.workflow-run-section .field {
    flex: 1;
    min-width: 0;
  }
  .side-panel .content .section.workflow-run-section button[type=submit] {
    flex-shrink: 0;
    width: auto;
    max-width: fit-content;
  }
  .side-panel .content .section.workflow-run-section + .workflow-run-section {
    margin-top: var(--workflow-run-section-gap);
  }
}
@layer theme {
  .workflow .workflow-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
  }
  .workflow .workflow-setup-button {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    padding: 8px 16px;
    border: 1px dashed var(--workflow-setup-button-border-color);
    border-radius: var(--border-radius);
    background: none;
    color: var(--workflow-setup-button-color);
    white-space: nowrap;
    cursor: pointer;
  }
  .workflow .workflow-setup-button:hover {
    border-color: var(--workflow-setup-button-hover-border-color);
    color: var(--workflow-setup-button-hover-color);
  }
  .workflow .workflow-setup-button.configured {
    border-style: solid;
    border-color: var(--workflow-setup-button-configured-border-color);
    background: var(--workflow-setup-button-configured-background-color);
    color: var(--workflow-setup-button-configured-color);
  }
}
@layer theme {
  .workflow-variables-summary {
    --panel-summary-color: var(--workflow-variables-summary-color);
    margin-bottom: var(--gutter-xs);
  }
  .workflow-variables-panel-content:has(.variable-row) .workflow-variables-empty-state {
    display: none;
  }
  .workflow-variables-panel-content:not(:has(.variable-row)) .workflow-variables-summary {
    display: none;
  }
  .workflow-variables-form {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gutter);
    padding: 0 var(--panel-gutter) var(--panel-gutter);
  }
  .workflow-variables-form .variable-rows {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .workflow-variables-form .variable-row {
    background: var(--workflow-variable-card-background-color);
    border: 1px solid var(--workflow-variable-card-border-color);
    border-radius: var(--border-radius);
    padding: var(--gutter-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .workflow-variables-form .variable-row[hidden] {
    display: none;
  }
  .workflow-variables-form .variable-row-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .workflow-variables-form .variable-row-title {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xs);
    font-weight: 600;
    color: var(--workflow-variable-card-name-color);
  }
  .workflow-variables-form .variable-row-title i {
    color: var(--workflow-variable-card-icon-color);
  }
  .workflow-variables-form .remove-variable-row {
    flex: 0 0 auto;
    padding: 0;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .workflow-variables-form .remove-variable-row-wrapper {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .workflow-variables-form .remove-variable-row-wrapper .remove-variable-row {
    pointer-events: none;
  }
  .workflow-variables-form .variable-row-body {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
  }
  .workflow-variables-form .variable-name-field,
  .workflow-variables-form .variable-default-field {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xxs);
  }
  .workflow-variables-form .variable-name-field input[type=text],
  .workflow-variables-form .variable-default-field input[type=text] {
    width: 100%;
    box-sizing: border-box;
  }
  .workflow-variables-form .variable-default-counter .addon-field {
    align-self: flex-start;
  }
  .workflow-variables-form .variable-default-counter input.counter-default {
    width: 120px;
    text-align: left;
  }
  .workflow-variables-form .variable-add-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gutter-xs);
  }
}
@layer theme {
  .workflow-filters-summary {
    --panel-summary-color: var(--workflow-filters-summary-color);
    margin-bottom: var(--gutter-xs);
  }
  .workflow-filters-panel-content:has(.filter-group) .workflow-filters-empty-state {
    display: none;
  }
  .workflow-filters-panel-content:not(:has(.filter-group)) .workflow-filters-summary,
  .workflow-filters-panel-content:not(:has(.filter-group)) .workflow-filters-form > .section {
    display: none;
  }
}
@layer theme {
  #edit-automation {
    position: relative;
  }
  #edit-automation > .section,
  #edit-automation > .action-section {
    transition: opacity var(--loading-indicator-duration) ease-in var(--loading-indicator-delay);
  }
  #edit-automation.htmx-request > .section,
  #edit-automation.htmx-request > .action-section {
    opacity: 0;
    pointer-events: none;
  }
  div[data-automation-section=actions] {
    display: flex;
    flex-direction: column;
  }
  .automation-action, .automation-filter {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
  }
  .automation-action .automation-action-header, .automation-action .automation-filter-header, .automation-filter .automation-action-header, .automation-filter .automation-filter-header {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .automation-action .automation-action-header .reorder-handle, .automation-action .automation-filter-header .reorder-handle, .automation-filter .automation-action-header .reorder-handle, .automation-filter .automation-filter-header .reorder-handle {
    cursor: grab;
    align-self: center;
  }
  .automation-action .automation-action-header .reorder-handle i, .automation-action .automation-filter-header .reorder-handle i, .automation-filter .automation-action-header .reorder-handle i, .automation-filter .automation-filter-header .reorder-handle i {
    color: #9fa2a6;
  }
  .automation-action .select-container .selection, .automation-action .select-container .placeholder, .automation-filter .select-container .selection, .automation-filter .select-container .placeholder {
    align-items: center;
  }
  .automation-action .automation-action-contents, .automation-action .automation-filter-contents, .automation-filter .automation-action-contents, .automation-filter .automation-filter-contents {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .automation-action .automation-action-contents p, .automation-action .automation-filter-contents p, .automation-filter .automation-action-contents p, .automation-filter .automation-filter-contents p {
    font-size: 13px;
  }
  .automation-action .automation-action-contents .legend, .automation-action .automation-filter-contents .legend, .automation-filter .automation-action-contents .legend, .automation-filter .automation-filter-contents .legend {
    margin: -8px 0 0;
  }
  .automation-action .automation-action-contents .pause-note, .automation-action .automation-filter-contents .pause-note, .automation-filter .automation-action-contents .pause-note, .automation-filter .automation-filter-contents .pause-note {
    margin: 0;
    color: var(--automation-preview-pause-color);
  }
  .automation-action .automation-action-contents .pause-note i, .automation-action .automation-filter-contents .pause-note i, .automation-filter .automation-action-contents .pause-note i, .automation-filter .automation-filter-contents .pause-note i {
    color: var(--automation-preview-pause-color);
    margin-right: 4px;
  }
  .automation-action .automation-action-contents input[type=text], .automation-action .automation-action-contents textarea, .automation-action .automation-filter-contents input[type=text], .automation-action .automation-filter-contents textarea, .automation-filter .automation-action-contents input[type=text], .automation-filter .automation-action-contents textarea, .automation-filter .automation-filter-contents input[type=text], .automation-filter .automation-filter-contents textarea {
    font-family: var(--font-family-alternative);
  }
  .automation-action .automation-action-contents input[type=text], .automation-action .automation-filter-contents input[type=text], .automation-filter .automation-action-contents input[type=text], .automation-filter .automation-filter-contents input[type=text] {
    line-height: 1.4;
  }
  .automation-action .automation-action-contents .checkbox-field, .automation-action .automation-filter-contents .checkbox-field, .automation-filter .automation-action-contents .checkbox-field, .automation-filter .automation-filter-contents .checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .automation-action .automation-action-contents .action-recipient-hint, .automation-action .automation-filter-contents .action-recipient-hint, .automation-filter .automation-action-contents .action-recipient-hint, .automation-filter .automation-filter-contents .action-recipient-hint {
    margin: 0;
    color: var(--default-text-secondary-color);
    font-size: var(--font-size-sm);
  }
  .automation-action .automation-action-contents .action-recipient-hint:empty, .automation-action .automation-filter-contents .action-recipient-hint:empty, .automation-filter .automation-action-contents .action-recipient-hint:empty, .automation-filter .automation-filter-contents .action-recipient-hint:empty {
    display: none;
  }
  .automation-action {
    margin: 0;
    padding: var(--gutter-sm) 0;
  }
  .automation-action.action-added {
    animation: action-added-flash 1s ease-out;
  }
  h3 + .automation-action {
    padding-top: 0;
  }
  .automation-action .automation-action-header {
    min-height: 32px;
  }
  .automation-action .automation-action-header p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-weight: 600;
  }
  .automation-action .automation-action-contents {
    padding: 0;
  }
  .automation-action .automation-action-contents .single-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .automation-action .automation-action-contents [data-revealed-by][hidden] {
    display: none;
  }
  .automation-action .automation-action-contents .integration-field-value-cascade {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .automation-action .automation-action-contents .integration-field-value-cascade .legend {
    margin: 0;
  }
  .automation-filter {
    padding: 15px;
  }
  .automation-filter .automation-filter-header:has(+ div.automation-filter-contents) {
    padding-bottom: 10px;
  }
  .side-panel > header .template-sample-order {
    font-size: 12px;
    white-space: nowrap;
  }
  .side-panel > header .template-sample-order .prefix {
    padding: 0 10px;
  }
  .side-panel > header .template-sample-order input {
    width: 110px;
    min-height: 26px;
    padding: 3px 8px;
    font-family: var(--font-family-alternative);
    font-size: 12px;
  }
  .filter-configuration {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    position: relative;
  }
  .filter-group {
    --filter-group-color: var(--automation-filter-match-all-color);
    border-left: 1px solid var(--filter-group-color);
    padding-left: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .filter-group[data-match=any] {
    --filter-group-color: var(--automation-filter-match-any-color);
  }
  .filter-group .filter-group-header {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: var(--gutter-xs);
  }
  .filter-group .filter-group-header .filter-group-heading {
    font-weight: 600;
    font-size: 13px;
  }
  .filter-group .filter-group-header .filter-group-heading span {
    color: var(--filter-group-color);
  }
  .filter-group .filter-group-header .remove-group {
    width: auto;
    margin-left: auto;
  }
  .filter-group .filter-group-filters {
    display: flex;
    flex-direction: column;
  }
  .filter-group .automation-filter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--gutter-xs);
    align-items: start;
    margin: 0;
    padding: 0;
  }
  .filter-group .automation-filter .automation-filter-header {
    display: contents;
  }
  .filter-group .automation-filter :is(.reorder-handle, .remove-filter) {
    grid-row: 1;
    align-self: start;
    display: flex;
    align-items: center;
    height: var(--form-control-height);
  }
  .filter-group .automation-filter .reorder-handle {
    grid-column: 1;
  }
  .filter-group .automation-filter .automation-filter-contents {
    grid-column: 2;
    grid-row: 1;
  }
  .filter-group .automation-filter .remove-filter {
    grid-column: 3;
  }
  .side-panel .content .filter-group > .add-filter {
    margin-top: var(--gutter-xs);
    padding-inline: 0;
    width: fit-content;
    align-self: flex-start;
  }
  .side-panel .content .filter-group > .add-filter:focus {
    outline: none;
  }
  .side-panel .content .filter-group > .filter-group-filters:not(:has(.automation-filter)) + .add-filter {
    margin-top: 0;
  }
  .filter-connector, .filter-group-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--gutter-xs) 0;
    z-index: 1;
    position: relative;
  }
  .filter-connector .connector-tag, .filter-group-connector .connector-tag {
    --connector-tag-color: var(--automation-filter-match-all-color);
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xxs);
    width: auto;
    max-width: none;
    padding: 1px 8px;
    border: 1px solid var(--connector-tag-color);
    font-family: inherit;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--connector-tag-color);
    background: var(--automation-filter-connector-background-color);
    transition: transform 0.2s, background-color 0.15s;
    transform-style: preserve-3d;
  }
  @media screen and (hover: hover) {
    .filter-connector .connector-tag:hover, .filter-group-connector .connector-tag:hover {
      background: color-mix(in srgb, var(--connector-tag-color) 12%, var(--color-white));
    }
  }
  .filter-connector .connector-tag:focus-visible, .filter-group-connector .connector-tag:focus-visible {
    outline: 2px solid var(--connector-tag-color);
    outline-offset: 2px;
  }
  .filter-connector .connector-tag.connector-tag-flip, .filter-group-connector .connector-tag.connector-tag-flip {
    transform: rotateY(90deg);
  }
  .filter-connector .connector-tag i, .filter-group-connector .connector-tag i {
    font-size: 8px;
    color: inherit;
  }
  .filter-group-connector {
    justify-content: flex-start;
    margin: 12px 0;
  }
  .filter-group-connector .connector-tag {
    border-radius: 0 99px 99px 0;
  }
  .side-panel .content .add-automation {
    width: fit-content;
    margin: var(--gutter-xs) 0 0;
    padding-inline: 0;
  }
  .side-panel .content .add-automation:focus {
    outline: none;
  }
  .side-panel .content .filter-configuration:not(:has(.filter-group)) + .add-filter-group {
    margin-top: 0;
  }
  .side-panel .content .add-filter-group {
    width: fit-content;
    margin: var(--gutter-sm) 0 0;
    padding-inline: 0;
  }
  .side-panel .content .add-filter-group:focus {
    outline: none;
  }
  .filter-group-filters.rearranging {
    gap: 32px;
  }
  .filter-group-filters.rearranging .filter-connector {
    display: none;
  }
  .filter-group[data-match=any] .filter-connector .connector-tag,
  .filter-configuration[data-match=any] > .filter-group-connector .connector-tag {
    --connector-tag-color: var(--automation-filter-match-any-color);
  }
  .remove-filter, .remove-action, .remove-group {
    margin-left: auto;
    padding-right: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .side-panel button.text:is(.remove-filter, .remove-group, .remove-action) {
    width: auto;
    max-width: none;
    color: var(--automation-card-action-color);
  }
  .side-panel button.text:is(.remove-filter, .remove-group, .remove-action):hover {
    color: var(--delete-action-hover-color);
  }
  .side-panel button.text:is(.remove-filter, .remove-group, .remove-action):hover i {
    animation: fa-jello var(--fa-animation-duration, 0.9s) var(--fa-animation-timing, ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .side-panel button.text:is(.remove-filter, .remove-group, .remove-action):hover i {
      animation: none;
    }
  }
  #edit-automation .section > h3 {
    border-bottom: none;
  }
  .automation-filter-contents label {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
  }
  .condition {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 0;
  }
  .condition .invalid-feedback {
    display: none;
  }
  .condition .relative-date {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: -1px;
  }
  .condition .relative-date input[type=text] {
    flex: 0 0 auto;
    width: 8ch;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .condition .relative-date .select-container {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .condition .relative-date input[type=text]:focus,
  .condition .relative-date .select-container:focus,
  .condition .relative-date .select-container.active {
    position: relative;
    z-index: 1;
  }
  .condition .integration-field-parameter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
  }
  .condition .integration-field-parameter input,
  .condition .integration-field-parameter od-select {
    width: 12ch;
  }
  .condition .integration-field-parameter.is-text {
    flex: 1;
  }
  .condition .integration-field-parameter.is-text input {
    flex: 1;
    width: auto;
  }
  .condition:has(.legend) {
    flex-wrap: wrap;
  }
  .condition:has(.legend) > :nth-child(2) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .condition:has(.legend) .legend {
    flex: 0 0 100%;
    margin: 4px 0 0;
  }
  .condition.composite-key-field {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .condition.composite-key-field > .select-container:first-child {
    flex: 0 0 100%;
    width: 100%;
  }
  .condition.composite-key-field > .select-container:first-child .dropdown {
    width: calc(100% + 2px);
    max-width: none;
  }
  .condition.composite-key-field > .select-container:nth-child(2) {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 8px;
    border-radius: var(--border-radius);
  }
  .condition.composite-key-field > .select-container:nth-child(2) .dropdown {
    max-width: none;
  }
  .condition.composite-key-field [data-key-parameter] {
    display: flex;
    flex: 0 0 100%;
    gap: 16px;
    margin-top: 8px;
  }
  .condition.composite-key-field [data-key-parameter]:not(:has(*)) {
    display: none;
  }
  .condition .select-container:first-child {
    width: 100%;
  }
  .condition .select-container:first-child .options {
    width: 100%;
  }
  .condition .select-container:first-child .toggle-container {
    height: 100%;
  }
  .condition .date-field-container {
    max-width: none;
  }
  .condition:not(.composite-key-field):not(.attached-select) .select-container:first-child:has(+ .select-container, + .editable-tags, + input[type=text], + textarea, + .date-field-container, + .twig-builder-wrapper, + .relative-date) {
    width: max-content;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .condition:not(.composite-key-field):not(.attached-select) .select-container:first-child:has(+ .select-container, + .editable-tags, + input[type=text], + textarea, + .date-field-container, + .twig-builder-wrapper, + .relative-date) .selection, .condition:not(.composite-key-field):not(.attached-select) .select-container:first-child:has(+ .select-container, + .editable-tags, + input[type=text], + textarea, + .date-field-container, + .twig-builder-wrapper, + .relative-date) .placeholder {
    width: max-content;
  }
  .condition:not(.composite-key-field):not(.attached-select) .select-container:first-child:has(+ .select-container, + .editable-tags, + input[type=text], + textarea, + .date-field-container, + .twig-builder-wrapper, + .relative-date) .dropdown {
    width: max-content;
  }
  .condition > :nth-child(2) {
    width: inherit;
    min-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .condition > :nth-child(2) .selection, .condition > :nth-child(2) .placeholder {
    width: inherit;
  }
  .condition > :nth-child(2) .dropdown {
    width: inherit;
  }
  .condition input[type=text], .condition textarea, .condition .input-area, .condition .date-field-container, .condition .twig-builder-wrapper {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .condition .twig-builder-wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }
  .condition > :nth-child(2):has(+ .select-container:last-of-type) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .condition > :nth-child(2):has(+ .select-container:last-of-type) input[type=text], .condition > :nth-child(2):has(+ .select-container:last-of-type) textarea, .condition > :nth-child(2):has(+ .select-container:last-of-type) .input-area {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .condition > .select-container:last-of-type:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .condition.attached-select {
    flex-wrap: wrap;
  }
  .condition.attached-select > :first-child {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }
  .condition.attached-select > :first-child input[type=text], .condition.attached-select > :first-child textarea, .condition.attached-select > :first-child .input-area {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }
  .condition.attached-select > .select-container:last-of-type {
    width: max-content;
  }
  .condition.attached-select > .select-container:last-of-type .selection, .condition.attached-select > .select-container:last-of-type .placeholder {
    width: max-content;
  }
  .condition.attached-select > .select-container:last-of-type .dropdown {
    width: calc(100% + 2px);
  }
  .condition.attached-select > .select-container:first-child {
    flex: 0 0 100%;
    width: 100%;
    border-radius: var(--border-radius);
  }
  .condition.attached-select > .select-container:first-child ~ .select-container:last-of-type {
    flex: 0 0 100%;
    width: auto;
    margin-top: 8px;
    border-radius: var(--border-radius);
  }
  .condition.attached-select > .select-container:first-child ~ .select-container:last-of-type .selection, .condition.attached-select > .select-container:first-child ~ .select-container:last-of-type .placeholder {
    width: auto;
  }
  .condition.attached-select > .select-container:first-child ~ .select-container:last-of-type .dropdown {
    width: calc(100% + 2px);
    max-width: none;
  }
  .condition.attached-select [data-key-parameter] {
    display: flex;
    flex: 0 0 100%;
    gap: 16px;
    margin-top: 8px;
  }
  .condition.attached-select [data-key-parameter]:not(:has(*)) {
    display: none;
  }
  .condition .editable-tags {
    width: 100%;
  }
  .condition .input-area {
    background: white;
  }
  .side-panel .automation-filter-contents > label, .side-panel .automation-filter-contents > .field-group {
    margin-top: 5px;
  }
  .side-panel .automation-action-selector {
    display: none;
    border: 1px solid var(--form-field-border-default-color);
    background-color: var(--form-field-background-default-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-highest);
  }
  .side-panel .automation-action-selector .search {
    display: flex;
    flex-direction: row;
    padding: 8px;
    height: 44px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    color: var(--form-select-placeholder-color);
    border-bottom: 1px solid var(--form-field-border-default-color);
  }
  .side-panel .automation-action-selector .search input {
    flex-grow: 1;
    border: none;
    padding-left: 0;
  }
  .side-panel .automation-action-selector .search [data-selector-close] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--form-select-placeholder-color);
    font-size: 14px;
  }
  .side-panel .automation-action-selector ul {
    max-height: 400px;
    overflow: auto;
  }
  .side-panel .automation-action-selector ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--automation-action-selector-border-color);
    cursor: pointer;
  }
  .side-panel .automation-action-selector ul li.selected {
    background: var(--automation-action-selector-selected-background-color);
  }
  .side-panel .automation-action-selector ul li .summary {
    flex: 1;
    min-width: 0;
  }
  .side-panel .automation-action-selector ul li .summary h4 {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .side-panel .automation-action-selector ul li .summary p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--automation-action-selector-description-color);
  }
  .side-panel .automation-action-selector ul li .summary span {
    text-decoration: underline;
  }
  .side-panel .automation-action-selector ul li .category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--category-color);
    background: color-mix(in srgb, var(--category-color) 13%, var(--color-white));
  }
  .side-panel .automation-action-selector ul li .category img {
    width: 13px;
    height: 13px;
  }
  .side-panel .automation-action-selector ul li .category--folders {
    --category-color: var(--automation-action-category-folders-color);
  }
  .side-panel .automation-action-selector ul li .category--stores {
    --category-color: var(--automation-action-category-stores-color);
  }
  .side-panel .automation-action-selector ul li .category--tags {
    --category-color: var(--automation-action-category-tags-color);
  }
  .side-panel .automation-action-selector ul li .category--orderFields {
    --category-color: var(--automation-action-category-orderFields-color);
  }
  .side-panel .automation-action-selector ul li .category--productFields {
    --category-color: var(--automation-action-category-productFields-color);
  }
  .side-panel .automation-action-selector ul li .category--productStatus {
    --category-color: var(--automation-action-category-productStatus-color);
  }
  .side-panel .automation-action-selector ul li .category--email {
    --category-color: var(--automation-action-category-email-color);
  }
  .side-panel .automation-action-selector ul li .category--pricing {
    --category-color: var(--automation-action-category-pricing-color);
  }
  .side-panel .automation-action-selector ul li .category--notes {
    --category-color: var(--automation-action-category-notes-color);
  }
  .side-panel .automation-action-selector ul li .category--shipping {
    --category-color: var(--automation-action-category-shipping-color);
  }
  .side-panel .automation-action-selector ul li .category--address {
    --category-color: var(--automation-action-category-address-color);
  }
  .side-panel .automation-action-selector ul li .category--fulfillment {
    --category-color: var(--automation-action-category-fulfillment-color);
  }
  .side-panel .automation-action-selector ul li .category--items {
    --category-color: var(--automation-action-category-items-color);
  }
  .side-panel .automation-action-selector ul li .category--inventory {
    --category-color: var(--automation-action-category-inventory-color);
  }
  .side-panel .automation-action-selector ul li .category--variables {
    --category-color: var(--automation-action-category-variables-color);
  }
  .side-panel .automation-action-selector ul li .category--webhooks {
    --category-color: var(--automation-action-category-webhooks-color);
  }
  .side-panel .automation-action-selector ul li .category--stop {
    --category-color: var(--automation-action-category-stop-color);
  }
  .side-panel .automation-action-selector ul li .category--integration {
    --category-color: var(--automation-action-category-integration-color);
  }
  .side-panel .automation-action-selector ul li .category--messaging {
    --category-color: var(--automation-action-category-messaging-color);
  }
  .side-panel .automation-action-selector .no-results {
    padding: 32px 16px;
    text-align: center;
    color: var(--automation-action-selector-muted-color);
  }
  .side-panel .automation-action-selector .count {
    padding: 8px 14px;
    border-top: 1px solid var(--automation-action-selector-border-color);
    font-size: var(--font-size-sm);
    color: var(--automation-action-selector-muted-color);
  }
  .workflow-event-picker .dimension-switch {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-divider);
  }
  .workflow-event-picker .dimension-switch .dimension-tab {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    gap: 7px;
    margin-bottom: -1px;
    padding: 0 0 8px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    color: var(--tabs-font-color);
  }
  .workflow-event-picker .dimension-switch .dimension-tab:focus {
    outline: none;
  }
  .workflow-event-picker .dimension-switch .dimension-tab:focus-visible {
    outline: 1px solid var(--form-field-border-active-color);
  }
  .workflow-event-picker .dimension-switch .dimension-tab:not(.active):hover {
    border-bottom-color: var(--tabs-hover-border-color);
  }
  .workflow-event-picker .dimension-switch .dimension-tab.active {
    border-bottom-color: var(--tabs-active-border-color);
    color: var(--tabs-active-font-color);
    font-weight: 500;
  }
  .workflow-event-picker .event-box {
    border: 1px solid var(--form-field-border-default-color);
    border-radius: var(--border-radius);
    overflow: hidden;
  }
  .workflow-event-picker .event-box:focus-within {
    border-color: var(--form-field-border-active-color);
  }
  .workflow-event-picker.is-invalid .event-box {
    border-color: var(--form-field-border-error-color);
  }
  .workflow-event-picker .search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--form-select-placeholder-color);
    border-bottom: 1px solid var(--automation-action-selector-border-color);
  }
  .workflow-event-picker .search input {
    flex-grow: 1;
    min-width: 0;
    border: none;
    padding-left: 0;
  }
  .workflow-event-picker .search .clear {
    cursor: pointer;
  }
  .workflow-event-picker ul {
    max-height: 320px;
    overflow: auto;
  }
  .workflow-event-picker ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--automation-action-selector-border-color);
    cursor: pointer;
  }
  .workflow-event-picker ul li:last-child {
    border-bottom: none;
  }
  .workflow-event-picker ul li[hidden] {
    display: none;
  }
  .workflow-event-picker ul li:not(.selected):hover {
    background: var(--color-polar);
  }
  .workflow-event-picker ul li.selected {
    background: var(--automation-action-selector-selected-background-color);
    box-shadow: inset 3px 0 0 var(--color-bondi-blue);
  }
  .workflow-event-picker ul li .summary {
    flex: 1;
    min-width: 0;
  }
  .workflow-event-picker ul li .summary h4 {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .workflow-event-picker ul li .summary p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--automation-action-selector-description-color);
  }
  .workflow-event-picker ul li .category {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--target-card-text-color);
    background: color-mix(in srgb, var(--category-color) 18%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--category-color) 28%, transparent);
  }
  .workflow-event-picker ul .category--order {
    --category-color: var(--automation-event-category-order-color);
  }
  .workflow-event-picker ul .category--orderItem {
    --category-color: var(--automation-event-category-orderItem-color);
  }
  .workflow-event-picker ul .category--shipment {
    --category-color: var(--automation-event-category-shipment-color);
  }
  .workflow-event-picker ul .category--fulfillment {
    --category-color: var(--automation-event-category-fulfillment-color);
  }
  .workflow-event-picker ul .category--product {
    --category-color: var(--automation-event-category-product-color);
  }
  .workflow-event-picker ul .category--manualTrigger {
    --category-color: var(--automation-event-category-manualTrigger-color);
  }
  .workflow-event-picker ul .category--scheduledTrigger {
    --category-color: var(--automation-event-category-scheduledTrigger-color);
  }
  .workflow-event-picker .no-results {
    padding: 32px 16px;
    text-align: center;
    color: var(--automation-action-selector-muted-color);
  }
  .workflow-event-picker .count {
    padding: 8px 14px;
    border-top: 1px solid var(--automation-action-selector-border-color);
    font-size: var(--font-size-sm);
    color: var(--automation-action-selector-muted-color);
  }
  #create-workflow-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .enable-workflow-row {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--automation-action-selector-border-color);
    border-radius: var(--border-radius);
    background: var(--color-concrete);
    cursor: pointer;
  }
  .enable-workflow-row .form-toggle {
    flex: none;
  }
  .enable-workflow-row .content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .enable-workflow-row .content .title {
    font-weight: 600;
    color: var(--default-text-primary-color);
  }
  .enable-workflow-row .content .legend {
    margin: 0;
  }
  .customize-name .customize-name__toggle {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-size);
    color: var(--default-link-color);
    cursor: pointer;
  }
  .customize-name .customize-name__box {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .customize-name .customize-name__box[hidden] {
    display: none;
  }
}
@layer override {
  .automation-action.placeholder,
  .automation-filter.placeholder {
    visibility: visible;
    background: none;
    border: 1px dashed var(--color-iron);
  }
  .automation-action.placeholder > *,
  .automation-filter.placeholder > * {
    visibility: hidden;
  }
  .automation-filter.ghost {
    background: var(--automation-filter-ghost-background-color);
  }
  @keyframes action-added-flash {
    0%, 30% {
      background-color: var(--automation-action-added-flash-color);
      box-shadow: calc(var(--panel-gutter) * -1) 0 0 var(--automation-action-added-flash-color), var(--panel-gutter) 0 0 var(--automation-action-added-flash-color);
    }
    100% {
      background-color: transparent;
      box-shadow: calc(var(--panel-gutter) * -1) 0 0 transparent, var(--panel-gutter) 0 0 transparent;
    }
  }
}
@layer theme {
  .custom-events-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter-md);
    max-width: 1200px;
    padding: var(--gutter-md);
  }
  @media screen and (width <= 576px) {
    .custom-events-columns {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .scheduled-merges {
    padding: var(--gutter-md);
  }
  .scheduled-merges .custom-events-list {
    max-width: 800px;
  }
  .custom-events-column {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-sm);
  }
  .custom-events-column > .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-xs);
  }
  .custom-events-column > .header h2 {
    display: flex;
    align-items: center;
    gap: var(--gutter-xs);
    margin: 0;
    font-size: 20px;
  }
  .custom-events-column > .header h2 i {
    flex-shrink: 0;
    color: var(--custom-event-accent-color);
  }
  .custom-events-column > .header button.text i {
    color: var(--color-gray);
  }
  .custom-events-column > .header button.text:hover i {
    color: inherit;
  }
  .custom-events-column .empty-explainer .fa-bolt {
    animation: fa-jello 0.9s ease-out 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .custom-events-column .empty-explainer .fa-bolt {
      animation: none;
    }
  }
  .custom-event-type {
    display: flex;
    align-items: center;
    gap: calc(var(--gutter-xs) + 2px);
    margin-bottom: var(--gutter-sm);
  }
  .custom-event-type .type-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--custom-event-accent-color);
    font-size: 24px;
  }
  .custom-event-type strong {
    font-size: 18px;
    font-weight: 600;
    color: var(--default-text-primary-color);
  }
  .custom-events-list {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .custom-events-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--gutter-sm);
    padding: var(--gutter-sm);
    border: 1px solid var(--workflow-list-border-color);
    border-radius: var(--border-radius);
  }
  .custom-events-list .trigger-icon {
    font-size: 18px;
    line-height: 1.4;
    color: var(--custom-event-accent-color);
  }
  .custom-events-list .trigger-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .custom-events-list .trigger-details .name {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .custom-events-list .trigger-details .meta {
    font-size: 12px;
    color: var(--default-text-secondary-color);
  }
  .custom-events-list .trigger-details .meta.warning {
    color: var(--icon-warning-color);
  }
  .custom-events-list a {
    color: var(--default-link-color);
    cursor: pointer;
  }
  .custom-events-list a:hover {
    text-decoration: underline;
  }
  .custom-events-list .trigger-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px var(--gutter-sm);
    margin: 0;
    font-size: 12px;
  }
  .custom-events-list .trigger-facts dt {
    color: var(--default-text-secondary-color);
  }
  .custom-events-list .trigger-facts dd {
    margin: 0;
    color: var(--default-text-primary-color);
  }
  .custom-events-list .trigger-facts dd.next-run {
    display: flex;
    align-items: baseline;
    gap: var(--gutter-xs);
  }
  .custom-events-list .trigger-facts dd.next-run time {
    cursor: pointer;
  }
  .custom-events-list .trigger-facts dd.next-run .run-now {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xxs);
    margin-left: var(--gutter-xs);
    cursor: pointer;
  }
  .custom-events-list .trigger-facts dd.next-run .run-now:hover {
    text-decoration: none;
  }
  .custom-events-list .trigger-facts dd.next-run .run-now:hover span {
    text-decoration: underline;
  }
  .custom-events-list .actions {
    display: flex;
    gap: var(--gutter-sm);
    margin-left: auto;
  }
  .custom-events-list .actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--delete-action-color);
  }
  .custom-events-list .actions .edit-action {
    color: var(--custom-events-edit-action-color);
  }
  .custom-events-list .actions .edit-action:hover {
    color: var(--custom-events-edit-action-hover-color);
  }
  .custom-events-list .actions .delete-action:hover {
    color: var(--delete-action-hover-color);
  }
}
@layer theme {
  .automations.landing-page .workflow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
  }
  .automations.landing-page .workflow .workflow-empty-state {
    padding-bottom: var(--gutter-md);
  }
  .automations.landing-page .workflow-list:has(> a.button) {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
  .automations.landing-page .workflow-list:has(> a.button) .button {
    flex-grow: 0;
    align-self: flex-start;
  }
  .automations.landing-page .trashed-workflows-footer {
    text-align: center;
  }
  .automations.landing-page .trashed-workflows-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--automation-builder-action-link-color);
    background: none;
    border: none;
    cursor: pointer;
  }
  .automations.landing-page .trashed-workflows-link:hover {
    color: var(--automation-builder-action-link-hover-color);
  }
  .automations.landing-page .trashed-workflows-link .icon-swap {
    font-size: 11px;
  }
}
@layer theme {
  .target-card--order,
  .target-shortcut--order {
    --target-color: var(--target-color-order);
  }
  .target-card--orderItem,
  .target-shortcut--orderItem {
    --target-color: var(--target-color-orderItem);
  }
  .target-card--shipment,
  .target-shortcut--shipment {
    --target-color: var(--target-color-shipment);
  }
  .target-card--fulfillment,
  .target-shortcut--fulfillment {
    --target-color: var(--target-color-fulfillment);
  }
  .target-card--product,
  .target-shortcut--product {
    --target-color: var(--target-color-product);
  }
  .target-summary {
    --panel-summary-color: var(--target-color);
  }
  .target-summary .change-target {
    align-self: center;
    width: auto;
    max-width: fit-content;
    padding: 2px 6px;
    min-height: auto;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    color: var(--target-color);
  }
  .target-summary .change-target:focus {
    outline: none;
  }
  .target-summary .change-target[hidden] {
    display: none;
  }
  .target-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--gutter-md) var(--gutter-sm);
    position: relative;
  }
  .target-picker h2 {
    margin: 0 0 var(--gutter-xs);
    color: var(--target-picker-heading-color);
  }
  .target-picker .legend {
    margin: 0 0 var(--gutter-md);
  }
  .target-picker-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gutter-sm);
    width: 100%;
  }
  .selectable-card.target-card {
    width: 250px;
    background-color: color-mix(in srgb, var(--target-color) 8%, var(--target-card-background-color));
    border-color: color-mix(in srgb, var(--target-color) 35%, transparent);
    padding: 24px var(--gutter-md);
    color: var(--target-card-text-color);
  }
  .selectable-card.target-card .card-icon {
    font-size: 32px;
    color: var(--target-color);
    --fa-primary-color: var(--target-color);
    --fa-secondary-color: var(--target-color);
    --fa-secondary-opacity: 0.35;
  }
  .selectable-card.target-card .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--target-card-text-color);
  }
  .selectable-card.target-card .card-subtitle {
    color: var(--target-card-subtitle-color);
  }
  @media screen and (hover: hover) {
    .selectable-card.target-card:hover {
      border-color: var(--target-color);
      background-color: color-mix(in srgb, var(--target-color) 14%, var(--target-card-background-color));
    }
  }
  .target-shortcut-menu .target-shortcut i {
    color: var(--target-color);
  }
}
@layer ui {
  header.automations-header {
    border-bottom: 1px solid var(--workflow-list-border-color);
  }
  header.automations-header .wand-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
  }
  header.automations-header .wand-icon__tip,
  header.automations-header .wand-icon__sparkle {
    opacity: 0.4;
  }
  header.automations-header h1:hover .wand-icon__sparkle {
    animation: wand-sparkle-shimmer 1.4s ease-in-out infinite;
  }
  header.automations-header h1:hover .wand-icon__sparkle--1 {
    animation-delay: 0s;
  }
  header.automations-header h1:hover .wand-icon__sparkle--2 {
    animation-delay: 0.18s;
  }
  header.automations-header h1:hover .wand-icon__sparkle--3 {
    animation-delay: 0.36s;
  }
  @media (prefers-reduced-motion: reduce) {
    header.automations-header h1:hover .wand-icon__sparkle {
      animation: none;
    }
  }
  @keyframes wand-sparkle-shimmer {
    0%, 100% {
      opacity: 0.4;
      fill: currentColor;
    }
    50% {
      opacity: 1;
      fill: var(--color-bondi-blue);
    }
  }
  .automations-page-actions {
    display: flex;
    gap: 10px;
    margin-right: var(--gutter-md);
  }
  .automations-page-actions button,
  .automations-page-actions .button {
    cursor: pointer;
    align-self: center;
  }
  @media screen and (width < 765px) {
    .automations-page-actions button span,
    .automations-page-actions .button span {
      display: none;
    }
  }
  @media screen and (width >= 765px) {
    .automations-page-actions button span,
    .automations-page-actions .button span {
      display: inline-block;
    }
  }
  .recently-deleted-automations-link {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--automation-builder-action-link-color);
    background: none;
    border: none;
    cursor: pointer;
  }
  .recently-deleted-automations-link:hover {
    color: var(--automation-builder-action-link-hover-color);
  }
  .recently-deleted-automations-link[hidden] {
    display: none;
  }
  .recently-deleted-automations-link .icon-swap {
    font-size: 11px;
  }
  @media screen and (width >= 990px) {
    .content.simple-layout:has(> .automations) {
      display: flex;
      flex-direction: column;
      height: calc(100% - var(--gutter-md) * 2);
      overflow: hidden;
    }
  }
  .automations {
    --automations-header-height: 69px;
    --automations-gutter: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  @media screen and (width >= 990px) {
    .automations {
      flex: 1;
      min-height: 0;
      height: auto;
    }
  }
  .automations .automations-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
  }
  @media screen and (width < 990px) {
    .automations .automations-body {
      flex-direction: column;
    }
  }
  .automations .automations-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .automations header {
    border-bottom: 0 none;
  }
  .automations > header {
    border-bottom: 1px solid var(--workflow-list-border-color);
    align-items: stretch;
  }
  .automations > header > .event-selector-row {
    display: flex;
    align-items: stretch;
    width: var(--automations-list-width);
    flex-shrink: 0;
    border-left: 1px solid var(--workflow-list-border-color);
  }
  @media screen and (width < 990px) {
    .automations > header > .event-selector-row {
      width: 100%;
      border-left: 0 none;
      border-top: 1px solid var(--workflow-list-border-color);
    }
  }
  .automations > header > .event-selector-row .scope-utility {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    border: 0 none;
    background: none;
    cursor: pointer;
    color: var(--workflow-scope-utility-color);
  }
  @media screen and (hover: hover) {
    .automations > header > .event-selector-row .scope-utility:hover {
      color: var(--workflow-scope-utility-hover-color);
      background-color: var(--workflow-scope-utility-hover-background-color);
    }
  }
  .automations > header > .event-selector-row .scope-utility.expand-all {
    display: none;
  }
  .automations > header > .event-selector-row.all-collapsed .scope-utility.collapse-all {
    display: none;
  }
  .automations > header > .event-selector-row.all-collapsed .scope-utility.expand-all {
    display: flex;
  }
  .automations > header > .event-selector-row > .select-container {
    flex: 1;
    min-width: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
  }
  .automations > header > .event-selector-row > .select-container .toggle-container {
    height: 100%;
  }
  .automations > header > .event-selector-row > .select-container .placeholder,
  .automations > header > .event-selector-row > .select-container .selection {
    height: 100%;
    padding-left: var(--gutter-sm);
  }
  .automations .workflow-title {
    --automations-title-row-height: 42px;
    --automations-title-padding: 0 var(--automations-gutter);
  }
  @media screen and (width < 990px) {
    .automations .workflow-title {
      display: none;
    }
  }
  @media screen and (width >= 990px) {
    .automations .workflow-title {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
    }
  }
  .automations .workflow-title .workflow-title-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--automations-header-height);
  }
  .automations .workflow-title .workflow-event-label {
    padding: var(--automations-title-padding);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--default-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .automations .workflow-title .workflow-event-label i {
    --fa-width: auto;
    margin-left: var(--gutter-xxs);
    color: var(--custom-event-accent-color);
  }
  .automations .workflow-title .workflow-title-name {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: var(--automations-title-padding);
  }
  .automations .workflow-title .workflow-title-name .dropdown-trigger i {
    --fa-width: auto;
    margin-right: 0;
  }
  .automations .workflow-title h2 {
    min-width: 0;
    height: var(--automations-title-row-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--automations-title-row-height);
  }
  .automations .workflow-title h2 .workflow-dimension-icon {
    margin-right: var(--gutter-xxs);
    color: var(--workflow-dimension-icon-color);
  }
  .automations .workflow-title h2 .untitled {
    color: var(--workflow-untitled-title-color);
  }
  .automations .workflow-title .dropdown-container {
    flex-shrink: 0;
  }
  .automations .workflow-title .workflow-title-side {
    flex-shrink: 0;
    display: grid;
    grid-template-rows: auto var(--automations-title-row-height);
    align-content: center;
    align-items: center;
    justify-items: end;
    height: var(--automations-header-height);
    padding: var(--automations-title-padding);
  }
  .automations .workflow-title .workflow-status-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--default-text-secondary-color);
  }
  .automations .workflow-title .workflow-status-label > span {
    display: inline-flex;
    align-items: center;
    gap: var(--gutter-xxs);
  }
  .automations .workflow-title .workflow-status-label i {
    --fa-width: auto;
  }
  .automations .workflow-title .workflow-status-label .workflow-status-enabled i {
    color: var(--workflow-status-enabled-icon-color);
  }
  .automations .workflow-title .workflow-status-label .workflow-status-disabled {
    display: none;
    color: var(--workflow-status-disabled-color);
  }
  .automations .workflow-title .workflow-status-label.disabled .workflow-status-enabled {
    display: none;
  }
  .automations .workflow-title .workflow-status-label.disabled .workflow-status-disabled {
    display: inline-flex;
  }
  .automations .workflow-title .run-workflow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .automations .workflow-title .run-workflow-unavailable .run-workflow {
    pointer-events: none;
  }
  @media screen and (width < 990px) {
    .automations {
      flex-direction: column;
    }
  }
  .automations .workflow-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
  }
  @keyframes action-entry {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes action-exit {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }
  .custom-scroll .add-filter,
  .custom-scroll .add-action {
    animation: action-entry 0.5s;
  }
  .custom-scroll .remove-filter,
  .custom-scroll .remove-action {
    animation: action-exit 0.3s forwards;
    pointer-events: none;
  }
  .automation-action.remove-action-animation,
  .automation-filter.remove-filter-animation {
    animation: action-exit 0.3s forwards;
    pointer-events: none;
  }
  .automation.remove-automation-animation {
    animation: action-exit 0.3s forwards;
    pointer-events: none;
  }
  @keyframes target {
    0% {
      opacity: 0.75;
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes destination {
    0% {
      opacity: 0.5;
    }
    50% {
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .custom-scroll .automation .actions li,
  .custom-scroll .automation .filters li {
    z-index: 1;
    transition: top 0.5s;
  }
  .custom-scroll .automation .actions li.target,
  .custom-scroll .automation .filters li.target {
    animation: target 0.5s;
    z-index: 2;
  }
  .custom-scroll .automation .actions li.destination,
  .custom-scroll .automation .filters li.destination {
    animation: destination 0.5s;
    z-index: 0;
  }
  .workflow-dimension-icon,
  .target-icon i {
    --fa-width: auto;
    display: inline-grid;
  }
  .workflow-dimension-icon::before, .workflow-dimension-icon::after,
  .target-icon i::before,
  .target-icon i::after {
    grid-area: 1/1;
    position: static;
  }
}

/*# sourceMappingURL=bundle.min.css.map*/