:root {
  --transition-curve-acceleration: cubic-bezier(0.4, 0, 1, 1);
  --transition-curve-deceleration: cubic-bezier(0, 0, 0.2, 1);
  --transition-curve-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  --transition-duration-50: 50ms;
  --transition-duration-100: 100ms;
  --transition-duration-150: 150ms;
  --transition-duration-200: 200ms;
  --transition-duration-300: 300ms;
  --transition-duration-400: 400ms;
  --transition-duration-500: 500ms;
  --transition-duration-600: 600ms;
  --transition-duration-700: 700ms;
}

:root {
  --blue100: #e5eefc;
  --blue200: #bdd7fc;
  --blue300: #6da8fd;
  --blue400: #3187fe;
  --blue500: #006aff;
  --blue600: #075ed6;
  --blue700: #104ea5;
  --blue800: #223143;
  --purple100: #eff0fc;
  --purple200: #dbddfc;
  --purple300: #b3b6fd;
  --purple400: #959bfe;
  --purple500: #7d83ff;
  --purple600: #6b72d6;
  --purple700: #565ca5;
  --purple800: #2c3343;
  --teal100: #ecf6f8;
  --teal200: #d1efee;
  --teal300: #9ce0db;
  --teal400: #74d7ce;
  --teal500: #54cec3;
  --teal600: #4aaea6;
  --teal700: #3f8683;
  --teal800: #29393f;
  --orange100: #f9f2ed;
  --orange200: #f8e1cf;
  --orange300: #f6bf93;
  --orange400: #f4a867;
  --orange500: #f49342;
  --orange600: #ca7f3f;
  --orange700: #785639;
  --orange800: #363534;
  --yellow100: #f8f6e8;
  --yellow200: #f6edbf;
  --yellow300: #f2da6e;
  --yellow400: #efcd32;
  --yellow500: #edc200;
  --yellow600: #c5a40a;
  --yellow700: #75691f;
  --yellow800: #35392f;
  --red100: #f6e7e8;
  --red200: #f1c0bf;
  --red300: #e6716e;
  --red400: #de3832;
  --red500: #d80800;
  --red600: #b40f0a;
  --red700: #891716;
  --red800: #332a2f;
  --green100: #e9f5f4;
  --green200: #c9ece2;
  --green300: #89d7c0;
  --green400: #59caa7;
  --green500: #32be92;
  --green600: #2fa17f;
  --green700: #2a6759;
  --green800: #26383b;
  --neutral100: #ffffff;
  --neutral200: #f9fafc;
  --neutral300: #f4f6f8;
  --neutral400: #dfe3e8;
  --neutral500: #c4cdd5;
  --neutral600: #919eab;
  --neutral700: #7a8a99;
  --neutral800: #637381;
  --neutral900: #454f5b;
  --neutral1000: #212b36;
  --brandBlue100: #e5f2f8;
  --brandBlue200: #bde1ef;
  --brandBlue300: #6dbfdf;
  --brandBlue400: #31a8d3;
  --brandBlue500: #0093c9;
  --brandBlue600: #077fab;
  --brandBlue700: #16566f;
  --brandBlue800: #22353f;
  --darkNeutral100: #ffffff;
  --darkNeutral200: #ddddde;
  --darkNeutral300: #a4a5a7;
  --darkNeutral400: #77787c;
  --darkNeutral500: #2e2f36;
  --darkNeutral600: #25262c;
  --darkNeutral700: #1d1e25;
  --darkNeutral800: #1a1b23;
  --darkNeutral900: #16161d;
}

:host .grit-elevation-0, :root .grit-elevation-0 {
  box-shadow: 0px 0px 0px 0px rgba(33, 43, 54, 0.16), 0px 0px 0px 0px rgba(33, 43, 54, 0.16);
  z-index: 0;
}
:host .grit-elevation-1, :root .grit-elevation-1 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16), 0px 1px 1px 0px rgba(33, 43, 54, 0.16);
  z-index: 1;
}
:host .grit-elevation-2, :root .grit-elevation-2 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16), 0px 3px 4px 0px rgba(33, 43, 54, 0.1);
  z-index: 2;
}
:host .grit-elevation-3, :root .grit-elevation-3 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.08), 0px 8px 10px 0px rgba(33, 43, 54, 0.2);
  z-index: 3;
}
:host .grit-elevation-4, :root .grit-elevation-4 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.1), 0px 16px 16px 0px rgba(33, 43, 54, 0.12);
  z-index: 4;
}
:host .grit-elevation-5, :root .grit-elevation-5 {
  box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.1), 0px 24px 24px 0px rgba(33, 43, 54, 0.12);
  z-index: 5;
}

/**
 * Since stencilJs can't use global css files besides for css variables
 * when we need to handle responsive behavior, we have to manually
 * import this scss in the corresponding component.
 *
 * To use any of the mixins, it's as simple as adding a @include
 * with the right tag.
 */
:root {
  --grit-font-family-body: "Lato", sans-serif;
  --grit-font-family-header: "Montserrat", sans-serif;
  --line-height-body: 1.5em;
  --line-height-header: 1.2em;
  --line-height-button: 1em;
  --letter-spacing-body: 0.04em;
  --letter-spacing-header: 0.04em;
  --grit-font-size-0: 13px;
  --grit-font-size-1: 16px;
  --grit-font-size-2: 21.33px;
  --grit-font-size-3: 28.43px;
  --grit-font-size-4: 37.9px;
  --grit-font-size-5: 50.52px;
  --grit-font-size-6: 67.34px;
  --grit-font-size-7: 89.76px;
  --grit-font-weight-light: 300;
  --grit-font-weight-regular: 400;
  --grit-font-weight-medium: 500;
  --grit-font-weight-semibold: 600;
  --grit-font-weight-bold: 700;
  --grit-common-line-height: 1.2em;
  --grit-common-letter-spacing: 0.04em;
}
:root .font-display-l {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-4);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-display-l {
    font-size: var(--grit-font-size-5);
  }
}
@media (min-width: 1024px) {
  :root .font-display-l {
    font-size: var(--grit-font-size-6);
  }
}
@media (min-width: 1280px) {
  :root .font-display-l {
    font-size: var(--grit-font-size-7);
  }
}
:root .font-display-m {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-3);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-display-m {
    font-size: var(--grit-font-size-4);
  }
}
@media (min-width: 1024px) {
  :root .font-display-m {
    font-size: var(--grit-font-size-5);
  }
}
@media (min-width: 1280px) {
  :root .font-display-m {
    font-size: var(--grit-font-size-6);
  }
}
:root .font-display-s {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-2);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-display-s {
    font-size: var(--grit-font-size-3);
  }
}
@media (min-width: 1024px) {
  :root .font-display-s {
    font-size: var(--grit-font-size-4);
  }
}
@media (min-width: 1280px) {
  :root .font-display-s {
    font-size: var(--grit-font-size-5);
  }
}
:root .font-headline {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-2);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-headline {
    font-size: var(--grit-font-size-3);
  }
}
@media (min-width: 1024px) {
  :root .font-headline {
    font-size: var(--grit-font-size-3);
  }
}
@media (min-width: 1280px) {
  :root .font-headline {
    font-size: var(--grit-font-size-4);
  }
}
:root .font-title-l {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-title-l {
    font-size: var(--grit-font-size-2);
  }
}
@media (min-width: 1024px) {
  :root .font-title-l {
    font-size: var(--grit-font-size-2);
  }
}
@media (min-width: 1280px) {
  :root .font-title-l {
    font-size: var(--grit-font-size-3);
  }
}
:root .font-title-m {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-title-m {
    font-size: var(--grit-font-size-1);
  }
}
@media (min-width: 1024px) {
  :root .font-title-m {
    font-size: var(--grit-font-size-1);
  }
}
@media (min-width: 1280px) {
  :root .font-title-m {
    font-size: var(--grit-font-size-1);
  }
}
:root .font-title-s {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-0);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-title-s {
    font-size: var(--grit-font-size-0);
  }
}
@media (min-width: 1024px) {
  :root .font-title-s {
    font-size: var(--grit-font-size-0);
  }
}
@media (min-width: 1280px) {
  :root .font-title-s {
    font-size: var(--grit-font-size-0);
  }
}
:root .font-subheading {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-header);
  letter-spacing: var(--letter-spacing-header);
}
@media (min-width: 600px) {
  :root .font-subheading {
    font-size: var(--grit-font-size-1);
  }
}
@media (min-width: 1024px) {
  :root .font-subheading {
    font-size: var(--grit-font-size-1);
  }
}
@media (min-width: 1280px) {
  :root .font-subheading {
    font-size: var(--grit-font-size-2);
    line-height: var(--line-height-body);
  }
}
:root .font-body-l {
  font-family: var(--grit-font-family-body);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--grit-common-letter-spacing);
}
@media (min-width: 1280px) {
  :root .font-body-l {
    font-size: var(--grit-font-size-2);
  }
}
:root .font-body-s {
  font-family: var(--grit-font-family-body);
  font-size: var(--grit-font-size-0);
  font-weight: var(--grit-font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--grit-common-letter-spacing);
}
@media (min-width: 1280px) {
  :root .font-body-s {
    font-size: var(--grit-font-size-1);
  }
}
:root .font-button {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-bold);
  line-height: var(--line-height-button);
  letter-spacing: var(--grit-common-letter-spacing);
}
:root .font-caption {
  font-family: var(--grit-font-family-body);
  font-size: var(--grit-font-size-0);
  font-weight: var(--grit-font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--grit-common-letter-spacing);
}
:root .font-field-label-l {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-medium);
  line-height: var(--line-height-body);
  letter-spacing: var(--grit-common-letter-spacing);
}
@media (min-width: 600px) {
  :root .font-field-label-l {
    font-weight: var(--grit-font-weight-semibold);
  }
}
:root .font-field-label-s {
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-0);
  font-weight: var(--grit-font-weight-medium);
  line-height: var(--line-height-body);
  letter-spacing: var(--grit-common-letter-spacing);
}
@media (min-width: 600px) {
  :root .font-field-label-s {
    font-weight: var(--grit-font-weight-semibold);
  }
}
:root .font-link-l {
  text-decoration: underline;
  font-family: var(--grit-font-family-header);
  font-size: var(--grit-font-size-1);
  font-weight: var(--grit-font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--grit-common-letter-spacing);
}
@media (min-width: 1024px) {
  :root .font-link-l {
    font-family: var(--grit-font-family-body);
    font-size: var(--grit-font-size-2);
  }
}
:root .font-link-s {
  text-decoration: underline;
  font-family: var(--grit-font-family-body);
  font-size: var(--grit-font-size-0);
  font-weight: var(--grit-font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--grit-common-letter-spacing);
}
@media (min-width: 1024px) {
  :root .font-link-s {
    font-size: var(--grit-font-size1);
  }
}

/**
 * Since stencilJs can't use global css files besides for css variables
 * when we need to handle responsive behavior, we have to manually
 * import this scss in the corresponding component.
 *
 * To use any of the mixins, it's as simple as adding a @include
 * with the right tag.
 */
:root {
  --grit-field-border-radius: 4px;
  --grit-field-control-border-radius: 4px;
  --grit-field-control-background: var(--neutral200);
  --grit-field-control-border: 1px solid var(--neutral800);
  --grit-field-control-focus-border: 1px solid var(--blue500);
  --grit-field-control-error-border: 1px solid var(--red500);
  --grit-field-control-disabled-color: var(--neutral600);
  --grit-field-control-error-color: var(--red500);
  --grit-field-control-color: var(--neutral1000);
  --grit-field-control-letter-spacing: var(--letter-spacing-body);
  --grit-field-control-font-size: var(--grit-font-size-1);
  --grit-field-control-font-weight: 500;
  --grit-field-control-height: 48px;
  --grit-field-control-hover-background: var(--blue200);
  --grit-field-control-hover-border: 1px solid var(--neutral900);
  --grit-field-control-input-outline: none;
  --grit-field-control-input-padding: 16px;
  --grit-field-control-label-active-scale: 0.85;
  --grit-field-control-label-top: 15px;
  --grit-field-control-label-left: 0px;
  --grit-field-control-label-active-translate: -14px;
  --grit-field-control-label-font-weight: 600;
  --grit-field-control-label-color: var(--neutral800);
  --grit-field-control-label-font-family: var(--grit-font-family-header);
  --grit-field-control-label-font-size: var(--grit-font-size-1);
  --grit-field-control-margin: 0px 16px;
  --grit-field-control-selected-color: var(--blue500);
  --grit-field-font-family: var(--grit-font-family-body);
  --grit-field-transition: all var(--transition-duration-150)
    var(--transition-curve-standard);
  --grit-field-control-label-focus-color: var(--blue500);
  --grit-field-control-label-hover-color: var(--neutral900);
  --grit-field-control-label-error-color: var(--red500);
  --grit-field-control-prefix-padding: 8px 16px 8px 16px;
  --grit-field-message-font-family: var(--grit-font-family-body);
  --grit-field-message-font-size: var(--grit-font-size-0);
  --grit-field-message-color: var(--neutral800);
  --grit-field-message-active-hint-color: var(--blue500);
  --grit-field-message-active-error-color: var(--red500);
  --grit-field-message-letter-spacing: var(--letter-spacing-body);
  --grit-field-message-line-height: 24px;
  --grit-field-message-max-height-transition: max-height 100ms;
  --grit-field-message-show-more-color: var(--blue500);
  --grit-field-message-show-more-width: 69px;
  --grit-field-message-show-more-left-margin: 4px;
  --grit-field-message-show-more-top-margin: 4px;
  --grit-field-textarea-min-height: 80px;
  --grit-field-textarea-max-height: unset;
  --button-height-sm: 32px;
  --button-height-md: 48px;
  --button-height-lg: 64px;
  --button-padding-sm: 0px 16px;
  --button-disabled-opacity: 40%;
  --button-disabled-opacity-subtle: 60%;
  --grit-button-primary: var(--blue500);
  --grit-button-primary-hover: var(--blue600);
  --grit-button-primary-press: var(--blue700);
  --grit-button-primary-contrast: var(--neutral100);
  --grit-button-primary-contrast-hover: var(--neutral100);
  --grit-button-primary-contrast-press: var(--neutral100);
  --grit-button-primary-light: var(--blue500);
  --grit-button-primary-light-hover: var(--blue600);
  --grit-button-primary-light-press: var(--blue700);
  --grit-button-primary-disable-color: var(--blue300);
  --grit-button-primary-disable-border: var(--neutral500);
  --grit-button-primary-disable-background: var(--neutral100);
  --grit-button-subtle: var(--neutral300);
  --grit-button-subtle-hover: var(--neutral400);
  --grit-button-subtle-press: var(--neutral500);
  --grit-button-subtle-contrast: var(--neutral900);
  --grit-button-subtle-border: var(--neutral400);
  --grit-button-subtle-contrast-hover: var(--neutral900);
  --grit-button-subtle-contrast-press: var(--neutral900);
  --grit-button-subtle-disable-color: var(--neutral600);
  --grit-button-subtle-disable-border: var(--neutral400);
  --grit-button-subtle-disable-background: var(--neutral100);
  --grit-button-subtle-light: var(--neutral700);
  --grit-button-subtle-light-hover: var(--neutral700);
  --grit-button-subtle-light-press: var(--neutral700);
  --grit-button-success: var(--green500);
  --grit-button-success-hover: var(--green600);
  --grit-button-success-press: var(--green700);
  --grit-button-success-contrast: var(--neutral100);
  --grit-button-success-contrast-hover: var(--neutral100);
  --grit-button-success-contrast-press: var(--neutral100);
  --grit-button-success-disable-color: var(--green300);
  --grit-button-success-disable-border: var(--green300);
  --grit-button-success-disable-background: var(--green100);
  --grit-button-success-light: var(--green500);
  --grit-button-success-light-hover: var(--green600);
  --grit-button-success-light-press: var(--green700);
  --grit-button-destroy: var(--red500);
  --grit-button-destroy-hover: var(--red600);
  --grit-button-destroy-press: var(--red700);
  --grit-button-destroy-contrast: var(--neutral100);
  --grit-button-destroy-contrast-hover: var(--neutral100);
  --grit-button-destroy-contrast-press: var(--neutral100);
  --grit-button-destroy-disable-color: var(--red300);
  --grit-button-destroy-disable-border: var(--red300);
  --grit-button-destroy-disable-background: var(--red100);
  --grit-button-destroy-light: var(--red500);
  --grit-button-destroy-light-hover: var(--red600);
  --grit-button-destroy-light-press: var(--red700);
  --grit-button-light-background: var(--neutral00);
  --grit-button-light-background-hover: var(--neutral300);
  --grit-button-light-background-press: var(--neutral400);
  --grit-switch-width: 64px;
  --grit-switch-height: 32px;
  --grit-switch-thumb-height: 24px;
  --grit-switch-thumb-width: 24px;
  --grit-switch-thumb-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --grit-switch-thumb-color: var(--neutral100);
  --grit-switch-disabled-thumb-box-shadow: 0 1px 2px 0 rgba(12, 10, 10, 0.1);
  --grit-switch-background-off: var(--neutral500);
  --grit-switch-background-on: var(--green400);
  --grit-switch-disabled-background-off: var(--neutral400);
  --grit-switch-disabled-background-on: var(--green200);
  --grit-switch-thumb-background: var(--neutral100);
  --grit-switch-disabled-thumb-background: var(--neutral100);
  --grit-switch-border-radius: 1000px;
  --grit-switch-thumb-border-radius: 1000px;
  --grit-switch-track-padding: 4px;
  --grit-switch-label-color: var(--neutral900);
  --grit-switch-label-font-family: var(--grit-font-family-header);
  --grit-switch-label-font-weight: 500;
  --grit-checkbox-transition-curve-check: var(--transition-curve-standard);
  --grit-checkbox-transition-curve-duration: var(--transition-duration-100);
  --grit-checkbox-check-transition-curve-duration: var(
    --transition-duration-150
  );
  --grit-checkbox-control-width: 16px;
  --grit-checkbox-control-height: 16px;
  --grit-checkbox-control-border-radius: 2px;
  --grit-checkbox-control-checked-color: var(--neutral100);
  --grit-checkbox-control-hover-background: var(--blue200);
  --grit-checkbox-check-width: 16px;
  --grit-checkbox-check-height: 16px;
  --grit-checkbox-check-color: var(--neutral100);
  --grit-checkbox-border-color: var(--blue500);
  --grit-checkbox-disabled-border-color: var(--neutral400);
  --grit-checkbox-disabled-background-color: var(--neutral500);
  --grit-checkbox-error-border-color: var(--red500);
  --grit-checkbox-error-background-color: var(--red500);
  --grit-checkbox-background-color: var(--blue500);
  --grit-checkbox-border-thickness: 1px;
  --grit-checkbox-label-color: var(--neutral900);
  --grit-checkbox-label-font-family: var(--grit-font-family-body);
  --grit-list-select-padding: 16px 24px;
  --grit-list-select-border-radius: 8px;
  --grit-list-select-margin-bottom: 16px;
  --grit-list-select-box-shadow: 0px 0px 1px 0px rgba(33, 43, 54, 0.16),
    0px 1px 1px 0px rgba(33, 43, 54, 0.16);
  --grit-list-select-background-color: var(--neutral100);
  --grit-list-select-background-color-selected: var(--blue500);
  --grit-list-select-color: var(--neutral00);
  --grit-list-select-transition-duration: var(--transition-duration-150);
  --grit-list-select-transition-selected: var(--transition-curve-standard);
  --grit-list-select-item-label-font-family: var(--grit-font-family-header);
  --grit-list-select-item-subtitle-font-family: var(--grit-font-family-body);
  --grit-list-select-item-label-font-size: var(--grit-font-size-1);
  --grit-list-select-item-label-font-weight: bold;
  --grit-list-select-item-label-line-height: 24px;
  --grit-list-select-item-label-letter-spacing: var(--letter-spacing-body);
  --grit-list-select-item-label-color: var(--neutral900);
  --grit-list-select-item-label-color-selected: var(--neutral100);
  --grit-list-select-item-icon-background: var(--neutral100);
  --grit-list-select-item-icon-color: var(--blue500);
  --grit-list-select-item-icon-width: 20px;
  --grit-list-select-item-icon-height: 20px;
  --grit-list-select-item-icon-border-radius: 1000px;
  --grit-list-select-item-icon-fill-background: var(--neutral500);
  --grit-list-select-item-icon-font-size: 18px;
  --grit-slider-main-wrapper-height: 78px;
  --grit-slider-main-wrapper-padding-bottom: 10px;
  --grit-slider-wrapper-width: calc(100% - 78px);
  --grit-slider-bar-filled-z-index: 3;
  --grit-slider-bar-filled-border-radius: 8px;
  --grit-slider-bar-filled-height: 8px;
  --grit-slider-bar-filled-background-color: var(--blue400);
  --grit-slider-bar-filled-top: calc((20px - 8px) / 2);
  --grit-slider-bar-nonfilled-top: calc((20px - 5px) / 2);
  --grit-slider-bar-nonfilled-border-radius: 5px;
  --grit-slider-bar-nonfilled-height: 5px;
  --grit-slider-bar-nonfilled-background-color: var(--neutral400);
  --grit-slider-bar-width: 100%;
  --grit-slider-thumb-width: 20px;
  --grit-slider-thumb-height: 20px;
  --grit-slider-thumb-background-color: var(--neutral00);
  --grit-slider-thumb-z-index: 4;
  --grit-slider-thumb-border-radius: 100%;
  --grit-slider-thumb-border: 0.5px solid var(--blue400);
  --grit-slider-thumb-label-container-top: -60px;
  --grit-slider-thumb-label-container-background: var(--blue400);
  --grit-slider-thumb-label-container-padding: 8px;
  --grit-slider-thumb-label-container-width: 108px;
  --grit-slider-thumb-label-container-border-radius: 8px;
  --grit-slider-thumb-label-container-color: var(--neutral100);
  --grit-slider-thumb-label-container-after-border-top: 12px solid
    var(--blue400);
  --grit-slider-thumb-label-container-after-border-left: 10px solid transparent;
  --grit-slider-thumb-label-container-after-border-right: 10px solid transparent;
  --grit-slider-thumb-label-container-after-bottom: -6px;
  --grit-slider-thumb-label-container-after-left: 50%;
  --grit-slider-thumb-label-container-after-transform: rotate(180deg);
  --grit-slider-thumb-label-container-after-top: -30px;
  --grit-slider-thumb-label-container-after-top-inverted: 35px;
  --grit-slider-thumb-label-content-font-family: var(--grit-font-family-header);
  --grit-slider-thumb-label-content-font-size: var(--grit-font-size-0);
  --grit-slider-thumb-label-content-font-weight: 600;
  --grit-slider-thumb-label-content-line-height: 1.5em;
  --grit-slider-thumb-label-content-letter-spacing: 0.04em;
  --grit-slider-thumb-label-content-color: var(--neutral00);
  --grit-overlay-text-color: var(--neutral1000);
  --grit-overlay-max-height: 400px;
  --grit-overlay-modal-sm-max-height: 50%;
  --grit-overlay-bottom-sheet-sm-max-height: 85%;
  --grit-overlay-width: 400px;
  --grit-overlay-max-width: 600px;
  --grit-overlay-padding: 24px;
  --grit-overlay-side-sheet-padding: 32px;
  --grit-overlay-sheet-title-padding-bottom: 16px;
  --grit-overlay-modal-sm-margin: 16px;
  --grit-overlay-border-radius: 4px;
  --grit-overlay-close-button-padding: 4px;
  --grit-overlay-background: var(--neutral100);
  --grit-overlay-animation-duration: var(--transition-duration-200);
  --grit-overlay-backdrop-height: 100%;
  --grit-overlay-backdrop-width: 100vh;
  --grit-overlay-backdrop-transition: 100ms cubic-bezier(0.4, 0, 0.6, 1);
  --grit-overlay-modal-backdrop-background: rgba(33, 43, 54, 0.88);
  --grit-overlay-sheet-backdrop-background: rgba(33, 43, 54, 0.4);
  --grit-radio-transition-curve-check: var(--transition-curve-sharp);
  --grit-radio-transition-curve-duration: var(--transition-duration-150);
  --grit-radio-control-width: 24px;
  --grit-radio-control-height: 24px;
  --grit-radio-control-width-input: 20px;
  --grit-radio-control-height-input: 20px;
  --grit-radio-control-checked-width: 10px;
  --grit-radio-control-checked-height: 10px;
  --grit-radio-control-color-selected: var(--blue500);
  --grit-radio-control-color-unselected: var(--neutral600);
  --grit-radio-control-hover-background: var(--blue200);
  --grit-radio-control-circle-background-disabled: var(--neutral500);
  --grit-radio-control-circle-border-disabled: var(--neutral500);
  --grit-radio-control-circle-border-error: var(--red500);
  --grit-radio-label-font-family: var(--grit-font-family-body);
  --grit-radio-label-font-size: var(--grit-font-size-1);
  --grit-radio-label-color: var(--neutral900);
  --grit-radio-label-padding: 8px;
  --grit-radio-label-line-height: var(--line-height-body);
  --grit-radio-label-letter-spacing: var(--letter-spacing-header);
  --grit-radio-label-disabled: var(--neutral500);
  --grit-icon-color: var(--neutral900);
  --grit-icon-width: 24px;
  --grit-icon-height: 24px;
  --grit-icon-font-size: 24px;
  --grit-icon-font-family: "Material Icons";
  --grit-badge-height: 20px;
  --grit-badge-padding: 4px 8px 4px 4px;
  --grit-badge-label-font-family: var(--grit-font-family-body);
  --grit-badge-label-font-size: 12px;
  --grit-badge-label-line-height: 1em;
  --grit-badge-icon-width: 12px;
  --grit-badge-icon-height: 12px;
  --grit-badge-icon-font-size: 12px;
  --grit-badge-icon-margin-right: 4px;
  --grit-badge-border-radius: 1000px;
  --grit-badge-default-background: var(--neutral300);
  --grit-badge-default-icon-color: var(--neutral700);
  --grit-badge-default-label-color: var(--neutral900);
  --grit-badge-info-background: var(--purple100);
  --grit-badge-info-icon-color: var(--purple500);
  --grit-badge-info-label-color: var(--neutral900);
  --grit-badge-primary-background: var(--blue100);
  --grit-badge-primary-icon-color: var(--blue500);
  --grit-badge-primary-label-color: var(--neutral900);
  --grit-badge-success-background: var(--green100);
  --grit-badge-success-icon-color: var(--green500);
  --grit-badge-success-label-color: var(--neutral900);
  --grit-badge-attention-strong-background: var(--orange100);
  --grit-badge-attention-strong-icon-color: var(--orange500);
  --grit-badge-attention-strong-label-color: var(--neutral900);
  --grit-badge-attention-background: var(--yellow100);
  --grit-badge-attention-icon-color: var(--yellow500);
  --grit-badge-attention-label-color: var(--neutral900);
  --grit-badge-warning-background: var(--red100);
  --grit-badge-warning-icon-color: var(--red500);
  --grit-badge-warning-label-color: var(--neutral900);
  --grit-message-group-font-size: var(--grit-font-size-0);
  --grit-message-group-font-weight: 500;
  --grit-message-group-font-family: var(--grit-font-family-body);
  --grit-message-group-line-height: 1.5em;
  --grit-message-group-hint-color: var(--blue500);
  --grit-message-group-error-color: var(--red500);
  --grit-message-group-neutral-color: var(--neutral800);
  --grit-message-group-message-transition-duration: 150ms;
  --grit-message-group-min-height: 21px;
  --grit-message-group-margin-top: 8px;
  --grit-spinner-width: 100%;
  --grit-card-border-radius: 4px;
  --grit-card-text-color: var(--neutral1000);
  --grit-expanded-card-top: 16px;
  --grit-expanded-card-left: 16px;
  --grit-notification-initial-opacity: 0.8;
  --grit-notification-title-font-size: 13.6px;
  --grit-notification-title-font-family: "Montserrat", sans-serif;
  --grit-notification-body-font-size: 13.6px;
  --grit-notification-body-font-family: "Lato", sans-serif;
  --grit-notification-flag-max-width: 400px;
  --grit-notification-flag-bottom: 8px;
  --grit-notification-flag-border-radius: 4px;
  --grit-notification-flag-border: 1px;
  --grit-notification-letter-spacing: var(--letter-spacing-body);
  --grit-notification-max-height: 0px;
  --grit-notification-transition: 0.2ms;
  --grit-notification-display-color: var(--neutral1000);
  --grit-notification-display-max-height: 500px;
  --grit-notification-display-background-color: var(--neutral100);
  --grit-notification-proximity-warning-background: var(--red100);
  --grit-notification-proximity-warning-border-color: var(--red200);
  --grit-notification-proximity-attention-background: var(--yellow100);
  --grit-notification-proximity-attention-border-color: var(--yellow200);
  --grit-notification-proximity-success-background: var(--green100);
  --grit-notification-proximity-success-border-color: var(--green200);
  --grit-notification-proximity-info-background: var(--neutral200);
  --grit-notification-proximity-info-border-color: var(--neutral300);
  --grit-notification-warning-bold-background: var(--red500);
  --grit-notification-warning-bold-color: var(--neutral100);
  --grit-notification-attention-bold-background: var(--yellow500);
  --grit-notification-attention-bold-color: var(--yellow800);
  --grit-notification-attention-bold-border-color: transparent;
  --grit-notification-success-bold-background: var(--green600);
  --grit-notification-success-bold-color: var(--neutral100);
  --grit-notification-info-bold-background: var(--neutral1000);
  --grit-notification-info-bold-color: var(--neutral100);
  --grit-notification-padding: 16px;
  --grit-notification-center-col-max-height: 500px;
  --grit-notification-center-col-padding: 16px 0px;
  --grit-notification-first-child-line-height: 1.2em;
  --grit-notification-first-child-padding-top: 8px;
  --grit-notification-first-child-margin-bottom: 8px;
  --grit-notification-second-child-line-height: 1.5em;
  --grit-notification-second-child-margin-top: 8px;
  --grit-notification-second-child-margin-bottom: 2px;
  --grit-notification-third-child-line-height: 1.2em;
  --grit-notification-action-icon-color: var(--yellow800);
  --grit-notification-action-icon-modifier-bold-color: var(--yellow800);
  --grit-notification-action-icon-modifier-bold-default-color: var(--yellow800);
  --grit-notification-action-icon-default-color: var(--yellow800);
  --grit-notification-action-icon-modifier-bold-attention-color: var(
    --yellow700
  );
  --grit-notification-action-icon-modifier-bold-info-color: var(--neutral100);
  --grit-notification-action-icon-modifier-bold-warning-color: var(
    --neutral100
  );
  --grit-notification-action-icon-modifier-bold-success-color: var(
    --neutral100
  );
  --grit-skeleton-gradient-start: #eeeeee;
  --grit-skeleton-gradient-end: #d7d6d6;
  --grit-top-nav-bar-background: var(--neutral100);
  --grit-top-nav-bar-padding-top: 16px;
  --grit-top-nav-bar-padding-right: 16px;
  --grit-top-nav-bar-padding-bottom: 16px;
  --grit-top-nav-bar-padding-left: 16px;
  --grit-top-nav-bar-height: 64px;
  --grit-top-nav-bar-content-justify: space-between;
  --grit-top-nav-bar-content-align: center;
  --grit-top-nav-bar-icon-color-transition: all var(--transition-duration-100)
    var(--transition-curve-standard);
  --grit-top-nav-bar-icon-color: var(--neutral600);
  --grit-top-nav-bar-icon-hover-color: var(--neutral600);
  --grit-top-nav-bar-icon-cursor: pointer;
  --grit-top-nav-bar-top: 0;
  --grit-top-nav-bar-right: 0;
  --grit-top-nav-bar-bottom: auto;
  --grit-top-nav-bar-left: 0;
  --grit-top-nav-bar-width: 100%;
  --grit-top-nav-bar-z-index: 50;
  --grit-chip-height: 32px;
  --grit-chip-border-radius: 4px;
  --grit-chip-font-size: var(--grit-font-size-0);
  --grit-chip-padding: 8px;
  --grit-chip-background: var(--blue100);
  --grit-chip-border-color: var(--blue300);
  --grit-chip-color: var(--neutral1000);
  --grit-message-list-label-font-family: var(--grit-font-family-body);
  --grit-message-list-label-color: var(--neutral900);
  --grit-checkbox-group-line-height: 1.62;
  --grit-accordion-label-container-margin: 0;
  --grit-accordion-label-container-button-width: 100%;
  --grit-accordion-label-container-button-border: none;
  --grit-accordion-label-container-button-background-color: transparent;
  --grit-accordion-label-container-button-focus-background-color: var(
    --neutral300
  );
  --grit-accordion-label-container-button-hover-background-color: var(
    --neutral300
  );
  --grit-accordion-label-container-padding: 14px 16px 14px 16px;
  --grit-accordion-label-container-font-weight: bold;
  --grit-accordion-label-container-cursor: pointer;
  --grit-accordion-label-color: var(--neutral900);
  --grit-accordion-label-font-size: var(--grit-font-size-1);
  --grit-accordion-label-font-family: var(--grit-font-family-body);
  --grit-accordion-label-letter-spacing: 0.28px;
  --grit-accordion-label-line-height: 20px;
  --grit-accordion-label-caret-container-border-radius: 0px;
  --grit-accordion-label-caret-container-height: 24px;
  --grit-accordion-label-caret-container-width: 24px;
  --grit-accordion-body-max-height: 0px;
  --grit-accordion-body-opacity: 0;
  --grit-accordion-body-transition: var(--transition-duration-150);
  --grit-accordion-body-open-opacity: 1;
  --grit-accordion-body-open-max-height: 1000px;
  --grit-accordion-body-animation-duration: 200ms;
  --grit-accordion-action-icon-color: var(--darkNeutral900);
  --grit-accordion-action-icon-transform: rotate(0deg);
  --grit-accordion-action-icon-transform-open: rotate(180deg);
  --grit-accordion-slotted-padding: 0px 16px 14px 16px;
  --grit-accordion-caret-border-width: 5px;
  --grit-accordion-caret-border-style: solid;
  --grit-accordion-caret-border-right: 5px solid transparent;
  --grit-accordion-caret-border-color: black transparent transparent;
  --grit-accordion-caret-width: 0;
  --grit-accordion-caret-height: 0;
  --grit-accordion-caret-transition: var(--transition-duration-150);
  --grit-skiplink-slotted-box-shadow: 0px 0px 1px rgba(33, 43, 54, 0.15);
  --grit-skiplink-slotted-font-size: 13px;
  --grit-skiplink-slotted-font-family: var(--grit-font-family-body);
  --grit-skiplink-slotted-color: #454f5b;
  --grit-skiplink-slotted-background: #ffffff;
  --grit-skiplink-slotted-border-color: #006aff;
  --grit-option-select-message-wrapper-color: var(--red500);
  --grit-option-select-message-wrapper-font-family: var(
    --grit-font-family-body
  );
  --grit-option-select-message-wrapper-font-size: var(--grit-font-size-0);
  --grit-option-select-message-wrapper-letter-spacing: var(
    --letter-spacing-body
  );
  --grit-option-select-message-wrapper-line-height: 24px;
  --grit-option-select-message-transition: all 300;
  --grit-option-select-message-error-transition: max-height 100ms;
  --grit-option-select-message-show-more-color: var(--blue500);
  --grit-option-select-message-show-more-min-width: 69px;
  --grit-option-select-message-show-more-margin-left: 4px;
  --grit-option-select-text: var(--neutral900);
  --grit-option-select-text-disabled: var(--neutral500);
  --grit-option-select-border: var(--neutral600);
  --grit-option-select-border-hover: var(--blue500);
  --grit-option-select-border-active: var(--blue500);
  --grit-option-select-border-disabled: var(--neutral500);
  --grit-option-select-background: var(--neutral100);
  --grit-option-select-background-hover: var(--blue100);
  --grit-option-select-background-active: var(--blue500);
  --grit-option-select-background-disabled: var(--neutral500);
  --grit-qr-code-element-padding: 8px 79px 48px 79px;
  --grit-qr-code-font-family: var(--grit-font-family-body);
  --grit-qr-code-title-font-size: var(--grit-font-size-1);
  --grit-qr-code-title-line-height: var(--line-height-body);
  --grit-qr-code-color: var(--neutral900);
  --grit-qr-code-title-letter-spacing: var(--grit-common-letter-spacing);
  --grit-qr-code-title-margin-left: 16px;
  --grit-qr-code-title-margin-top: 10px;
  --grit-qr-code-tutorial-title-front-size: var(--grit-font-size-0);
  --grit-qr-code-tutorial-title-height: var(--grit-common-line-height);
  --grit-qr-code-tutorial-title-letter-spacing: var(
    --grit-common-letter-spacing
  );
  --grit-qr-code-tutorial-steps-padding-top: 16px;
  --grit-qr-code-tutorial-steps-padding-bottom: 36px;
  --grit-qr-code-tutorial-step-img-height: 50px;
  --grit-qr-code-tutorial-step-img-width: 26px;
  --grit-qr-code-tutorial-step-p-margin-top: 8px;
  --grit-qr-code-tutorial-step-p-margin-bottom: 0px;
  --grit-qr-code-tutorial-step-p-font-size: var(--grit-font-size-0);
  --grit-qr-code-tutorial-step-p-line-height: 14px;
  --grit-qr-code-tutorial-step-p-letter-spacing: var(--letter-spacing-body);
  --grit-qr-code-tutorial-step-p-width: 84px;
  --grit-qr-code-tutorial-step-p-height: 44px;
  --grit-message-color: var(--neutral800);
  --grit-message-font-family: var(--grit-font-family-body);
  --grit-message-font-size: var(--grit-font-size-0);
  --grit-message-letter-spacing: var(--letter-spacing-body);
  --grit-message-line-height: 24px;
  --grit-message-transition: var(--transition-duration-150);
  --grit-message-wrapper-transition: max-height 100ms;
  --grit-message-show-more-color: var(--blue500);
  --grit-message-show-more-min-width: 69px;
  --grit-message-show-more-margin-left: 4px;
  --grit-autocomplete-border: 1px solid var(--neutral900);
  --grit-autocomplete-border-radius: var(--grit-field-border-radius);
  --grit-autocomplete-label-color: var(--grit-field-control-label-color);
  --grit-autocomplete-item-margin-left: 64px;
  --grit-autocomplete-item-padding: 16px;
  --grit-autocomplete-background-focus: var(--neutral200);
  --grit-button-icon-disable-icon-color: var(--neutral400);
  --grit-button-icon-primary-hover-color: var(--neutral300);
  --grit-button-icon-primary-active-color: var(--blue100);
  --grit-button-icon-secondary-color: var(--blue500);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.menu > * {
  margin: 5px;
}

.heading {
  display: flex;
  text-align: center;
  justify-content: space-between;
  font-family: var(--grit-font-family-header);
}

.mobile-menu-toggle grit-wc-icon {
  color: white;
}

main {
  padding: 16px;
}

@media (max-width: 750px) {
  .heading grit-wc-switch {
    right: 8px;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .mobile-menu-container {
    display: none;
    overflow-y: auto;
    max-height: 160px;
  }
  .mobile-menu-container grit-wc-button {
    width: 100%;
  }
}