body {
  font-family: var(--wb-ds-font-family--default);
  font-size: var(--wb-ds-font-size--default);
  line-height: var(--wb-ds-line-height--default);
  font-weight: var(--wb-ds-font-weight--default);
  letter-spacing: var(--wb-ds-letter-spacing--default);
  color: var(--wb-ds-color-text--default);
  font-style: var(--wb-ds-font-style--default);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root {
  --wb-ds-size-scale: 1.6;
  --wb-ds-size-scale-static: 1;
  --wb-ds-size-unit: calc(1rem * var(--wb-ds-size-scale));
  --wb-ds-size-unit-static: calc(10px * var(--wb-ds-size-scale-static));
  --wb-ds-size--0: 0;
  --wb-ds-size--100: calc(1 * var(--wb-ds-size-unit));
  --wb-ds-size-static--0: 0;
  --wb-ds-size-static--10: calc(0.1 * var(--wb-ds-size-unit-static));
  --wb-ds-space--none: var(--wb-ds-size--0);
  --wb-ds-space--default: var(--wb-ds-space--m);
  font-size: 62.5%;
  --wb-ds-font-family--default: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --wb-ds-font-size--default: var(--wb-ds-font-size--m);
  --wb-ds-line-height--default: var(--wb-ds-line-height--m);
  --wb-ds-font-weight--default: normal;
  --wb-ds-letter-spacing--default: 0;
  --wb-ds-font-style--default: normal;
  --wb-ds-color-error--default: red;
  --wb-ds-color-gray--white: white;
  --wb-ds-color-gray--default: gray;
  --wb-ds-color-gray--black: black;
  --wb-ds-color-text--default: var(--wb-ds-color-gray--black);
  --wb-ds-color-text--disabled: var(--wb-ds-color-gray--default);
  --wb-ds-color-border--default: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--default: transparent;
  --wb-ds-tooltip__background: var(--wb-ds-color-gray--white);
  --wb-ds-grid__gutter-x: var(--wb-ds-size--100);
  --wb-ds-grid__gutter-y: var(--wb-ds-size--100);
  --wb-ds-grid__grid-margin: var(--wb-ds-size--100);
  --wb-ds-border-width--default: var(--wb-ds-size-static--10);
  --wb-ds-zindex--element: 5;
}
:root {
  --wb-ds-color-info--10: #f0f5ff;
  --wb-ds-color-info--20: #d6e4ff;
  --wb-ds-color-info--30: #adc6ff;
  --wb-ds-color-info--40: #85a5ff;
  --wb-ds-color-info--50: #597ef7;
  --wb-ds-color-info--60: #2f54eb;
  --wb-ds-color-info--70: #1d39c4;
  --wb-ds-color-info--80: #10239e;
  --wb-ds-color-info--90: #061178;
  --wb-ds-color-info--100: #030852;
  --wb-ds-color-info--default: var(--wb-ds-color-info--60);
  --wb-ds-color-primary--30: #33666f;
  --wb-ds-color-primary--50: #003a46;
  --wb-ds-color-primary--80: #00262d;
  --wb-ds-color-primary--light: var(--wb-ds-color-primary--30);
  --wb-ds-color-primary--default: var(--wb-ds-color-primary--50);
  --wb-ds-color-primary--dark: var(--wb-ds-color-primary--80);
  --wb-ds-color-secondary--30: #a8b0cc;
  --wb-ds-color-secondary--50: #4c5c99;
  --wb-ds-color-secondary--80: #343f6a;
  --wb-ds-color-secondary--light: var(--wb-ds-color-secondary--30);
  --wb-ds-color-secondary--default: var(--wb-ds-color-secondary--50);
  --wb-ds-color-secondary--dark: var(--wb-ds-color-secondary--80);
  --wb-ds-color-success--50: #70b77e;
  --wb-ds-color-success--default: var(--wb-ds-color-success--50);
  --wb-ds-color-gray--white: #ffffff;
  --wb-ds-color-gray--10: #f9fafb;
  --wb-ds-color-gray--40: #e0e0e0;
  --wb-ds-color-gray--60: #5b5b5b;
  --wb-ds-color-gray--black: #1c1c1c;
  --wb-ds-color-gray--x-light: var(--wb-ds-color-gray--40);
  --wb-ds-color-gray--light: var(--wb-ds-color-gray--40);
  --wb-ds-color-gray--default: var(--wb-ds-color-gray--60);
  --wb-ds-color-gray--dark: var(--wb-ds-color-gray--60);
  --wb-ds-color-gray--x-dark: var(--wb-ds-color-gray--60);
  --wb-ds-color-gray--lightest: var(--wb-ds-color-gray--10);
  --wb-ds-color-error--10: #ffebee;
  --wb-ds-color-error--20: #ffcdd2;
  --wb-ds-color-error--30: #ef9a9a;
  --wb-ds-color-error--40: #e57373;
  --wb-ds-color-error--50: #d32f2f;
  --wb-ds-color-error--60: #b71c1c;
  --wb-ds-color-error--70: #8e1616;
  --wb-ds-color-error--80: #6b1212;
  --wb-ds-color-error--90: #4a0d0d;
  --wb-ds-color-error--100: #2e0b0b;
  --wb-ds-color-error--light: var(--wb-ds-color-error--30);
  --wb-ds-color-error--default: var(--wb-ds-color-error--50);
  --wb-ds-color-error--dark: var(--wb-ds-color-error--70);
  --wb-ds-color-link: var(--wb-ds-color-gray--black);
  --wb-ds-color-link--hover: var(--wb-ds-color-primary--default);
  --wb-text__font-color: var(--wb-ds-color-gray--black);
  --wb-ds-color-text--hover: var(--wb-ds-color-gray--dark);
  --wb-ds-color-text--focus: var(--wb-ds-color-gray--dark);
  --wb-ds-color-text--active: var(--wb-ds-color-gray--dark);
  --wb-ds-color-text--disabled: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--hover: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--focus: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--active: var(--wb-ds-color-gray--default);
  --wb-ds-size--25: calc(0.25 * var(--wb-ds-size-unit));
  --wb-ds-size--13: calc(0.125 * var(--wb-ds-size-unit));
  --wb-ds-size--6: calc(0.0625 * var(--wb-ds-size-unit));
  --wb-ds-size--50: calc(0.5 * var(--wb-ds-size-unit));
  --wb-ds-size--75: calc(0.75 * var(--wb-ds-size-unit));
  --wb-ds-size--100: calc(1 * var(--wb-ds-size-unit));
  --wb-ds-size--125: calc(1.25 * var(--wb-ds-size-unit));
  --wb-ds-size--150: calc(1.5 * var(--wb-ds-size-unit));
  --wb-ds-size--175: calc(1.75 * var(--wb-ds-size-unit));
  --wb-ds-size--200: calc(2 * var(--wb-ds-size-unit));
  --wb-ds-size--225: calc(2.25 * var(--wb-ds-size-unit));
  --wb-ds-size--250: calc(2.5 * var(--wb-ds-size-unit));
  --wb-ds-size--275: calc(2.75 * var(--wb-ds-size-unit));
  --wb-ds-size--300: calc(3 * var(--wb-ds-size-unit));
  --wb-ds-size--325: calc(3.25 * var(--wb-ds-size-unit));
  --wb-ds-size--350: calc(3.5 * var(--wb-ds-size-unit));
  --wb-ds-size--375: calc(3.75 * var(--wb-ds-size-unit));
  --wb-ds-size--400: calc(4 * var(--wb-ds-size-unit));
  --wb-ds-size--425: calc(4.25 * var(--wb-ds-size-unit));
  --wb-ds-size--450: calc(4.5 * var(--wb-ds-size-unit));
  --wb-ds-size--475: calc(4.75 * var(--wb-ds-size-unit));
  --wb-ds-size--500: calc(5 * var(--wb-ds-size-unit));
  --wb-ds-size--525: calc(5.25 * var(--wb-ds-size-unit));
  --wb-ds-size--550: calc(5.5 * var(--wb-ds-size-unit));
  --wb-ds-size--575: calc(5.75 * var(--wb-ds-size-unit));
  --wb-ds-size--600: calc(6 * var(--wb-ds-size-unit));
  --wb-ds-size-static--10: calc(0.1 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--20: calc(0.2 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--30: calc(0.3 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--40: calc(0.4 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--50: calc(0.5 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--60: calc(0.6 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--70: calc(0.7 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--80: calc(0.8 * var(--wb-ds-size-unit-static));
  --wb-ds-size--1: 1px;
  --wb-ds-size--75: calc(0.75 * var(--wb-ds-size-unit));
  --wb-ds-size--88: calc(0.88 * var(--wb-ds-size-unit));
  --wb-ds-size--100: calc(1 * var(--wb-ds-size-unit));
  --wb-ds-size--113: calc(1.13 * var(--wb-ds-size-unit));
  --wb-ds-font-family--default: "Urbanist", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --wb-ds-font-family--serif: "Urbanist", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --wb-ds-font-weight--default: 400;
  --wb-ds-font-weight--medium: 400;
  --wb-ds-font-weight--bold: 700;
  --wb-ds-font-size--8xl: var(--wb-ds-size--375);
  --wb-ds-line-height--8xl: var(--wb-ds-size--575);
  --wb-ds-font-size--7xl: var(--wb-ds-size--281);
  --wb-ds-line-height--7xl: var(--wb-ds-size--475);
  --wb-ds-font-size--6xl: var(--wb-ds-size--250);
  --wb-ds-line-height--6xl: var(--wb-ds-size--375);
  --wb-ds-font-size--5xl: var(--wb-ds-size--200);
  --wb-ds-line-height--5xl: var(--wb-ds-title__line-height);
  --wb-ds-font-size--4xl: var(--wb-ds-size--175);
  --wb-ds-line-height--4xl: var(--wb-ds-size--275);
  --wb-ds-font-size--3xl: var(--wb-ds-size--150);
  --wb-ds-line-height--3xl: var(--wb-ds-size--200);
  --wb-ds-font-size--2xl: var(--wb-ds-size--138);
  --wb-ds-line-height--2xl: var(--wb-ds-size--200);
  --wb-ds-font-size--xl: var(--wb-ds-size--125);
  --wb-ds-line-height--xl: var(--wb-ds-size--175);
  --wb-ds-font-size--l: var(--wb-ds-size--113);
  --wb-ds-line-height--l: var(--wb-ds-size--150);
  --wb-ds-font-size--default: var(--wb-ds-size--113);
  --wb-ds-line-height--default: var(--wb-ds-size--150);
  --wb-ds-font-size--m: var(--wb-ds-font-size--default);
  --wb-ds-line-height--m: var(--wb-ds-line-height--default);
  --wb-ds-font-size--s: var(--wb-ds-size--88);
  --wb-ds-line-height--s: var(--wb-ds-size--125);
  --wb-ds-font-size--xs: var(--wb-ds-size--81);
  --wb-ds-line-height--xs: var(--wb-ds-size--75);
  --wb-text__font-size: var(--wb-ds-font-size--default);
  --wb-text__line-height: var(--wb-ds-line-height--default);
  --wb-ds-font-size-static--xs: var(--wb-ds-size--75);
  --wb-ds-font-size-static--s: var(--wb-ds-size--88);
  --wb-ds-font-size-static--m: var(--wb-ds-size--100);
  --wb-ds-font-size-static--l: var(--wb-ds-size--113);
  --wb-ds-line-height-static--xs: 1.25;
  --wb-ds-line-height-static--s: 1.5;
  --wb-ds-line-height-static--m: 1.5;
  --wb-ds-line-height-static--l: 1.5;
  --wb-ds-title__font-family: var(--wb-ds-font-family--serif);
  --wb-ds-title__color: var(--wb-ds-color-primary--dark);
  --wb-ds-title__font-weight: var(--wb-ds-font-weight--bold);
  --wb-ds-title__bezel-top: 0;
  --wb-ds-title__line-height: 1.6;
  --wb-ds-title-level-1__font-size: var(--wb-ds-font-size--4xl);
  --wb-ds-title-level-2__font-size: var(--wb-ds-font-size--xl);
  --wb-ds-title-level-3__font-size: var(--wb-ds-font-size--l);
  --wb-ds-title-level-4__font-size: var(--wb-ds-font-size--default);
  --wb-ds-title-level-6__font-size: var(--wb-ds-font-size--3xl);
  --wb-ds-border-width--thick: var(--wb-ds-size-static--20);
  --wb-ds-border-width--x-thick: var(--wb-ds-size-static--40);
  --wb-ds-border-width--2x-thick: var(--wb-ds-size-static--60);
  --wb-ds-border-radius--none: 0;
  --wb-ds-border-radius--small: var(--wb-ds-size--1);
  --wb-ds-border-radius--medium: var(--wb-ds-size-static--40);
  --wb-ds-border-radius--large: var(--wb-ds-size-static--80);
  --wb-ds-border-radius--full: 50%;
  --wb-ds-color-border--default: var(--wb-ds-border-radius--medium);
  --wb-ds-button__font-size: var(--wb-ds-font-size--default);
  --wb-ds-button__border-radius: var(--wb-ds-border-radius--medium);
  --wb-button__line-height: var(--wb-ds-line-height--default);
  --wb-box__border: var(--wb-ds-size-static--10) solid
    var(--wb-ds-color-gray--10);
  --wb-box__border-radius: var(--wb-ds-border-radius--large);
  --wb-ds-space--2xs: var(--wb-ds-size--25);
  --wb-ds-space--xs: var(--wb-ds-size--50);
  --wb-ds-space--s: var(--wb-ds-size--75);
  --wb-ds-space--m: var(--wb-ds-size--100);
  --wb-ds-space--l: var(--wb-ds-size--150);
  --wb-ds-space--xl: var(--wb-ds-size--200);
  --wb-ds-space--2xl: var(--wb-ds-size--250);
  --wb-ds-space--3xl: var(--wb-ds-size--300);
  --wb-ds-animation-timing-function: ease-in;
  --wb-ds-animation-duration--slow: 0.35s;
  --wb-ds-animation-duration--default: var(--wb-ds-animation-duration--medium);
  --wb-ds-animation-duration--medium: 0.2s;
  --wb-ds-animation-duration--fast: 0.15s;
  --wb-ds-animation--default: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  --wb-ds-icon-size--xs: var(--wb-ds-size--100);
  --wb-ds-icon-size--s: var(--wb-ds-size--150);
  --wb-ds-icon-size--m: var(--wb-ds-size--225);
  --wb-ds-icon-size--l: var(--wb-ds-size--325);
  --wb-ds-icon-size--xl: var(--wb-ds-size--425);
  --wb-ds-field-label-is-fluid__mask-color: rgba(216, 216, 216);
  --wb-ds-field-message-icon__display: none;
  --wb-alert-is-error__background: #ffd3d3;
  --wb-alert-is-info__background: #e8eaf6;
  --wb-alert-is-success__background: #e8f6e8;
  --wb-ds-field__background: var(--wb-ds-color-gray--white);
  --wb-text-field__border-radius: var(--wb-ds-border-radius--large);
  --wb-text-field__bezel: var(--wb-ds-size--88);
  --wb-layout__gutter-height: var(--wb-ds-size--50);
  --wb-ds-field__bezel-top: var(--wb-ds-size--88);
  --wb-ds-field__bezel-bottom: var(--wb-ds-size--88);
  --wb-text-field-label-is-fluid__bezel: var(--wb-ds-size--88);
  --wb-ds-field__border-radius: var(--wb-ds-border-radius--large);
  --wb-ds-field__border-color: var(--wb-ds-color-gray--40);
  --wb-text-field-label-is-fluid__mask-color: var(--wb-ds-color-gray--white);
  --wb-ds-field-message__font-size: 12px;
  --wb-radio-field__border-radius: var(--wb-ds-border-radius--large);
  --wb-radio-field-icon__color: var(--wb-ds-color-secondary--50);
  --app-header--title-display-style: none;
  --wb-ds-range-input__background: var(--wb-ds-color-gray--40);
  --wb-ds-range-input__thumb-background: var(--wb-ds-color-secondary--default);
  --wb-ds-range-input__thumb-hover-box-shadow: 0 0 0 10px
    rgba(66, 155, 108, 0.3);
  --wb-ds-range-input__thumb-active-focus-box-shadow: 0 0 0 13px
    rgba(66, 155, 108, 0.2);
  --wb-ds-range-background-height: 10px;
  --wb-ds-range-input__thumb-height: 24px;
  --wb-ds-range-input__thumb-width: 24px;
  --wb-ds-range-input__thumb-border-radius: 15px;
}
@media (min-width: 768px) {
  :root {
    --wb-ds-title-level-1__font-size: var(--wb-ds-font-size--4xl);
    --wb-ds-title-level-2__font-size: var(--wb-ds-font-size--2xl);
    --wb-ds-title-level-3__font-size: var(--wb-ds-font-size--xl);
  }
}
@media (min-width: 992px) {
  :root {
    --wb-ds-title-level-1__font-size: var(--wb-ds-font-size--6xl);
    --wb-ds-title-level-2__font-size: var(--wb-ds-font-size--4xl);
    --wb-ds-title-level-3__font-size: var(--wb-ds-font-size--3xl);
    --wb-ds-title-level-4__font-size: var(--wb-ds-font-size--l);
  }
}
wb-title h2.wb-title--level-2:after {
  content: "";
  display: block;
  width: 100px;
  height: 8px;
  margin-top: var(--wb-ds-size--100);
  background-color: var(--wb-ds-color-secondary--default);
}
wb-title h5.wb-title--level-5 {
  position: relative;
  padding-left: var(--wb-ds-size--100);
}
wb-title h5.wb-title--level-5:before {
  content: url("data:image/svg+xml,%3Csvg width=%276%27 height=%277%27 viewBox=%270 0 6 7%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%273%27 cy=%273.5%27 r=%273%27 fill=%27black%27/%3E%3C/svg%3E");
  position: absolute;
  left: -5px;
  top: -3px;
  width: 6px;
  height: 6px;
}
wb-checkbox-field {
  --wb-ds-field__border-color: var(--wb-ds-color-gray--white);
  --wb-ds-field__border-radius: var(--wb-ds-border-radius--none);
  --wb-ds-field__box-shadow: inset 0 0 0 var(--wb-ds-size--6)
    var(--wb-ds-color-gray--default);
  --wb-ds-field__box-shadow--hover: inset 0 0 0 var(--wb-ds-size--6)
    var(--wb-ds-color-gray--default);
  --wb-checkbox-field-icon__width: 5px;
  --wb-checkbox-field-icon__height: 9px;
  --wb-checkbox-field-icon__left: 7px;
  --wb-checkbox-field-icon__top: 5px;
  --wb-ds-field__box-shadow--focus: var(--wb-ds-field__box-shadow--hover);
  --wb-checkbox-field__box-shadow--valid: var(--wb-ds-field__box-shadow--hover);
  --wb-option__size: var(--wb-ds-size--125);
  --wb-checkbox-field__background--active: var(--wb-checkbox-field-icon__color);
  --wb-ds-field__color: var(--wb-ds-color-primary--default);
}
wb-checkbox-field .wb-checkbox-field__option:hover {
  --wb-checkbox-field__background--active: var(--wb-checkbox-field-icon__color);
  --wb-checkbox-border--valid: var(--wb-ds-color-gray--default-5);
}
wb-radio-field {
  --wb-option__size: var(--wb-ds-size--100);
  --wb-radio-field-icon__size: 120%;
}
wb-radio-field wb-option {
  --wb-option-icon__color: var(--wb-ds-color-gray--black);
  --wb-option__border-width--checked: var(--wb-ds-size--13);
}
wb-radio-field wb-option:hover {
  --wb-option__border-color--hover: var(--wb-ds-color-gray--black);
  --wb-option-icon__color--hover: var(--wb-ds-color-gray--black);
}
wb-radio-field wb-option:disabled {
  --wb-option__border-color--disabled: var(--wb-ds-color-gray--60);
  --wb-option-icon__color--hover: var(--wb-ds-color-gray--60);
}
wb-radio-field wb-option:focus {
  --wb-option__border: var(--wb-ds-size--13) solid
    var(--wb-ds-color-gray--black);
}
wb-alert {
  --wb-alert__border-radius: var(--wb-ds-border-radius--none);
}
@media (min-width: 1500px) {
  :root {
    --wb-grid-container__max-width: 1200px;
  }
}
@media (min-width: 768px) {
  :root {
    --app-header--title-display-style: block;
  }
}
:root {
  --wb-ds-viewport--xxs: 0px;
  --wb-ds-viewport--xs: 0px;
  --wb-ds-viewport--sm: 768px;
  --wb-ds-viewport--md: 992px;
  --wb-ds-viewport--lg: 1500px;
  --wb-ds-viewport--xl: 2000px;
  --wb-ds-viewport--xxl: 9999px;
}
wb-bezel.content {
  background-color: var(
    --conent--background-color,
    var(--wb-ds-color-gray--10)
  );
}
.wb-button {
  background: red;
}
wb-button,
wb-link[button] {
  --wb-ds-button__bezel-left: var(--wb-ds-space--l);
  --wb-ds-button__bezel-right: var(--wb-ds-space--l);
  --wb-ds-button__bezel-top: var(--wb-ds-space--s);
  --wb-ds-button__bezel-bottom: var(--wb-ds-space--s);
  --wb-ds-button__border-color: var(--wb-ds-color-gray--default);
  --wb-ds-button__box-shadow: rgba(0, 0, 0, 0.02) 0px
    var(--wb-ds-size-static--20) 0px 0px;
  background: var(--wb-ds-color-secondary--default);
}
wb-button .wb-button:hover,
wb-button .wb-button:focus,
wb-button .wb-button:active,
wb-button .wb-link:hover,
wb-button .wb-link:focus,
wb-button .wb-link:active,
wb-link[button] .wb-button:hover,
wb-link[button] .wb-button:focus,
wb-link[button] .wb-button:active,
wb-link[button] .wb-link:hover,
wb-link[button] .wb-link:focus,
wb-link[button] .wb-link:active {
  --wb-ds-button__border-color: var(--wb-ds-color-primary--default);
  --wb-ds-button__color: var(--wb-ds-color-primary--default);
  transition: var(--wb-ds-animation--default);
}
wb-button .wb-link--button,
wb-link[button] .wb-link--button {
  display: inline-flex;
  justify-content: center;
  -moz-column-gap: var(--wb-ds-size--75);
  column-gap: var(--wb-ds-size--75);
  align-items: center;
}
wb-button .wb-button--disabled,
wb-link[button] .wb-button--disabled {
  opacity: 0.4;
}
wb-button[kind="primary"],
wb-link[button][kind="primary"] {
  --wb-ds-button__background: red;
  --wb-ds-button__color: var(--wb-ds-color-gray--white);
  --wb-ds-button__border-width: 0;
  --wb-text__font-weight: var(--wb-ds-font-weight--bold);
}
wb-button[kind="primary"] .wb-button:hover,
wb-button[kind="primary"] .wb-button:focus,
wb-button[kind="primary"] .wb-button:active,
wb-button[kind="primary"] .wb-link:hover,
wb-button[kind="primary"] .wb-link:focus,
wb-button[kind="primary"] .wb-link:active,
wb-link[button][kind="primary"] .wb-button:hover,
wb-link[button][kind="primary"] .wb-button:focus,
wb-link[button][kind="primary"] .wb-button:active,
wb-link[button][kind="primary"] .wb-link:hover,
wb-link[button][kind="primary"] .wb-link:focus,
wb-link[button][kind="primary"] .wb-link:active {
  --wb-ds-button__background: var(--wb-ds-color-primary--light);
  --wb-ds-button__color: var(--wb-ds-color-gray--white);
}
wb-button[kind="icon"] {
  --wb-button__border-width: 0;
}
wb-button[kind="icon"] .wb-button:focus,
wb-button[kind="icon"] .wb-button:active {
  opacity: 0.5;
}
wb-button[kind="link"],
wb-link[button][kind="link"] {
  --wb-ds-button__color: var(--wb-ds-color-primary--default);
  --wb-ds-button__border-width: 0;
}
wb-button[kind="link"] .wb-button:hover,
wb-button[kind="link"] .wb-button:focus,
wb-button[kind="link"] .wb-button:active,
wb-button[kind="link"] .wb-link:hover,
wb-button[kind="link"] .wb-link:focus,
wb-button[kind="link"] .wb-link:active,
wb-link[button][kind="link"] .wb-button:hover,
wb-link[button][kind="link"] .wb-button:focus,
wb-link[button][kind="link"] .wb-button:active,
wb-link[button][kind="link"] .wb-link:hover,
wb-link[button][kind="link"] .wb-link:focus,
wb-link[button][kind="link"] .wb-link:active {
  --wb-ds-button__color: var(--wb-ds-color-primary--light);
}
wb-link[kind="container"] {
  --wb-ds-link__text-decoration: none;
}
wb-link[kind="container"]:hover {
  --wb-ds-link__text-decoration: none;
}
wb-link[kind="container"]:focus {
  --wb-ds-link__text-decoration: underline;
}
wb-link[kind="default"],
wb-link {
  --wb-ds-link__text-decoration: underline;
}
wb-link[kind="default"] a:hover,
wb-link a:hover {
  --wb-ds-link__color: var(--wb-ds-color-gray--light);
}
wb-text-field .wb-text-field__input:focus {
  --wb-ds-field__border-color: var(--wb-ds-color-gray--dark);
}
wb-checkbox-field label:has(input:is(:focus)) {
  color: var(--wb-ds-color-primary--default);
}
wb-checkbox-field input:is(:focus) {
  background: var(--wb-ds-color-primary--30);
}
wb-checkbox-field a {
  color: var(--wb-ds-color-text--default);
}
wb-checkbox-field a:hover {
  color: var(--wb-ds-color-primary--default);
}
wb-radio-field {
  --wb-ds-field__border: 1px solid;
  --wb-ds-field__border--hover: 1px solid;
  --wb-ds-field__border--focus: 1px solid;
}
wb-radio-field .wb-radio-field__input {
  box-sizing: content-box;
}
wb-radio-field .wb-radio-field__input:focus,
wb-radio-field .wb-radio-field__input:active {
  --wb-option__box-shadow--focus: inset 0 0 0 2px
    var(--wb-ds-color-secondary--default);
}
wb-upload-field {
  padding: var(--wb-ds-space--s) 0px;
  --wb-box__border: 1px solid var(--wb-ds-color-gray--40);
  --wb-layout__justify-content: center;
  text-align: center;
}
wb-upload-field .wb-upload-field__dropzone {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wb-ds-space--s);
}
wb-upload-field .wb-upload-field:focus,
wb-upload-field .wb-upload-field:active,
wb-upload-field .wb-upload-field__button:focus,
wb-upload-field .wb-upload-field__button:active {
  outline: none;
  box-shadow: none;
  --wb-box__border: 1px solid var(--wb-ds-color-secondary--default);
}
wb-bezel#configurator,
wb-bezel#order-details {
  padding-bottom: 40px;
  padding-top: 180px;
}
@media (min-width: 768px) {
  wb-bezel#configurator,
  wb-bezel#order-details {
    padding-top: 80px;
  }
}
body {
  font-family: var(--wb-ds-font-family--default);
  font-size: var(--wb-ds-font-size--default);
  line-height: var(--wb-ds-line-height--default);
  font-weight: var(--wb-ds-font-weight--default);
  letter-spacing: var(--wb-ds-letter-spacing--default);
  color: var(--wb-ds-color-text--default);
  font-style: var(--wb-ds-font-style--default);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root {
  --wb-ds-size-scale: 1.6;
  --wb-ds-size-scale-static: 1;
  --wb-ds-size-unit: calc(1rem * var(--wb-ds-size-scale));
  --wb-ds-size-unit-static: calc(10px * var(--wb-ds-size-scale-static));
  --wb-ds-size--0: 0;
  --wb-ds-size--100: calc(1 * var(--wb-ds-size-unit));
  --wb-ds-size-static--0: 0;
  --wb-ds-size-static--10: calc(0.1 * var(--wb-ds-size-unit-static));
  --wb-ds-space--none: var(--wb-ds-size--0);
  --wb-ds-space--default: var(--wb-ds-space--m);
  font-size: 62.5%;
  --wb-ds-font-family--default: Helvetica, sans-serif;
  --wb-ds-font-size--default: var(--wb-ds-font-size--m);
  --wb-ds-line-height--default: var(--wb-ds-line-height--m);
  --wb-ds-font-weight--default: normal;
  --wb-ds-letter-spacing--default: 0;
  --wb-ds-font-style--default: normal;
  --wb-ds-color-error--default: red;
  --wb-ds-color-gray--white: white;
  --wb-ds-color-gray--default: gray;
  --wb-ds-color-gray--black: black;
  --wb-ds-color-text--default: var(--wb-ds-color-gray--black);
  --wb-ds-color-text--disabled: var(--wb-ds-color-gray--default);
  --wb-ds-color-border--default: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--default: transparent;
  --wb-ds-tooltip__background: var(--wb-ds-color-gray--white);
  --wb-ds-grid__gutter-x: var(--wb-ds-size--100);
  --wb-ds-grid__gutter-y: var(--wb-ds-size--100);
  --wb-ds-grid__grid-margin: var(--wb-ds-size--100);
  --wb-ds-border-width--default: var(--wb-ds-size-static--10);
  --wb-ds-zindex--element: 5;
}
:root {
  --wb-ds-color-primary--50: #272829;
  --wb-ds-color-primary--60: #000000;
  --wb-ds-color-primary--light: var(--wb-ds-color-primary--50);
  --wb-ds-color-primary--default: var(--wb-ds-color-primary--60);
  --wb-ds-color-gray--white: #ffffff;
  --wb-ds-color-gray--5: #fafafa;
  --wb-ds-color-gray--10: #f5f5f5;
  --wb-ds-color-gray--20: #f0f0f0;
  --wb-ds-color-gray--30: #d9d9d9;
  --wb-ds-color-gray--40: #bfbfbf;
  --wb-ds-color-gray--50: #8c8c8c;
  --wb-ds-color-gray--60: #595959;
  --wb-ds-color-gray--70: #434343;
  --wb-ds-color-gray--80: #262626;
  --wb-ds-color-gray--90: #1f1f1f;
  --wb-ds-color-gray--100: #141414;
  --wb-ds-color-gray--black: #000000;
  --wb-ds-color-gray--x-light: var(--wb-ds-color-gray--30);
  --wb-ds-color-gray--light: var(--wb-ds-color-gray--40);
  --wb-ds-color-gray--default: var(--wb-ds-color-gray--50);
  --wb-ds-color-gray--dark: var(--wb-ds-color-gray--60);
  --wb-ds-color-gray--x-dark: var(--wb-ds-color-gray--70);
  --wb-ds-color-gray--lightest: var(--wb-ds-color-gray--10);
  --wb-ds-color-success--10: #f6ffed;
  --wb-ds-color-success--20: #d9f7be;
  --wb-ds-color-success--30: #b7eb8f;
  --wb-ds-color-success--40: #95de64;
  --wb-ds-color-success--50: #73d13d;
  --wb-ds-color-success--60: #52c41a;
  --wb-ds-color-success--70: #389e0d;
  --wb-ds-color-success--80: #237804;
  --wb-ds-color-success--90: #135200;
  --wb-ds-color-success--100: #092b00;
  --wb-ds-color-success--default: var(--wb-ds-color-success--60);
  --wb-ds-color-error--10: #fff1f0;
  --wb-ds-color-error--20: #ffccc7;
  --wb-ds-color-error--30: #ffa39e;
  --wb-ds-color-error--40: #ff7875;
  --wb-ds-color-error--50: #ff4d4f;
  --wb-ds-color-error--60: #f5222d;
  --wb-ds-color-error--70: #cf1322;
  --wb-ds-color-error--80: #a8071a;
  --wb-ds-color-error--90: #820014;
  --wb-ds-color-error--100: #5c0011;
  --wb-ds-color-error--default: var(--wb-ds-color-error--50);
  --wb-ds-color-info--10: #f0f5ff;
  --wb-ds-color-info--20: #d6e4ff;
  --wb-ds-color-info--30: #adc6ff;
  --wb-ds-color-info--40: #85a5ff;
  --wb-ds-color-info--50: #597ef7;
  --wb-ds-color-info--60: #2f54eb;
  --wb-ds-color-info--70: #1d39c4;
  --wb-ds-color-info--80: #10239e;
  --wb-ds-color-info--90: #061178;
  --wb-ds-color-info--100: #030852;
  --wb-ds-color-info--default: var(--wb-ds-color-info--60);
  --wb-ds-color-link: var(--wb-ds-color-gray--black);
  --wb-ds-color-link--hover: var(--wb-ds-color-primary--default);
  --wb-text__font-color: var(--wb-ds-color-gray--black);
  --wb-ds-color-text--hover: var(--wb-ds-color-gray--dark);
  --wb-ds-color-text--focus: var(--wb-ds-color-gray--dark);
  --wb-ds-color-text--active: var(--wb-ds-color-gray--dark);
  --wb-ds-color-text--disabled: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--hover: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--focus: var(--wb-ds-color-gray--default);
  --wb-ds-color-background--active: var(--wb-ds-color-gray--default);
  --wb-ds-size--25: calc(0.25 * var(--wb-ds-size-unit));
  --wb-ds-size--13: calc(0.125 * var(--wb-ds-size-unit));
  --wb-ds-size--6: calc(0.0625 * var(--wb-ds-size-unit));
  --wb-ds-size--50: calc(0.5 * var(--wb-ds-size-unit));
  --wb-ds-size--75: calc(0.75 * var(--wb-ds-size-unit));
  --wb-ds-size--100: calc(1 * var(--wb-ds-size-unit));
  --wb-ds-size--125: calc(1.25 * var(--wb-ds-size-unit));
  --wb-ds-size--150: calc(1.5 * var(--wb-ds-size-unit));
  --wb-ds-size--175: calc(1.75 * var(--wb-ds-size-unit));
  --wb-ds-size--200: calc(2 * var(--wb-ds-size-unit));
  --wb-ds-size--225: calc(2.25 * var(--wb-ds-size-unit));
  --wb-ds-size--250: calc(2.5 * var(--wb-ds-size-unit));
  --wb-ds-size--275: calc(2.75 * var(--wb-ds-size-unit));
  --wb-ds-size--300: calc(3 * var(--wb-ds-size-unit));
  --wb-ds-size--325: calc(3.25 * var(--wb-ds-size-unit));
  --wb-ds-size--350: calc(3.5 * var(--wb-ds-size-unit));
  --wb-ds-size--375: calc(3.75 * var(--wb-ds-size-unit));
  --wb-ds-size--400: calc(4 * var(--wb-ds-size-unit));
  --wb-ds-size--425: calc(4.25 * var(--wb-ds-size-unit));
  --wb-ds-size--450: calc(4.5 * var(--wb-ds-size-unit));
  --wb-ds-size--475: calc(4.75 * var(--wb-ds-size-unit));
  --wb-ds-size--500: calc(5 * var(--wb-ds-size-unit));
  --wb-ds-size--525: calc(5.25 * var(--wb-ds-size-unit));
  --wb-ds-size--550: calc(5.5 * var(--wb-ds-size-unit));
  --wb-ds-size--575: calc(5.75 * var(--wb-ds-size-unit));
  --wb-ds-size--600: calc(6 * var(--wb-ds-size-unit));
  --wb-ds-size-static--10: calc(0.1 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--20: calc(0.2 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--30: calc(0.3 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--40: calc(0.4 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--50: calc(0.5 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--60: calc(0.6 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--70: calc(0.7 * var(--wb-ds-size-unit-static));
  --wb-ds-size-static--80: calc(0.8 * var(--wb-ds-size-unit-static));
  --wb-ds-size--1: 1px;
  --wb-ds-size--75: calc(0.75 * var(--wb-ds-size-unit));
  --wb-ds-size--88: calc(0.88 * var(--wb-ds-size-unit));
  --wb-ds-size--100: calc(1 * var(--wb-ds-size-unit));
  --wb-ds-size--113: calc(1.13 * var(--wb-ds-size-unit));
  --wb-ds-font-family--default: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --wb-ds-font-family--serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --wb-ds-font-weight--default: 400;
  --wb-ds-font-weight--medium: 400;
  --wb-ds-font-weight--bold: 600;
  --wb-ds-font-size--8xl: var(--wb-ds-size--375);
  --wb-ds-line-height--8xl: var(--wb-ds-size--575);
  --wb-ds-font-size--7xl: var(--wb-ds-size--281);
  --wb-ds-line-height--7xl: var(--wb-ds-size--475);
  --wb-ds-font-size--6xl: var(--wb-ds-size--250);
  --wb-ds-line-height--6xl: var(--wb-ds-size--375);
  --wb-ds-font-size--5xl: var(--wb-ds-size--200);
  --wb-ds-line-height--5xl: var(--wb-ds-size--325);
  --wb-ds-font-size--4xl: var(--wb-ds-size--175);
  --wb-ds-line-height--4xl: var(--wb-ds-size--275);
  --wb-ds-font-size--3xl: var(--wb-ds-size--150);
  --wb-ds-line-height--3xl: var(--wb-ds-size--200);
  --wb-ds-font-size--2xl: var(--wb-ds-size--138);
  --wb-ds-line-height--2xl: var(--wb-ds-size--200);
  --wb-ds-font-size--xl: var(--wb-ds-size--125);
  --wb-ds-line-height--xl: var(--wb-ds-size--175);
  --wb-ds-font-size--l: var(--wb-ds-size--113);
  --wb-ds-line-height--l: var(--wb-ds-size--150);
  --wb-ds-font-size--default: var(--wb-ds-size--100);
  --wb-ds-line-height--default: var(--wb-ds-size--150);
  --wb-ds-font-size--m: var(--wb-ds-font-size--default);
  --wb-ds-line-height--m: var(--wb-ds-line-height--default);
  --wb-ds-font-size--s: var(--wb-ds-size--88);
  --wb-ds-line-height--s: var(--wb-ds-size--125);
  --wb-ds-font-size--xs: var(--wb-ds-size--81);
  --wb-ds-line-height--xs: var(--wb-ds-size--75);
  --wb-text__font-size: var(--wb-ds-font-size--default);
  --wb-text__line-height: var(--wb-ds-line-height--default);
  --wb-ds-font-size-static--xs: var(--wb-ds-size--75);
  --wb-ds-font-size-static--s: var(--wb-ds-size--88);
  --wb-ds-font-size-static--m: var(--wb-ds-size--100);
  --wb-ds-font-size-static--l: var(--wb-ds-size--113);
  --wb-ds-line-height-static--xs: 1.25;
  --wb-ds-line-height-static--s: 1.5;
  --wb-ds-line-height-static--m: 1.5;
  --wb-ds-line-height-static--l: 1.5;
  --wb-ds-title__font-family: var(--wb-ds-font-family--serif);
  --wb-ds-title__color: var(--wb-ds-color-primary--dark);
  --wb-ds-title__font-weight: var(--wb-ds-font-weight--bold);
  --wb-ds-title__bezel-top: 0;
  --wb-ds-title__line-height: 1.6;
  --wb-ds-title-level-1__font-size: var(--wb-ds-font-size--4xl);
  --wb-ds-title-level-2__font-size: var(--wb-ds-font-size--xl);
  --wb-ds-title-level-3__font-size: var(--wb-ds-font-size--l);
  --wb-ds-title-level-4__font-size: var(--wb-ds-font-size--default);
  --wb-ds-border-width--thick: var(--wb-ds-size-static--20);
  --wb-ds-border-width--x-thick: var(--wb-ds-size-static--40);
  --wb-ds-border-width--2x-thick: var(--wb-ds-size-static--60);
  --wb-ds-border-radius--none: 0;
  --wb-ds-border-radius--small: var(--wb-ds-size--1);
  --wb-ds-border-radius--medium: var(--wb-ds-size-static--40);
  --wb-ds-border-radius--large: var(--wb-ds-size-static--80);
  --wb-ds-border-radius--full: 50%;
  --wb-ds-color-border--default: var(--wb-ds-border-radius--medium);
  --wb-ds-button__font-size: var(--wb-ds-font-size--default);
  --wb-ds-button__border-radius: var(--wb-ds-border-radius--medium);
  --wb-box__border: var(--wb-ds-size-static--10) solid
    var(--wb-ds-color-gray--10);
  --wb-box__border-radius: var(--wb-ds-border-radius--large);
  --wb-ds-space--2xs: var(--wb-ds-size--50);
  --wb-ds-space--xs: var(--wb-ds-size--75);
  --wb-ds-space--s: var(--wb-ds-size--100);
  --wb-ds-space--m: var(--wb-ds-size--150);
  --wb-ds-space--l: var(--wb-ds-size--200);
  --wb-ds-space--xl: var(--wb-ds-size--250);
  --wb-ds-space--2xl: var(--wb-ds-size--350);
  --wb-ds-animation-timing-function: ease-in;
  --wb-ds-animation-duration--slow: 0.35s;
  --wb-ds-animation-duration--default: var(--wb-ds-animation-duration--medium);
  --wb-ds-animation-duration--medium: 0.2s;
  --wb-ds-animation-duration--fast: 0.15s;
  --wb-ds-animation--default: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  --wb-ds-icon-size--xs: var(--wb-ds-size--100);
  --wb-ds-icon-size--s: var(--wb-ds-size--150);
  --wb-ds-icon-size--m: var(--wb-ds-size--225);
  --wb-ds-icon-size--l: var(--wb-ds-size--325);
  --wb-ds-icon-size--xl: var(--wb-ds-size--425);
  --wb-ds-field-label-is-fluid__mask-color: rgba(216, 216, 216);
  --wb-ds-field-message-icon__display: none;
  --wb-alert-is-error__background: #ffd3d3;
  --wb-alert-is-info__background: #e8eaf6;
  --wb-alert-is-success__background: #e8f6e8;
  --app-header--title-display-style: none;
}
@media (min-width: 768px) {
  :root {
    --wb-ds-title-level-1__font-size: var(--wb-ds-font-size--4xl);
    --wb-ds-title-level-2__font-size: var(--wb-ds-font-size--2xl);
    --wb-ds-title-level-3__font-size: var(--wb-ds-font-size--xl);
  }
}
@media (min-width: 992px) {
  :root {
    --wb-ds-title-level-1__font-size: var(--wb-ds-font-size--6xl);
    --wb-ds-title-level-2__font-size: var(--wb-ds-font-size--4xl);
    --wb-ds-title-level-3__font-size: var(--wb-ds-font-size--3xl);
    --wb-ds-title-level-4__font-size: var(--wb-ds-font-size--l);
  }
}
wb-checkbox-field {
  --wb-ds-field__border-color: var(--wb-ds-color-gray--white);
  --wb-ds-field__border-radius: var(--wb-ds-border-radius--none);
  --wb-ds-field__box-shadow: inset 0 0 0 var(--wb-ds-size--6)
    var(--wb-ds-color-gray--default);
  --wb-ds-field__box-shadow--hover: inset 0 0 0 var(--wb-ds-size--6)
    var(--wb-ds-color-gray--default);
  --wb-checkbox-field-icon__width: 5px;
  --wb-checkbox-field-icon__height: 9px;
  --wb-checkbox-field-icon__left: 7px;
  --wb-checkbox-field-icon__top: 5px;
  --wb-ds-field__box-shadow--focus: var(--wb-ds-field__box-shadow--hover);
  --wb-checkbox-field__box-shadow--valid: var(--wb-ds-field__box-shadow--hover);
  --wb-option__size: var(--wb-ds-size--125);
  --wb-checkbox-field__background--active: var(--wb-checkbox-field-icon__color);
  --wb-ds-field__color: var(--wb-ds-color-primary--default);
}
wb-checkbox-field .wb-checkbox-field__option:hover {
  --wb-checkbox-field__background--active: var(--wb-checkbox-field-icon__color);
  --wb-checkbox-border--valid: var(--wb-ds-color-gray--default-5);
}
wb-dropdown-field,
wb-text-field,
wb-upload-field,
wb-checkbox-field,
wb-radio-field {
  --wb-layout__gutter-height: var(--wb-ds-size--50);
  --wb-ds-field__bezel-top: var(--wb-ds-size--88);
  --wb-ds-field__bezel-bottom: var(--wb-ds-size--88);
  --wb-text-field-label-is-fluid__bezel: var(--wb-ds-size--88);
  --wb-ds-field__border-radius: var(--wb-ds-border-radius--small);
  --wb-ds-field__border-color: var(--wb-ds-color-gray--40);
  --wb-text-field-label-is-fluid__mask-color: var(--wb-ds-color-gray--white);
  --wb-ds-field-message__font-size: 12px;
  --wb-radio-field__border-radius: var(--wb-ds-border-radius--small);
}
wb-radio-field wb-option {
  --wb-option-icon__color: var(--wb-ds-color-gray--black);
  --wb-option__border-width--checked: var(--wb-ds-size--13);
}
wb-radio-field wb-option:hover {
  --wb-option__border-color--hover: var(--wb-ds-color-gray--black);
  --wb-option-icon__color--hover: var(--wb-ds-color-gray--black);
}
wb-radio-field wb-option:disabled {
  --wb-option__border-color--disabled: var(--wb-ds-color-gray--60);
  --wb-option-icon__color--hover: var(--wb-ds-color-gray--60);
}
wb-radio-field wb-option:focus {
  --wb-option__border: var(--wb-ds-size--13) solid
    var(--wb-ds-color-gray--black);
}
wb-alert {
  --wb-alert__border-radius: var(--wb-ds-border-radius--none);
}
@media (min-width: 1500px) {
  :root {
    --wb-grid-container__max-width: 1200px;
  }
}
@media (min-width: 768px) {
  :root {
    --app-header--title-display-style: block;
  }
}
:root {
  --wb-ds-viewport--xxs: 0px;
  --wb-ds-viewport--xs: 0px;
  --wb-ds-viewport--sm: 768px;
  --wb-ds-viewport--md: 992px;
  --wb-ds-viewport--lg: 1500px;
  --wb-ds-viewport--xl: 2000px;
  --wb-ds-viewport--xxl: 9999px;
}
wb-bezel.content {
  background-color: var(
    --conent--background-color,
    var(--wb-ds-color-gray--10)
  );
}
wb-button,
wb-link[button] {
  --wb-ds-button__bezel-left: var(--wb-ds-space--s);
  --wb-ds-button__bezel-right: var(--wb-ds-space--s);
  --wb-ds-button__bezel-top: var(--wb-ds-space--2xs);
  --wb-ds-button__bezel-bottom: var(--wb-ds-space--2xs);
  --wb-ds-button__border-color: var(--wb-ds-color-gray--x-light);
  --wb-ds-button__box-shadow: rgba(0, 0, 0, 0.02) 0px
    var(--wb-ds-size-static--20) 0px 0px;
}
wb-button .wb-button:hover,
wb-button .wb-button:focus,
wb-button .wb-button:active,
wb-button .wb-link:hover,
wb-button .wb-link:focus,
wb-button .wb-link:active,
wb-link[button] .wb-button:hover,
wb-link[button] .wb-button:focus,
wb-link[button] .wb-button:active,
wb-link[button] .wb-link:hover,
wb-link[button] .wb-link:focus,
wb-link[button] .wb-link:active {
  --wb-ds-button__border-color: var(--wb-ds-color-primary--default);
  --wb-ds-button__color: var(--wb-ds-color-primary--default);
  transition: var(--wb-ds-animation--default);
}
wb-button .wb-link--button,
wb-link[button] .wb-link--button {
  display: inline-flex;
  justify-content: center;
  -moz-column-gap: var(--wb-ds-size--75);
  column-gap: var(--wb-ds-size--75);
  align-items: center;
}
wb-button .wb-button--disabled,
wb-link[button] .wb-button--disabled {
  opacity: 0.4;
}
wb-button[kind="primary"],
wb-link[button][kind="primary"] {
  --wb-ds-button__background: var(--wb-ds-color-primary--default);
  --wb-ds-button__color: var(--wb-ds-color-gray--white);
  --wb-ds-button__border-width: 0;
}
wb-button[kind="primary"] .wb-button:hover,
wb-button[kind="primary"] .wb-button:focus,
wb-button[kind="primary"] .wb-button:active,
wb-button[kind="primary"] .wb-link:hover,
wb-button[kind="primary"] .wb-link:focus,
wb-button[kind="primary"] .wb-link:active,
wb-link[button][kind="primary"] .wb-button:hover,
wb-link[button][kind="primary"] .wb-button:focus,
wb-link[button][kind="primary"] .wb-button:active,
wb-link[button][kind="primary"] .wb-link:hover,
wb-link[button][kind="primary"] .wb-link:focus,
wb-link[button][kind="primary"] .wb-link:active {
  --wb-ds-button__background: var(--wb-ds-color-primary--light);
  --wb-ds-button__color: var(--wb-ds-color-gray--white);
}
wb-button[kind="link"],
wb-link[button][kind="link"] {
  --wb-ds-button__color: var(--wb-ds-color-primary--default);
  --wb-ds-button__border-width: 0;
}
wb-button[kind="link"] .wb-button:hover,
wb-button[kind="link"] .wb-button:focus,
wb-button[kind="link"] .wb-button:active,
wb-button[kind="link"] .wb-link:hover,
wb-button[kind="link"] .wb-link:focus,
wb-button[kind="link"] .wb-link:active,
wb-link[button][kind="link"] .wb-button:hover,
wb-link[button][kind="link"] .wb-button:focus,
wb-link[button][kind="link"] .wb-button:active,
wb-link[button][kind="link"] .wb-link:hover,
wb-link[button][kind="link"] .wb-link:focus,
wb-link[button][kind="link"] .wb-link:active {
  --wb-ds-button__color: var(--wb-ds-color-primary--light);
}
wb-link[kind="container"] {
  --wb-ds-link__text-decoration: none;
}
wb-link[kind="container"]:hover {
  --wb-ds-link__text-decoration: none;
}
wb-link[kind="container"]:focus {
  --wb-ds-link__text-decoration: underline;
}
wb-link[kind="default"],
wb-link {
  --wb-ds-link__text-decoration: underline;
}
wb-link[kind="default"] a:hover,
wb-link a:hover {
  --wb-ds-link__color: var(--wb-ds-color-gray--light);
}
wb-text-field input:focus {
  --wb-ds-field__border-color: var(--wb-ds-color-gray--dark);
}
wb-checkbox-field label:has(input:is(:focus)) {
  color: var(--wb-ds-color-primary--default);
}
wb-checkbox-field input:is(:focus) {
  background: var(--wb-ds-color-primary--10);
}
wb-checkbox-field a {
  color: var(--wb-ds-color-text--default);
}
wb-checkbox-field a:hover {
  color: var(--wb-ds-color-primary--default);
}
wb-radio-field {
  --wb-ds-field__border: 1px solid;
  --wb-ds-field__border--hover: 1px solid;
  --wb-ds-field__border--focus: 1px solid;
}
@media (min-width: 992px) {
  .outline--after-content {
    display: none;
  }
}
.outline__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outline-item {
  line-height: var(--wb-ds-line-height--l);
  margin-bottom: 20px;
}
.outline-item__title {
  flex: 1;
}
.outline-item--hidden {
  display: none;
}
@media (min-width: 992px) {
  .outline-item--hidden {
    display: initial;
  }
}
.outline-item__icon-pen {
  font-size: var(--wb-ds-size--100);
}
@media (min-width: 992px) {
  .outline-item__icon-pen {
    font-size: var(--wb-ds-size--125);
  }
}
@media (min-width: 2000px) {
  .outline-item__icon-pen {
    font-size: var(--wb-ds-size--150);
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.form-builder {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.form-builder wb-radio-field[hidden] {
  display: none;
}
.form-builder__form-wrapper {
  flex: 1;
  background: var(--wb-ds-color-primary--x-light);
}
@media (min-width: 992px) {
  .form-builder__form-wrapper {
    --wb-bezel__bezel-top: 0;
  }
}
.form-builder__result,
.form-builder__loading,
.form-builder__error {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: var(--wb-ds-space--s);
  height: 75vh;
}
.form-builder--submitted .outline {
  display: none;
}
@media (min-width: 992px) {
  .form-builder {
    display: grid;
    grid-template-columns: minmax(calc(320px + var(--wb-ds-space--l)), 1fr) 5fr;
    grid-template-rows: min-content min-content min-content auto;
  }
  .form-builder__form-wrapper {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
  .form-builder .outline {
    display: block;
  }
  .form-builder--submitted .outline {
    display: none;
  }
}
@media (min-width: 2000px) {
  .form-builder {
    grid-template-columns:
      minmax(calc(320px + var(--wb-ds-space--2xl)), 1fr)
      5fr;
  }
}