@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  /* Color HSLs
    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
  */
  /* Basic Colors */
  /**
  * @tokens Basic Colors
  * @presenter Color
  */
  --op-color-white: hsl(0deg 100% 100%);
  --op-color-black: hsl(0deg 0% 0%);
  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-h: 216;
  --op-color-primary-s: 58%;
  --op-color-primary-l: 48%;
  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-h: var(--op-color-primary-h);
  --op-color-neutral-s: 4%;
  --op-color-neutral-l: var(--op-color-primary-l);
  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */
  --op-color-alerts-warning-h: 47;
  --op-color-alerts-warning-s: 100%;
  --op-color-alerts-warning-l: 61%;
  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */
  --op-color-alerts-danger-h: 0;
  --op-color-alerts-danger-s: 99%;
  --op-color-alerts-danger-l: 76%;
  /**
  * @tokens Alerts Info Colors
  * @presenter Color
  */
  --op-color-alerts-info-h: 216;
  --op-color-alerts-info-s: 58%;
  --op-color-alerts-info-l: 48%;
  /**
  * @tokens Alerts Notice Colors
  * @presenter Color
  */
  --op-color-alerts-notice-h: 130;
  --op-color-alerts-notice-s: 61%;
  --op-color-alerts-notice-l: 64%;
  /**
  * @tokens Opacities
  * @presenter Opacity
  */
  --op-opacity-none: 0;
  --op-opacity-overlay: 0.2;
  --op-opacity-disabled: 0.4;
  --op-opacity-half: 0.5;
  --op-opacity-full: 1;
  /*
    Breakpoints
    CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
    https://drafts.csswg.org/css-env-1/
    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

    Here is a list of breakpoints used throughout Optics:
  */
  /**
  * @tokens Breakpoints
  * @presenter Spacing
  */
  --op-breakpoint-x-small: 512px; /* vertical phone */
  --op-breakpoint-small: 768px; /* vertical ipad */
  --op-breakpoint-medium: 1024px; /* landscape ipad */
  --op-breakpoint-large: 1280px; /* small laptop */
  --op-breakpoint-x-large: 1440px; /* medium laptop */
  /* Border */
  /**
  * @tokens Border Radius
  * @presenter BorderRadius
  */
  --op-radius-small: 2px;
  --op-radius-medium: 4px;
  --op-radius-large: 8px;
  --op-radius-x-large: 12px;
  --op-radius-2x-large: 16px;
  --op-radius-circle: 50%;
  --op-radius-pill: 9999px;
  /**
  * @tokens Border Width
  * @presenter Spacing
  */
  --op-border-width: 1px;
  --op-border-width-large: 2px;
  --op-border-width-x-large: 4px;
  /**
  * @tokens Border Color
  * @presenter Color
  */
  --op-color-border: var(--op-color-neutral-plus-five);
  /* E.G. box-shadow: var(--op-border-top) var(--op-color-border); */
  /**
  * @tokens Border Shadow
  * @presenter Shadow
  */
  --op-border-none: 0 0 0 0;
  --op-border-all: 0 0 0 var(--op-border-width);
  --op-border-top: 0 calc(var(--op-border-width)*-1) 0 0;
  --op-border-right: var(--op-border-width) 0 0 0;
  --op-border-bottom: 0 var(--op-border-width) 0 0;
  --op-border-left: calc(var(--op-border-width)*-1) 0 0 0;
  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);
  /* Font */
  /**
  * @tokens Font Scale
  * @presenter FontSize
  */
  --op-font-scale-unit: 1rem; /* 10px; */
  --op-font-2x-small: calc(var(--op-font-scale-unit)*1); /* 10px */
  --op-font-x-small: calc(var(--op-font-scale-unit)*1.2); /* 12px */
  --op-font-small: calc(var(--op-font-scale-unit)*1.4); /* 14px */
  --op-font-medium: calc(var(--op-font-scale-unit)*1.6); /* 16px */
  --op-font-large: calc(var(--op-font-scale-unit)*1.8); /* 18px */
  --op-font-x-large: calc(var(--op-font-scale-unit)*2); /* 20px */
  --op-font-2x-large: calc(var(--op-font-scale-unit)*2.4); /* 24px */
  --op-font-3x-large: calc(var(--op-font-scale-unit)*2.8); /* 28px */
  --op-font-4x-large: calc(var(--op-font-scale-unit)*3.2); /* 32px */
  --op-font-5x-large: calc(var(--op-font-scale-unit)*3.6); /* 36px */
  --op-font-6x-large: calc(var(--op-font-scale-unit)*4.8); /* 48px */
  /**
  * @tokens Font Weight
  * @presenter FontWeight
  */
  --op-font-weight-thin: 100;
  --op-font-weight-extra-light: 200;
  --op-font-weight-light: 300;
  --op-font-weight-normal: 400;
  --op-font-weight-medium: 500;
  --op-font-weight-semi-bold: 600;
  --op-font-weight-bold: 700;
  --op-font-weight-extra-bold: 800;
  --op-font-weight-black: 900;
  /**
  * @tokens Font Family
  * @presenter FontFamily
  */
  --op-font-family: "Noto Sans", sans-serif;
  --op-font-family-alt: "Noto Serif", serif;
  /* Text */
  /**
  * @tokens Line Height
  * @presenter LineHeight
  */
  --op-line-height-none: 0;
  --op-line-height-densest: 1;
  --op-line-height-denser: 1.15;
  --op-line-height-dense: 1.3;
  --op-line-height-base: 1.5;
  --op-line-height-loose: 1.6;
  --op-line-height-looser: 1.7;
  --op-line-height-loosest: 1.8;
  /**
  * @tokens Letter Spacing
  * @presenter LetterSpacing
  */
  --op-letter-spacing-navigation: 0.01rem;
  --op-letter-spacing-label: 0.04rem;
  /* Transitions and Animations */
  /**
  * @tokens Transition
  */
  --op-transition-accordion: rotate 120ms ease-in;
  --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
  --op-transition-input: all 120ms ease-in;
  --op-transition-sidebar: all 200ms ease-in-out;
  --op-transition-modal: all 300ms ease-in;
  --op-transition-panel: right 400ms ease-in;
  --op-transition-tooltip: all 300ms ease-in 300ms;
  /**
  * @tokens Animation
  * @presenter Animation
  */
  --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;
  /* Encoded Images */
  /**
  * @tokens Encoded Images
  */
  --op-encoded-images-dropdown-arrow-width: calc(var(--op-space-scale-unit)*1.2); /* 12px No way to string interpolate */
  --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==");
  /* Spacing */
  /**
  * @tokens Size Scale
  * @presenter Spacing
  */
  --op-size-unit: 0.4rem; /* 4px */
  /**
  * @tokens Space Scale
  * @presenter Spacing
  */
  --op-space-scale-unit: 1rem; /* 10px; */
  --op-space-3x-small: calc(var(--op-space-scale-unit)*0.2); /* 2px */
  --op-space-2x-small: calc(var(--op-space-scale-unit)*0.4); /* 4px */
  --op-space-x-small: calc(var(--op-space-scale-unit)*0.8); /* 8px */
  --op-space-small: calc(var(--op-space-scale-unit)*1.2); /* 12px */
  --op-space-medium: calc(var(--op-space-scale-unit)*1.6); /* 16px */
  --op-space-large: calc(var(--op-space-scale-unit)*2); /* 20px */
  --op-space-x-large: calc(var(--op-space-scale-unit)*2.4); /* 24px */
  --op-space-2x-large: calc(var(--op-space-scale-unit)*2.8); /* 28px */
  --op-space-3x-large: calc(var(--op-space-scale-unit)*4); /* 40px */
  --op-space-4x-large: calc(var(--op-space-scale-unit)*8); /* 80px */
  /* Shadows */
  /**
  * @tokens Shadows
  * @presenter Shadow
  */
  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
  /* Z Index */
  /**
  * @tokens Z-Index
  */
  --op-z-index-header: 500;
  --op-z-index-footer: 500;
  --op-z-index-sidebar: 700;
  --op-z-index-dialog: 800;
  --op-z-index-dialog-backdrop: 801;
  --op-z-index-dialog-content: 802;
  --op-z-index-dropdown: 900;
  --op-z-index-alert-group: 950;
  --op-z-index-tooltip: 1000;
  /* Inputs */
  /*
    This should follow multiples of 4
    https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
  */
  /**
  * @tokens Input Heights
  * @presenter Spacing
  */
  --op-input-height-small: 2.8rem; /* 28px */
  --op-input-height-medium: 3.6rem; /* 36px */
  --op-input-height-large: 4rem; /* 40px */
  --op-input-height-x-large: 8.4rem; /* 84px */
  /**
  * @tokens Input Focus
  * @presenter Shadow
  */
  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
  --op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
    var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
}
/* Animations */
@keyframes rm-slide-in-out-flash {
  /*
    If an duration of 5s is set:
    Start off the Screen
  */
  0% {
    right: -100%;
  }
  /* Animate onto the screen for 0.5s */
  10% {
    right: 2rem;
    right: var(--op-space-large);
  }
  /* Stay on the screen for 3s */
  70% {
    right: 2rem;
    right: var(--op-space-large);
  }
  /* Animate off the screen for 1.5s */
  100% {
    right: -100%;
  }
}
:root {
  /* Enable light and dark mode switching */
  color-scheme: light dark;
  /*
    Semantic Scales: plus adds luminosity, minus removes luminosity
    This borrows from the photography concept of Aperture f-stops.
    https://www.adobe.com/creativecloud/photography/discover/f-stop.html
  */
  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));
  /* Main Scale */
  --op-color-primary-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%)
  );
  --op-color-primary-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%)
  );
  --op-color-primary-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%)
  );
  --op-color-primary-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%)
  );
  --op-color-primary-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%)
  );
  --op-color-primary-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
  );
  --op-color-primary-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
  );
  --op-color-primary-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%)
  );
  --op-color-primary-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%)
  );
  --op-color-primary-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%)
  );
  --op-color-primary-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%)
  );
  --op-color-primary-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  /* On Scale */
  --op-color-primary-on-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-plus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%)
  );
  --op-color-primary-on-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-on-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%)
  );
  --op-color-primary-on-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-base-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%)
  );
  --op-color-primary-on-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%)
  );
  --op-color-primary-on-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-on-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-on-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%)
  );
  --op-color-primary-on-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%)
  );
  --op-color-primary-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-on-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%)
  );
  --op-color-primary-on-minus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));
  /* Main Scale */
  --op-color-neutral-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%)
  );
  --op-color-neutral-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%)
  );
  --op-color-neutral-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%)
  );
  --op-color-neutral-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%)
  );
  --op-color-neutral-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%)
  );
  --op-color-neutral-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%)
  );
  --op-color-neutral-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%)
  );
  --op-color-neutral-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%)
  );
  --op-color-neutral-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%)
  );
  --op-color-neutral-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%)
  );
  --op-color-neutral-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  /* On Scale */
  --op-color-neutral-on-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%)
  );
  --op-color-neutral-on-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%)
  );
  --op-color-neutral-on-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%)
  );
  --op-color-neutral-on-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-base-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%)
  );
  --op-color-neutral-on-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%)
  );
  --op-color-neutral-on-minus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%)
  );
  --op-color-neutral-on-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%)
  );
  --op-color-neutral-on-minus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-on-minus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-on-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-on-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-on-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%)
  );
  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */
  /* prettier-ignore */
  --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
  /* Main Scale */
  --op-color-alerts-warning-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)
  );
  --op-color-alerts-warning-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)
  );
  --op-color-alerts-warning-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%)
  );
  --op-color-alerts-warning-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%)
  );
  --op-color-alerts-warning-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%)
  );
  --op-color-alerts-warning-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%)
  );
  --op-color-alerts-warning-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%)
  );
  --op-color-alerts-warning-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%)
  );
  --op-color-alerts-warning-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)
  );
  /* On Scale */
  --op-color-alerts-warning-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%)
  );
  --op-color-alerts-warning-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)
  );
  --op-color-alerts-warning-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)
  );
  --op-color-alerts-warning-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%)
  );
  --op-color-alerts-warning-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%)
  );
  --op-color-alerts-warning-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)
  );
  --op-color-alerts-warning-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */
  /* prettier-ignore */
  --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
  /* Main Scale */
  --op-color-alerts-danger-plus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
  );
  --op-color-alerts-danger-plus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-plus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-plus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%)
  );
  --op-color-alerts-danger-plus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%)
  );
  --op-color-alerts-danger-plus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%)
  );
  --op-color-alerts-danger-plus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%)
  );
  --op-color-alerts-danger-plus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  --op-color-alerts-danger-plus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
  );
  --op-color-alerts-danger-base: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%)
  );
  --op-color-alerts-danger-minus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%)
  );
  --op-color-alerts-danger-minus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%)
  );
  --op-color-alerts-danger-minus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%)
  );
  --op-color-alerts-danger-minus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%)
  );
  --op-color-alerts-danger-minus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%)
  );
  --op-color-alerts-danger-minus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
  );
  --op-color-alerts-danger-minus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-minus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-minus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
  );
  /* On Scale */
  --op-color-alerts-danger-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
  );
  --op-color-alerts-danger-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
  );
  --op-color-alerts-danger-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
  );
  --op-color-alerts-danger-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
  );
  --op-color-alerts-danger-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%)
  );
  --op-color-alerts-danger-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
  );
  --op-color-alerts-danger-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
  );
  --op-color-alerts-danger-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
  );
  --op-color-alerts-danger-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
  );
  --op-color-alerts-danger-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
  );
  --op-color-alerts-danger-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%)
  );
  --op-color-alerts-danger-on-base: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
  );
  --op-color-alerts-danger-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%)
  );
  --op-color-alerts-danger-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
  );
  --op-color-alerts-danger-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
  );
  --op-color-alerts-danger-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
  );
  --op-color-alerts-danger-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%)
  );
  --op-color-alerts-danger-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%)
  );
  --op-color-alerts-danger-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
  );
  --op-color-alerts-danger-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
  );
  --op-color-alerts-danger-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
  );
  --op-color-alerts-danger-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
  );
  --op-color-alerts-danger-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%)
  );
  --op-color-alerts-danger-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
  );
  --op-color-alerts-danger-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  --op-color-alerts-danger-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
  );
  --op-color-alerts-danger-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  /**
  * @tokens Alerts Info Colors
  * @presenter Color
  */
  /* prettier-ignore */
  --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
  /* Main Scale */
  --op-color-alerts-info-plus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
  );
  --op-color-alerts-info-plus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-plus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
  );
  --op-color-alerts-info-plus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%)
  );
  --op-color-alerts-info-plus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%)
  );
  --op-color-alerts-info-plus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%)
  );
  --op-color-alerts-info-plus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
  );
  --op-color-alerts-info-plus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%)
  );
  --op-color-alerts-info-plus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-base: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
  );
  --op-color-alerts-info-minus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%)
  );
  --op-color-alerts-info-minus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%)
  );
  --op-color-alerts-info-minus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%)
  );
  --op-color-alerts-info-minus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%)
  );
  --op-color-alerts-info-minus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%)
  );
  --op-color-alerts-info-minus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
  );
  --op-color-alerts-info-minus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-minus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-minus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
  );
  /* On Scale */
  --op-color-alerts-info-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
  );
  --op-color-alerts-info-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%)
  );
  --op-color-alerts-info-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
  );
  --op-color-alerts-info-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%)
  );
  --op-color-alerts-info-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
  );
  --op-color-alerts-info-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%)
  );
  --op-color-alerts-info-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
  );
  --op-color-alerts-info-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
  );
  --op-color-alerts-info-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%)
  );
  --op-color-alerts-info-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
  );
  --op-color-alerts-info-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-base: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
  );
  --op-color-alerts-info-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
  );
  --op-color-alerts-info-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
  );
  --op-color-alerts-info-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
  );
  --op-color-alerts-info-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
  );
  --op-color-alerts-info-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%)
  );
  --op-color-alerts-info-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
  );
  --op-color-alerts-info-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
  );
  --op-color-alerts-info-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
  );
  --op-color-alerts-info-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
  );
  --op-color-alerts-info-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
  );
  --op-color-alerts-info-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
  );
  --op-color-alerts-info-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
  );
  --op-color-alerts-info-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
  );
  --op-color-alerts-info-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%)
  );
  --op-color-alerts-info-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
  );
  --op-color-alerts-info-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
  );
  /**
  * @tokens Alerts Notice Colors
  * @presenter Color
  */
  /* prettier-ignore */
  --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
  /* Main Scale */
  --op-color-alerts-notice-plus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
  );
  --op-color-alerts-notice-plus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%)
  );
  --op-color-alerts-notice-plus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%)
  );
  --op-color-alerts-notice-plus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%)
  );
  --op-color-alerts-notice-plus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%)
  );
  --op-color-alerts-notice-plus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
  );
  --op-color-alerts-notice-plus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-plus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
  );
  --op-color-alerts-notice-plus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
  );
  --op-color-alerts-notice-base: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%)
  );
  --op-color-alerts-notice-minus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%)
  );
  --op-color-alerts-notice-minus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%)
  );
  --op-color-alerts-notice-minus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%)
  );
  --op-color-alerts-notice-minus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%)
  );
  --op-color-alerts-notice-minus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%)
  );
  --op-color-alerts-notice-minus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-minus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-minus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-minus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
  );
  /* On Scale */
  --op-color-alerts-notice-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
  );
  --op-color-alerts-notice-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
  );
  --op-color-alerts-notice-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%)
  );
  --op-color-alerts-notice-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%)
  );
  --op-color-alerts-notice-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
  );
  --op-color-alerts-notice-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
  );
  --op-color-alerts-notice-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
  );
  --op-color-alerts-notice-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
  );
  --op-color-alerts-notice-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
  );
  --op-color-alerts-notice-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%)
  );
  --op-color-alerts-notice-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
  );
  --op-color-alerts-notice-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
  );
  --op-color-alerts-notice-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%)
  );
  --op-color-alerts-notice-on-base: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%)
  );
  --op-color-alerts-notice-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)
  );
  --op-color-alerts-notice-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%)
  );
  --op-color-alerts-notice-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%)
  );
  --op-color-alerts-notice-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%)
  );
  --op-color-alerts-notice-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%)
  );
  --op-color-alerts-notice-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
  );
  --op-color-alerts-notice-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
  );
  --op-color-alerts-notice-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%)
  );
  --op-color-alerts-notice-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
  );
  --op-color-alerts-notice-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
  );
  --op-color-alerts-notice-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
  );
  --op-color-alerts-notice-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
  );
  /**
  * @tokens Dark Shadows
  * @presenter Shadow
  */
  --op-color-background: var(--op-color-neutral-plus-eight);
  --op-color-on-background: var(--op-color-neutral-on-plus-eight);
  --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
}
/* Force Light Mode */
:root[data-theme-mode=light] {
  color-scheme: only light;
}
/* Force Dark Mode */
:root[data-theme-mode=dark] {
  color-scheme: only dark;
  /**
  * @tokens Dark Shadows
  * @presenter Shadow
  */
  --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
  --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
  /**
  * @tokens Encoded Images
  */
  --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode=light]) {
    /**
    * @tokens Dark Shadows
    * @presenter Shadow
    */
    --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
    --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
    --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
    --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
    --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
    /**
    * @tokens Encoded Images
    */
    --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
  }
}
/* After a reset, introduce base element styles specific to this system */
html {
  overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
  font-family: "Poppins", sans-serif;
  font-family: var(--op-font-family);
  font-size: 62.5%; /* 1rem = 10px */
}
body {
  overflow: auto;
  height: 100vh;
  background: hsl(131, 4%, 14%);
  background: var(--op-color-background);
  color: hsl(131, 4%, 80%);
  color: var(--op-color-on-background);
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
button {
  background: none;
  cursor: pointer;
}
button,
input[type=submit] {
  border: 0;
}
label {
  display: inline-block;
}
label:hover {
    cursor: pointer;
  }
a {
  color: hsl(131 65% 50%);
  color: var(--op-color-primary-original);
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
pre {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 1.2rem;
  margin-bottom: var(--op-space-small);
  font-weight: 400;
  font-weight: var(--op-font-weight-normal);
}
h1 {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
}
h2 {
  font-size: 2.4rem;
  font-size: var(--op-font-2x-large);
}
h3 {
  font-size: 1.8rem;
  font-size: var(--op-font-large);
}
h4 {
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
h5 {
  font-size: 1.4rem;
  font-size: var(--op-font-small);
}
h6 {
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
}
p {
  margin-bottom: 1.2rem;
  margin-bottom: var(--op-space-small);
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
small {
  font-size: 1.4rem;
  font-size: var(--op-font-small);
}
.app-with-sidebar {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: auto 1fr auto;
}
.app-body {
  display: flex;
  overflow: auto;
  flex-direction: column;
}
.app__header {
  position: sticky;
  z-index: 500;
  z-index: var(--op-z-index-header);
  top: 0;
  flex-grow: 0;
  flex-shrink: 0;
}
.app__content {
  width: 100%;
  max-width: 1024px;
  max-width: var(--op-breakpoint-medium);
  flex-grow: 1;
  padding: 0 2rem;
  padding: 0 var(--op-space-large);
  margin: 0 auto;
}
.app__content-no-margin {
  width: 100%;
  flex-grow: 1;
  padding: 0 2rem;
  padding: 0 var(--op-space-large);
  overflow-y: auto;
}
.app__footer {
  position: sticky;
  z-index: 500;
  z-index: var(--op-z-index-footer);
  bottom: 0;
  flex-grow: 0;
  flex-shrink: 0;
}
/* Container Properties */
.container {
  width: 100%;
  max-width: 1024px;
  max-width: var(--op-breakpoint-medium);
  padding: 0 2rem;
  padding: 0 var(--op-space-large);
  margin: 0 auto;
}
.container--sm {
  max-width: 768px;
  max-width: var(--op-breakpoint-small);
}
.container--md-padding {
  padding: 0 1.6rem;
  padding: 0 var(--op-space-medium);
}
.container--sm-padding {
  padding: 0 1.2rem;
  padding: 0 var(--op-space-small);
}
.container--xs {
  max-width: 512px;
  max-width: var(--op-breakpoint-x-small);
}
/* Width Properties */
.full-width {
  width: 100%;
}
.half-width {
  width: 50%;
}
.four-fifths-width {
  width: 80%;
}
.three-fifths-width {
  width: 60%;
}
.two-fifths-width {
  width: 40%;
}
.one-fifth-width {
  width: 20%;
}
.three-quarters-width {
  width: 75%;
}
.one-quarter-width {
  width: 25%;
}
.two-thirds-width {
  width: 66.6666666667%;
}
.one-third-width {
  width: 33.3333333333%;
}
/* Flex Properties */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-no-wrap {
  flex-wrap: nowrap;
}
.flex-grow-1 {
  flex-grow: 1;
}
/* Gap Properties */
.gap-xxs {
  gap: 0.4rem;
  gap: var(--op-space-2x-small);
  --op-gap: var(--op-space-2x-small);
}
.gap-xs {
  gap: 0.8rem;
  gap: var(--op-space-x-small);
  --op-gap: var(--op-space-x-small);
}
.gap-sm {
  gap: 1.2rem;
  gap: var(--op-space-small);
  --op-gap: var(--op-space-small);
}
.gap-md {
  gap: 1.6rem;
  gap: var(--op-space-medium);
  --op-gap: var(--op-space-medium);
}
.gap-lg {
  gap: 2rem;
  gap: var(--op-space-large);
  --op-gap: var(--op-space-large);
}
.gap-xl {
  gap: 2.4rem;
  gap: var(--op-space-x-large);
  --op-gap: var(--op-space-x-large);
}
/* Justify Content */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
/* Align Items */
.items-stretch {
  align-items: stretch;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
/* Align Self */
.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}
.self-baseline {
  align-self: baseline;
}
/* Text Alignment */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
/* Box Margin */
.margin-xl {
  margin: 2.4rem;
  margin: var(--op-space-x-large);
}
.margin-lg {
  margin: 2rem;
  margin: var(--op-space-large);
}
.margin-md {
  margin: 1.6rem;
  margin: var(--op-space-medium);
}
.margin-sm {
  margin: 1.2rem;
  margin: var(--op-space-small);
}
.margin-xs {
  margin: 0.8rem;
  margin: var(--op-space-x-small);
}
.margin-none {
  margin: 0;
}
.margin-auto {
  margin: auto;
}
/* Vertical Margin */
.margin-y-xl {
  margin-top: 2.4rem;
  margin-top: var(--op-space-x-large);
  margin-bottom: 2.4rem;
  margin-bottom: var(--op-space-x-large);
}
.margin-y-lg {
  margin-top: 2rem;
  margin-top: var(--op-space-large);
  margin-bottom: 2rem;
  margin-bottom: var(--op-space-large);
}
.margin-y-md {
  margin-top: 1.6rem;
  margin-top: var(--op-space-medium);
  margin-bottom: 1.6rem;
  margin-bottom: var(--op-space-medium);
}
.margin-y-sm {
  margin-top: 1.2rem;
  margin-top: var(--op-space-small);
  margin-bottom: 1.2rem;
  margin-bottom: var(--op-space-small);
}
.margin-y-xs {
  margin-top: 0.8rem;
  margin-top: var(--op-space-x-small);
  margin-bottom: 0.8rem;
  margin-bottom: var(--op-space-x-small);
}
.margin-y-none {
  margin-top: 0;
  margin-bottom: 0;
}
/* Horizontal Margin */
.margin-x-xl {
  margin-right: 2.4rem;
  margin-right: var(--op-space-x-large);
  margin-left: 2.4rem;
  margin-left: var(--op-space-x-large);
}
.margin-x-lg {
  margin-right: 2rem;
  margin-right: var(--op-space-large);
  margin-left: 2rem;
  margin-left: var(--op-space-large);
}
.margin-x-md {
  margin-right: 1.6rem;
  margin-right: var(--op-space-medium);
  margin-left: 1.6rem;
  margin-left: var(--op-space-medium);
}
.margin-x-sm {
  margin-right: 1.2rem;
  margin-right: var(--op-space-small);
  margin-left: 1.2rem;
  margin-left: var(--op-space-small);
}
.margin-x-xs {
  margin-right: 0.8rem;
  margin-right: var(--op-space-x-small);
  margin-left: 0.8rem;
  margin-left: var(--op-space-x-small);
}
.margin-x-none {
  margin-right: 0;
  margin-left: 0;
}
/* Top Margin */
.margin-top-xl {
  margin-top: 2.4rem;
  margin-top: var(--op-space-x-large);
}
.margin-top-lg {
  margin-top: 2rem;
  margin-top: var(--op-space-large);
}
.margin-top-md {
  margin-top: 1.6rem;
  margin-top: var(--op-space-medium);
}
.margin-top-sm {
  margin-top: 1.2rem;
  margin-top: var(--op-space-small);
}
.margin-top-xs {
  margin-top: 0.8rem;
  margin-top: var(--op-space-x-small);
}
.margin-top-none {
  margin-top: 0;
}
/* Bottom Margin */
.margin-bottom-xl {
  margin-bottom: 2.4rem;
  margin-bottom: var(--op-space-x-large);
}
.margin-bottom-lg {
  margin-bottom: 2rem;
  margin-bottom: var(--op-space-large);
}
.margin-bottom-md {
  margin-bottom: 1.6rem;
  margin-bottom: var(--op-space-medium);
}
.margin-bottom-sm {
  margin-bottom: 1.2rem;
  margin-bottom: var(--op-space-small);
}
.margin-bottom-xs {
  margin-bottom: 0.8rem;
  margin-bottom: var(--op-space-x-small);
}
.margin-bottom-none {
  margin-bottom: 0;
}
/* Right Margin */
.margin-right-xl {
  margin-right: 2.4rem;
  margin-right: var(--op-space-x-large);
}
.margin-right-lg {
  margin-right: 2rem;
  margin-right: var(--op-space-large);
}
.margin-right-md {
  margin-right: 1.6rem;
  margin-right: var(--op-space-medium);
}
.margin-right-sm {
  margin-right: 1.2rem;
  margin-right: var(--op-space-small);
}
.margin-right-xs {
  margin-right: 0.8rem;
  margin-right: var(--op-space-x-small);
}
.margin-right-none {
  margin-left: 0;
}
/* Left Margin */
.margin-left-xl {
  margin-left: 2.4rem;
  margin-left: var(--op-space-x-large);
}
.margin-left-lg {
  margin-left: 2rem;
  margin-left: var(--op-space-large);
}
.margin-left-md {
  margin-left: 1.6rem;
  margin-left: var(--op-space-medium);
}
.margin-left-sm {
  margin-left: 1.2rem;
  margin-left: var(--op-space-small);
}
.margin-left-xs {
  margin-left: 0.8rem;
  margin-left: var(--op-space-x-small);
}
.margin-left-none {
  margin-left: 0;
}
/*
  Accessibility
  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.sr-only {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}
.btn {
  /* Public API (customizable component options) */
  --_op-btn-height-small: var(--op-input-height-small);
  --_op-btn-height-medium: var(--op-input-height-medium);
  --_op-btn-height-large: var(--op-input-height-large);
  --_op-btn-font-small: var(--op-font-x-small);
  --_op-btn-font-medium: var(--op-font-small);
  --_op-btn-font-large: var(--op-font-small);
  --_op-btn-padding-small: 0 var(--op-space-x-small);
  --_op-btn-padding-medium: 0 var(--op-space-small);
  --_op-btn-padding-large: 0 var(--op-space-small);
  /* Private API (component option defaults) */
  --__op-btn-height: var(--_op-btn-height-large);
  --__op-btn-font-size: var(--_op-btn-font-large);
  --__op-btn-padding: var(--_op-btn-padding-large);
  display: inline-flex;
  min-height: 4rem;
  min-height: var(--__op-btn-height);
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  padding: var(--__op-btn-padding);
  border-radius: 4px;
  border-radius: var(--op-radius-medium);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: hsl(131, 4%, 10%);
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: inset 0 0 0 1px hsl(131, 4%, 20%);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
  color: hsl(131, 4%, 88%);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: pointer;
  font-size: 1.4rem;
  font-size: var(--__op-btn-font-size);
  font-weight: 400;
  font-weight: var(--op-font-weight-normal);
  gap: 0.8rem;
  gap: var(--op-space-x-small);
  text-align: center;
  text-decoration: none;
  transition: all 120ms ease-in;
  transition: var(--op-transition-input);
  white-space: nowrap;
  /* Modifiers */
  /* Default Active State */
}
.btn.btn--active {
    background-color: hsl(131, 65%, 24%);
    background-color: var(--op-color-primary-plus-five);
    box-shadow: inset 0 0 0 1px hsl(131, 65%, 29%);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: hsl(131, 65%, 72%);
    color: var(--op-color-primary-on-plus-five);
  }
/* Default Hover State */
.btn:hover {
    background-color: hsl(131, 65%, 14%);
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: inset 0 0 0 1px hsl(131, 65%, 29%);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: hsl(131, 65%, 88%);
    color: var(--op-color-primary-on-plus-eight);
  }
/* Default Focus State */
.btn:focus-visible {
    background-color: hsl(131, 4%, 10%);
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset 0 0 0 2px hsl(131, 65%, 32%),
    0 0 0 4px hsl(131, 65%, 24%);
    box-shadow: var(--op-input-focus-primary);
    color: hsl(131, 4%, 88%);
    color: var(--op-color-neutral-on-plus-eight);
  }
/* Default Borderless State */
.btn.btn--no-border {
    background-color: transparent;
    box-shadow: none;
    color: hsl(131, 65%, 100%);
    color: var(--op-color-primary-on-plus-max);
    /* Default Borderless + Active State. */
  }
.btn.btn--no-border.btn--active {
      background-color: hsl(131, 65%, 24%);
      background-color: var(--op-color-primary-plus-five);
      box-shadow: inset 0 0 0 1px hsl(131, 65%, 29%);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
      color: hsl(131, 65%, 72%);
      color: var(--op-color-primary-on-plus-five);
    }
/* Default Borderless + Hover State */
.btn.btn--no-border:hover {
      background-color: hsl(131, 65%, 14%);
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset 0 0 0 1px hsl(131, 65%, 24%);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
      color: hsl(131, 65%, 88%);
      color: var(--op-color-primary-on-plus-eight);
    }
/* Default Borderless + Focus State */
.btn.btn--no-border:focus-visible {
      background-color: hsl(131, 65%, 14%);
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset 0 0 0 2px hsl(131, 65%, 32%),
    0 0 0 4px hsl(131, 65%, 24%);
      box-shadow: var(--op-input-focus-primary);
      color: hsl(131, 65%, 88%);
      color: var(--op-color-primary-on-plus-eight);
    }
/* Pill Modifier */
.btn.btn--pill {
    border-radius: 9999px;
    border-radius: var(--op-radius-pill);
  }
/* Icon Modifier */
.btn.btn--icon {
    width: var(--__op-btn-height);
    min-width: var(--__op-btn-height);
    padding: 0;
  }
/* Icon With Label Modifier */
.btn.btn--icon-with-label {
    flex-direction: column;
    padding: 1.2rem;
    padding: var(--op-space-small);
    gap: 0.2rem;
    gap: var(--op-space-3x-small);
  }
/* Size Modifiers */
.btn.btn--small {
    --__op-btn-height: var(--_op-btn-height-small);
    --__op-btn-font-size: var(--_op-btn-font-small);
    --__op-btn-padding: var(--_op-btn-padding-small);
  }
.btn.btn--medium {
    --__op-btn-height: var(--_op-btn-height-medium);
    --__op-btn-font-size: var(--_op-btn-font-medium);
    --__op-btn-padding: var(--_op-btn-padding-medium);
  }
.btn.btn--large {
    --__op-btn-height: var(--_op-btn-height-large);
    --__op-btn-font-size: var(--_op-btn-font-large);
    --__op-btn-padding: var(--_op-btn-padding-large);
  }
/* Disabled Modifier */
.btn.btn--disabled,.btn:disabled {
    opacity: 0.4;
    opacity: var(--op-opacity-disabled);
    pointer-events: none;
    -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
    -moz-user-select: none;
         user-select: none;
  }
/* Button with notification style badge */
.btn.btn--with-badge {
    position: relative;
  }
/* Focus State */
.btn:focus,.btn:focus-within,.btn:focus-visible {
    outline: none;
  }
/* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */
/* --op-breakpoint-small */
/* Variant Modifiers */
.btn.btn--primary {
    background-color: hsl(131, 65%, 38%);
    background-color: var(--op-color-primary-base);
    box-shadow: inset 0 0 0 1px hsl(131, 65%, 38%);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
    color: hsl(131, 65%, 10%);
    color: var(--op-color-primary-on-base);
    /* Active State */
  }
.btn.btn--primary.btn--active {
      background-color: hsl(131, 65%, 64%);
      background-color: var(--op-color-primary-minus-five);
      box-shadow: inset 0 0 0 1px hsl(131, 65%, 32%);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: hsl(131, 65%, 2%);
      color: var(--op-color-primary-on-minus-five);
    }
/* Hover State */
.btn.btn--primary:hover {
      background-color: hsl(131, 65%, 35%);
      background-color: var(--op-color-primary-plus-one);
      box-shadow: inset 0 0 0 1px hsl(131, 65%, 35%);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
      color: hsl(131, 65%, 0%);
      color: var(--op-color-primary-on-plus-one);
    }
/* Focus State */
.btn.btn--primary:focus-visible {
      background-color: hsl(131, 65%, 38%);
      background-color: var(--op-color-primary-base);
      box-shadow: inset 0 0 0 2px hsl(131, 65%, 32%),
    0 0 0 4px hsl(131, 65%, 24%);
      box-shadow: var(--op-input-focus-primary);
      color: hsl(131, 65%, 10%);
      color: var(--op-color-primary-on-base);
    }
/* Borderless State */
.btn.btn--primary.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: hsl(131, 65%, 38%);
      color: var(--op-color-primary-base);
      /* Borderless + Active State */
    }
.btn.btn--primary.btn--no-border.btn--active {
        background-color: hsl(131, 65%, 24%);
        background-color: var(--op-color-primary-plus-five);
        box-shadow: inset 0 0 0 1px hsl(131, 65%, 29%);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
        color: hsl(131, 65%, 72%);
        color: var(--op-color-primary-on-plus-five);
      }
/* Borderless + Hover State */
.btn.btn--primary.btn--no-border:hover {
        background-color: hsl(131, 65%, 14%);
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset 0 0 0 1px hsl(131, 65%, 24%);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
        color: hsl(131, 65%, 88%);
        color: var(--op-color-primary-on-plus-eight);
      }
/* Borderless + Focus State */
.btn.btn--primary.btn--no-border:focus-visible {
        background-color: hsl(131, 65%, 14%);
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset 0 0 0 2px hsl(131, 65%, 32%),
    0 0 0 4px hsl(131, 65%, 24%);
        box-shadow: var(--op-input-focus-primary);
        color: hsl(131, 65%, 88%);
        color: var(--op-color-primary-on-plus-eight);
      }
.btn.btn--destructive,.btn.btn--delete {
    background-color: hsl(0, 99%, 32%);
    background-color: var(--op-color-alerts-danger-base);
    box-shadow: inset 0 0 0 1px hsl(0, 99%, 32%);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
    color: hsl(0, 99%, 98%);
    color: var(--op-color-alerts-danger-on-base);
    /* Active State */
  }
.btn--active:is(.btn.btn--destructive,.btn.btn--delete) {
      background-color: hsl(0, 99%, 14%);
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: inset 0 0 0 1px hsl(0, 99%, 20%);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
      color: hsl(0, 99%, 76%);
      color: var(--op-color-alerts-danger-on-plus-five);
    }
/* Hover State */
:is(.btn.btn--destructive,.btn.btn--delete):hover {
      background-color: hsl(0, 99%, 40%);
      background-color: var(--op-color-alerts-danger-minus-two);
      box-shadow: inset 0 0 0 1px hsl(0, 99%, 40%);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: hsl(0, 99%, 98%);
      color: var(--op-color-alerts-danger-on-minus-two);
    }
/* Focus State */
:is(.btn.btn--destructive,.btn.btn--delete):focus-visible {
      background-color: hsl(0, 99%, 32%);
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: inset 0 0 0 2px hsl(0, 99%, 24%),
    0 0 0 4px hsl(0, 99%, 14%);
      box-shadow: var(--op-input-focus-danger);
      color: hsl(0, 99%, 98%);
      color: var(--op-color-alerts-danger-on-base);
    }
.btn.btn--warning {
    background-color: hsl(47, 100%, 32%);
    background-color: var(--op-color-alerts-warning-base);
    box-shadow: inset 0 0 0 1px hsl(47, 100%, 32%);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
    color: hsl(47, 100%, 2%);
    color: var(--op-color-alerts-warning-on-base);
    /* Active State */
  }
.btn.btn--warning.btn--active {
      background-color: hsl(47, 100%, 14%);
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: inset 0 0 0 1px hsl(47, 100%, 20%);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
      color: hsl(47, 100%, 72%);
      color: var(--op-color-alerts-warning-on-plus-five);
    }
/* Hover State */
.btn.btn--warning:hover {
      background-color: hsl(47, 100%, 40%);
      background-color: var(--op-color-alerts-warning-minus-two);
      box-shadow: inset 0 0 0 1px hsl(47, 100%, 40%);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
      color: hsl(47, 100%, 2%);
      color: var(--op-color-alerts-warning-on-minus-two);
    }
/* Focus State */
.btn.btn--warning:focus-visible {
      background-color: hsl(47, 100%, 32%);
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: inset 0 0 0 2px hsl(47, 100%, 24%),
    0 0 0 4px hsl(47, 100%, 14%);
      box-shadow: var(--op-input-focus-warning);
      color: hsl(47, 100%, 2%);
      color: var(--op-color-alerts-warning-on-base);
    }
@media (max-width: 768px) {
  .btn {
    --__op-btn-height: var(--_op-btn-height-large);
    --__op-btn-font-size: var(--_op-btn-font-large);
  }
    .btn.btn--small,.btn.btn--medium,.btn.btn--large {
      --__op-btn-height: var(--_op-btn-height-large);
      --__op-btn-font-size: var(--_op-btn-font-large);
      --__op-btn-padding: var(--_op-btn-padding-large);
    }
}
:root {
  --op-color-primary-h: 131;
  --op-color-primary-s: 65%;
  --op-color-primary-l: 50%;
  --op-color-alerts-notice-h: 131;
  --op-color-alerts-notice-s: 65%;
  --op-color-alerts-notice-l: 50%;
  --op-font-family: "Poppins", sans-serif;
  --op-font-family-mono: "Roboto Mono", monospace;
  --op-radius-3x-large: 24px;
  --op-space-4x-large: calc(var(--op-space-scale-unit)*6);
  --op-space-5x-large: calc(var(--op-space-scale-unit)*8);
  --op-opacity-disabled-form: 0.4;
  --nm-top-nav-height: calc(var(--op-space-3x-large) + var(--op-space-medium));
  --nm-sidebar-width: 21.6rem;
  --nm-dropdown-width-sm: calc(var(--op-space-4x-large)*2);
  --nm-columns-event-dashboard: 2;
  --nm-color-link: var(--op-color-alerts-info-minus-three);
  --nm-space-flash-message-width: calc(var(--op-space-scale-unit)*32);
  --nm-shadow-top-nav: 0 1px 8px hsla(0deg, 0%, 0%, 12%), inset 0 -1px var(--op-border-width) var(--op-color-neutral-plus-eight);
}
:root {
  --op-color-background: var(--op-color-neutral-plus-seven);
  --op-color-on-background: var(--op-color-neutral-on-plus-seven);
  --op-color-primary-brand: hsl(var(--op-color-primary-h), var(--op-color-primary-s), var(--op-color-primary-l));
  --op-color-neutral-brand: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), var(--op-color-neutral-s));
  --op-color-alerts-warning-brand: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), var(--op-color-alerts-warning-l));
  --op-color-alerts-danger-brand: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), var(--op-color-alerts-danger-l));
  --op-color-alerts-info-brand: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), var(--op-color-alerts-info-l));
  --op-color-alerts-notice-brand: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), var(--op-color-alerts-notice-l));
  --op-color-border: var(--op-color-neutral-plus-seven);
  --op-color-primary-plus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 12%);
  --op-color-primary-plus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 14%);
  --op-color-primary-plus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 16%);
  --op-color-primary-plus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 20%);
  --op-color-primary-plus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 24%);
  --op-color-primary-plus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 26%);
  --op-color-primary-plus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 29%);
  --op-color-primary-plus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 32%);
  --op-color-primary-plus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 35%);
  --op-color-primary-base: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 38%);
  --op-color-primary-minus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 40%);
  --op-color-primary-minus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 45%);
  --op-color-primary-minus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 48%);
  --op-color-primary-minus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 52%);
  --op-color-primary-minus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 64%);
  --op-color-primary-minus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 72%);
  --op-color-primary-minus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 80%);
  --op-color-primary-minus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 88%);
  --op-color-primary-minus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 100%);
  --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 100%);
  --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 78%);
  --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 88%);
  --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 70%);
  --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 80%);
  --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 64%);
  --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 72%);
  --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 96%);
  --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 72%);
  --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 86%);
  --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 80%);
  --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 92%);
  --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 88%);
  --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 98%);
  --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 100%);
  --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 0%);
  --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 0%);
  --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 6%);
  --op-color-primary-on-base: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 10%);
  --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 2%);
  --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 12%);
  --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 4%);
  --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 12%);
  --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 2%);
  --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 14%);
  --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 2%);
  --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 2%);
  --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 20%);
  --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 2%);
  --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 20%);
  --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 8%);
  --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 24%);
  --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 8%);
  --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 24%);
  --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 4%);
  --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 28%);
  --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 0%);
  --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 32%);
  --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 8%);
  --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 10%);
  --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 14%);
  --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 16%);
  --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 18%);
  --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 20%);
  --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 24%);
  --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 26%);
  --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 30%);
  --op-color-neutral-base: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 32%);
  --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 36%);
  --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 40%);
  --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 44%);
  --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 52%);
  --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 64%);
  --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 72%);
  --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 80%);
  --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 88%);
  --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 100%);
  --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 100%);
  --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 54%);
  --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 88%);
  --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 54%);
  --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 80%);
  --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 58%);
  --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 72%);
  --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 58%);
  --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 72%);
  --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 90%);
  --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 80%);
  --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 94%);
  --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 88%);
  --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 68%);
  --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 88%);
  --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 72%);
  --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 100%);
  --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 75%);
  --op-color-neutral-on-base: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 100%);
  --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 78%);
  --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 90%);
  --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 98%);
  --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 98%);
  --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 92%);
  --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 99%);
  --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 98%);
  --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 11%);
  --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 2%);
  --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 20%);
  --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 2%);
  --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 4%);
  --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 26%);
  --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 8%);
  --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 32%);
  --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 4%);
  --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 36%);
  --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 4%);
  --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 44%);
  --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 0%);
  --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 4%);
  --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 8%);
  --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 12%);
  --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 14%);
  --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 16%);
  --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 20%);
  --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 24%);
  --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 28%);
  --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 32%);
  --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 36%);
  --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 40%);
  --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 48%);
  --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 52%);
  --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 64%);
  --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 72%);
  --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 80%);
  --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 88%);
  --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 100%);
  --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 70%);
  --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 42%);
  --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 88%);
  --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 70%);
  --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 80%);
  --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 60%);
  --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 72%);
  --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 50%);
  --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 72%);
  --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 50%);
  --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 80%);
  --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 60%);
  --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 88%);
  --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 70%);
  --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 88%);
  --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 70%);
  --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 99%);
  --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 96%);
  --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 2%);
  --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 6%);
  --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 2%);
  --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 10%);
  --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 2%);
  --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 14%);
  --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 2%);
  --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 20%);
  --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 4%);
  --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 20%);
  --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 8%);
  --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 21%);
  --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 10%);
  --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 22%);
  --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 8%);
  --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 24%);
  --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 12%);
  --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 26%);
  --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 0%);
  --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 24%);
  --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 0%);
  --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 4%);
  --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 8%);
  --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 12%);
  --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 14%);
  --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 16%);
  --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 20%);
  --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 24%);
  --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 28%);
  --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 32%);
  --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 36%);
  --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 40%);
  --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 48%);
  --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 52%);
  --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 64%);
  --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 72%);
  --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 80%);
  --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 88%);
  --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 100%);
  --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 100%);
  --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 88%);
  --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 88%);
  --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 78%);
  --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 80%);
  --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 70%);
  --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 78%);
  --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 68%);
  --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 76%);
  --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 70%);
  --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 80%);
  --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 72%);
  --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 88%);
  --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 76%);
  --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 88%);
  --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 76%);
  --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 96%);
  --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 84%);
  --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 98%);
  --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 90%);
  --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 96%);
  --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 88%);
  --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 98%);
  --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 93%);
  --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 6%);
  --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 2%);
  --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 4%);
  --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 10%);
  --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 2%);
  --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 10%);
  --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 8%);
  --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 22%);
  --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 8%);
  --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 28%);
  --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 4%);
  --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 24%);
  --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 0%);
  --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 24%);
  --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 0%);
  --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 4%);
  --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 8%);
  --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 12%);
  --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 14%);
  --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 16%);
  --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 20%);
  --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 24%);
  --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 28%);
  --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 32%);
  --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 36%);
  --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 40%);
  --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 48%);
  --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 52%);
  --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 64%);
  --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 72%);
  --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 80%);
  --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 88%);
  --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 100%);
  --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 100%);
  --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 88%);
  --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 88%);
  --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 78%);
  --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 80%);
  --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 70%);
  --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 78%);
  --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 62%);
  --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 76%);
  --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 62%);
  --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 80%);
  --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 66%);
  --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 88%);
  --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 72%);
  --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 88%);
  --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 74%);
  --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 96%);
  --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 80%);
  --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 98%);
  --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 78%);
  --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 94%);
  --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 80%);
  --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 94%);
  --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 86%);
  --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 98%);
  --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 96%);
  --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 2%);
  --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 2%);
  --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 8%);
  --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 20%);
  --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 4%);
  --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 28%);
  --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 4%);
  --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 28%);
  --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 4%);
  --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 34%);
  --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 0%);
  --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 32%);
  --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 0%);
  --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 4%);
  --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 8%);
  --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 12%);
  --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 14%);
  --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 16%);
  --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 20%);
  --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 24%);
  --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 28%);
  --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 32%);
  --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 36%);
  --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 40%);
  --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 48%);
  --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 52%);
  --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 64%);
  --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 72%);
  --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 80%);
  --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 88%);
  --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 100%);
  --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 100%);
  --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 88%);
  --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 94%);
  --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 82%);
  --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 90%);
  --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 80%);
  --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 92%);
  --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 72%);
  --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 92%);
  --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 72%);
  --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 94%);
  --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 80%);
  --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 98%);
  --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 78%);
  --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 98%);
  --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 88%);
  --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 98%);
  --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 84%);
  --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 99%);
  --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 99%);
  --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 2%);
  --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 7%);
  --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 2%);
  --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 10%);
  --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 2%);
  --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 18%);
  --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 2%);
  --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 20%);
  --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 6%);
  --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 20%);
  --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 2%);
  --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 16%);
  --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 2%);
  --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 26%);
  --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 2%);
  --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 24%);
  --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 0%);
  --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 28%);
  --nm-color-awg-logo: hsl(230, 48%, 26%);
  --nm-color-unaa-logo-red-h: 3;
  --nm-color-unaa-logo-red-s: 69%;
  --nm-color-unaa-logo-red-l: 53%;
  --nm-color-unaa-logo-red: hsl(var(--nm-color-unaa-logo-red-h), var(--nm-color-unaa-logo-red-s), var(--nm-color-unaa-logo-red-l));
  --nm-color-unaa-logo-red-darker: hsl(var(--nm-color-unaa-logo-red-h), var(--nm-color-unaa-logo-red-s), 48%);
  --nm-color-unaa-logo-red-darkest: hsl(var(--nm-color-unaa-logo-red-h), var(--nm-color-unaa-logo-red-s), 36%);
  --nm-color-unaa-logo-blue: hsl(229, 45%, 41%);
  --op-shadow-2x-large: 0 16px 24px hsl(0deg 0% 0% / 16%), 0 1px 4px hsl(0deg 0% 0% / 40%);
}
/* --op-breakpoint-x-small */
/* --op-breakpoint-small */
/* --op-breakpoint-medium */
/* --op-breakpoint-large */
/* --op-breakpoint-x-large */
.container.with-header {
  height: calc(100% - 5.6rem);
  height: calc(100% - var(--nm-top-nav-height));
}
@media (max-width: 768px) {
  .container {
    padding: 0 1.2rem 2.4rem 1.2rem !important;
    padding: 0 var(--op-space-small) var(--op-space-x-large) var(--op-space-small) !important;
  }
}
.container--react-autosuggest .react-autosuggest__container {
  position: relative;
}
.container--react-autosuggest .react-autosuggest__input {
  width: 240px;
  height: 3.2rem;
  height: calc(var(--op-space-medium)*2);
  padding: 1.2rem 2rem;
  padding: var(--op-space-small) var(--op-space-large);
  border: 1px solid hsl(131, 4%, 64%);
  border: var(--op-border-width) solid var(--op-color-neutral-minus-five);
  border-radius: 0.4rem;
  border-radius: var(--op-space-2x-small);
}
.container--react-autosuggest .react-autosuggest__input--focused {
  outline: none;
}
.container--react-autosuggest .react-autosuggest__input--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.container--react-autosuggest .react-autosuggest__suggestions-container {
  display: none;
}
.container--react-autosuggest .react-autosuggest__suggestions-container--open {
  display: block;
  position: absolute;
  top: 51px;
  width: 350px;
  max-height: 350px;
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
  background-color: hsl(131, 4%, 8%);
  background-color: var(--op-color-neutral-plus-max);
  border: 1px solid hsl(131, 4%, 88%);
  border: var(--op-border-width) solid var(--op-color-neutral-minus-eight);
  color: hsl(0deg 100% 100%);
  color: var(--op-color-white);
  border-bottom-left-radius: 0.4rem;
  border-bottom-left-radius: var(--op-space-2x-small);
  border-bottom-right-radius: 0.4rem;
  border-bottom-right-radius: var(--op-space-2x-small);
  z-index: 2;
  overflow-y: auto;
}
.container--react-autosuggest .react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.container--react-autosuggest .react-autosuggest__suggestion {
  cursor: pointer;
  padding: 1.2rem 2rem;
  padding: var(--op-space-small) var(--op-space-large);
}
.container--react-autosuggest .react-autosuggest__suggestion--highlighted {
  background-color: hsl(131, 4%, 24%);
  background-color: var(--op-color-neutral-plus-three);
}
.container--react-autosuggest .react-autosuggest__title {
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
  padding-left: 1.2rem;
  padding-left: var(--op-space-small);
  color: hsl(131, 4%, 72%);
  color: var(--op-color-neutral-on-plus-five);
}
.container--xs {
  max-width: 512px;
  max-width: var(--op-breakpoint-x-small);
}
.container--sm {
  max-width: 768px;
  max-width: var(--op-breakpoint-small);
}
.hoverable:hover, a:hover {
  color: hsl(131, 4%, 88%);
  color: var(--op-color-neutral-on-plus-eight);
  text-decoration: none;
}
a {
  text-decoration: none;
  color: hsl(0deg 100% 100%);
  color: var(--op-color-white);
}
.hide-feature {
  display: none !important;
}
.hide-content {
  display: none !important;
}
.normal-text--md {
  font-family: -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";
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
  white-space: normal;
}
@media (max-width: 760px) {
  .normal-text--md {
    font-size: 1.6rem;
    font-size: var(--op-font-medium);
  }
}
.normal-text--sm {
  display: flex;
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
  white-space: normal;
  color: hsl(131, 4%, 80%);
  color: var(--op-color-neutral-on-plus-seven);
}
.full-height {
  height: 100%;
}
.almost-full-width {
  width: 90%;
}
.responsive-half-width {
  width: 50%;
}
@media (max-width: 768px) {
  .responsive-half-width {
    width: 100%;
  }
}
.grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-gap: 1.6rem;
  grid-gap: var(--op-space-medium);
  gap: 1.6rem;
  gap: var(--op-space-medium);
}
.flex-inline {
  display: inline-flex;
}
.flex-reverse-wrap {
  flex-wrap: wrap-reverse;
}
.flex-grow-2 {
  flex-grow: 2;
}
.flex-shrink-1 {
  flex-shrink: 1;
}
.flex-basis-50 {
  flex-basis: 24ch;
}
.justify-evenly {
  justify-content: space-evenly;
}
.vertical-middle {
  vertical-align: middle;
}
.bottom-none {
  bottom: 0;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
.font-none {
  font-size: 0;
}
.font-sm {
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
}
.font-xs {
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
}
.font-md {
  font-size: 1.6rem !important;
  font-size: var(--op-font-medium) !important;
}
.font-lg {
  font-size: 2rem !important;
  font-size: var(--op-font-x-large) !important;
}
.font-xl {
  font-size: 2.4rem !important;
  font-size: var(--op-font-2x-large) !important;
}
.font-xxl {
  font-size: 2.8rem !important;
  font-size: var(--op-font-3x-large) !important;
}
.font-xxxl {
  font-size: 3.2rem !important;
  font-size: var(--op-font-4x-large) !important;
}
.font-size--small-header {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
}
.font-size--large {
  font-size: 2rem;
  font-size: var(--op-font-x-large);
}
.font-size--medium {
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
.font-size--small {
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
}
.line-height-base {
  line-height: 1;
}
.center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.margin-expand-15 {
  margin-left: -15px;
  margin-right: -15px;
}
.margin-auto {
  margin: auto;
}
.margin-top-5 {
  margin-top: 0.4rem;
  margin-top: var(--op-space-2x-small);
}
.margin-top-10 {
  margin-top: 1.2rem;
  margin-top: var(--op-space-small);
}
.margin-top-20 {
  margin-top: 2rem;
  margin-top: var(--op-space-large);
}
.margin-bottom-0 {
  margin-bottom: 0;
}
.margin-bottom-15 {
  margin-bottom: 1.6rem;
  margin-bottom: var(--op-space-medium);
}
.margin-left-10 {
  margin-left: 1rem;
}
.margin-xl {
  margin: 4rem;
  margin: var(--op-space-3x-large);
}
.margin-lg {
  margin: 2.4rem;
  margin: var(--op-space-x-large);
}
.margin-md {
  margin: 1.6rem;
  margin: var(--op-space-medium);
}
.margin-sm {
  margin: 1.2rem;
  margin: var(--op-space-small);
}
.margin-xs {
  margin: 0.8rem;
  margin: var(--op-space-x-small);
}
.margin-none {
  margin: 0 !important;
}
.margin-y-xl {
  margin-top: 4rem;
  margin-top: var(--op-space-3x-large);
  margin-bottom: 4rem;
  margin-bottom: var(--op-space-3x-large);
}
.margin-y-lg {
  margin-top: 2.4rem;
  margin-top: var(--op-space-x-large);
  margin-bottom: 2.4rem;
  margin-bottom: var(--op-space-x-large);
}
.margin-y-md {
  margin-top: 1.6rem;
  margin-top: var(--op-space-medium);
  margin-bottom: 1.6rem;
  margin-bottom: var(--op-space-medium);
}
.margin-y-sm {
  margin-top: 1.2rem;
  margin-top: var(--op-space-small);
  margin-bottom: 1.2rem;
  margin-bottom: var(--op-space-small);
}
.margin-y-xs {
  margin-top: 0.8rem;
  margin-top: var(--op-space-x-small);
  margin-bottom: 0.8rem;
  margin-bottom: var(--op-space-x-small);
}
.margin-x-xl {
  margin-right: 4rem;
  margin-right: var(--op-space-3x-large);
  margin-left: 4rem;
  margin-left: var(--op-space-3x-large);
}
.margin-x-lg {
  margin-right: 2.4rem;
  margin-right: var(--op-space-x-large);
  margin-left: 2.4rem;
  margin-left: var(--op-space-x-large);
}
.margin-x-md {
  margin-right: 1.6rem;
  margin-right: var(--op-space-medium);
  margin-left: 1.6rem;
  margin-left: var(--op-space-medium);
}
.margin-x-sm {
  margin-right: 1.2rem;
  margin-right: var(--op-space-small);
  margin-left: 1.2rem;
  margin-left: var(--op-space-small);
}
.margin-x-xs {
  margin-right: 0.8rem;
  margin-right: var(--op-space-x-small);
  margin-left: 0.8rem;
  margin-left: var(--op-space-x-small);
}
.margin-top-xl {
  margin-top: 4rem !important;
  margin-top: var(--op-space-3x-large) !important;
}
.margin-top-lg {
  margin-top: 2.4rem !important;
  margin-top: var(--op-space-x-large) !important;
}
.margin-top-md {
  margin-top: 1.6rem !important;
  margin-top: var(--op-space-medium) !important;
}
.margin-top-sm {
  margin-top: 1.2rem !important;
  margin-top: var(--op-space-small) !important;
}
.margin-top-xs {
  margin-top: 0.8rem !important;
  margin-top: var(--op-space-x-small) !important;
}
.margin-bottom-xl {
  margin-bottom: 4rem !important;
  margin-bottom: var(--op-space-3x-large) !important;
}
.margin-bottom-lg {
  margin-bottom: 2.4rem !important;
  margin-bottom: var(--op-space-x-large) !important;
}
.margin-bottom-md {
  margin-bottom: 1.6rem !important;
  margin-bottom: var(--op-space-medium) !important;
}
.margin-bottom-sm {
  margin-bottom: 1.2rem !important;
  margin-bottom: var(--op-space-small) !important;
}
.margin-bottom-xs {
  margin-bottom: 0.8rem !important;
  margin-bottom: var(--op-space-x-small) !important;
}
.margin-bottom-xxs {
  margin-bottom: 0.4rem !important;
  margin-bottom: var(--op-space-2x-small) !important;
}
.margin-right-xl {
  margin-right: 4rem;
  margin-right: var(--op-space-3x-large);
}
.margin-right-lg {
  margin-right: 2.4rem !important;
  margin-right: var(--op-space-x-large) !important;
}
.margin-right-md {
  margin-right: 1.6rem !important;
  margin-right: var(--op-space-medium) !important;
}
.margin-right-sm {
  margin-right: 1.2rem;
  margin-right: var(--op-space-small);
}
.margin-right-xs {
  margin-right: 0.8rem;
  margin-right: var(--op-space-x-small);
}
.margin-left-xl {
  margin-left: 4rem;
  margin-left: var(--op-space-3x-large);
}
.margin-left-lg {
  margin-left: 2.4rem;
  margin-left: var(--op-space-x-large);
}
.margin-left-md {
  margin-left: 1.6rem;
  margin-left: var(--op-space-medium);
}
.margin-left-sm {
  margin-left: 1.2rem;
  margin-left: var(--op-space-small);
}
.margin-left-xs {
  margin-left: 0.8rem;
  margin-left: var(--op-space-x-small);
}
.margin-left-none {
  margin-left: 0;
}
.margin-left-auto {
  margin-left: auto !important;
}
.padding-none {
  padding: 0 !important;
}
.padding-bottom-lg {
  padding-bottom: 2.4rem !important;
  padding-bottom: var(--op-space-x-large) !important;
}
.padding-15 {
  padding-left: 1.6rem;
  padding-left: var(--op-space-medium);
  padding-right: 1.6rem;
  padding-right: var(--op-space-medium);
}
.font-weight-normal {
  font-weight: 400;
}
.bold {
  font-weight: 600;
}
.top-border {
  border-top: 1px solid hsl(131, 4%, 20%);
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.top-border-light {
  border-top: 1px solid hsl(131, 4%, 20%);
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.bottom-border {
  border-bottom: 1px solid hsl(131, 4%, 20%);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.bottom-border-light {
  border-bottom: 1px solid hsl(131, 4%, 20%);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.bottom-border--except-last:last-of-type {
  border-bottom: none;
}
.text-underline {
  text-decoration: underline;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-italicized {
  font-style: italic;
}
.text-color-primary {
  color: hsl(131, 65%, 38%);
  color: var(--op-color-primary-base);
}
.text-color-primary-important {
  color: hsl(131, 65%, 38%) !important;
  color: var(--op-color-primary-base) !important;
}
.text-color-error {
  color: hsl(0, 99%, 68%);
  color: var(--op-color-alerts-danger-on-plus-six-alt);
}
.text-color-white {
  color: hsl(0deg 100% 100%) !important;
  color: var(--op-color-white) !important;
}
.text-color-neutral {
  color: hsl(131, 4%, 88%);
  color: var(--op-color-neutral-on-plus-three);
}
.text-color-neutral-light {
  color: hsl(131, 4%, 72%);
  color: var(--op-color-neutral-on-plus-five);
}
.hidden {
  display: none !important;
}
.optional-field-text {
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
  font-style: italic;
}
.break-word {
  word-break: break-word;
}
.pointer {
  cursor: pointer;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.links-blue a,
.links-blue a:hover,
.links-blue a:visited {
  color: hsl(216, 58%, 48%);
  color: var(--nm-color-link);
  background: none;
  text-decoration: underline;
}
.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.display-none {
  display: none !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.mobile-only {
  visibility: hidden;
}
@media (max-width: 1024px) {
  .mobile-only {
    visibility: visible;
  }
}
.desktop-only {
  visibility: hidden;
}
@media (min-width: 1024.02px) {
  .desktop-only {
    visibility: visible;
  }
}
/* React CSS Animations */
.react-fade-out {
  transition: opacity 300ms;
  opacity: 1;
}
.react-fade-out-enter-active,
.react-fade-out-enter-done {
  opacity: 0;
}
.btn .material-icons {
  margin: 0;
}
.btn.btn--primary {
  background-color: hsl(131, 65%, 32%);
  background-color: var(--op-color-primary-plus-two);
  box-shadow: inset 0 0 0 1px hsl(131, 65%, 38%);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
  color: hsl(131, 65%, 100%);
  color: var(--op-color-primary-on-plus-two);
}
.btn.btn--primary.btn--active {
  background-color: hsl(131, 65%, 64%);
  background-color: var(--op-color-primary-minus-five);
  box-shadow: inset 0 0 0 1px hsl(131, 65%, 32%);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
  color: hsl(131, 65%, 2%);
  color: var(--op-color-primary-on-minus-five);
}
.btn.btn--primary:hover {
  background-color: hsl(131, 65%, 29%);
  background-color: var(--op-color-primary-plus-three);
  box-shadow: inset 0 0 0 1px hsl(131, 65%, 35%);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
  color: hsl(131, 65%, 88%);
  color: var(--op-color-primary-on-plus-three);
}
.btn.btn--primary:focus-visible {
  background-color: hsl(131, 65%, 38%);
  background-color: var(--op-color-primary-base);
  box-shadow: inset 0 0 0 2px hsl(131, 65%, 32%),
    0 0 0 4px hsl(131, 65%, 24%);
  box-shadow: var(--op-input-focus-primary);
  color: hsl(131, 65%, 10%);
  color: var(--op-color-primary-on-base);
}
.btn.btn--primary.btn--no-border {
  background-color: transparent;
  box-shadow: none;
  color: hsl(131, 65%, 38%);
  color: var(--op-color-primary-base);
}
.btn.btn--primary.btn--no-border.btn--active {
  background-color: hsl(131, 65%, 24%);
  background-color: var(--op-color-primary-plus-five);
  box-shadow: inset 0 0 0 1px hsl(131, 65%, 29%);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
  color: hsl(131, 65%, 72%);
  color: var(--op-color-primary-on-plus-five);
}
.btn.btn--primary.btn--no-border:hover {
  background-color: hsl(131, 65%, 14%);
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: inset 0 0 0 1px hsl(131, 65%, 24%);
  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
  color: hsl(131, 65%, 88%);
  color: var(--op-color-primary-on-plus-eight);
}
.btn.btn--primary.btn--no-border:focus-visible {
  background-color: hsl(131, 65%, 14%);
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: inset 0 0 0 2px hsl(131, 65%, 32%),
    0 0 0 4px hsl(131, 65%, 24%);
  box-shadow: var(--op-input-focus-primary);
  color: hsl(131, 65%, 88%);
  color: var(--op-color-primary-on-plus-eight);
}
.btn--with-checkbox {
  margin: 0;
}
.btn--cta {
  background-color: hsl(131, 4%, 100%);
  background-color: var(--op-color-neutral-minus-max);
  color: hsl(131, 4%, 4%);
  color: var(--op-color-neutral-on-minus-max);
  box-shadow: none;
}
.material-icons {
  font-size: 2rem;
  font-size: var(--op-font-x-large);
  line-height: 1.6rem;
  line-height: var(--op-font-medium);
  color: hsl(0deg 100% 100%);
  color: var(--op-color-white);
  margin: 0 0.8rem;
  margin: 0 var(--op-space-x-small);
}
.icon--xs {
  font-size: 1.1rem;
}
.icon--sm {
  font-size: 1.3rem;
}
.icon--md {
  font-size: 1.9rem;
}
.icon--lg {
  font-size: 2.3rem;
}
.icon--xl {
  font-size: 2.8rem;
}
.icon--xxl {
  font-size: 3.3rem;
}
.icon--xxxl {
  font-size: 4rem;
}
.custom-icons {
  display: inline-block;
  width: 2.4rem;
  width: var(--op-space-x-large);
  height: 2.4rem;
  height: var(--op-space-x-large);
  font-size: inherit;
}
.custom-icons.icon--md-wide {
  max-width: 2rem;
  min-width: 2rem;
}
.custom-icons.icon--lg {
  width: 3.2rem;
  height: 3.2rem;
}
.custom-icons.icon--xl {
  width: 4.8rem;
  height: 4.8rem;
}
.custom-icons.icon--xxl {
  width: 5.4rem;
  height: 5.4rem;
}
.custom-icons svg {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
  vertical-align: initial;
}
.icon--circle {
  border: none;
  border-radius: 9999px;
  border-radius: var(--op-radius-pill);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0.8rem;
  padding: var(--op-space-x-small);
}
.icon--circle::after {
  color: hsl(131, 4%, 68%);
  color: var(--op-color-neutral-on-plus-three-alt);
  display: block;
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
  top: 52px;
  position: absolute;
  text-transform: uppercase;
  text-indent: 0;
  font-family: "Poppins", sans-serif;
  font-family: var(--op-font-family);
}
.icon--submit, .icon--reset, .icon--reset-all, .icon--pause, .icon--resume, .icon--start {
  width: 4.8rem;
  width: calc(var(--op-space-3x-large) + var(--op-space-x-small));
  height: 4.8rem;
  height: calc(var(--op-space-3x-large) + var(--op-space-x-small));
  max-width: 4.8rem;
  max-width: calc(var(--op-space-3x-large) + var(--op-space-x-small));
  font-size: var(---op-font-x-large);
  margin: 0 2rem;
  margin: 0 var(--op-space-large);
  border: 1px solid hsl(131, 4%, 10%);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-eight);
}
.icon--submit:disabled, .icon--reset:disabled, .icon--reset-all:disabled, .icon--pause:disabled, .icon--resume:disabled, .icon--start:disabled {
  background-color: hsl(131, 4%, 10%);
  background-color: var(--op-color-neutral-plus-eight);
}
.icon--start {
  font-size: 3.2rem;
  font-size: var(--op-font-4x-large);
  color: hsl(131, 65%, 2%);
  color: var(--op-color-alerts-notice-on-minus-three);
  background-color: hsl(131, 65%, 48%);
  background-color: var(--op-color-alerts-notice-minus-three);
}
.icon--start::after {
  content: "start";
}
.icon--resume {
  font-size: 3.2rem;
  font-size: var(--op-font-4x-large);
  background-color: hsl(131, 65%, 20%);
  background-color: var(--op-color-alerts-notice-plus-three);
  color: hsl(131, 65%, 98%);
  color: var(--op-color-alerts-notice-on-plus-three);
}
.icon--resume::after {
  content: "resume";
}
.icon--pause {
  color: hsl(0, 99%, 4%);
  color: var(--op-color-alerts-danger-on-minus-four);
  background-color: hsl(0, 99%, 52%);
  background-color: var(--op-color-alerts-danger-minus-four);
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  padding: 0.8rem;
  padding: var(--op-space-x-small);
}
.icon--pause::after {
  content: "Pause";
}
.icon--reset-all {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  color: hsl(0, 99%, 4%);
  color: var(--op-color-alerts-danger-on-minus-four);
  background-color: hsl(0, 99%, 52%);
  background-color: var(--op-color-alerts-danger-minus-four);
}
.icon--reset-all::after {
  content: "reset all";
}
.icon--reset {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  background-color: hsl(47, 100%, 16%);
  background-color: var(--op-color-alerts-warning-plus-four);
  color: hsl(47, 100%, 80%);
  color: var(--op-color-alerts-warning-on-plus-four);
}
.icon--reset::after {
  content: "reset";
}
.icon--submit {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  background-color: hsl(131, 65%, 32%);
  background-color: var(--op-color-alerts-notice-base);
  color: hsl(131, 65%, 99%);
  color: var(--op-color-alerts-notice-on-base);
}
.icon--submit::after {
  content: "submit";
}
.icon--cleared {
  position: relative;
  right: 10px;
  color: hsl(131, 65%, 48%);
  color: var(--op-color-alerts-notice-minus-three);
}
.icon--missed {
  position: relative;
  right: 10px;
  color: hsl(0, 99%, 52%);
  color: var(--op-color-alerts-danger-minus-four);
}
.icon--text {
  position: relative;
  top: 9%;
}
.icon--summary-cleared {
  font-size: var(---op-font-x-large);
  color: hsl(131, 65%, 2%);
  color: var(--op-color-alerts-notice-on-minus-three);
  background-color: hsl(131, 65%, 48%);
  background-color: var(--op-color-alerts-notice-minus-three);
  padding: 0.4rem;
  padding: var(--op-space-2x-small);
  margin: 1.6rem 1.2rem;
  margin: var(--op-space-medium) var(--op-space-small);
}
.icon--summary-missed {
  font-size: var(---op-font-x-large);
  color: hsl(0, 99%, 4%);
  color: var(--op-color-alerts-danger-on-minus-four);
  background-color: hsl(0, 99%, 52%);
  background-color: var(--op-color-alerts-danger-minus-four);
  padding: 0.4rem;
  padding: var(--op-space-2x-small);
  margin: 1.6rem 1.2rem;
  margin: var(--op-space-medium) var(--op-space-small);
}
.icon--play {
  border: 2px solid hsl(131, 65%, 48%);
  border: var(--op-border-width-large) solid var(--op-color-alerts-notice-minus-three);
  border-radius: 50%;
  background-color: hsl(0deg 0% 0%);
  background-color: var(--op-color-black);
  font-size: 2.4rem;
  font-size: var(--op-font-2x-large);
  line-height: 2.4rem;
  line-height: var(--op-font-2x-large);
}
.icon--btn {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  background-color: hsl(131, 4%, 16%);
  background-color: var(--op-color-neutral-plus-six);
  border-radius: 12px;
  border-radius: var(--op-radius-x-large);
  padding: 0.8rem;
  padding: var(--op-space-x-small);
  max-width: none;
  max-width: initial;
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
}
* {
  box-sizing: border-box;
}
a:active {
  color: inherit;
  text-decoration: inherit;
}
.strike {
  position: relative;
}
.strike::before {
  color: red;
  content: "";
  position: absolute;
  left: -0.2rem;
  left: calc(var(--op-space-3x-small)*-1);
  right: -0.2rem;
  right: calc(var(--op-space-3x-small)*-1);
  top: 50%;
  border-top: 2px solid;
  border-top: var(--op-border-width-large) solid;
  transform: rotate(-15deg);
}
.banner__wrapper,
.hero,
.top-bar,
.overview__wrapper,
.buzzer-ad__wrapper,
.demo,
.features__wrapper,
.testimonial__wrapper,
.testimonial__wrapper-large,
.faq__wrapper,
.plans__wrapper,
.closing__wrapper,
.footer {
  padding: 8rem 4.8rem;
  padding: var(--op-space-5x-large) calc(var(--op-space-3x-large) + var(--op-space-x-small));
  max-width: 110rem;
  max-width: calc(var(--op-space-large)*55);
  margin: auto;
}
@media (max-width: 511.98px) {
  .banner__wrapper,
  .hero,
  .top-bar,
  .overview__wrapper,
  .buzzer-ad__wrapper,
  .demo,
  .features__wrapper,
  .testimonial__wrapper,
  .testimonial__wrapper-large,
  .faq__wrapper,
  .plans__wrapper,
  .closing__wrapper,
  .footer {
    padding: 4rem 2.4rem;
    padding: var(--op-space-3x-large) var(--op-space-x-large);
  }
}
.homepage {
  background-color: hsl(131, 4%, 10%);
  background-color: var(--op-color-neutral-plus-eight);
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
.banner {
  background-color: hsl(131, 65%, 64%);
  background-color: var(--op-color-primary-minus-five);
  color: hsl(131, 65%, 2%);
  color: var(--op-color-primary-on-minus-five);
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
.banner__wrapper {
  display: flex;
  gap: 2.4rem;
  gap: var(--op-space-x-large);
  padding-top: 1.6rem;
  padding-top: var(--op-space-medium);
  padding-bottom: 1.6rem;
  padding-bottom: var(--op-space-medium);
  text-align: center;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 855px) {
  .banner__wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
  }
}
.banner__content {
  display: inline-block;
}
@media screen and (max-width: 855px) {
  .banner__content {
    grid-column: 1/3;
  }
}
.top-bar {
  padding-top: 1.2rem;
  padding-top: var(--op-space-small);
  padding-bottom: 1.2rem;
  padding-bottom: var(--op-space-small);
  text-align: right;
}
.hero {
  background-image: url(/assets/hero-image-55b65e333a22b59c395471573f58ef4b625b51ec94e54c87172ce9901b23e4fa.jpg);
  background-repeat: no-repeat;
  background-position: right;
  position: relative;
}
.hero__content {
  width: 60%;
}
.hero__app-preview {
  position: absolute;
  right: 5%;
  top: 220px;
}
.hero__app-preview img {
  height: 60rem;
  height: calc(var(--op-space-4x-large)*10);
  width: auto;
}
@media (max-width: 767.98px) {
  .hero__app-preview {
    top: 300px;
  }
  .hero__app-preview img {
    height: 525px;
  }
}
@media (max-width: 511.98px) {
  .hero__app-preview img {
    height: 450px;
  }
}
.hero__logo img {
  height: 170px;
  width: auto;
}
@media (max-width: 511.98px) {
  .hero__logo img {
    height: 10rem;
    height: calc(var(--op-space-5x-large) + var(--op-space-large));
  }
}
.hero__subheader {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 4.8rem;
  margin-top: calc(var(--op-space-3x-large) + var(--op-space-x-small));
}
.overview {
  background-color: hsl(131, 4%, 100%);
  background-color: var(--op-color-neutral-minus-max);
  color: hsl(131, 4%, 44%);
  color: var(--op-color-neutral-on-minus-max-alt);
}
.overview__details {
  margin-bottom: 2rem;
  margin-bottom: var(--op-space-large);
  width: 60%;
}
@media (max-width: 1023.98px) {
  .overview__details {
    width: 55%;
  }
}
@media (max-width: 767.98px) {
  .overview__details {
    width: 50%;
  }
}
@media (max-width: 511.98px) {
  .overview__details {
    width: 45%;
  }
}
.overview__strong {
  margin-bottom: 2rem;
  margin-bottom: var(--op-space-large);
  font-weight: 600;
  width: 60%;
}
@media (max-width: 1023.98px) {
  .overview__strong {
    width: 55%;
  }
}
@media (max-width: 767.98px) {
  .overview__strong {
    width: 50%;
  }
}
@media (max-width: 511.98px) {
  .overview__strong {
    width: 45%;
  }
}
.buzzer-ad {
  background-color: hsl(131, 4%, 100%);
  background-color: var(--op-color-neutral-minus-max);
  color: hsl(131, 4%, 44%);
  color: var(--op-color-neutral-on-minus-max-alt);
}
.buzzer-ad__wrapper {
  border-top: 1px solid hsl(131, 4%, 88%);
  border-top: var(--op-border-width) solid var(--op-color-neutral-minus-eight);
  padding-top: 2.4rem;
  padding-top: var(--op-space-x-large);
  display: flex;
  justify-content: space-between;
}
.buzzer-ad--left {
  max-width: 520px;
  width: 60%;
}
@media (max-width: 1023.98px) {
  .buzzer-ad--left {
    width: 55%;
  }
}
@media (max-width: 767.98px) {
  .buzzer-ad--left {
    width: 50%;
  }
}
@media (max-width: 511.98px) {
  .buzzer-ad--left {
    width: 45%;
  }
}
.buzzer-ad--right {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}
.buzzer-ad__title {
  padding-bottom: 2rem;
  padding-bottom: var(--op-space-large);
  font-size: 2rem;
  font-size: var(--op-font-x-large);
  font-weight: 600;
}
.buzzer-ad__details {
  display: grid;
  grid-template-columns: 0.5fr 10fr;
  grid-gap: 1.2rem;
  grid-gap: var(--op-space-small);
}
.buzzer-ad__details--point {
  height: 1.6rem;
  height: var(--op-space-medium);
  width: 1.6rem;
  width: var(--op-space-medium);
  border-radius: 1.2rem;
  border-radius: var(--op-space-small);
  justify-self: center;
  margin-top: 0.8rem;
  margin-top: var(--op-space-x-small);
  background-color: hsl(131, 65%, 38%);
  background-color: var(--op-color-primary-base);
}
.buzzer-ad__preview {
  text-align: center;
}
.buzzer-ad__preview img {
  max-width: 280px;
}
@media (max-width: 511.98px) {
  .buzzer-ad__preview {
    margin-top: 2.4rem;
    margin-top: var(--op-space-x-large);
  }
  .buzzer-ad__preview img {
    width: 100%;
    height: auto;
  }
}
.buzzer-ad__amazon-link {
  text-align: center;
  margin: 1.2rem auto 4rem;
  margin: var(--op-space-small) auto var(--op-space-3x-large);
  padding: 1.6rem 4rem;
  padding: var(--op-space-medium) var(--op-space-3x-large);
}
.buzzer-ad__amazon-link img {
  max-width: 20rem;
  max-width: calc(var(--op-space-large)*10);
}
@media (max-width: 511.98px) {
  .buzzer-ad__amazon-link img {
    max-width: 150px;
  }
}
.demo {
  padding: 4.8rem 4.8rem;
  padding: calc(var(--op-space-3x-large) + var(--op-space-x-small)) calc(var(--op-space-3x-large) + var(--op-space-x-small));
}
@media (max-width: 511.98px) {
  .demo {
    padding: 4rem 0;
    padding: var(--op-space-3x-large) 0;
  }
}
.demo__wrapper {
  text-align: center;
}
.demo__title {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  font-weight: 400;
  padding-bottom: 2rem;
  padding-bottom: var(--op-space-large);
  text-align: center;
  width: 100%;
}
@media (max-width: 511.98px) {
  .demo__details {
    padding: 0 1.6rem 1.6rem 1.6rem;
    padding: 0 var(--op-space-medium) var(--op-space-medium) var(--op-space-medium);
  }
}
.video-wrapper {
  height: 382px;
  margin: auto;
  padding-top: 2.4rem;
  padding-top: var(--op-space-x-large);
  position: relative;
  width: 680px;
}
@media (max-width: 511.98px) {
  .video-wrapper {
    height: 324px;
    max-width: 576px;
    width: 100%;
  }
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.features {
  background-color: hsl(131, 4%, 100%);
  background-color: var(--op-color-neutral-minus-max);
  color: hsl(131, 4%, 44%);
  color: var(--op-color-neutral-on-minus-max-alt);
}
@media screen and (min-width: 512px) {
  .feature--1 {
    order: 1;
  }
  .feature--2 {
    order: 2;
  }
  .feature--3 {
    order: 3;
  }
  .feature--4 {
    order: 4;
  }
  .feature--5 {
    order: 5;
  }
  .feature--6 {
    order: 6;
  }
  .feature--7 {
    order: 7;
  }
  .feature--8 {
    order: 8;
  }
}
.features-list {
  display: flex;
  flex-wrap: wrap;
}
.features__title {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  font-weight: 400;
  padding-bottom: 2rem;
  padding-bottom: var(--op-space-large);
  text-align: center;
  width: 100%;
}
.feature__heading {
  font-weight: 800;
}
.feature {
  display: flex;
  padding: 1.6rem;
  padding: var(--op-space-medium);
  width: 50%;
}
.features__wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.6rem;
  gap: var(--op-space-medium);
}
.feature__details {
  flex: 1 1 auto;
}
.testimonial {
  background-color: hsl(131, 65%, 32%);
  background-color: var(--op-color-primary-plus-two);
  color: hsl(131, 65%, 100%);
  color: var(--op-color-primary-on-plus-two);
}
.testimonial__wrapper-large {
  display: flex;
}
.testimonial__wrapper {
  max-width: 90rem;
  max-width: calc(var(--op-space-4x-large)*15);
  display: flex;
}
.testimonial__headshot {
  flex: 1 0 200px;
}
.testimonial__headshot img {
  height: 10rem;
  height: calc(var(--op-space-5x-large) + var(--op-space-large));
  width: 10rem;
  width: calc(var(--op-space-5x-large) + var(--op-space-large));
}
.testimonial__headshot-mike {
  flex: 1 0 200px;
}
.testimonial__headshot-mike img {
  height: 150px;
  width: 150px;
}
.testimonial__content {
  display: inline-block;
  flex: 1 1 auto;
}
.testimonial__content :nth-of-type(3) {
  padding-top: 2rem;
  padding-top: var(--op-space-large);
}
.testimonial__credit {
  font-style: italic;
  margin-bottom: 0;
  text-align: right;
}
.faq {
  background-color: hsl(131, 4%, 100%);
  background-color: var(--op-color-neutral-minus-max);
  color: hsl(131, 4%, 44%);
  color: var(--op-color-neutral-on-minus-max-alt);
}
.faq__wrapper {
  max-width: 90rem;
  max-width: calc(var(--op-space-4x-large)*15);
}
.faq-set {
  margin-bottom: 2.4rem;
  margin-bottom: var(--op-space-x-large);
}
.faq__title {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  font-weight: 400;
  padding-bottom: 2rem;
  padding-bottom: var(--op-space-large);
  text-align: center;
  width: 100%;
}
.faq__question {
  font-weight: bold;
}
a.faq__link {
  font-weight: bold;
  color: hsl(131, 4%, 72%);
  color: var(--op-color-neutral-on-plus-five);
}
a.faq__link:hover {
  background-color: hsl(131, 4%, 80%);
  background-color: var(--op-color-neutral-minus-seven);
}
.plans {
  background-color: hsl(131, 4%, 88%);
  background-color: var(--op-color-neutral-minus-eight);
  color: hsl(131, 4%, 4%);
  color: var(--op-color-neutral-on-minus-eight);
}
.plans__wrapper {
  width: 100%;
  max-width: 1250px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1110px) {
  .plans__wrapper {
    max-width: 1110px;
  }
}
.plans__introduction {
  margin-bottom: 1.6rem;
  margin-bottom: var(--op-space-medium);
  text-align: center;
}
.plans__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "a b c";
  margin-bottom: 1.6rem;
  margin-bottom: var(--op-space-medium);
  width: 100%;
  max-width: 90rem;
  max-width: calc(var(--op-space-4x-large)*15);
}
@media screen and (max-width: 1110px) {
  .plans__list {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.2rem;
    grid-gap: var(--op-space-small);
    grid-template-areas: "a b c";
  }
}
@media (max-width: 767.98px) {
  .plans__list {
    display: block;
  }
}
.plans__title {
  font-size: 2.8rem;
  font-size: var(--op-font-3x-large);
  font-weight: 400;
  padding-bottom: 2rem;
  padding-bottom: var(--op-space-large);
  text-align: center;
  width: 100%;
}
.plan {
  background-color: hsl(0deg 100% 100%);
  background-color: var(--op-color-white);
  min-width: 240px;
  padding: 2.4rem 1.2rem 20rem 1.2rem;
  padding: var(--op-space-x-large) var(--op-space-small) calc(var(--op-space-large)*10) var(--op-space-small);
  text-align: center;
  position: relative;
}
.plan--1,
.plan--2,
.plan--3 {
  margin-left: 0.8rem;
  margin-left: var(--op-space-x-small);
  margin-right: 0.8rem;
  margin-right: var(--op-space-x-small);
}
.plan--1 {
  grid-column: 1;
  grid-area: a;
}
.plan--2 {
  grid-column: 2;
  grid-area: b;
}
.plan--3 {
  grid-column: 3;
  grid-area: c;
}
.plan--others {
  background: none;
  text-align: center;
}
.other-plans {
  padding: 0 1.2rem 1.6rem;
  padding: 0 var(--op-space-small) var(--op-space-medium);
}
@media screen and (max-width: 1110px) {
  .other-plans {
    margin: 1.2rem auto 1.2rem;
    margin: var(--op-space-small) auto var(--op-space-small);
  }
}
.plan-feature-list {
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
}
.plan__title {
  font-weight: 600;
  font-size: 2rem;
  font-size: var(--op-font-x-large);
}
.plan__icon img {
  margin: 2rem 0 0;
  margin: var(--op-space-large) 0 0;
  height: 8rem;
  height: var(--op-space-5x-large);
  width: 8rem;
  width: var(--op-space-5x-large);
}
.plan__icon-participant img {
  margin: 2.4rem 0 0.8rem;
  margin: var(--op-space-x-large) 0 var(--op-space-x-small);
  height: 6.8rem;
  height: calc(var(--op-space-4x-large) + var(--op-space-x-small));
  width: 6.8rem;
  width: calc(var(--op-space-4x-large) + var(--op-space-x-small));
}
.plan-feature-list__subtitle {
  font-weight: bold;
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
  margin: 1.6rem 0 1.6rem;
  margin: var(--op-space-medium) 0 var(--op-space-medium);
}
.plan-feature-list__item {
  font-weight: bold;
  margin: 1.6rem 0 1.6rem;
  margin: var(--op-space-medium) 0 var(--op-space-medium);
}
.plan-feature-list__link,
.plan-feature-list__link:visited {
  color: hsl(131, 4%, 100%);
  color: var(--op-color-neutral-on-plus-one);
  text-decoration: underline;
}
.plan-feature-list__link:hover {
  color: hsl(0deg 100% 100%);
  color: var(--op-color-white);
}
.plan-feature-list__proposed {
  font-weight: 200;
  color: hsl(131, 4%, 72%);
  color: var(--op-color-neutral-on-plus-five);
  margin: 1.6rem 0 1.6rem;
  margin: var(--op-space-medium) 0 var(--op-space-medium);
}
.plan-cta {
  position: absolute;
  bottom: 1.6rem;
  bottom: var(--op-space-medium);
  left: 0;
  right: 0;
  text-align: center;
}
.plans__guarantee {
  text-align: center;
  margin: auto;
  max-width: 924px;
}
.other-plans__action {
  margin: 1.2rem auto 4rem;
  margin: var(--op-space-small) auto var(--op-space-3x-large);
  padding: 1.6rem 4rem;
  padding: var(--op-space-medium) var(--op-space-3x-large);
}
.closing {
  background-color: hsl(131, 4%, 100%);
  background-color: var(--op-color-neutral-minus-max);
  color: hsl(131, 4%, 44%);
  color: var(--op-color-neutral-on-minus-max-alt);
}
.closing__wrapper {
  max-width: 80rem;
  max-width: calc(var(--op-space-5x-large)*10);
  text-align: center;
}
.closing__tagline {
  font-weight: 600;
  font-size: 2rem;
  font-size: var(--op-font-x-large);
}
.closing__overview {
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
.closing__overview img {
  padding: 0 1.2rem;
  padding: 0 var(--op-space-small);
  position: relative;
  top: -0.2rem;
  top: calc(var(--op-space-3x-small)*-1);
}
.closing__overview a:hover {
  background: none;
}
.closing__overview a[href^="tel:"] {
  text-decoration: underline;
}
.footer {
  text-align: center;
}
.footer__logo {
  padding-top: 2rem;
  padding-top: var(--op-space-large);
}
.footer__logo img {
  height: 6.8rem;
  height: calc(var(--op-space-4x-large) + var(--op-space-x-small));
  width: auto;
  margin-bottom: 1.2rem;
  margin-bottom: var(--op-space-small);
}
.footer__privacy-policy a {
  color: hsl(131, 4%, 72%);
  color: var(--op-color-neutral-on-plus-five);
}
span.homepage__icon--sm {
  font-size: 3.8rem;
  font-size: calc(var(--op-font-3x-large) + var(--op-font-2x-small));
  min-width: 6rem;
  min-width: var(--op-space-4x-large);
  min-height: 6rem;
  min-height: var(--op-space-4x-large);
}
span.homepage__icon--lg {
  font-size: 4.4rem;
  font-size: calc(var(--op-font-4x-large) + var(--op-font-x-small));
  min-width: 6.8rem;
  min-width: calc(var(--op-space-4x-large) + var(--op-space-x-small));
  min-height: 6.8rem;
  min-height: calc(var(--op-space-4x-large) + var(--op-space-x-small));
}
span.homepage__icon--xl {
  font-size: 4.8rem;
  font-size: calc(var(--op-font-4x-large) + var(--op-font-medium));
  min-width: 8rem;
  min-width: var(--op-space-5x-large);
  min-height: 8rem;
  min-height: var(--op-space-5x-large);
}
span.homepage__icon--xxl {
  font-size: 6.4rem;
  font-size: calc(var(--op-font-4x-large)*2);
  min-width: 10rem;
  min-width: calc(var(--op-space-5x-large) + var(--op-space-large));
  min-height: 10rem;
  min-height: calc(var(--op-space-5x-large) + var(--op-space-large));
}
.tou {
  font-size: 1.6rem;
  font-size: var(--op-font-medium);
}
.tou-top-bar {
  padding: 1.2rem 4.8rem;
  padding: var(--op-space-small) calc(var(--op-space-3x-large) + var(--op-space-x-small));
  max-width: 110rem;
  max-width: calc(var(--op-space-large)*55);
  margin: auto;
}
@media (max-width: 511.98px) {
  .tou-top-bar {
    padding: 1.2rem 2.4rem;
    padding: var(--op-space-small) var(--op-space-x-large);
  }
}
.tou__home-button {
  color: white;
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
  padding: 0.8rem 1.6rem;
  padding: var(--op-space-x-small) var(--op-space-medium);
  border: 1px solid white;
  border: var(--op-border-width) solid white;
  display: inline-block;
  border-radius: 24px;
  border-radius: var(--op-radius-3x-large);
  float: left;
  margin-top: 4.8rem;
  margin-top: calc(var(--op-space-3x-large) + var(--op-space-x-small));
}
.tou__login-button {
  color: white;
  font-size: 1.2rem;
  font-size: var(--op-font-x-small);
  padding: 0.8rem 1.6rem;
  padding: var(--op-space-x-small) var(--op-space-medium);
  border: 1px solid white;
  border: var(--op-border-width) solid white;
  display: inline-block;
  border-radius: 24px;
  border-radius: var(--op-radius-3x-large);
  float: right;
  margin-top: 4.8rem;
  margin-top: calc(var(--op-space-3x-large) + var(--op-space-x-small));
}
.tou-top-bar__logo img {
  height: 6.8rem;
  height: calc(var(--op-space-4x-large) + var(--op-space-x-small));
  width: auto;
  margin: 0 auto 1.6rem;
  margin: 0 auto var(--op-space-medium);
}
.tou-header {
  text-align: center;
}
.tou-information {
  background-color: hsl(131, 4%, 100%);
  background-color: var(--op-color-neutral-minus-max);
  color: hsl(131, 4%, 44%);
  color: var(--op-color-neutral-on-minus-max-alt);
  padding: 8rem 4.8rem;
  padding: var(--op-space-5x-large) calc(var(--op-space-3x-large) + var(--op-space-x-small));
  max-width: 110rem;
  max-width: calc(var(--op-space-large)*55);
  margin: auto;
}
@media (max-width: 511.98px) {
  .tou-information {
    padding: 4rem 2.4rem;
    padding: var(--op-space-3x-large) var(--op-space-x-large);
  }
}
.tou-information__title {
  margin-bottom: 2rem;
  margin-bottom: var(--op-space-large);
  text-decoration: underline;
  text-align: center;
}
.tou-information__subtitle {
  font-weight: 800;
}
.tou-footer__logo img {
  height: 6.8rem;
  height: calc(var(--op-space-4x-large) + var(--op-space-x-small));
  width: auto;
  margin-bottom: 1.2rem;
  margin-bottom: var(--op-space-small);
}