@import "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block";
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap");
/**
 * tom-select.css (v2.5.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
  overflow: auto;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0px solid white;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0px 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}
.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}
.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}
.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}
.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}
/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}
.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}
.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}
.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}
.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}
:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}
.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-wrapper {
  position: relative;
}
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/* Third party Vendors */
/* 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;
  }
}
/* Fonts */
/*
  Instead of hosting the font files locally which requires a compiler to handle them, we pull fonts
  from Google's CDN. For more information on the variable font, see:
  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
*/
/*
Noto Sans supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/*
  Noto Serif supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/* Noto Sans and Noto Serif */
/*
  See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
  This import of Material Symbols supports:
  font weight set through: font-variation-settings: 'wght' {100..700}
*/
/* Material Symbols */
/* Tokens */
: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-time: 300ms;
  --op-transition-modal: all var(--op-transition-modal-time) 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% {
    inset-inline-end: -100%;
  }
  /* Animate onto the screen for 0.5s */
  10% {
    inset-inline-end: var(--op-space-large);
  }
  /* Stay on the screen for 3s */
  70% {
    inset-inline-end: var(--op-space-large);
  }
  /* Animate off the screen for 1.5s */
  100% {
    inset-inline-end: -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==");
  }
}
/* Base styles and utilities */
/* 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: var(--op-font-family);
  font-size: 62.5%; /* 1rem = 10px */
}
body {
  overflow: auto;
  background: var(--op-color-background);
  block-size: 100vh;
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
}
button {
  background: none;
  cursor: pointer;
}
button,
input[type=submit] {
  border: 0;
}
label {
  display: inline-block;
  &:hover {
    cursor: pointer;
  }
}
a {
  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 {
  font-weight: var(--op-font-weight-normal);
  margin-block: 0 var(--op-space-small);
}
h1 {
  font-size: var(--op-font-3x-large);
}
h2 {
  font-size: var(--op-font-2x-large);
}
h3 {
  font-size: var(--op-font-large);
}
h4 {
  font-size: var(--op-font-medium);
}
h5 {
  font-size: var(--op-font-small);
}
h6 {
  font-size: var(--op-font-x-small);
}
p {
  font-size: var(--op-font-medium);
  margin-block-end: var(--op-space-small);
}
small {
  font-size: var(--op-font-small);
}
.app-with-sidebar {
  display: grid;
  block-size: 100vh;
  grid-template-columns: auto 1fr auto;
  inline-size: 100%;
}
.app-body {
  display: flex;
  overflow: auto;
  flex-direction: column;
}
.app__header {
  position: sticky;
  z-index: var(--op-z-index-header);
  flex-grow: 0;
  flex-shrink: 0;
  inset-block-start: 0;
}
.app__content {
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  margin: 0 auto;
  inline-size: 100%;
  max-inline-size: var(--op-breakpoint-medium);
}
.app__content-no-margin {
  flex-grow: 1;
  padding: 0 var(--op-space-large);
  inline-size: 100%;
  overflow-y: auto;
}
.app__footer {
  position: sticky;
  z-index: var(--op-z-index-footer);
  flex-grow: 0;
  flex-shrink: 0;
  inset-block-end: 0;
}
/*
  <html lang='en'>
    <head>...</head>
    <body class="op-page">
      <div class="op-page__sidebar">...</div>
      <div class="op-page__main">
        <div class="op-page__main-header">...</div>
        <div class="op-page__main-content">...</div>
        <div class="op-page__main-footer">...</div>
      </div>
      <div class="op-page__sidebar op-page__sidebar--right">...</div>
    </body>
  </html>
*/
:root:has(.op-page) {
  /* Reset existing Optics layout */
  overflow: unset;
  body {
    overflow: unset;
  }
  /* New Layout */
  html,
  body {
    padding: 0;
    margin: 0;
    block-size: 100%;
    min-block-size: 100%;
  }
}
.op-page {
  display: grid;
  grid-template-areas: "sidebar-left main sidebar-right";
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  min-block-size: 100dvh;
  .op-page__sidebar {
    grid-area: sidebar-left;
    &.op-page__sidebar--right {
      grid-area: sidebar-right;
    }
  }
  .op-page__main {
    grid-area: main;
  }
  .op-page__sidebar {
    position: sticky;
    z-index: var(--op-z-index-sidebar);
    block-size: 100dvh;
    inset-block-start: 0;
    max-block-size: 100dvh;
    > * {
      block-size: 100%;
    }
  }
  .op-page__main {
    display: grid;
    grid-template-areas: "main-header" "main-content" "main-footer";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    min-block-size: 100%;
    .op-page__main-header {
      grid-area: main-header;
    }
    .op-page__main-content {
      grid-area: main-content;
    }
    .op-page__main-footer {
      grid-area: main-footer;
    }
    .op-page__main-header {
      position: sticky;
      z-index: var(--op-z-index-header);
      inset-block-start: 0;
    }
    .op-page__main-content {
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: var(--op-breakpoint-medium);
      padding-block: var(--op-space-medium);
      padding-inline: var(--op-space-large);
    }
    .op-page__main-footer {
      position: sticky;
      z-index: var(--op-z-index-footer);
      inset-block-end: 0;
    }
  }
}
/* Container Properties */
.container {
  inline-size: 100%;
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: var(--op-breakpoint-medium);
  padding-block: 0;
  padding-inline: var(--op-space-large);
}
.container--sm {
  max-inline-size: var(--op-breakpoint-small);
}
.container--md-padding {
  padding: 0 var(--op-space-medium);
}
.container--sm-padding {
  padding: 0 var(--op-space-small);
}
.container--xs {
  max-inline-size: var(--op-breakpoint-x-small);
}
/* Width Properties */
.full-width {
  inline-size: 100%;
}
.half-width {
  inline-size: 50%;
}
.four-fifths-width {
  inline-size: 80%;
}
.three-fifths-width {
  inline-size: 60%;
}
.two-fifths-width {
  inline-size: 40%;
}
.one-fifth-width {
  inline-size: 20%;
}
.three-quarters-width {
  inline-size: 75%;
}
.one-quarter-width {
  inline-size: 25%;
}
.two-thirds-width {
  inline-size: 66.6666666667%;
}
.one-third-width {
  inline-size: 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: var(--op-space-2x-small);
  --op-gap: var(--op-space-2x-small);
}
.gap-xs {
  gap: var(--op-space-x-small);
  --op-gap: var(--op-space-x-small);
}
.gap-sm {
  gap: var(--op-space-small);
  --op-gap: var(--op-space-small);
}
.gap-md {
  gap: var(--op-space-medium);
  --op-gap: var(--op-space-medium);
}
.gap-lg {
  gap: var(--op-space-large);
  --op-gap: var(--op-space-large);
}
.gap-xl {
  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: start;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: end;
}
.text-justify {
  text-align: justify;
}
/* Box Margin */
.margin-xl {
  margin: var(--op-space-x-large);
}
.margin-lg {
  margin: var(--op-space-large);
}
.margin-md {
  margin: var(--op-space-medium);
}
.margin-sm {
  margin: var(--op-space-small);
}
.margin-xs {
  margin: var(--op-space-x-small);
}
.margin-none {
  margin: 0;
}
.margin-auto {
  margin: auto;
}
/* Vertical Margin */
.margin-y-xl {
  margin-block: var(--op-space-x-large);
}
.margin-y-lg {
  margin-block: var(--op-space-large);
}
.margin-y-md {
  margin-block: var(--op-space-medium);
}
.margin-y-sm {
  margin-block: var(--op-space-small);
}
.margin-y-xs {
  margin-block: var(--op-space-x-small);
}
.margin-y-none {
  margin-block: 0;
}
/* Horizontal Margin */
.margin-x-xl {
  margin-inline: var(--op-space-x-large);
}
.margin-x-lg {
  margin-inline: var(--op-space-large);
}
.margin-x-md {
  margin-inline: var(--op-space-medium);
}
.margin-x-sm {
  margin-inline: var(--op-space-small);
}
.margin-x-xs {
  margin-inline: var(--op-space-x-small);
}
.margin-x-none {
  margin-inline: 0;
}
/* Top Margin */
.margin-top-xl {
  margin-block-start: var(--op-space-x-large);
}
.margin-top-lg {
  margin-block-start: var(--op-space-large);
}
.margin-top-md {
  margin-block-start: var(--op-space-medium);
}
.margin-top-sm {
  margin-block-start: var(--op-space-small);
}
.margin-top-xs {
  margin-block-start: var(--op-space-x-small);
}
.margin-top-none {
  margin-block-start: 0;
}
/* Bottom Margin */
.margin-bottom-xl {
  margin-block-end: var(--op-space-x-large);
}
.margin-bottom-lg {
  margin-block-end: var(--op-space-large);
}
.margin-bottom-md {
  margin-block-end: var(--op-space-medium);
}
.margin-bottom-sm {
  margin-block-end: var(--op-space-small);
}
.margin-bottom-xs {
  margin-block-end: var(--op-space-x-small);
}
.margin-bottom-none {
  margin-block-end: 0;
}
/* Right Margin */
.margin-right-xl {
  margin-inline-end: var(--op-space-x-large);
}
.margin-right-lg {
  margin-inline-end: var(--op-space-large);
}
.margin-right-md {
  margin-inline-end: var(--op-space-medium);
}
.margin-right-sm {
  margin-inline-end: var(--op-space-small);
}
.margin-right-xs {
  margin-inline-end: var(--op-space-x-small);
}
.margin-right-none {
  margin-inline-start: 0;
}
/* Left Margin */
.margin-left-xl {
  margin-inline-start: var(--op-space-x-large);
}
.margin-left-lg {
  margin-inline-start: var(--op-space-large);
}
.margin-left-md {
  margin-inline-start: var(--op-space-medium);
}
.margin-left-sm {
  margin-inline-start: var(--op-space-small);
}
.margin-left-xs {
  margin-inline-start: var(--op-space-x-small);
}
.margin-left-none {
  margin-inline-start: 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;
  block-size: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
}
/* Advanced Layout Utilities */
/* Equivalent to .flex.flex-col.gap-md */
.op-stack {
  display: flex;
  flex-direction: column;
}
:where(.op-stack) {
  gap: var(--op-space-medium);
}
/* Equivalent to .flex.flex-wrap.items-center.gap-md */
.op-cluster {
  display: flex;
  flex-wrap: wrap;
}
:where(.op-cluster) {
  align-items: center;
  gap: var(--op-space-medium);
}
/* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
.op-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
:where(.op-split) {
  align-items: center;
  gap: var(--op-space-medium);
}
/* Components */
.accordion {
  /* Public API (customizable component options) */
  --_op-accordion-summary-min-height: calc(var(--op-size-unit)*8); /* 32px */
  overflow: hidden;
  interpolate-size: allow-keywords;
  /* Elements */
  summary {
    display: grid;
    align-items: center;
    cursor: pointer;
    gap: var(--op-space-2x-small);
    grid-template-columns: auto 1fr auto;
    min-block-size: var(--_op-accordion-summary-min-height);
    &::marker,
    &::-webkit-details-marker {
      display: none;
      content: "";
    }
    .accordion__label {
      color: var(--op-color-neutral-on-plus-max);
      font-size: var(--op-font-x-small);
      font-weight: var(--op-font-weight-semi-bold);
    }
    .accordion__marker {
      --__op-icon-font-size: var(--_op-icon-font-size-x-large);
      --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
      justify-self: flex-end;
      transition: var(--op-transition-accordion);
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
  }
  &::details-content {
    block-size: 0;
    transition: var(--op-transition-accordion-content);
  }
  &[open] {
    summary .accordion__marker {
      rotate: 0.25turn;
    }
    &::details-content {
      block-size: auto;
    }
  }
  /* Modifiers */
  &.accordion--disable-animation {
    summary .accordion__marker {
      transition: none;
    }
    &::details-content {
      transition: none;
    }
  }
}
.alert {
  display: flex;
  align-items: center;
  padding: var(--op-space-x-small) var(--op-space-medium);
  border-radius: var(--op-radius-medium);
  gap: var(--op-space-small);
  /* Elements */
  .alert__icon {
    --__op-icon-font-size: var(--_op-icon-font-size-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
    --__op-icon-weight: var(--_op-icon-weight-bold);
    line-height: var(--op-line-height-dense);
  }
  .alert__messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--op-space-2x-small);
  }
  .alert__title {
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-medium);
  }
  .alert__description {
    font-size: var(--op-font-small);
  }
  /* Modifiers */
  &.alert--flash {
    position: fixed;
    z-index: var(--op-z-index-alert-group);
    animation: var(--op-animation-flash);
    inset-block-start: var(--op-space-large);
    inset-inline-end: var(--op-space-large);
  }
  &.alert--warning {
    background-color: var(--op-color-alerts-warning-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-plus-eight);
    .alert__title {
      color: var(--op-color-alerts-warning-on-plus-eight-alt);
    }
    &.alert--muted {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-warning-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: none;
      color: var(--op-color-alerts-warning-on-base);
      .alert__title {
        color: var(--op-color-alerts-warning-on-base-alt);
      }
    }
  }
  /* alert--alert is an alias for alert--danger. See Alert.mdx for reasoning. */
  &.alert--danger,
  &.alert--alert {
    background-color: var(--op-color-alerts-danger-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-plus-eight);
    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-danger-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */
    &.alert--muted {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-danger-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-base);
      .alert__title {
        color: var(--op-color-alerts-danger-on-base-alt);
      }
    }
  }
  &.alert--info {
    background-color: var(--op-color-alerts-info-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-plus-eight);
    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-info-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */
    &.alert--muted {
      background-color: var(--op-color-alerts-info-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-info-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-info-base);
      box-shadow: none;
      color: var(--op-color-alerts-info-on-base);
      .alert__title {
        color: var(--op-color-alerts-info-on-base-alt);
      }
    }
  }
  &.alert--notice {
    background-color: var(--op-color-alerts-notice-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-plus-eight);
    /* stylelint-disable no-descending-specificity */
    .alert__title {
      color: var(--op-color-alerts-notice-on-plus-eight-alt);
    }
    /* stylelint-enable no-descending-specificity */
    &.alert--muted {
      background-color: var(--op-color-alerts-notice-plus-five);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-plus-five);
      .alert__title {
        color: var(--op-color-alerts-notice-on-plus-five-alt);
      }
    }
    &.alert--filled {
      background-color: var(--op-color-alerts-notice-base);
      box-shadow: none;
      color: var(--op-color-alerts-notice-on-base);
      .alert__title {
        color: var(--op-color-alerts-notice-on-base-alt);
      }
    }
  }
}
.avatar {
  /* Public API (customizable component options) */
  --_op-avatar-border-radius: var(--op-radius-circle);
  --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
  --_op-avatar-outer-border-color: var(--op-color-neutral-base);
  --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
  --_op-avatar-outer-border-width: var(--op-border-width-large);
  --_op-avatar-disabled-opacity: var(--op-opacity-disabled);
  --_op-avatar-hover-opacity: var(--op-opacity-overlay);
  --_op-avatar-size-small: calc(var(--op-size-unit)*8); /* 32px */
  --_op-avatar-size-medium: calc(var(--op-size-unit)*10); /* 40px */
  --_op-avatar-size-large: calc(var(--op-size-unit)*14); /* 56px */
  /* Private API (component option defaults) */
  --__op-avatar-size: var(--_op-avatar-size-large);
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: var(--_op-avatar-border-radius);
  block-size: var(--__op-avatar-size);
  inline-size: var(--__op-avatar-size);
  min-block-size: var(--__op-avatar-size);
  min-inline-size: var(--__op-avatar-size);
  &::before {
    position: absolute;
    z-index: 2;
    content: "";
    inset: 0;
  }
  &::after {
    position: absolute;
    z-index: 3;
    border-radius: var(--_op-avatar-border-radius);
    box-shadow: inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color), inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
    content: "";
    inset: 0;
  }
  img {
    block-size: 100%;
    inline-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  /* Disabled State */
  &.avatar--disabled {
    opacity: var(--_op-avatar-disabled-opacity);
    pointer-events: none;
  }
  /* Focus State */
  &:focus,
  &:focus-visible,
  &:focus-within {
    outline: none;
  }
  /* Hover State */
  &:hover:not(div, .avatar--disabled) {
    --_op-avatar-inner-border-color: var(--op-color-primary-base);
    --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
    cursor: pointer;
    &::before {
      background-color: var(--op-color-primary-base);
      opacity: var(--_op-avatar-hover-opacity);
    }
  }
  &:focus-visible:not(.avatar--disabled) {
    --_op-avatar-outer-border-color: var(--op-color-primary-base);
    cursor: pointer;
  }
  /* Size Modifiers */
  &.avatar--small {
    --__op-avatar-size: var(--_op-avatar-size-small);
  }
  &.avatar--medium {
    --__op-avatar-size: var(--_op-avatar-size-medium);
  }
  &.avatar--large {
    --__op-avatar-size: var(--_op-avatar-size-large);
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-base);
  color: var(--op-color-neutral-on-base);
  cursor: inherit;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  gap: var(--op-space-x-small);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-x-small);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  /* Elements */
  .material-symbols-outlined {
    font-size: var(--op-font-small);
  }
  /* Modifiers */
  &.badge--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
  }
  &.badge--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
  }
  &.badge--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
  }
  &.badge--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);
  }
  &.badge--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);
  }
  &.badge--pill {
    border-radius: var(--op-radius-pill);
  }
  &.badge--notification-right {
    position: absolute;
    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
    inset-block-start: 0;
    inset-inline-end: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(50%);
  }
  &.badge--notification-left {
    position: absolute;
    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-50%);
  }
}
.breadcrumbs {
  /* Public API (customizable component options) */
  --_op-breadcrumbs-font-size-small: var(--op-font-x-small);
  --_op-breadcrumbs-font-size-large: var(--op-font-small);
  /* Private API (component option defaults) */
  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--op-space-x-small);
  /* Elements */
  .breadcrumbs__link {
    font-size: var(--__op-breadcrumbs-font-size);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  .breadcrumbs__text {
    font-size: var(--__op-breadcrumbs-font-size);
    font-weight: var(--op-font-weight-bold);
  }
  /* Modifiers */
  &.breadcrumbs--small {
    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
  }
  &.breadcrumbs--large {
    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
  }
}
.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;
  align-items: center;
  justify-content: center;
  padding: var(--__op-btn-padding);
  border-radius: var(--op-radius-medium);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: pointer;
  font-size: var(--__op-btn-font-size);
  font-weight: var(--op-font-weight-normal);
  gap: var(--op-space-x-small);
  min-block-size: var(--__op-btn-height);
  text-align: center;
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;
  /* Modifiers */
  /* Default Active State */
  &.btn--active {
    background-color: var(--op-color-primary-plus-five);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: var(--op-color-primary-on-plus-five);
  }
  /* Default Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
    color: var(--op-color-primary-on-plus-eight);
  }
  /* Default Focus State */
  &:focus-visible {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-neutral-on-plus-eight);
  }
  /* Default Borderless State */
  &.btn--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);
    /* Default Borderless + Active State. */
    &.btn--active {
      background-color: var(--op-color-primary-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
      color: var(--op-color-primary-on-plus-five);
    }
    /* Default Borderless + Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
      color: var(--op-color-primary-on-plus-eight);
    }
    /* Default Borderless + Focus State */
    &:focus-visible {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
  /* Pill Modifier */
  &.btn--pill {
    border-radius: var(--op-radius-pill);
  }
  /* Icon Modifier */
  &.btn--icon {
    padding: 0;
    inline-size: var(--__op-btn-height);
    min-inline-size: var(--__op-btn-height);
  }
  /* Icon With Label Modifier */
  &.btn--icon-with-label {
    flex-direction: column;
    padding: var(--op-space-small);
    gap: var(--op-space-3x-small);
  }
  /* Size Modifiers */
  &.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--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--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--disabled,
  &:disabled {
    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--with-badge {
    position: relative;
  }
  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }
  /* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */
  /* --op-breakpoint-small */
  /* Variant Modifiers */
  &.btn--primary {
    background-color: var(--op-color-primary-base);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
    /* Active State */
    &.btn--active {
      background-color: var(--op-color-primary-minus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-minus-five);
    }
    /* Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-one);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }
    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-primary-base);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-base);
    }
    /* Borderless State */
    &.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-primary-base);
      /* Borderless + Active State */
      &.btn--active {
        background-color: var(--op-color-primary-plus-five);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
        color: var(--op-color-primary-on-plus-five);
      }
      /* Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
        color: var(--op-color-primary-on-plus-eight);
      }
      /* Borderless + Focus State */
      &:focus-visible {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
  }
  &.btn--destructive,
  &.btn--delete {
    background-color: var(--op-color-alerts-danger-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
    /* Active State */
    &.btn--active {
      background-color: var(--op-color-alerts-danger-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
      color: var(--op-color-alerts-danger-on-plus-five);
    }
    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-danger-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-minus-two);
    }
    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-alerts-danger-base);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-base);
    }
  }
  &.btn--warning {
    background-color: var(--op-color-alerts-warning-base);
    box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
    /* Active State */
    &.btn--active {
      background-color: var(--op-color-alerts-warning-plus-five);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
      color: var(--op-color-alerts-warning-on-plus-five);
    }
    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-warning-minus-two);
      box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
      color: var(--op-color-alerts-warning-on-minus-two);
    }
    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-alerts-warning-base);
      box-shadow: var(--op-input-focus-warning);
      color: var(--op-color-alerts-warning-on-base);
    }
  }
}
@media (width <= 768px) {
  .btn {
    --__op-btn-height: var(--_op-btn-height-large);
    --__op-btn-font-size: var(--_op-btn-font-large);
    &.btn--small,
    &.btn--medium,
    &.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);
    }
  }
}
.btn-group {
  --op-btn-group-hover-z-index: 1;
  --op-btn-group-active-z-index: 2;
  --op-btn-group-focus-z-index: 3;
  display: inline-flex;
  align-items: center;
  .btn {
    + .btn {
      margin-inline-start: calc(var(--op-border-width)*-1);
    }
    &:hover {
      z-index: var(--op-btn-group-hover-z-index);
    }
    &.btn--active {
      z-index: var(--op-btn-group-active-z-index);
    }
    &:focus,
    &:focus-within,
    &:focus-visible {
      z-index: var(--op-btn-group-focus-z-index);
    }
    &:not(:first-child, :last-child) {
      border-radius: 0;
    }
    &:first-child:not(:last-child) {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
    }
    &:last-child:not(:first-child) {
      border-end-start-radius: 0;
      border-start-start-radius: 0;
    }
  }
}
.btn-group-toolbar {
  display: flex;
  flex-wrap: wrap;
}
.card {
  /* Public API (customizable component options) */
  --_op-card-padding: var(--op-space-medium);
  --_op-card-box-shadow: var(--op-border-all) var(--op-color-border);
  --_op-card-radius: var(--op-radius-medium);
  position: relative;
  border-radius: var(--_op-card-radius);
  background-color: var(--op-color-background);
  box-shadow: var(--_op-card-box-shadow);
  color: var(--op-color-on-background);
  font-size: var(--op-font-medium);
  line-height: var(--op-line-height-base);
  /* Modifiers */
  &.card--condensed {
    --_op-card-padding: var(--op-space-x-small);
  }
  &.card--padded {
    padding: var(--_op-card-padding);
  }
  &.card--shadow-x-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-small);
  }
  &.card--shadow-small {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-small);
  }
  &.card--shadow-medium {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-medium);
  }
  &.card--shadow-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-large);
  }
  &.card--shadow-x-large {
    box-shadow: var(--_op-card-box-shadow), var(--op-shadow-x-large);
  }
  /* Elements */
  .card__header,
  .card__body,
  .card__footer {
    padding: var(--_op-card-padding);
  }
  .card__header {
    border-start-end-radius: var(--_op-card-radius);
    border-start-start-radius: var(--_op-card-radius);
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }
  }
  .card__footer {
    border-end-end-radius: var(--_op-card-radius);
    border-end-start-radius: var(--_op-card-radius);
  }
}
.confirm-dialog-wrapper {
  position: fixed;
  z-index: var(--op-z-index-dialog);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  inset: 0;
  outline: 0;
  visibility: hidden;
  /* Elements */
  .confirm-dialog-wrapper__backdrop {
    position: fixed;
    z-index: var(--op-z-index-dialog-backdrop);
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-modal);
    visibility: hidden;
  }
  /* Modifiers */
  &.confirm-dialog-wrapper--active {
    visibility: visible;
    .confirm-dialog {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }
    .confirm-dialog-wrapper__backdrop {
      opacity: var(--op-opacity-half);
      visibility: visible;
    }
  }
}
/* stylelint-disable no-descending-specificity */
.confirm-dialog {
  /* Public API (customizable component options) */
  --_op-confirm-dialog-width: calc(var(--op-size-unit)*100); /* 400px */
  z-index: var(--op-z-index-dialog-content);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  inline-size: var(--_op-confirm-dialog-width);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);
  .confirm-dialog__header,
  .confirm-dialog__body,
  .confirm-dialog__footer {
    padding: var(--op-space-medium);
  }
  .confirm-dialog__header {
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }
  .confirm-dialog__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
  }
  .confirm-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
/* stylelint-enable no-descending-specificity */
.content-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--op-space-medium);
  padding-block: var(--op-space-medium);
  .content-header__details {
    display: grid;
    gap: var(--op-space-3x-small);
  }
  .content-header__context {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-small);
  }
  .content-header__title {
    margin: 0;
    color: var(--op-color-on-background);
    font-size: var(--op-font-2x-large);
    font-weight: var(--op-font-weight-medium);
  }
  .content-header__subline {
    color: var(--op-color-on-background-alt);
    font-size: var(--op-font-medium);
  }
  .content-header__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: end;
    gap: var(--op-space-2x-small);
    margin-inline-start: auto;
  }
}
.divider {
  /* Public API (customizable component options) */
  --_op-divider-vertical-min-height: var(--op-space-large);
  --_op-divider-height-small: var(--op-border-width);
  --_op-divider-height-medium: var(--op-border-width-large);
  --_op-divider-height-large: var(--op-border-width-x-large);
  --_op-divider-padding-small: var(--op-space-2x-small);
  --_op-divider-padding-medium: var(--op-space-x-small);
  --_op-divider-padding-large: var(--op-space-medium);
  /* Private API (component option defaults) */
  --__op-divider-height: var(--_op-divider-height-small);
  --__op-divider-padding: 0;
  background-color: var(--op-color-border);
  block-size: var(--__op-divider-height);
  inline-size: 100%;
  margin-block: var(--__op-divider-padding);
  margin-inline: 0;
  min-block-size: var(--__op-divider-height);
  /* Size Modifiers */
  &.divider--small {
    --__op-divider-height: var(--_op-divider-height-small);
  }
  &.divider--medium {
    --__op-divider-height: var(--_op-divider-height-medium);
  }
  &.divider--large {
    --__op-divider-height: var(--_op-divider-height-large);
  }
  /* Spacing Modifiers */
  &.divider--spacing-small {
    --__op-divider-padding: var(--_op-divider-padding-small);
  }
  &.divider--spacing-medium {
    --__op-divider-padding: var(--_op-divider-padding-medium);
  }
  &.divider--spacing-large {
    --__op-divider-padding: var(--_op-divider-padding-large);
  }
  /* Direction Modifier */
  &.divider--vertical {
    block-size: 100%;
    inline-size: var(--__op-divider-height);
    margin-block: 0;
    margin-inline: var(--__op-divider-padding);
    min-block-size: var(--_op-divider-vertical-min-height);
    min-inline-size: var(--__op-divider-height);
  }
}
.form-control, .ts-wrapper .ts-control {
  /* Public API (customizable component options) */
  --_op-form-control-height-small: var(--op-input-height-small);
  --_op-form-control-height-medium: var(--op-input-height-medium);
  --_op-form-control-height-large: var(--op-input-height-large);
  --_op-form-control-font-small: var(--op-font-x-small);
  --_op-form-control-font-medium: var(--op-font-small);
  --_op-form-control-font-large: var(--op-font-small);
  /* Private API (component option defaults) */
  --__op-form-control-height: var(--_op-form-control-height-large);
  --__op-form-control-font-size: var(--_op-form-control-font-large);
  block-size: var(--__op-form-control-height);
  min-inline-size: var(--__op-form-control-height);
  /* Size Modifiers */
  &.form-control--small {
    --__op-form-control-height: var(--_op-form-control-height-small);
    --__op-form-control-font-size: var(--_op-form-control-font-small);
  }
  &.form-control--medium {
    --__op-form-control-height: var(--_op-form-control-height-medium);
    --__op-form-control-font-size: var(--_op-form-control-font-medium);
  }
  &.form-control--large {
    --__op-form-control-height: var(--_op-form-control-height-large);
    --__op-form-control-font-size: var(--_op-form-control-font-large);
  }
  /* Disabled State */
  &:disabled {
    cursor: not-allowed;
    opacity: var(--_op-form-control-opacity-disabled);
  }
  /* Readonly State */
  &[readonly] {
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: var(--op-color-on-background);
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    /* stylelint-disable selector-no-vendor-prefix */
    &::-webkit-input-placeholder {
      color: var(--op-color-on-background);
    }
    /* stylelint-enable selector-no-vendor-prefix */
  }
}
/* Radio or Checkbox Form Control */
.form-control:is([type=radio], [type=checkbox]), .ts-wrapper .ts-control:is([type=radio], [type=checkbox]) {
  /* Public API (customizable component options) */
  --_op-form-control-height-small: var(--op-space-medium);
  --_op-form-control-height-medium: var(--op-space-large);
  --_op-form-control-height-large: var(--op-space-x-large);
  align-self: center;
  margin: 0;
  accent-color: var(--op-color-primary-base);
  block-size: var(--__op-form-control-height);
  cursor: pointer;
  inline-size: var(--__op-form-control-height);
  & + label {
    align-self: center;
  }
}
/* Any Form Control that is not a radio or checkbox */
.form-control:not([type=radio], [type=checkbox]), .ts-wrapper .ts-control:not([type=radio], [type=checkbox]) {
  /* Public API (customizable component options) */
  --_op-form-control-opacity-disabled: var(--op-opacity-disabled);
  /* Private API (component option defaults) */
  --__op-form-control-border-color: var(--op-color-neutral-plus-four);
  display: block;
  border: none;
  border-radius: var(--op-radius-medium);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--op-color-neutral-plus-eight);
  block-size: var(--__op-form-control-height);
  box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
  color: var(--op-color-neutral-on-plus-eight);
  cursor: text;
  font-size: var(--__op-form-control-font-size);
  inline-size: 100%;
  line-height: var(--op-line-height-base);
  min-inline-size: var(--__op-form-control-height);
  padding-block: var(--op-space-2x-small);
  padding-inline: var(--op-space-small) var(--op-space-x-small);
  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }
  /* Hover State */
  &:hover:not(:disabled, [readonly]) {
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
  }
  &:focus-visible:not([readonly]) {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--op-input-focus-primary);
    color: var(--op-color-primary-on-plus-seven);
  }
  /* Borderless State */
  &.form-control--no-border {
    background-color: transparent;
    box-shadow: none;
    color: var(--op-color-primary-on-plus-max);
    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-primary-plus-seven);
      box-shadow: var(--op-input-focus-primary);
      color: var(--op-color-primary-on-plus-seven);
    }
    /* Borderless + Hover State */
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
}
/* Color Form Control */
.form-control[type=color], .ts-wrapper [type=color].ts-control {
  padding: var(--op-space-2x-small);
  cursor: pointer;
  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  &::-webkit-color-swatch {
    border: none;
    border-radius: var(--op-radius-medium);
  }
}
/* File Form Control */
.form-control[type=file], .ts-wrapper [type=file].ts-control {
  padding-block: 0;
  &::file-selector-button {
    --__op-btn-base-height: var(--op-input-height-small);
    --__op-btn-height: var(--__op-btn-base-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--op-radius-medium);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
    color: var(--op-color-neutral-on-plus-eight);
    cursor: pointer;
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-normal);
    gap: var(--op-space-x-small);
    margin-block: calc(var(--__op-form-control-height)/2 - var(--__op-btn-height)/2);
    min-block-size: var(--__op-btn-height);
    padding-block: 0;
    padding-inline: var(--op-space-x-small);
    text-align: center;
    text-decoration: none;
    transition: var(--op-transition-input);
    white-space: nowrap;
  }
  &.form-control--small::file-selector-button {
    --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
  }
}
select.form-control:not([multiple], [type=radio], [type=checkbox]), .ts-wrapper select.ts-control:not([multiple], [type=radio], [type=checkbox]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: var(--op-encoded-images-dropdown-arrow);
  background-position: center right;
  background-position-x: calc(100% - var(--op-space-3x-large)/2 + var(--op-encoded-images-dropdown-arrow-width)/2);
  background-repeat: no-repeat;
  cursor: pointer;
  padding-inline-end: var(--op-space-3x-large);
}
select.form-control[multiple], .ts-wrapper select[multiple].ts-control {
  min-block-size: calc(var(--__op-form-control-height)*2);
}
textarea.form-control:not([type=radio], [type=checkbox]), .ts-wrapper textarea.ts-control:not([type=radio], [type=checkbox]) {
  block-size: calc(var(--__op-form-control-height)*2);
  max-inline-size: 100%;
  min-block-size: var(--__op-form-control-height);
}
.form-label {
  color: var(--op-color-on-background);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-base);
}
.form-error, .live-input__display-error {
  color: var(--op-color-alerts-danger-base);
  font-size: var(--op-font-x-small);
  inline-size: -moz-fit-content;
  inline-size: fit-content;
}
.form-hint {
  display: block;
  font-size: var(--op-font-small);
  font-style: italic;
}
.form-error-summary {
  padding: var(--op-space-large);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-alerts-danger-plus-seven);
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
  color: var(--op-color-alerts-danger-on-plus-seven);
  margin-block-end: var(--op-space-large);
  h2 {
    font-size: var(--op-font-medium);
  }
  ul {
    margin-block-end: 0;
  }
}
.form-group {
  display: grid;
  align-content: baseline;
  gap: var(--op-space-x-small);
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr;
  padding-block: var(--op-space-small);
  padding-inline: 0;
  /* Group Alignment */
  /* stylelint-disable no-descending-specificity */
  .form-label,
  .form-error,
  .live-input__display-error,
  .form-hint,
  .form-control:not([type=radio], [type=checkbox]),
  .ts-wrapper .ts-control:not([type=radio], [type=checkbox]),
  .segmented-control {
    grid-column: 1/3;
  }
  /* stylelint-enable no-descending-specificity */
  .form-control[type=radio], .ts-wrapper [type=radio].ts-control,
  .form-control[type=checkbox],
  .ts-wrapper [type=checkbox].ts-control {
    grid-column: 1/1;
    & + .form-label {
      grid-column: 2/3;
      grid-row: 1;
    }
  }
}
.form-group--inline {
  align-items: center;
  /* Group Alignment */
  /* stylelint-disable no-descending-specificity */
  .form-label {
    grid-column: unset;
  }
  .form-error, .live-input__display-error,
  .form-hint {
    grid-column: 1/3;
  }
  .form-control:not([type=radio], [type=checkbox]), .ts-wrapper .ts-control:not([type=radio], [type=checkbox]),
  .switch {
    grid-column: unset;
  }
  /* stylelint-enable no-descending-specificity */
}
.form-group--error {
  /* stylelint-disable no-descending-specificity */
  .form-control, .ts-wrapper .ts-control {
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
    &[type=radio],
    &[type=checkbox] {
      box-shadow: none;
      & + label {
        color: var(--op-color-alerts-danger-minus-three);
        font-weight: var(--op-font-weight-bold);
      }
    }
    /* Error + Hover State */
    &:hover:not(:disabled, [readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
    /* Readonly State */
    &[readonly] {
      box-shadow: none;
    }
    /* Error + Focus State */
    &:focus-visible:not([readonly]) {
      background-color: var(--op-color-alerts-danger-plus-seven);
      box-shadow: var(--op-input-focus-danger);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
    /* Borderless State */
    &.form-control--no-border {
      border-radius: 0;
      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
      /* Readonly State */
      &[readonly] {
        box-shadow: none;
      }
      /* Borderless + Focus State */
      &:focus-visible:not([readonly]) {
        background-color: var(--op-color-alerts-danger-plus-seven);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-seven);
      }
      /* Borderless + Hover State */
      &:hover:not(:disabled, [readonly]) {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }
    }
  }
  /* stylelint-enable no-descending-specificity */
}
.icon {
  /* Public API (customizable component options) */
  /* Weight */
  --_op-icon-weight-light: var(--op-font-weight-light);
  --_op-icon-weight-normal: var(--op-font-weight-normal);
  --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
  --_op-icon-weight-bold: var(--op-font-weight-bold);
  /* Fill */
  --_op-icon-fill-outlined: 0;
  --_op-icon-fill-filled: 1;
  /* Emphasis */
  --_op-icon-emphasis-low: -20;
  --_op-icon-emphasis-normal: 0;
  --_op-icon-emphasis-high: 200;
  /* Size */
  --_op-icon-font-size-small: var(--op-font-small);
  --_op-icon-font-size-medium: var(--op-font-medium);
  --_op-icon-font-size-large: var(--op-font-large);
  --_op-icon-font-size-x-large: var(--op-font-2x-large);
  --_op-icon-optical-size-small: 20;
  --_op-icon-optical-size-medium: 20;
  --_op-icon-optical-size-large: 40;
  --_op-icon-optical-size-x-large: 48;
  /* Private API (component option defaults) */
  --__op-icon-weight: var(--_op-icon-weight-normal);
  --__op-icon-fill: var(--_op-icon-fill-outlined);
  --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
  --__op-icon-font-size: var(--_op-icon-font-size-medium);
  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
  display: inline-block;
  block-size: var(--__op-icon-font-size);
  font-size: var(--__op-icon-font-size);
  font-weight: var(--__op-icon-weight);
  inline-size: var(--__op-icon-font-size);
  line-height: var(--op-line-height-densest);
  vertical-align: middle;
  /* Fill Modifiers */
  &.icon--outlined {
    --__op-icon-fill: var(--_op-icon-fill-outlined);
  }
  &.icon--filled {
    --__op-icon-fill: var(--_op-icon-fill-filled);
  }
  /* Weight Modifiers */
  &.icon--weight-light {
    --__op-icon-weight: var(--_op-icon-weight-light);
  }
  &.icon--weight-normal {
    --__op-icon-weight: var(--_op-icon-weight-normal);
  }
  &.icon--weight-semi-bold {
    --__op-icon-weight: var(--_op-icon-weight-semi-bold);
  }
  &.icon--weight-bold {
    --__op-icon-weight: var(--_op-icon-weight-bold);
  }
  /* Emphasis */
  &.icon--low-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-low);
  }
  &.icon--normal-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
  }
  &.icon--high-emphasis {
    --__op-icon-emphasis: var(--_op-icon-emphasis-high);
  }
  /* Size Modifiers */
  &.icon--small {
    --__op-icon-font-size: var(--_op-icon-font-size-small);
    --__op-icon-optical-size: var(--_op-icon-optical-size-small);
  }
  &.icon--medium {
    --__op-icon-font-size: var(--_op-icon-font-size-medium);
    --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
  }
  &.icon--large {
    --__op-icon-font-size: var(--_op-icon-font-size-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
  }
  &.icon--x-large {
    --__op-icon-font-size: var(--_op-icon-font-size-x-large);
    --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
  }
}
/* Material Icons class provided by the Google Fonts CDN */
.material-symbols-outlined {
  font-variation-settings: "FILL" var(--__op-icon-fill), "wght" var(--__op-icon-weight), "GRAD" var(--__op-icon-emphasis), "opsz" var(--__op-icon-optical-size);
  font-weight: unset;
}
/* Custom SVG Icons app specific */
.custom-icons {
  svg {
    block-size: 100%;
    inline-size: 100%;
  }
}
.modal-wrapper {
  /* Public API (customizable component options) */
  --_op-modal-backdrop-active-opacity: var(--op-opacity-half);
  position: fixed;
  z-index: var(--op-z-index-dialog);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  inset: 0;
  outline: 0;
  visibility: hidden;
  /* Elements */
  .modal-wrapper__backdrop {
    position: fixed;
    z-index: var(--op-z-index-dialog-backdrop);
    background: var(--op-color-black);
    inset: 0;
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-modal);
    visibility: hidden;
  }
  /* Modifiers */
  &.modal-wrapper--active {
    visibility: visible;
    .modal {
      opacity: var(--op-opacity-full);
      transform: scale(1);
    }
    .modal-wrapper__backdrop {
      opacity: var(--_op-modal-backdrop-active-opacity);
      visibility: visible;
    }
  }
}
.modal {
  /* Public API (customizable component options) */
  --_op-modal-width: calc(var(--op-size-unit)*141); /* 564px */
  --_op-modal-max-height: calc(var(--op-size-unit)*125); /* 500px */
  z-index: var(--op-z-index-dialog-content);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-background);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-on-background);
  contain: paint;
  font-size: var(--op-font-medium);
  inline-size: var(--_op-modal-width);
  line-height: var(--op-line-height-base);
  opacity: var(--op-opacity-none);
  transform: scale(0.7);
  transition: var(--op-transition-modal);
  .modal__header,
  .modal__body,
  .modal__footer {
    padding: var(--op-space-medium);
  }
  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semi-bold);
  }
  .modal__body {
    box-shadow: var(--op-border-all) var(--op-color-border);
    max-block-size: var(--_op-modal-max-height);
    overflow-y: auto;
  }
  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--op-space-small);
  }
}
dialog.modal {
  padding: 0;
  border: none;
  overscroll-behavior: contain;
  transform: scale(0.7);
  transition: display var(--op-transition-modal-time) allow-discrete, overlay var(--op-transition-modal-time) allow-discrete, transform var(--op-transition-modal-time), opacity var(--op-transition-modal-time);
  &::backdrop {
    overflow: hidden;
    background-color: var(--op-color-black);
    opacity: var(--op-opacity-none);
    overscroll-behavior: contain;
    transition: display var(--op-transition-modal-time) allow-discrete, overlay var(--op-transition-modal-time) allow-discrete, transform var(--op-transition-modal-time), opacity var(--op-transition-modal-time);
  }
  &[open] {
    opacity: var(--op-opacity-full);
    transform: scale(1);
    &::backdrop {
      opacity: var(--op-opacity-half);
    }
  }
}
@starting-style {
  dialog.modal[open] {
    transform: scale(0.7);
    &::backdrop {
      opacity: var(--op-opacity-none);
    }
  }
}
.navbar {
  /* Public API (customizable component options) */
  /* Normal */
  --_op-navbar-background-color: var(--op-color-neutral-plus-eight);
  --_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
  --_op-navbar-border-color: var(--op-color-neutral-plus-four);
  --_op-navbar-brand-height: calc(var(--op-size-unit)*12); /* 48px */
  /* Spacing */
  --_op-navbar-horizontal-spacing: var(--op-space-x-large);
  --_op-navbar-content-spacing: var(--op-space-x-small);
  --_op-navbar-content-item-spacing: var(--op-space-2x-small);
  display: flex;
  align-items: center;
  padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
  background-color: var(--_op-navbar-background-color);
  box-shadow: var(--op-border-top) var(--_op-navbar-border-color), var(--op-border-bottom) var(--_op-navbar-border-color);
  color: var(--_op-navbar-text-color);
  gap: var(--_op-navbar-content-spacing);
  /* Elements */
  .navbar__brand {
    block-size: var(--_op-navbar-brand-height);
    margin-inline-end: var(--_op-navbar-horizontal-spacing);
    img {
      block-size: 100%;
    }
  }
  .navbar__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_op-navbar-content-item-spacing);
    &.navbar__content--justify-start {
      margin-inline-end: auto;
    }
    &.navbar__content--justify-center {
      margin-inline: auto;
    }
    &.navbar__content--justify-end {
      margin-inline-start: auto;
    }
  }
  /* Modifiers */
  &.navbar--primary {
    --_op-navbar-background-color: var(--op-color-primary-plus-six);
    --_op-navbar-text-color: var(--op-color-primary-on-plus-six);
    --_op-navbar-border-color: var(--op-color-primary-plus-four);
  }
}
.pagination {
  display: flex;
  align-items: center;
  gap: 0;
  /* Showing Dropdown */
  .form-group {
    align-items: center;
    .form-label {
      grid-column: 1;
    }
    .form-control, .ts-wrapper .ts-control {
      grid-column: 2;
    }
  }
  /* ... Gap */
  .pagination__divider {
    block-size: 100%;
    padding-inline: var(--op-space-x-small);
  }
}
.segmented-control {
  --op-input-inner-focus: 0 0 0 var(--op-border-width-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);
  /* Public API (customizable component options) */
  --_op-segmented-control-height-small: var(--op-input-height-small);
  --_op-segmented-control-height-medium: var(--op-input-height-medium);
  --_op-segmented-control-height-large: var(--op-input-height-large);
  --_op-segmented-control-font-small: var(--op-font-x-small);
  --_op-segmented-control-font-medium: var(--op-font-small);
  --_op-segmented-control-font-large: var(--op-font-small);
  --_op-segmented-control-label-padding-small: var(--op-space-x-small);
  --_op-segmented-control-label-padding-medium: var(--op-space-small);
  --_op-segmented-control-label-padding-large: var(--op-space-small);
  --_op-segmented-control-label-gap-small: var(--op-space-3x-small);
  --_op-segmented-control-label-gap-medium: var(--op-space-2x-small);
  --_op-segmented-control-label-gap-large: var(--op-space-2x-small);
  --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt);
  --_op-segmented-control-color-icon-active: light-dark(
    var(--op-color-primary-plus-four),
    var(--op-color-primary-minus-six)
  );
  /* Private API (component option defaults) */
  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default);
  position: relative;
  display: grid;
  padding: var(--op-space-2x-small);
  border-radius: var(--op-radius-medium);
  background-color: var(--op-color-neutral-plus-eight);
  block-size: var(--__op-segmented-control-height);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--__op-segmented-control-font-size);
  gap: var(--op-space-2x-small);
  grid-auto-flow: column;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  &.segmented-control--full-width {
    inline-size: 100%;
  }
  .icon {
    color: var(--__op-segmented-control-color-icon);
  }
  .segmented-control__input {
    position: absolute;
    overflow: hidden;
    padding: 0;
    border-width: 0;
    margin: -1px;
    block-size: 1px;
    clip: rect(0, 0, 0, 0);
    inline-size: 1px;
    white-space: nowrap;
    /* Selected Option */
    &:checked + .segmented-control__label {
      --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active);
      background-color: var(--op-color-primary-plus-one);
      color: var(--op-color-primary-on-plus-one);
    }
    &:focus-visible {
      + .segmented-control__label {
        box-shadow: var(--op-input-focus-primary);
      }
    }
  }
  .segmented-control__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--op-radius-small);
    gap: var(--__op-segmented-control-label-gap);
    padding-inline: var(--__op-segmented-control-label-padding);
    white-space: nowrap;
    &:hover {
      background-color: var(--op-color-neutral-plus-five);
      color: var(--op-color-neutral-on-plus-five);
    }
  }
  /* Size Modifiers */
  &.segmented-control--small {
    --__op-segmented-control-height: var(--_op-segmented-control-height-small);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-small);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small);
    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-small);
      --__op-icon-optical-size: var(--_op-icon-optical-size-small);
    }
  }
  &.segmented-control--medium {
    --__op-segmented-control-height: var(--_op-segmented-control-height-medium);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium);
    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-medium);
      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
    }
  }
  &.segmented-control--large {
    --__op-segmented-control-height: var(--_op-segmented-control-height-large);
    --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
    .icon {
      --__op-icon-font-size: var(--_op-icon-font-size-medium);
      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
    }
  }
}
.sidebar {
  /* Public API (customizable component options) */
  /* Normal */
  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
  /* Width */
  --_op-sidebar-rail-width: calc(var(--op-size-unit)*22); /* 88px */
  --_op-sidebar-compact-width: calc(var(--op-size-unit)*42); /* 168px */
  --_op-sidebar-drawer-width: calc(var(--op-size-unit)*54); /* 216px */
  --_op-sidebar-rail-brand-width: calc(var(--op-size-unit)*19); /* 76px */
  --_op-sidebar-compact-brand-width: calc(var(--op-size-unit)*24); /* 96px */
  --_op-sidebar-drawer-brand-width: calc(var(--op-size-unit)*24); /* 96px */
  /* Spacing */
  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
  --_op-sidebar-brand-spacing: var(--op-space-medium);
  --_op-sidebar-content-spacing: var(--op-space-x-small);
  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);
  /* Animation */
  --_op-sidebar-transition: var(--op-transition-sidebar);
  /* Private API (component option defaults) */
  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
  z-index: var(--op-z-index-sidebar);
  display: flex;
  flex-direction: column;
  background-color: var(--_op-sidebar-background-color);
  box-shadow: var(--op-border-left) var(--_op-sidebar-border-color), var(--op-border-right) var(--_op-sidebar-border-color);
  color: var(--_op-sidebar-text-color);
  inline-size: var(--__op-sidebar-width);
  min-inline-size: var(--__op-sidebar-width);
  overflow-y: auto;
  transition: var(--_op-sidebar-transition);
  /* Elements */
  .sidebar__brand {
    padding: var(--_op-sidebar-brand-spacing);
    block-size: var(--__op-sidebar-brand-width);
    margin-inline: auto;
    img {
      block-size: 100%;
    }
  }
  .sidebar__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--_op-sidebar-content-item-spacing);
    padding-inline: var(--_op-sidebar-content-spacing);
    > * {
      justify-content: flex-start;
      .material-symbols-outlined {
        --__op-icon-font-size: var(--_op-icon-font-size-large);
        --__op-icon-optical-size: var(--_op-icon-optical-size-large);
        --__op-icon-weight: var(--_op-icon-weight-bold);
      }
    }
    &.sidebar__content--start {
      justify-content: start;
    }
    &.sidebar__content--center {
      justify-content: center;
    }
    &.sidebar__content--end {
      justify-content: end;
    }
  }
  /* Modifiers */
  &.sidebar--padded {
    padding-block: var(--_op-sidebar-spacing);
  }
  /* Drawer Modifier */
  &.sidebar--drawer {
    /* Private API */
    --__op-sidebar-width: var(--_op-sidebar-drawer-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
  }
  /* Compact Modifier */
  &.sidebar--compact {
    /* Private API (component option defaults) */
    --__op-sidebar-width: var(--_op-sidebar-compact-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
    /* Elements */
    .sidebar__content {
      > * {
        /* Need to get icon-with-label behavior */
        flex-direction: column;
        padding: var(--op-space-small);
        gap: var(--op-space-3x-small);
      }
    }
  }
  &.sidebar--rail {
    /* Private API (component option defaults) */
    --__op-sidebar-width: var(--_op-sidebar-rail-width);
    --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
    /* Elements */
    .sidebar__content {
      align-items: center;
      > * {
        justify-content: center;
        padding: 0;
        font-size: 0;
        gap: 0;
        /* Need to get icon behavior */
        inline-size: var(--__op-btn-height);
        min-inline-size: var(--__op-btn-height);
      }
    }
  }
  /* Primary */
  &.sidebar--primary {
    --_op-sidebar-background-color: var(--op-color-primary-plus-six);
    --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
    --_op-sidebar-border-color: var(--op-color-primary-plus-four);
  }
}
.side-panel {
  /* Public API (customizable component options) */
  --_op-side-panel-width: calc(var(--op-size-unit)*54); /* 216px */
  --_op-side-panel-header-padding: var(--op-space-medium);
  --_op-side-panel-body-padding: var(--op-space-medium);
  --_op-side-panel-footer-padding: var(--op-space-medium);
  --_op-side-panel-section-padding: var(--op-space-medium);
  display: flex;
  flex-direction: column;
  background-color: var(--op-color-background);
  block-size: 100vh;
  color: var(--op-color-on-background);
  inline-size: var(--_op-side-panel-width);
  max-block-size: 100%;
  min-inline-size: var(--_op-side-panel-width);
  /* Modifiers */
  &.side-panel--border-left {
    box-shadow: var(--op-border-left) var(--op-color-border);
  }
  &.side-panel--border-right {
    box-shadow: var(--op-border-right) var(--op-color-border);
  }
  &.side-panel--border-left.side-panel--border-right {
    box-shadow: var(--op-border-x);
  }
  /* Elements */
  .side-panel__header {
    &.side-panel__header--padded {
      padding: var(--_op-side-panel-header-padding);
    }
    &.side-panel__header--padded-x {
      padding-inline: var(--_op-side-panel-header-padding);
    }
    &.side-panel__header--padded-y {
      padding-block: var(--_op-side-panel-header-padding);
    }
  }
  .side-panel__body {
    flex: 1;
    overflow-y: auto;
    &.side-panel__body--padded {
      padding: var(--_op-side-panel-body-padding);
    }
    &.side-panel__body--padded-x {
      padding-inline: var(--_op-side-panel-body-padding);
    }
    &.side-panel__body--padded-y {
      padding-block: var(--_op-side-panel-body-padding);
    }
  }
  .side-panel__footer {
    &.side-panel__footer--padded {
      padding: var(--_op-side-panel-footer-padding);
    }
    &.side-panel__footer--padded-x {
      padding-inline: var(--_op-side-panel-footer-padding);
    }
    &.side-panel__footer--padded-y {
      padding-block: var(--_op-side-panel-footer-padding);
    }
  }
  .side-panel__section {
    &.side-panel__section--padded {
      padding: var(--_op-side-panel-section-padding);
    }
    &.side-panel__section--padded-x {
      padding-inline: var(--_op-side-panel-section-padding);
    }
    &.side-panel__section--padded-y {
      padding-block: var(--_op-side-panel-section-padding);
    }
  }
}
.spinner {
  /* Public API (customizable component options) */
  --_op-spinner-indicator-color: var(--op-color-primary-base);
  --_op-spinner-track-color: var(--op-color-neutral-plus-four);
  --_op-spinner-track-width-x-small: var(--op-border-width);
  --_op-spinner-track-width-small: var(--op-border-width-large);
  --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
  --_op-spinner-track-width-large: var(--op-border-width-x-large);
  --_op-spinner-diameter-x-small: calc(var(--op-size-unit)*6); /* 24px */
  --_op-spinner-diameter-small: calc(var(--op-size-unit)*10); /* 40px */
  --_op-spinner-diameter-medium: calc(var(--op-size-unit)*15); /* 60px */
  --_op-spinner-diameter-large: calc(var(--op-size-unit)*20); /* 80px */
  --_op-spinner-animation-duration: 0.8s;
  --_op-spinner-animation-timing-function: linear;
  /* Private API (component option defaults) */
  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
  --__op-spinner-track-width: var(--_op-spinner-track-width-large);
  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
  border-radius: var(--__op-spinner-diameter);
  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
  block-size: var(--__op-spinner-diameter);
  border-block-start-color: var(--_op-spinner-indicator-color);
  inline-size: var(--__op-spinner-diameter);
  &.spinner--x-small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
  }
  &.spinner--small {
    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
  }
  &.spinner--medium {
    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
  }
  &.spinner--large {
    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
  }
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.switch {
  /* Public API (allowed to be overridden) */
  --_op-switch-height-small: calc(var(--op-size-unit)*4); /* 16px */
  --_op-switch-height-large: calc(var(--op-size-unit)*6); /* 24px */
  --_op-switch-width-small: calc(var(--op-size-unit)*7); /* 28px */
  --_op-switch-width-large: calc(var(--op-size-unit)*11); /* 44px */
  --_op-switch-opacity-disabled: var(--op-opacity-disabled);
  --_op-switch-switch-padding: var(--op-space-2x-small);
  /* Private API (don't touch these) */
  --__op-switch-width: var(--_op-switch-width-large);
  --__op-switch-height: var(--_op-switch-height-large);
  --__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
  --__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding)/2);
  position: relative;
  display: flex;
  align-items: center;
  label {
    position: relative;
    display: block;
    border-radius: var(--op-radius-pill);
    background: var(--op-color-neutral-base);
    block-size: var(--__op-switch-height);
    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
    inline-size: var(--__op-switch-width);
    text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */
    &::after {
      position: absolute;
      border-radius: var(--op-radius-circle);
      background-color: var(--op-color-neutral-plus-eight);
      block-size: var(--__op-switch-switch-size);
      content: "";
      inline-size: var(--__op-switch-switch-size);
      inset-block-start: var(--__op-switch-half-switch-padding);
      inset-inline-start: var(--__op-switch-half-switch-padding);
      transition: var(--op-transition-input);
    }
  }
  /* Prevent labels after the toggle being full width */
  & + label {
    inline-size: -moz-fit-content;
    inline-size: fit-content;
  }
  input {
    block-size: 0;
    inline-size: 0;
    margin-inline-end: calc(var(--op-space-x-small)*-1);
    &:disabled {
      visibility: hidden;
    }
    &:disabled + label {
      cursor: not-allowed;
      opacity: var(--_op-switch-opacity-disabled);
    }
    &:checked + label {
      background-color: var(--op-color-primary-base);
      box-shadow: none;
      &::after {
        inset-inline-start: calc(100% - var(--__op-switch-half-switch-padding));
        transform: translateX(-100%);
      }
    }
    &:hover + label {
      &::after {
        background-color: var(--op-color-primary-plus-five);
      }
    }
    &:focus-visible + label {
      box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six), inset var(--op-border-all) var(--op-color-primary-minus-three);
      &::after {
        background-color: var(--op-color-neutral-plus-five);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
      }
    }
    &:focus-visible:checked + label {
      &::after {
        background-color: var(--op-color-primary-plus-six);
        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
      }
    }
  }
  /* Size Modifiers */
  &.switch--small {
    --__op-switch-width: var(--_op-switch-width-small);
    --__op-switch-height: var(--_op-switch-height-small);
  }
  &.switch--large {
    --__op-switch-width: var(--_op-switch-width-large);
    --__op-switch-height: var(--_op-switch-height-large);
  }
}
.tab-group {
  display: flex;
  align-items: center;
}
.tab {
  /* Public API */
  --_op-tab-font-small: var(--op-font-x-small);
  --_op-tab-font-large: var(--op-font-small);
  --_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
  --_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
  --_op-tab-indicator-width-small: var(--op-border-width-large);
  --_op-tab-indicator-width-large: var(--op-border-width-x-large);
  --_op-tab-disabled-opacity: var(--op-opacity-disabled);
  /* Private API */
  --__op-tab-font-size: var(--_op-tab-font-large);
  --__op-tab-padding: var(--_op-tab-padding-large);
  --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
  --__op-tab-indicator: inset 0 calc(var(--__op-tab-indicator-width)*-1) 0 0;
  padding: var(--__op-tab-padding);
  background-color: var(--op-color-background);
  color: var(--op-color-on-background);
  font-size: var(--__op-tab-font-size);
  text-decoration: none;
  &.tab--active {
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
  }
  /* Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
  }
  /* Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-seven);
    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
    color: var(--op-color-primary-on-plus-seven);
  }
  /* Focus State */
  &:focus-visible:not(.tab--disabled) {
    z-index: 1;
    box-shadow: var(--op-input-focus-primary);
    &.tab--active {
      box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one), var(--op-input-focus-primary);
    }
  }
  /* Disabled State */
  &.tab--disabled {
    opacity: var(--_op-tab-disabled-opacity);
    pointer-events: none;
  }
  /* Size Modifiers */
  &.tab--small {
    --__op-tab-padding: var(--_op-tab-padding-small);
    --__op-tab-font-size: var(--_op-tab-font-small);
    --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
  }
  &.tab--large {
    --__op-tab-padding: var(--_op-tab-padding-large);
    --__op-tab-font-size: var(--_op-tab-font-large);
    --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
  }
}
.table {
  /* Public API */
  /* Cells (for height, the appropriate variable is used when using the density modifiers) */
  --_op-table-cell-height-default: calc(var(--op-size-unit)*11); /* 44px */
  --_op-table-cell-height-comfortable: calc(var(--op-size-unit)*16); /* 64px */
  --_op-table-cell-height-compact: calc(var(--op-size-unit)*8); /* 32px */
  /* Private API */
  /* These allow for overriding specific padding versions easier. */
  --__op-table-cell-height: var(--_op-table-cell-height-default);
  border-radius: var(--op-radius-medium);
  border-collapse: collapse;
  box-shadow: var(--op-border-all) var(--op-color-border);
  contain: paint;
  inline-size: 100%;
  table-layout: auto;
  /* Elements */
  thead {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: inset var(--op-border-top) var(--op-color-border);
    color: var(--op-color-neutral-on-plus-eight);
    &:has(th input[type=checkbox]:checked) {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }
  th {
    font-weight: var(--op-font-weight-semi-bold);
    text-align: start;
  }
  tbody,
  tfoot {
    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-on-plus-max);
  }
  th,
  td {
    block-size: var(--__op-table-cell-height);
    font-size: var(--op-font-small);
    padding-block: var(--op-space-2x-small);
    padding-inline: var(--op-space-small);
  }
  tfoot tr {
    box-shadow: var(--op-border-top) var(--op-color-border);
  }
  tr:not(:last-child) {
    box-shadow: inset var(--op-border-top) var(--op-color-border);
  }
  /* Modifiers */
  /* stylelint-disable no-descending-specificity */
  &.table--primary {
    thead {
      background-color: var(--op-color-primary-plus-seven);
      color: var(--op-color-primary-on-plus-seven);
    }
  }
  &.table--danger {
    thead {
      background-color: var(--op-color-alerts-danger-plus-seven);
      color: var(--op-color-alerts-danger-on-plus-seven);
    }
  }
  /* stylelint-enable no-descending-specificity */
  &.table--container {
    overflow-y: auto;
  }
  /* Layout Modifiers */
  &.table--auto-layout {
    table-layout: auto;
  }
  &.table--fixed-layout {
    table-layout: fixed;
  }
  /* Table Density Modifiers */
  &.table--default-density {
    --__op-table-cell-height: var(--_op-table-cell-height-default);
  }
  &.table--comfortable-density {
    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
  }
  &.table--compact-density {
    --__op-table-cell-height: var(--_op-table-cell-height-compact);
  }
  /* Striped Modifiers */
  &.table--even-striped {
    tbody tr:nth-child(even) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }
  &.table--odd-striped {
    tbody tr:nth-child(odd) {
      background-color: var(--op-color-neutral-plus-seven);
      color: var(--op-color-neutral-on-plus-seven);
    }
  }
  /* Sticky Header Row Modifier */
  /* stylelint-disable no-descending-specificity */
  &.table--sticky-header thead {
    position: sticky;
    inset-block-start: 0;
  }
  /* stylelint-enable no-descending-specificity */
  /* Sticky Footer Row Modifier */
  &.table--sticky-footer tfoot {
    position: sticky;
    inset-block-end: 0;
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--op-space-2x-small);
  border-radius: var(--op-radius-pill);
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  letter-spacing: var(--op-letter-spacing-label);
  line-height: var(--op-line-height-dense);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  /* Elements */
  .tag__label {
    padding-inline: var(--op-space-2x-small);
  }
  .btn--icon {
    --__op-btn-height: var(--op-font-medium);
    /* Hover State */
    &:hover {
      background-color: var(--op-color-neutral-minus-three);
      box-shadow: none;
      color: var(--op-color-neutral-on-minus-three);
    }
    /* Focus State */
    &:focus-visible {
      background-color: var(--op-color-neutral-base);
      box-shadow: var(--op-input-focus-neutral);
      color: var(--op-color-neutral-on-base);
    }
  }
  /* Modifiers */
  &.tag--read-only {
    /* This is here for consistency */
  }
  &.tag--primary {
    background-color: var(--op-color-primary-base);
    color: var(--op-color-primary-on-base);
    .btn--icon {
      color: var(--op-color-primary-on-base);
      /* Hover State */
      &:hover {
        background-color: var(--op-color-primary-minus-three);
        box-shadow: none;
        color: var(--op-color-primary-on-minus-three);
      }
      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-primary-base);
        box-shadow: var(--op-input-focus-primary);
        color: var(--op-color-primary-on-base);
      }
    }
  }
  &.tag--danger {
    background-color: var(--op-color-alerts-danger-base);
    color: var(--op-color-alerts-danger-on-base);
    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-danger-on-base);
      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-danger-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-danger-on-minus-three);
      }
      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-danger-base);
        box-shadow: var(--op-input-focus-danger);
        color: var(--op-color-alerts-danger-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }
  &.tag--warning {
    background-color: var(--op-color-alerts-warning-base);
    color: var(--op-color-alerts-warning-on-base);
    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-warning-on-base);
      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-warning-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-warning-on-minus-three);
      }
      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-warning-base);
        box-shadow: var(--op-input-focus-warning);
        color: var(--op-color-alerts-warning-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }
  &.tag--info {
    background-color: var(--op-color-alerts-info-base);
    color: var(--op-color-alerts-info-on-base);
    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-info-on-base);
      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-info-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-info-on-minus-three);
      }
      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-info-base);
        box-shadow: var(--op-input-focus-info);
        color: var(--op-color-alerts-info-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }
  &.tag--notice {
    background-color: var(--op-color-alerts-notice-base);
    color: var(--op-color-alerts-notice-on-base);
    /* stylelint-disable no-descending-specificity */
    .btn--icon {
      color: var(--op-color-alerts-notice-on-base);
      /* Hover State */
      &:hover {
        background-color: var(--op-color-alerts-notice-minus-three);
        box-shadow: none;
        color: var(--op-color-alerts-notice-on-minus-three);
      }
      /* Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-notice-base);
        box-shadow: var(--op-input-focus-notice);
        color: var(--op-color-alerts-notice-on-base);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }
}
.text-pair {
  /* Public API (customizable component options) */
  --_op-text-pair-font-size-small: var(--op-font-small);
  --_op-text-pair-font-size-medium: var(--op-font-medium);
  --_op-text-pair-font-size-large: var(--op-font-large);
  /* Private API (component option defaults) */
  --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
  --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  &.text-pair--inline {
    flex-direction: row;
    align-items: baseline;
  }
  .text-pair__title {
    font-size: var(--__op-text-pair-title-font-size);
    font-weight: var(--op-font-weight-semi-bold);
    line-height: var(--op-line-height-dense);
    &.text-pair__title--small {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-small);
    }
    &.text-pair__title--medium {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-medium);
    }
    &.text-pair__title--large {
      --__op-text-pair-title-font-size: var(--_op-text-pair-font-size-large);
    }
  }
  .text-pair__subtitle {
    font-size: var(--__op-text-pair-subtitle-font-size);
    font-weight: var(--op-font-weight-normal);
    line-height: var(--op-line-height-dense);
    &.text-pair__subtitle--small {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-small);
    }
    &.text-pair__subtitle--medium {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-medium);
    }
    &.text-pair__subtitle--large {
      --__op-text-pair-subtitle-font-size: var(--_op-text-pair-font-size-large);
    }
  }
}
/* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
[data-tooltip-text] {
  /* Public API (customizable component options) */
  --_op-tooltip-max-width: calc(var(--op-size-unit)*50); /* 200px */
  --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
  --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
  --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
  --_op-tooltip-arrow-size: calc(var(--op-space-small)/2);
  --_op-tooltip-tooltip-offset: var(--op-space-x-small);
  --_op-tooltip-tooltip-radius: var(--op-radius-medium);
  --_op-tooltip-tooltip-font-size: var(--op-font-small);
  position: relative;
  &::before,
  &::after {
    opacity: var(--op-opacity-none);
    transition: var(--op-transition-tooltip);
    visibility: hidden;
  }
  &::before {
    position: absolute;
    z-index: var(--op-z-index-tooltip);
    display: block;
    padding: var(--_op-tooltip-padding);
    border-radius: var(--_op-tooltip-tooltip-radius);
    background-color: var(--_op-tooltip-background-color);
    color: var(--_op-tooltip-text-color);
    content: attr(data-tooltip-text);
    font-family: var(--op-font-family); /* Makes tooltips on icons work */
    font-size: var(--_op-tooltip-tooltip-font-size);
    inline-size: -moz-max-content;
    inline-size: max-content;
    max-inline-size: var(--_op-tooltip-max-width);
    overflow-wrap: break-word;
    pointer-events: none;
    text-align: center;
    white-space: normal;
  }
  &::after {
    position: absolute;
    z-index: var(--op-z-index-tooltip);
    border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
    content: "";
    pointer-events: none;
  }
  &:hover {
    &::before,
    &::after {
      opacity: var(--op-opacity-full);
      visibility: visible;
    }
  }
  &[data-tooltip-position=top],
  &:not([data-tooltip-position]) {
    &::before,
    &::after {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }
    &::before {
      inset-block-end: 100%;
      margin-block-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &::after {
      border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
      inset-block-end: 100%;
      margin-block-end: calc(var(--_op-tooltip-arrow-size)*-1 + var(--_op-tooltip-tooltip-offset));
    }
  }
  &[data-tooltip-position=left] {
    &::before,
    &::after {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }
    &::before {
      inset-inline-end: 100%;
      margin-inline-end: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &::after {
      border-color: transparent transparent transparent var(--_op-tooltip-background-color);
      inset-inline-end: 100%;
      margin-inline-end: calc(var(--_op-tooltip-arrow-size)*-1 + var(--_op-tooltip-tooltip-offset));
    }
  }
  &[data-tooltip-position=bottom] {
    &::before,
    &::after {
      inset-inline-start: 50%;
      transform: translateX(-50%);
    }
    &::before {
      inset-block-start: 100%;
      margin-block-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &::after {
      border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
      inset-block-start: 100%;
      margin-block-start: calc(var(--_op-tooltip-arrow-size)*-1 + var(--_op-tooltip-tooltip-offset));
    }
  }
  &[data-tooltip-position=right] {
    &::before,
    &::after {
      inset-block-start: 50%;
      transform: translateY(-50%);
    }
    &::before {
      inset-inline-start: 100%;
      margin-inline-start: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
    }
    &::after {
      border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
      inset-inline-start: 100%;
      margin-inline-start: calc(var(--_op-tooltip-arrow-size)*-1 + var(--_op-tooltip-tooltip-offset));
    }
  }
}
/* Design System Overrides */
.ts-wrapper {
  /* Control */
  .ts-control {
    align-items: center;
    border: none;
    border-radius: var(--op-radius-large);
    background-color: var(--op-color-neutral-plus-max);
    box-shadow: var(--op-border-all) var(--op-color-border);
    color: var(--op-color-neutral-on-plus-max);
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-light);
    line-height: var(--op-line-height-base);
    min-block-size: var(--op-input-height-large);
  }
  /* Active control */
  &.dropdown-active {
    .ts-control {
      border-end-end-radius: 0;
      border-end-start-radius: 0;
    }
  }
  /* Dropdown */
  .ts-dropdown {
    border: none;
    margin: 0;
    border-end-end-radius: var(--op-radius-large);
    border-end-start-radius: var(--op-radius-large);
    box-shadow: var(--op-border-all) var(--op-color-border);
    contain: paint;
    .option,
    .create {
      &.active {
        background-color: var(--op-color-primary-plus-seven);
        color: var(--op-color-primary-on-plus-seven);
      }
    }
  }
  /* Item */
  &.multi {
    .ts-control > div {
      padding: var(--op-space-3x-small) var(--op-space-x-small);
      border-radius: var(--op-radius-medium);
      margin: 0 var(--op-space-3x-small) var(--op-space-3x-small) 0;
      background-color: var(--op-color-primary-base);
      color: var(--op-color-primary-on-base);
      &.active {
        background-color: var(--op-color-primary-plus-two);
        color: var(--op-color-primary-on-plus-two);
      }
    }
  }
  /* Dropdown Arrow */
  &.single,
  &.multi,
  &.single.input-active,
  &.multi.input-active {
    .ts-control {
      /* Highly specific SVG data image for the dropdown arrow. */
      background-image: var(--op-encoded-images-dropdown-arrow);
      background-position-x: calc(100% - var(--op-space-small));
      background-position-y: center;
      background-repeat: no-repeat;
    }
  }
}
/*
  See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
  Material Symbols supports:
  optical sizing set through: font-variation-settings: 'opsz' {20|40|48}
  font weight set through: font-variation-settings: 'wght' {100..700}
  fill set through: font-variation-settings: 'FILL' {0|1}
  emphasis set through: font-variation-settings: 'GRAD' {-50|0|200}
*/
:root,
:host,
.sl-theme-light {
  color-scheme: light;
  --sl-color-gray-50: hsl(0 0% 97.5%);
  --sl-color-gray-100: hsl(240 4.8% 95.9%);
  --sl-color-gray-200: hsl(240 5.9% 90%);
  --sl-color-gray-300: hsl(240 4.9% 83.9%);
  --sl-color-gray-400: hsl(240 5% 64.9%);
  --sl-color-gray-500: hsl(240 3.8% 46.1%);
  --sl-color-gray-600: hsl(240 5.2% 33.9%);
  --sl-color-gray-700: hsl(240 5.3% 26.1%);
  --sl-color-gray-800: hsl(240 3.7% 15.9%);
  --sl-color-gray-900: hsl(240 5.9% 10%);
  --sl-color-gray-950: hsl(240 7.3% 8%);
  --sl-color-red-50: hsl(0 85.7% 97.3%);
  --sl-color-red-100: hsl(0 93.3% 94.1%);
  --sl-color-red-200: hsl(0 96.3% 89.4%);
  --sl-color-red-300: hsl(0 93.5% 81.8%);
  --sl-color-red-400: hsl(0 90.6% 70.8%);
  --sl-color-red-500: hsl(0 84.2% 60.2%);
  --sl-color-red-600: hsl(0 72.2% 50.6%);
  --sl-color-red-700: hsl(0 73.7% 41.8%);
  --sl-color-red-800: hsl(0 70% 35.3%);
  --sl-color-red-900: hsl(0 62.8% 30.6%);
  --sl-color-red-950: hsl(0 60% 19.6%);
  --sl-color-orange-50: hsl(33.3 100% 96.5%);
  --sl-color-orange-100: hsl(34.3 100% 91.8%);
  --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
  --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
  --sl-color-orange-400: hsl(27 96% 61%);
  --sl-color-orange-500: hsl(24.6 95% 53.1%);
  --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
  --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
  --sl-color-orange-800: hsl(15 79.1% 33.7%);
  --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
  --sl-color-orange-950: hsl(15.2 69.1% 19%);
  --sl-color-amber-50: hsl(48 100% 96.1%);
  --sl-color-amber-100: hsl(48 96.5% 88.8%);
  --sl-color-amber-200: hsl(48 96.6% 76.7%);
  --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
  --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
  --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
  --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
  --sl-color-amber-700: hsl(26 90.5% 37.1%);
  --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
  --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
  --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
  --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
  --sl-color-yellow-100: hsl(54.9 96.7% 88%);
  --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
  --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
  --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
  --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
  --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
  --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
  --sl-color-yellow-800: hsl(31.8 81% 28.8%);
  --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
  --sl-color-yellow-950: hsl(33.1 69% 13.9%);
  --sl-color-lime-50: hsl(78.3 92% 95.1%);
  --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
  --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
  --sl-color-lime-300: hsl(82 84.5% 67.1%);
  --sl-color-lime-400: hsl(82.7 78% 55.5%);
  --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
  --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
  --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
  --sl-color-lime-800: hsl(86.3 69% 22.7%);
  --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
  --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
  --sl-color-green-50: hsl(138.5 76.5% 96.7%);
  --sl-color-green-100: hsl(140.6 84.2% 92.5%);
  --sl-color-green-200: hsl(141 78.9% 85.1%);
  --sl-color-green-300: hsl(141.7 76.6% 73.1%);
  --sl-color-green-400: hsl(141.9 69.2% 58%);
  --sl-color-green-500: hsl(142.1 70.6% 45.3%);
  --sl-color-green-600: hsl(142.1 76.2% 36.3%);
  --sl-color-green-700: hsl(142.4 71.8% 29.2%);
  --sl-color-green-800: hsl(142.8 64.2% 24.1%);
  --sl-color-green-900: hsl(143.8 61.2% 20.2%);
  --sl-color-green-950: hsl(144.3 60.7% 12%);
  --sl-color-emerald-50: hsl(151.8 81% 95.9%);
  --sl-color-emerald-100: hsl(149.3 80.4% 90%);
  --sl-color-emerald-200: hsl(152.4 76% 80.4%);
  --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
  --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
  --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
  --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
  --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
  --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
  --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
  --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
  --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
  --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
  --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
  --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
  --sl-color-teal-400: hsl(172.5 66% 50.4%);
  --sl-color-teal-500: hsl(173.4 80.4% 40%);
  --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
  --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
  --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
  --sl-color-teal-900: hsl(175.9 60.8% 19%);
  --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
  --sl-color-cyan-50: hsl(183.2 100% 96.3%);
  --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
  --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
  --sl-color-cyan-300: hsl(187 92.4% 69%);
  --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
  --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
  --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
  --sl-color-cyan-700: hsl(192.9 82.3% 31%);
  --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
  --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
  --sl-color-cyan-950: hsl(196.8 61% 16.1%);
  --sl-color-sky-50: hsl(204 100% 97.1%);
  --sl-color-sky-100: hsl(204 93.8% 93.7%);
  --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
  --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
  --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
  --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
  --sl-color-sky-600: hsl(200.4 98% 39.4%);
  --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
  --sl-color-sky-800: hsl(201 90% 27.5%);
  --sl-color-sky-900: hsl(202 80.3% 23.9%);
  --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
  --sl-color-blue-50: hsl(213.8 100% 96.9%);
  --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
  --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
  --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
  --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
  --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
  --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
  --sl-color-blue-700: hsl(224.3 76.3% 48%);
  --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
  --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
  --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
  --sl-color-indigo-50: hsl(225.9 100% 96.7%);
  --sl-color-indigo-100: hsl(226.5 100% 93.9%);
  --sl-color-indigo-200: hsl(228 96.5% 88.8%);
  --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
  --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
  --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
  --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
  --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
  --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
  --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
  --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
  --sl-color-violet-50: hsl(250 100% 97.6%);
  --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
  --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
  --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
  --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
  --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
  --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
  --sl-color-violet-700: hsl(263.4 70% 50.4%);
  --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
  --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
  --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
  --sl-color-purple-50: hsl(270 100% 98%);
  --sl-color-purple-100: hsl(268.7 100% 95.5%);
  --sl-color-purple-200: hsl(268.6 100% 91.8%);
  --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
  --sl-color-purple-400: hsl(270 95.2% 75.3%);
  --sl-color-purple-500: hsl(270.7 91% 65.1%);
  --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
  --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
  --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
  --sl-color-purple-900: hsl(273.6 65.6% 32%);
  --sl-color-purple-950: hsl(276 59.5% 16.5%);
  --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
  --sl-color-fuchsia-100: hsl(287 100% 95.5%);
  --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
  --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
  --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
  --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
  --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
  --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
  --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
  --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
  --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
  --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
  --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
  --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
  --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
  --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
  --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
  --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
  --sl-color-pink-700: hsl(335.1 77.6% 42%);
  --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
  --sl-color-pink-900: hsl(335.9 69% 30.4%);
  --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
  --sl-color-rose-50: hsl(355.7 100% 97.3%);
  --sl-color-rose-100: hsl(355.6 100% 94.7%);
  --sl-color-rose-200: hsl(352.7 96.1% 90%);
  --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
  --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
  --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
  --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
  --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
  --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
  --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
  --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
  --sl-color-primary-50: var(--sl-color-sky-50);
  --sl-color-primary-100: var(--sl-color-sky-100);
  --sl-color-primary-200: var(--sl-color-sky-200);
  --sl-color-primary-300: var(--sl-color-sky-300);
  --sl-color-primary-400: var(--sl-color-sky-400);
  --sl-color-primary-500: var(--sl-color-sky-500);
  --sl-color-primary-600: var(--sl-color-sky-600);
  --sl-color-primary-700: var(--sl-color-sky-700);
  --sl-color-primary-800: var(--sl-color-sky-800);
  --sl-color-primary-900: var(--sl-color-sky-900);
  --sl-color-primary-950: var(--sl-color-sky-950);
  --sl-color-success-50: var(--sl-color-green-50);
  --sl-color-success-100: var(--sl-color-green-100);
  --sl-color-success-200: var(--sl-color-green-200);
  --sl-color-success-300: var(--sl-color-green-300);
  --sl-color-success-400: var(--sl-color-green-400);
  --sl-color-success-500: var(--sl-color-green-500);
  --sl-color-success-600: var(--sl-color-green-600);
  --sl-color-success-700: var(--sl-color-green-700);
  --sl-color-success-800: var(--sl-color-green-800);
  --sl-color-success-900: var(--sl-color-green-900);
  --sl-color-success-950: var(--sl-color-green-950);
  --sl-color-warning-50: var(--sl-color-amber-50);
  --sl-color-warning-100: var(--sl-color-amber-100);
  --sl-color-warning-200: var(--sl-color-amber-200);
  --sl-color-warning-300: var(--sl-color-amber-300);
  --sl-color-warning-400: var(--sl-color-amber-400);
  --sl-color-warning-500: var(--sl-color-amber-500);
  --sl-color-warning-600: var(--sl-color-amber-600);
  --sl-color-warning-700: var(--sl-color-amber-700);
  --sl-color-warning-800: var(--sl-color-amber-800);
  --sl-color-warning-900: var(--sl-color-amber-900);
  --sl-color-warning-950: var(--sl-color-amber-950);
  --sl-color-danger-50: var(--sl-color-red-50);
  --sl-color-danger-100: var(--sl-color-red-100);
  --sl-color-danger-200: var(--sl-color-red-200);
  --sl-color-danger-300: var(--sl-color-red-300);
  --sl-color-danger-400: var(--sl-color-red-400);
  --sl-color-danger-500: var(--sl-color-red-500);
  --sl-color-danger-600: var(--sl-color-red-600);
  --sl-color-danger-700: var(--sl-color-red-700);
  --sl-color-danger-800: var(--sl-color-red-800);
  --sl-color-danger-900: var(--sl-color-red-900);
  --sl-color-danger-950: var(--sl-color-red-950);
  --sl-color-neutral-50: var(--sl-color-gray-50);
  --sl-color-neutral-100: var(--sl-color-gray-100);
  --sl-color-neutral-200: var(--sl-color-gray-200);
  --sl-color-neutral-300: var(--sl-color-gray-300);
  --sl-color-neutral-400: var(--sl-color-gray-400);
  --sl-color-neutral-500: var(--sl-color-gray-500);
  --sl-color-neutral-600: var(--sl-color-gray-600);
  --sl-color-neutral-700: var(--sl-color-gray-700);
  --sl-color-neutral-800: var(--sl-color-gray-800);
  --sl-color-neutral-900: var(--sl-color-gray-900);
  --sl-color-neutral-950: var(--sl-color-gray-950);
  --sl-color-neutral-0: hsl(0, 0%, 100%);
  --sl-color-neutral-1000: hsl(0, 0%, 0%);
  --sl-border-radius-small: 0.1875rem;
  --sl-border-radius-medium: 0.25rem;
  --sl-border-radius-large: 0.5rem;
  --sl-border-radius-x-large: 1rem;
  --sl-border-radius-circle: 50%;
  --sl-border-radius-pill: 9999px;
  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
  --sl-spacing-3x-small: 0.125rem;
  --sl-spacing-2x-small: 0.25rem;
  --sl-spacing-x-small: 0.5rem;
  --sl-spacing-small: 0.75rem;
  --sl-spacing-medium: 1rem;
  --sl-spacing-large: 1.25rem;
  --sl-spacing-x-large: 1.75rem;
  --sl-spacing-2x-large: 2.25rem;
  --sl-spacing-3x-large: 3rem;
  --sl-spacing-4x-large: 4.5rem;
  --sl-transition-x-slow: 1000ms;
  --sl-transition-slow: 500ms;
  --sl-transition-medium: 250ms;
  --sl-transition-fast: 150ms;
  --sl-transition-x-fast: 50ms;
  --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --sl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --sl-font-serif: Georgia, "Times New Roman", serif;
  --sl-font-size-2x-small: 0.625rem;
  --sl-font-size-x-small: 0.75rem;
  --sl-font-size-small: 0.875rem;
  --sl-font-size-medium: 1rem;
  --sl-font-size-large: 1.25rem;
  --sl-font-size-x-large: 1.5rem;
  --sl-font-size-2x-large: 2.25rem;
  --sl-font-size-3x-large: 3rem;
  --sl-font-size-4x-large: 4.5rem;
  --sl-font-weight-light: 300;
  --sl-font-weight-normal: 400;
  --sl-font-weight-semibold: 500;
  --sl-font-weight-bold: 700;
  --sl-letter-spacing-denser: -0.03em;
  --sl-letter-spacing-dense: -0.015em;
  --sl-letter-spacing-normal: normal;
  --sl-letter-spacing-loose: 0.075em;
  --sl-letter-spacing-looser: 0.15em;
  --sl-line-height-denser: 1;
  --sl-line-height-dense: 1.4;
  --sl-line-height-normal: 1.8;
  --sl-line-height-loose: 2.2;
  --sl-line-height-looser: 2.6;
  --sl-focus-ring-color: var(--sl-color-primary-600);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-width: 3px;
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
    var(--sl-focus-ring-color);
  --sl-focus-ring-offset: 1px;
  --sl-button-font-size-small: var(--sl-font-size-x-small);
  --sl-button-font-size-medium: var(--sl-font-size-small);
  --sl-button-font-size-large: var(--sl-font-size-medium);
  --sl-input-height-small: 1.875rem;
  --sl-input-height-medium: 2.5rem;
  --sl-input-height-large: 3.125rem;
  --sl-input-background-color: var(--sl-color-neutral-0);
  --sl-input-background-color-hover: var(--sl-input-background-color);
  --sl-input-background-color-focus: var(--sl-input-background-color);
  --sl-input-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-border-color: var(--sl-color-neutral-300);
  --sl-input-border-color-hover: var(--sl-color-neutral-400);
  --sl-input-border-color-focus: var(--sl-color-primary-500);
  --sl-input-border-color-disabled: var(--sl-color-neutral-300);
  --sl-input-border-width: 1px;
  --sl-input-required-content: "*";
  --sl-input-required-content-offset: -2px;
  --sl-input-required-content-color: var(--sl-input-label-color);
  --sl-input-border-radius-small: var(--sl-border-radius-medium);
  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
  --sl-input-border-radius-large: var(--sl-border-radius-medium);
  --sl-input-font-family: var(--sl-font-sans);
  --sl-input-font-weight: var(--sl-font-weight-normal);
  --sl-input-font-size-small: var(--sl-font-size-small);
  --sl-input-font-size-medium: var(--sl-font-size-medium);
  --sl-input-font-size-large: var(--sl-font-size-large);
  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
  --sl-input-color: var(--sl-color-neutral-700);
  --sl-input-color-hover: var(--sl-color-neutral-700);
  --sl-input-color-focus: var(--sl-color-neutral-700);
  --sl-input-color-disabled: var(--sl-color-neutral-900);
  --sl-input-icon-color: var(--sl-color-neutral-500);
  --sl-input-icon-color-hover: var(--sl-color-neutral-600);
  --sl-input-icon-color-focus: var(--sl-color-neutral-600);
  --sl-input-placeholder-color: var(--sl-color-neutral-500);
  --sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
  --sl-input-spacing-small: var(--sl-spacing-small);
  --sl-input-spacing-medium: var(--sl-spacing-medium);
  --sl-input-spacing-large: var(--sl-spacing-large);
  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
  --sl-input-focus-ring-offset: 0;
  --sl-input-filled-background-color: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-focus: var(--sl-color-neutral-100);
  --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
  --sl-input-filled-color: var(--sl-color-neutral-800);
  --sl-input-filled-color-hover: var(--sl-color-neutral-800);
  --sl-input-filled-color-focus: var(--sl-color-neutral-700);
  --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
  --sl-input-label-font-size-small: var(--sl-font-size-small);
  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
  --sl-input-label-font-size-large: var(--sl-font-size-large);
  --sl-input-label-color: inherit;
  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
  --sl-input-help-text-color: var(--sl-color-neutral-500);
  --sl-toggle-size-small: 0.875rem;
  --sl-toggle-size-medium: 1.125rem;
  --sl-toggle-size-large: 1.375rem;
  --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
  --sl-panel-background-color: var(--sl-color-neutral-0);
  --sl-panel-border-color: var(--sl-color-neutral-200);
  --sl-panel-border-width: 1px;
  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
  --sl-tooltip-background-color: var(--sl-color-neutral-800);
  --sl-tooltip-color: var(--sl-color-neutral-0);
  --sl-tooltip-font-family: var(--sl-font-sans);
  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
  --sl-tooltip-font-size: var(--sl-font-size-small);
  --sl-tooltip-line-height: var(--sl-line-height-dense);
  --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
  --sl-tooltip-arrow-size: 6px;
  --sl-z-index-drawer: 700;
  --sl-z-index-dialog: 800;
  --sl-z-index-dropdown: 900;
  --sl-z-index-toast: 950;
  --sl-z-index-tooltip: 1000;
}
@supports (scrollbar-gutter: stable) {
  .sl-scroll-lock {
    scrollbar-gutter: var(--sl-scroll-lock-gutter) !important;
  }
  .sl-scroll-lock body {
    overflow: hidden !important;
  }
}
@supports not (scrollbar-gutter: stable) {
  .sl-scroll-lock body {
    padding-right: var(--sl-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}
.sl-toast-stack {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--sl-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.sl-toast-stack sl-alert {
  margin: var(--sl-spacing-medium);
}
.sl-toast-stack sl-alert::part(base) {
  box-shadow: var(--sl-shadow-large);
}
h1 {
  font-size: var(--op-font-4x-large);
  font-weight: var(--op-font-weight-bold);
}
h2 {
  font-size: var(--op-font-3x-large);
  font-weight: var(--op-font-weight-bold);
}
h3 {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-semi-bold);
}
h4 {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-semi-bold);
}
h5 {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-semi-bold);
}
h6 {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
}
p {
  margin-bottom: var(--op-space-small);
  font-size: var(--op-font-medium);
}
small {
  font-size: var(--op-font-small);
}
.app-with-sidebar {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.app-body {
  flex-grow: 1;
  min-width: calc(100vw - var(--op-space-scale-unit)*21.6);
}
.app__content {
  box-sizing: border-box;
  overflow-y: auto;
  max-width: initial;
  margin: initial;
  padding: initial;
}
.app__content-area {
  max-width: initial;
  height: 100%;
}
.app__content--wide {
  max-width: calc(var(--op-space-scale-unit)*240);
}
.horizontal-collection {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--op-space-medium);
}
.body__content {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  height: 100%;
}
.body__content--padded {
  padding-inline: var(--op-space-x-large);
  padding-block: var(--op-space-medium) var(--op-space-x-large);
}
:root {
  --op-icon-input-search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="%236C7C9D" d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z"/></svg>');
  --op-icon-search-cancel: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="%230077CC" d="m16.5 33.6 7.5-7.5 7.5 7.5 2.1-2.1-7.5-7.5 7.5-7.5-2.1-2.1-7.5 7.5-7.5-7.5-2.1 2.1 7.5 7.5-7.5 7.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Z"/></svg>');
  --op-form-dropdown-arrow: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z"/></svg>');
}
:root {
  --op-color-primary-plus-eight: hsl(var(--op-color-primary-h), 83%, 98%);
  --op-color-primary-plus-seven: hsl(var(--op-color-primary-h), 91%, 96%);
  --op-color-primary-plus-six: hsl(var(--op-color-primary-h), 94%, 94%);
  --op-color-primary-plus-five: hsl(var(--op-color-primary-h), 96%, 90%);
  --op-color-primary-plus-four: hsl(var(--op-color-primary-h), 98%, 84%);
  --op-color-primary-plus-three: hsl(var(--op-color-primary-h), 99%, 70%);
  --op-color-primary-plus-two: hsl(var(--op-color-primary-h), 99%, 62%);
  --op-color-primary-plus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 48%);
  --op-color-primary-base: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 42%);
  --op-color-primary-minus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 35%);
  --op-color-primary-minus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 30%);
  --op-color-primary-minus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 26%);
  --op-color-primary-minus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 22%);
  --op-color-primary-minus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 16%);
  --op-color-primary-minus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 12%);
  --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 40%);
  --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 39%);
  --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 38%);
  --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 37%);
  --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 35%);
  --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 32%);
  --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 25%);
  --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 21%);
  --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 13%);
  --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-base: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 5%);
  --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 1%);
  --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h), 96%, 91%);
  --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h), 98%, 84%);
  --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h), 98%, 76%);
  --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h), 99%, 68%);
  --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h), 99%, 60%);
  --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h), 99%, 52%);
  --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 44%);
  --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 42%);
  --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h), var(--op-color-primary-s), 40%);
  --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h), 71%, 99%);
  --op-color-secondary-plus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 100%);
  --op-color-secondary-plus-eight: hsl(var(--op-color-secondary-h), 33%, 98%);
  --op-color-secondary-plus-seven: hsl(var(--op-color-secondary-h), 36%, 96%);
  --op-color-secondary-plus-six: hsl(var(--op-color-secondary-h), 39%, 94%);
  --op-color-secondary-plus-five: hsl(var(--op-color-secondary-h), 40%, 90%);
  --op-color-secondary-plus-four: hsl(var(--op-color-secondary-h), 40%, 84%);
  --op-color-secondary-plus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 70%);
  --op-color-secondary-plus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 60%);
  --op-color-secondary-plus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 47%);
  --op-color-secondary-base: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 40%);
  --op-color-secondary-minus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 32%);
  --op-color-secondary-minus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 28%);
  --op-color-secondary-minus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 26%);
  --op-color-secondary-minus-four: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 22%);
  --op-color-secondary-minus-five: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 16%);
  --op-color-secondary-minus-six: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 12%);
  --op-color-secondary-minus-seven: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 8%);
  --op-color-secondary-minus-eight: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 4%);
  --op-color-secondary-minus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 0%);
  --op-color-secondary-on-plus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 52%);
  --op-color-secondary-on-plus-max-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-eight: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 51%);
  --op-color-secondary-on-plus-eight-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-seven: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 50%);
  --op-color-secondary-on-plus-seven-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-six: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 48%);
  --op-color-secondary-on-plus-six-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-five: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 45%);
  --op-color-secondary-on-plus-five-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-four: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 40%);
  --op-color-secondary-on-plus-four-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 27%);
  --op-color-secondary-on-plus-three-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 15%);
  --op-color-secondary-on-plus-two-alt: hsl(var(--op-color-secondary-h), 60%, 1%);
  --op-color-secondary-on-plus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 92%);
  --op-color-secondary-on-plus-one-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-base: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 84%);
  --op-color-secondary-on-base-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-one: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 75%);
  --op-color-secondary-on-minus-one-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-two: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 71%);
  --op-color-secondary-on-minus-two-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-three: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 69%);
  --op-color-secondary-on-minus-three-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-four: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 65%);
  --op-color-secondary-on-minus-four-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-five: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 61%);
  --op-color-secondary-on-minus-five-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-six: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 60%);
  --op-color-secondary-on-minus-six-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-seven: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 55%);
  --op-color-secondary-on-minus-seven-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-eight: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 54%);
  --op-color-secondary-on-minus-eight-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-secondary-on-minus-max: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 53%);
  --op-color-secondary-on-minus-max-alt: hsl(var(--op-color-secondary-h), var(--op-color-secondary-s), 99%);
  --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 46%);
  --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 26%);
  --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 22%);
  --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 16%);
  --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 12%);
  --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 40%);
  --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 20%);
  --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 38%);
  --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 37%);
  --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 46%);
  --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 43%);
  --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 38%);
  --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 27%);
  --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 22%);
  --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 1%);
  --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 94%);
  --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-base: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 86%);
  --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 81%);
  --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 76%);
  --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 71%);
  --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 66%);
  --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 62%);
  --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 59%);
  --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 53%);
  --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 51%);
  --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h), var(--op-color-neutral-s), 50%);
  --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h), 14%, 99%);
  --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h), 67%, 98%);
  --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h), 74%, 96%);
  --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h), 81%, 94%);
  --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h), 81%, 90%);
  --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h), 81%, 86%);
  --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 80%);
  --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 72%);
  --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 62%);
  --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 55%);
  --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 40%);
  --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 22%);
  --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 16%);
  --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 12%);
  --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 50%);
  --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 48%);
  --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 46%);
  --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 44%);
  --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 41%);
  --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 30%);
  --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 22%);
  --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 10%);
  --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 14%);
  --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 8%);
  --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h), 100%, 1%);
  --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h), 81%, 90%);
  --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h), 82%, 81%);
  --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h), 82%, 76%);
  --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 72%);
  --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 68%);
  --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 63%);
  --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 55%);
  --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 51%);
  --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h), var(--op-color-alerts-danger-s), 50%);
  --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h), 71%, 99%);
  --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h), 83%, 98%);
  --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h), 91%, 96%);
  --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h), 94%, 94%);
  --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h), 96%, 90%);
  --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h), 98%, 84%);
  --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h), 98%, 78%);
  --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h), 99%, 70%);
  --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h), 99%, 62%);
  --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 48%);
  --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 40%);
  --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 36%);
  --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 28%);
  --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 16%);
  --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 12%);
  --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 26%);
  --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 26%);
  --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 26%);
  --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 25%);
  --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 25%);
  --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 24%);
  --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 23%);
  --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 22%);
  --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 22%);
  --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 15%);
  --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 12%);
  --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 12%);
  --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 4%);
  --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 1%);
  --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 54%);
  --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 44%);
  --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 41%);
  --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 31%);
  --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 28%);
  --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h), var(--op-color-alerts-notice-s), 27%);
  --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h), 71%, 99%);
  --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h), 83%, 98%);
  --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h), 91%, 96%);
  --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h), 94%, 94%);
  --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h), 96%, 90%);
  --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h), 98%, 84%);
  --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h), 99%, 70%);
  --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h), 99%, 68%);
  --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 60%);
  --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 32%);
  --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 28%);
  --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 26%);
  --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 22%);
  --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 16%);
  --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 12%);
  --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 40%);
  --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 39%);
  --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 38%);
  --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 37%);
  --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 35%);
  --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 32%);
  --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 25%);
  --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 22%);
  --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 12%);
  --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 1%);
  --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h), 98%, 84%);
  --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h), 98%, 76%);
  --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h), 99%, 72%);
  --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h), 99%, 64%);
  --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h), 99%, 56%);
  --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h), 99%, 52%);
  --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 44%);
  --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 42%);
  --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h), var(--op-color-alerts-info-s), 40%);
  --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h), 71%, 99%);
  --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h), 83%, 98%);
  --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h), 91%, 96%);
  --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h), 88%, 94%);
  --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h), 92%, 90%);
  --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 86%);
  --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 70%);
  --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 60%);
  --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 46%);
  --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 40%);
  --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 32%);
  --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 28%);
  --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 22%);
  --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 16%);
  --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 12%);
  --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 8%);
  --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 4%);
  --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 30%);
  --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 30%);
  --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 30%);
  --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 29%);
  --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 28%);
  --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 26%);
  --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 24%);
  --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 23%);
  --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 20%);
  --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 13%);
  --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 12%);
  --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h), 100%, 4%);
  --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h), 100%, 1%);
  --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 88%);
  --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h), var(--op-color-alerts-warning-s), 77%);
  --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h), 71%, 99%);
  --op-color-background: var(--op-color-neutral-plus-eight);
  --op-color-on-background: var(--op-color-neutral-on-plus-eight-alt);
}
:root {
  --op-color-primary-h: 205;
  --op-color-primary-s: 100%;
  --op-color-primary-l: 35%;
  --op-color-secondary-h: 220;
  --op-color-secondary-s: 42%;
  --op-color-secondary-l: 50%;
  --op-color-neutral-h: 220;
  --op-color-neutral-s: 20%;
  --op-color-neutral-l: 40%;
  --op-color-alerts-danger-h: 0;
  --op-color-alerts-danger-s: 84%;
  --op-color-alerts-danger-l: 60%;
  --op-color-alerts-notice-h: 158;
  --op-color-alerts-notice-s: 100%;
  --op-color-alerts-notice-l: 35%;
  --op-color-alerts-info-h: 205;
  --op-color-alerts-info-s: 100%;
  --op-color-alerts-info-l: 35%;
  --op-color-alerts-warning-h: 43;
  --op-color-alerts-warning-s: 96%;
  --op-color-alerts-warning-l: 56%;
  --op-font-family: "Manrope", Roboto, sans-serif;
  --op-color-border: var(--op-color-neutral-plus-four);
  --op-border-input: inset 0px 1px 1px var(--op-color-neutral-plus-four);
  --op-inset-shadow-input: inset 0px 2px 1px rgba(0, 0, 0, 0.08);
  --op-border-width: 1px;
  --op-border-width-large: 2px;
  --op-border-width-x-large: 4px;
  --op-space-scale-unit: 1rem;
  --op-space-4x-small: calc(var(--op-space-scale-unit)*0.1);
  --op-space-3x-small: calc(var(--op-space-scale-unit)*0.2);
  --op-space-2x-small: calc(var(--op-space-scale-unit)*0.4);
  --op-space-x-small: calc(var(--op-space-scale-unit)*0.8);
  --op-space-small: calc(var(--op-space-scale-unit)*1.2);
  --op-space-medium: calc(var(--op-space-scale-unit)*1.6);
  --op-space-large: calc(var(--op-space-scale-unit)*2);
  --op-space-x-large: calc(var(--op-space-scale-unit)*2.4);
  --op-space-2x-large: calc(var(--op-space-scale-unit)*2.8);
  --op-space-3x-large: calc(var(--op-space-scale-unit)*3.2);
  --op-space-4x-large: calc(var(--op-space-scale-unit)*3.6);
  --op-space-5x-large: calc(var(--op-space-scale-unit)*4);
  --op-space-6x-large: calc(var(--op-space-scale-unit)*4.4);
  --op-space-7x-large: calc(var(--op-space-scale-unit)*4.8);
  --op-space-8x-large: calc(var(--op-space-scale-unit)*6.4);
  --op-space-9x-large: calc(var(--op-space-scale-unit)*8);
  --fd-focus-style: inset var(--op-border-all) var(--op-color-primary-minus-three), 0 0 0 3px var(--op-color-primary-plus-four);
  --fd-focus-style-delete: inset var(--op-border-all) var(--op-color-alerts-danger-minus-three), 0 0 0 3px var(--op-color-alerts-danger-plus-four);
  --op-header-height: var(--op-space-8x-large);
  --op-table-cell-height: var(--op-space-8x-large);
  --op-table-min-height: 50rem;
  /* Input Heights */
  --op-input-height-medium: 3.2rem;
  --op-input-height-x-large: 4.4rem;
  --op-input-height-2x-large: 8.4rem;
  /* Opacities */
  --op-opacity-disabled: 0.44;
  /* Shadows */
  --op-shadow-x-small: 0px 1px 2px hsl(from var(--op-color-neutral-minus-max) h s l / 8%);
}
@keyframes slideIn {
  0% {
    right: -130%;
  }
  10% {
    right: 0;
  }
}
/* Animations */
@keyframes slideInOut {
  /* If a duration of 5s is set: */
  /* Start off the screen */
  0% {
    right: -130%;
  }
  /* Animate onto the screen for 0.5s */
  10% {
    right: 0;
  }
  /* Stay on the screen for 3s */
  70% {
    right: 0;
  }
  /* Animate off the screen for 1.5s */
  100% {
    right: -130%;
  }
}
/* Container for alerts in lower-right-hand corner of screen */
.alert-container {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--op-space-small);
  padding: var(--op-space-small);
}
.alert {
  /* Add a faint shadow to alerts */
  --fd-alert-shadow: 0px var(--op-border-width) var(--op-border-width-x-large) rgba(0, 0, 0, 0.08);
  --fd-transition-alert: 5s;
  position: relative;
  z-index: var(--op-z-index-alert-group);
  animation: unset;
  border-radius: var(--op-radius-large);
  font-weight: var(--op-font-weight-bold);
  padding: var(--op-space-medium) var(--op-space-large);
  /* Modifiers */
  &.alert--notice {
    background-color: var(--op-color-alerts-notice-plus-five);
    color: var(--op-color-alerts-notice-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-plus-four), var(--fd-alert-shadow);
  }
  &.alert--info {
    background-color: var(--op-color-alerts-info-plus-five);
    color: var(--op-color-alerts-info-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-info-plus-four), var(--fd-alert-shadow);
  }
  &.alert--warning {
    background-color: var(--op-color-alerts-warning-plus-five);
    color: var(--op-color-alerts-warning-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-plus-four), var(--fd-alert-shadow);
  }
  &.alert--danger {
    background-color: var(--op-color-alerts-danger-plus-five);
    color: var(--op-color-alerts-danger-on-plus-five);
    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-four), var(--fd-alert-shadow);
  }
  /* Alert moves off the screen after a short period of time */
  &.alert--temporary {
    animation: slideInOut var(--fd-transition-alert) normal forwards;
  }
  /* Alert stays on screen until user dismisses it */
  &.alert--hold {
    animation: slideIn var(--fd-transition-alert) normal forwards;
  }
  /* Alert text */
  .alert__message {
    font-size: var(--op-font-x-small);
  }
}
.badge {
  line-height: var(--op-line-height-densest);
  font-weight: var(--op-font-weight-normal);
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four-alt);
  &.badge--primary {
    background-color: var(--op-color-primary-minus-one);
    color: var(--op-color-primary-on-minus-one);
  }
  &.badge--secondary {
    background-color: var(--op-color-neutral-plus-eight);
    color: var(--op-color-neutral-on-plus-eight-alt);
    border: var(--op-border-width) solid var(--op-color-neutral-plus-three);
  }
  /* Project-specific modifier */
  &.badge--outlined {
    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-on-plus-max-alt);
    box-shadow: var(--op-border-all) var(--op-color-neutral-plus-four);
  }
  &.badge--wrappable {
    text-wrap: auto;
    line-height: var(--op-line-height-dense);
    &.badge--pill {
      border-radius: var(--op-radius-x-large); /* Ensure wrapped badges maintain pill shape without clipping corners */
    }
  }
}
/* ====================== */
/* Button Theme Overrides */
/* ====================== */
.btn {
  --_op-btn-height-small: var(--op-input-height-medium);
  --_op-btn-height-medium: var(--op-input-height-large);
  --_op-btn-height-large: var(--op-input-height-x-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-medium);
  --_op-btn-padding-large: 0 var(--op-space-medium);
  /* Component Defaults */
  --__op-btn-font-size: var(--_op-btn-font-medium);
  --__op-btn-height: var(--_op-btn-height-medium);
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all) var(--op-color-border), var(--op-shadow-x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-semi-bold);
  height: var(--__op-btn-height);
  padding: 0 var(--op-space-small);
  /* Default Focus State */
  &:focus,
  &:focus-within,
  &:focus-visible {
    outline: none;
    box-shadow: var(--fd-focus-style);
  }
  /* Default Hover State */
  &:hover {
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
    color: var(--op-color-primary-on-plus-eight);
  }
  /* Default Borderless State */
  &.btn--no-border {
    color: var(--op-color-primary-on-plus-max-alt);
    /* Default Borderless + Hover State */
    &:hover {
      background-color: var(--op-color-primary-plus-eight);
      box-shadow: var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
      color: var(--op-color-primary-on-plus-eight);
    }
  }
  /* Small button */
  &.btn--small {
    font-weight: var(--op-font-weight-bold);
  }
  /* Large button */
  &.btn--large {
    font-weight: var(--op-font-weight-bold);
  }
  /* Variant Modifiers */
  /* Primary Button */
  &.btn--primary {
    background-color: var(--op-color-primary-minus-one);
    box-shadow: var(--op-shadow-x-small);
    color: var(--op-color-primary-on-minus-one-alt);
    /* Hover State */
    &:hover {
      background-color: var(--op-color-primary-minus-three);
      color: var(--op-color-primary-on-minus-three-alt);
      box-shadow: var(--op-shadow-x-small);
    }
    /* Focus State */
    &:focus,
    &:focus-within,
    &:focus-visible {
      box-shadow: var(--fd-focus-style);
      background-color: var(--op-color-primary-minus-one);
      color: var(--op-color-primary-on-minus-one-alt);
    }
    /* Primary Borderless State */
    &.btn--no-border {
      /* Primary Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-primary-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
        color: var(--op-color-primary-on-plus-eight);
      }
    }
  }
  /* Delete Button */
  &.btn--delete {
    background-color: var(--op-color-alerts-danger-minus-one);
    box-shadow: var(--op-shadow-x-small);
    color: var(--op-color-alerts-danger-on-minus-one-alt);
    /* Hover State */
    &:hover {
      background-color: var(--op-color-alerts-danger-minus-three);
      box-shadow: var(--op-shadow-x-small);
      color: var(--op-color-alerts-danger-on-minus-three-alt);
    }
    /* Focus State */
    &:focus,
    &:focus-within,
    &:focus-visible {
      background-color: var(--op-color-alerts-danger-minus-one);
      box-shadow: var(--fd-focus-style-delete);
      color: var(--op-color-alerts-danger-on-minus-one-alt);
    }
    /* Borderless State */
    &.btn--no-border {
      background-color: transparent;
      box-shadow: none;
      color: var(--op-color-alerts-danger-on-plus-max);
      /* Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-alerts-danger-plus-eight);
        box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three), var(--op-shadow-x-small);
        color: var(--op-color-alerts-danger-on-plus-eight);
      }
    }
  }
}
/* Input */
.form-control, .ts-wrapper .ts-control {
  --_op-form-control-font-small: var(--op-font-x-small);
  --_op-form-control-font-medium: var(--op-font-small);
  --_op-form-control-font-large: var(--op-font-medium);
  --__op-form-control-height: var(--_op-form-control-height-large);
  --op_input-disabled-opacity: 0.44;
  /* Size Modifiers */
  &.form-control--small {
    font-weight: var(--op-font-weight-normal);
  }
  &.form-control--medium {
    font-weight: var(--op-font-weight-semi-bold);
  }
}
.form-control:not([type=radio], [type=checkbox]), .ts-wrapper .ts-control:not([type=radio], [type=checkbox]) {
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-small);
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight-alt);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-small);
  box-shadow: var(--op-inset-shadow-input), inset var(--op-border-all) var(--__op-form-control-border-color);
  &:focus,
  &:focus-within,
  &:focus-visible,
  &:active {
    outline: none;
    box-shadow: 0px 0px 0px var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
    &:hover:not(:disabled) {
      box-shadow: 0px 0px 0px var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
    }
  }
  &::-moz-placeholder {
    color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
  }
  &::placeholder {
    color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
  }
  &:hover:not(:disabled) {
    background-color: var(--op-color-primary-plus-eight);
    color: var(--op-color-primary-on-plus-eight-alt);
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-two), var(--op-border-input);
  }
}
.disabled .form-control:not([type=radio], [type=checkbox]), .disabled .ts-wrapper .ts-control:not([type=radio], [type=checkbox]), .ts-wrapper .disabled .ts-control:not([type=radio], [type=checkbox]) {
  opacity: var(--op-opacity-disabled);
  box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  cursor: not-allowed !important;
  padding: var(--op-space-x-small) var(--op-space-small);
  /* "not(:disabled)" is used to override the specificity of the ":hover:not(:disabled)" rule above
  /* this rule still applies because it's being applied to a div with class "disabled"
  /* and not an element with the attribute disabled */
  &:hover:not(:disabled) {
    background-color: var(--op-color-neutral-plus-eight);
    box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  }
  /* important is needed here to override the cursor rule given by tom select (out of our control) */
  * {
    cursor: not-allowed !important;
  }
}
.readonly .form-control:not([type=radio], [type=checkbox]), .readonly .ts-wrapper .ts-control:not([type=radio], [type=checkbox]), .ts-wrapper .readonly .ts-control:not([type=radio], [type=checkbox]) {
  opacity: var(--op-opacity-disabled);
  box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  cursor: not-allowed !important;
  padding: var(--op-space-x-small) var(--op-space-small);
  /* "not(:disabled)" is used to override the specificity of the ":hover:not(:disabled)" rule above
  /* this rule still applies because it's being applied to a div with class "disabled"
  /* and not an element with the attribute disabled */
  &:hover:not(:disabled) {
    background-color: var(--op-color-neutral-plus-seven);
    box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
  }
  /* important is needed here to override the cursor rule given by tom select (out of our control) */
  * {
    cursor: not-allowed !important;
  }
}
/* State modifiers */
.form-group--error .form-control:not([type=radio], [type=checkbox]), .form-group--error .ts-wrapper .ts-control:not([type=radio], [type=checkbox]), .ts-wrapper .form-group--error .ts-control:not([type=radio], [type=checkbox]) {
  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-one);
}
.form-group--warning .form-control:not([type=radio], [type=checkbox]), .form-group--warning .ts-wrapper .ts-control:not([type=radio], [type=checkbox]), .ts-wrapper .form-group--warning .ts-control:not([type=radio], [type=checkbox]) {
  box-shadow: var(--op-border-all) var(--op-color-alerts-warning-plus-one);
}
.form-group.form-group--error {
  gap: var(--op-space-2x-small);
}
.form-group {
  &.form-group--small {
    width: calc(var(--op-space-scale-unit)*8); /* 80px */
  }
  &.form-group--medium {
    width: calc(var(--op-space-scale-unit)*12); /* 120px */
  }
  /* Right-aligned "Exclude" filter switch */
  &.form-group--switch-exclude {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0;
  }
  &.form-group--no-padding {
    padding: 0;
  }
}
/* If you field has a text label that extends beyond the actual input.... consider using these suffix text styles */
.form-group {
  &.form-group--with-suffix {
    white-space: nowrap;
  }
  ~ .form-control__suffix-text {
    margin-left: var(--op-space-small);
    /* Push down suffix text to make it align vertically with the input within the form group */
    padding-top: calc(var(--op-space-scale-unit)*4.4); /* 44px */
    font-size: var(--op-font-small);
    font-weight: var(--op-font-weight-normal);
  }
  /* Adjust suffix text to accommodate gap change where input is in error state */
  &.form-group--error {
    /* suffix text adjacent to form group in error state */
    ~ .form-control__suffix-text {
      padding-top: calc(var(--op-space-scale-unit)*4); /* 40px */
    }
  }
}
.form-error, .live-input__display-error {
  padding-top: 0;
  padding-left: 0;
  background-color: unset;
  color: var(--op-color-alerts-danger-on-minus-eight);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}
fieldset {
  margin: unset;
  padding: unset;
  border: unset;
}
textarea.form-control, .ts-wrapper textarea.ts-control {
  font-size: var(--op-font-x-small);
  resize: vertical;
  &[readonly] {
    /*Allow pointer events to allow scrolling readonly text areas,
     but remove state focus/hover styling to communicate lack of interactibility */
    pointer-events: all;
    resize: none;
    &:focus:not(:disabled) {
      background-color: var(--op-color-neutral-plus-seven);
      font-weight: var(--op-font-weight-normal);
      color: var(--op-color-neutral-on-plus-seven);
      box-shadow: unset !important;
    }
    &:hover:not(:disabled) {
      background-color: var(--op-color-neutral-plus-seven);
      font-weight: var(--op-font-weight-normal);
      color: var(--op-color-neutral-on-plus-seven);
      box-shadow: unset !important;
    }
  }
  &.monospace {
    font-family: monospace;
    font-weight: var(--op-font-weight-normal);
  }
}
select.form-control, .ts-wrapper select.ts-control {
  background-image: var(--op-form-dropdown-arrow);
  content: "";
  background-position: right var(--op-space-small) center;
  background-repeat: no-repeat;
  background-size: var(--op-space-large);
  background-color: var(--op-color-neutral-plus-max);
  border-color: transparent;
  box-shadow: var(--op-border-all) var(--op-color-border), var(--op-shadow-x-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  padding-right: var(--op-space-4x-large);
  text-align: left;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
  &:not(:disabled, .btn--disabled):hover {
    /* @include btn-default-hover-styles; */
    /* Copied in because CSS does not support @mixins */
    background-color: var(--op-color-primary-plus-eight);
    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
    color: var(--op-color-primary-on-plus-eight);
  }
}
.form__checkbox {
  --__op-form-control-height: var(--_op-form-control-height-medium);
}
/* Read Only */
.form-control--read-only {
  box-shadow: none;
}
.input-with-icon {
  position: relative;
  grid-column: 1/3;
  .material-symbols-outlined {
    display: flex;
    align-items: center;
    position: absolute;
    right: var(--op-space-small);
    top: 0;
    bottom: 0;
    pointer-events: none;
  }
}
/* Use this when you want to mimic a readonly input style but do not want to submit the data on form submit.
/* It's recommended that this be within a <span class="readonly-data-display"> tag */
.readonly-data-display {
  display: inline-grid;
  align-items: center;
  grid-column: 1/3;
  background: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large);
  color: var(--op-color-neutral-on-plus-seven);
  font-size: var(--op-font-small);
  height: var(--op-input-height-large);
  padding: var(--op-space-2x-small) var(--op-space-small) var(--op-space-2x-small) var(--op-space-small);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  &.readonly-data-display--medium {
    width: calc(var(--op-space-scale-unit)*12);
  }
  &.readonly-data-display--small {
    width: calc(var(--op-space-scale-unit)*10);
  }
}
.form-control, .ts-wrapper .ts-control {
  &[readonly] {
    padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
    background: var(--op-color-neutral-plus-seven);
    box-shadow: none;
    color: var(--op-color-neutral-on-plus-seven);
    &::-webkit-input-placeholder {
      color: var(--op-color-neutral-on-plus-seven);
    }
  }
}
input[type=search] {
  background-image: var(--op-icon-input-search);
  content: "";
  background-position: left var(--op-space-medium) center;
  background-repeat: no-repeat;
  background-size: var(--op-space-large);
  padding-left: var(--op-space-5x-large);
  &::-moz-placeholder {
    opacity: 0.4;
  }
  &::placeholder {
    opacity: 0.4;
  }
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: var(--op-space-medium);
  width: var(--op-space-medium);
  background: var(--op-icon-search-cancel);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}
input[type=search]:focus::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: all;
}
.form-group--horizontal {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  padding: 0;
  min-width: var(--op-space-8x-large);
}
.form-control--numeric {
  text-align: right;
}
.form-label {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-bold);
  line-height: var(--op-line-height-dense);
  font-size: var(--op-font-x-small);
  letter-spacing: 0;
  &.form-label--large {
    font-size: var(--op-font-small);
    font-weight: var(--op-font-weight-semi-bold);
  }
}
.form__container--two-column {
  display: flex;
  flex-direction: column;
  .two-column-form__row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--op-space-medium);
    .two-column-form__column {
      width: 50%;
      &:only-of-type {
        padding-right: calc(var(--op-space-x-large)/2);
      }
    }
  }
  .two-column-form__field-set {
    color: var(--op-color-neutral-on-plus-eight-alt);
    font-weight: var(--op-font-weight-bold);
    line-height: var(--op-line-height-dense);
    font-size: var(--op-font-x-small);
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: var(--op-space-4x-small);
  }
  .two-column-form__section {
    &:not(:last-child) {
      margin-bottom: var(--op-space-x-large);
      padding-bottom: var(--op-space-x-large);
      border-bottom: 1px solid var(--op-color-neutral-plus-four);
    }
  }
  .two-column-form__section-header {
    font-weight: var(--op-font-weight-bold);
    font-size: var(--op-font-size-medium);
    line-height: 1;
    padding-bottom: var(--op-space-medium);
    display: flex;
    gap: var(--op-space-x-small);
    .tooltip {
      line-height: 1.5;
    }
  }
  .two-column-form__checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--op-space-2x-small);
    padding-top: var(--op-space-large);
    .tooltip-container {
      margin-bottom: var(--op-space-2x-small);
    }
  }
}
/* File Form Control */
.form-control[type=file], .ts-wrapper [type=file].ts-control {
  /* Fix visual bug with file input button being misaligned */
  padding-block: 0;
}
.icon {
  --_op-icon-font-size-x-large: var(--op-font-x-large);
}
.dialog {
  --width: calc(var(--op-space-scale-unit)*64);
  --body-spacing: 0;
}
.dialog::part(panel) {
  border-radius: var(--op-radius-large);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  overflow: hidden;
}
.dialog::part(header), .dialog::part(footer) {
  display: none;
}
.dialog::part(body) {
  display: flex;
  flex-direction: column;
}
.dialog.dialog--x-large {
  --width: calc(100vw - var(--op-space-5x-large)*2);
  --height: calc(100vh - var(--op-space-5x-large)*2);
}
.dialog.dialog--x-large::part(panel) {
  width: var(--width);
  height: var(--height);
}
.dialog.dialog--x-large .dialog__header {
  padding: var(--op-space-medium) var(--op-space-2x-large);
  align-items: center;
}
.dialog.dialog--x-large .dialog__header-title {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-semi-bold);
}
.dialog.dialog--x-large .dialog__body {
  padding: 0;
}
.dialog.dialog--x-large .dialog__footer {
  padding: var(--op-space-small) var(--op-space-2x-large);
  align-items: center;
}
.dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
  padding: var(--op-space-small) var(--op-space-medium);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.dialog__body {
  background-color: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-x-large);
  flex: 1;
  overflow: auto;
}
.dialog__instructions {
  font-size: var(--op-font-small);
}
.dialog__footer {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: var(--op-space-small) var(--op-space-medium);
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.dialog__header-title {
  margin: 0;
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-normal);
}
.dialog__header-title--bold {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-bold);
}
.dialog__header-close {
  cursor: pointer;
}
.dialog__header-close a {
  color: var(--op-color-neutral-on-plus-max-alt);
  text-decoration: none;
}
.dialog--small {
  --width: calc(var(--op-space-scale-unit)*48);
}
.dialog--small .dialog__header-title {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.dialog__body--small {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.dialog--large {
  --width: calc(var(--op-space-scale-unit)*84);
}
.dialog--large .dialog__header {
  padding: var(--op-space-x-large) var(--op-space-2x-large);
}
.dialog--large .dialog__header-title {
  font-size: var(--op-font-3x-large);
  font-weight: var(--op-font-weight-normal);
}
.dialog--confirm {
  padding: 0;
  border: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  border-radius: var(--op-radius-large);
  max-width: var(--width);
}
.dialog--confirm .dialog__body {
  text-align: left;
}
.dialog--confirm #confirm--deny-btn:has(> .hide) {
  display: none;
}
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.switch {
  input {
    /* Switch input is still affecting layout; take it out of the flow */
    position: absolute;
    /* Don't change hover state of switch if disabled */
    &:disabled {
      &:hover + label {
        &::after {
          background-color: var(--op-color-neutral-plus-eight);
        }
      }
    }
  }
}
/* Switch disabled state for both input+label, and for label+input */
.switch:has(input:disabled) + .form-label,
.form-label:has(+ .switch input:disabled) {
  color: var(--op-color-neutral-plus-four);
  cursor: not-allowed;
}
/* Switch used to exclude from search results */
.form-group--switch-exclude {
  /* Color switch label if checked */
  &:has(input:checked) {
    .form-label {
      color: var(--op-color-primary-base);
    }
  }
  /* Exclude switch label is slightly lighter font-weight than input labels */
  .form-label {
    font-weight: var(--op-font-weight-semi-bold);
  }
}
.table {
  --_op-table-cell-padding-default: var(--op-space-small) var(--op-space-medium);
  --_op-table-cell-padding-comfortable: var(--op-space-medium) var(--op-space-medium);
  --_op-table-cell-padding-compact: var(--op-space-x-small) var(--op-space-x-small);
  --fd-table-column-width-x-small: var(--op-space-large);
  --op-table-column-width-small: calc(var(--op-space-scale-unit)*8);
  --op-table-column-width-medium: calc(var(--op-space-scale-unit)*23);
  --op-table-column-selection-width: var(--op-space-large);
  --inset-border-right: var(--op-border-left);
  --inset-border-left: var(--op-border-right);
  --inset-border-top: var(--op-border-bottom);
  --inset-border-bottom: var(--op-border-top);
  --_fd-table-font-size: var(--op-font-small);
  box-shadow: none;
}
.scrollable-table-container {
  flex-grow: 1;
  width: 100%;
  overflow-y: auto;
}
.scrollable-table-container.scrollable-table-container--padded .table__contents {
  padding: var(--op-space-medium);
}
.table__table-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.table__current-record-indicator {
  display: flex;
  align-items: center;
  font-size: var(--_fd-table-font-size);
  font-weight: var(--op-font-weight-bold);
  text-transform: lowercase;
}
.table {
  contain: unset;
}
.table thead {
  background-color: var(--op-color-neutral-plus-eight);
}
.table thead:has(th input[type=checkbox]:checked) {
  background-color: var(--op-color-neutral-plus-eight);
}
.table thead .tooltip-icon {
  margin-inline: var(--op-space-2x-small) 0;
}
.table thead th {
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-top) var(--op-color-border);
  padding-inline: var(--op-space-large);
  text-transform: capitalize;
  white-space: nowrap;
  font-size: var(--_fd-table-font-size);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-eight);
}
.table thead th.text-right .table__flex-header {
  flex-direction: row-reverse;
}
.table thead th.text-right .sort-icon {
  margin-inline: 0 var(--op-space-x-small);
}
.table thead th.text-right .tooltip-icon {
  margin-inline: 0 var(--op-space-2x-small);
}
.table thead th:first-of-type {
  border-top-left-radius: var(--op-radius-large);
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-top) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border);
}
.table thead th:last-of-type {
  border-top-right-radius: var(--op-radius-large);
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-top) var(--op-color-border), inset var(--inset-border-right) var(--op-color-border);
}
.table thead th:only-child {
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
  box-shadow: inset var(--inset-border-top) var(--op-color-border), inset var(--inset-border-right) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border);
}
.table thead tr:last-child th {
  border-radius: 0;
}
.table thead tr:only-child th:first-of-type {
  border-top-left-radius: var(--op-radius-large);
}
.table thead tr:only-child th:last-of-type {
  border-top-right-radius: var(--op-radius-large);
}
.table thead tr:only-child th:only-child {
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
}
.table tbody {
  background-color: var(--op-color-neutral-plus-max);
  font-weight: var(--op-font-weight-semi-bold);
  box-shadow: inset var(--inset-border-left) var(--op-color-border), inset var(--inset-border-right) var(--op-color-border);
}
.table tbody th {
  text-transform: capitalize;
  white-space: nowrap;
  font-size: var(--_fd-table-font-size);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-eight);
  box-shadow: inset var(--inset-border-top) var(--op-color-border);
}
.table tbody .table__group-header {
  background-color: var(--op-color-neutral-plus-six);
}
.table tbody .table__group-header th {
  padding-inline: var(--op-space-large);
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border), inset var(--inset-border-right) var(--op-color-border);
}
.table tbody td {
  font-size: var(--_fd-table-font-size);
  color: var(--op-color-primary-on-plus-seven-alt);
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border);
  padding: 0 var(--op-space-large) 0 var(--op-space-large);
  height: var(--op-table-cell-height);
}
.table tbody:has(tr.noresults):not(:only-of-type) {
  display: none;
}
.table tbody:last-child {
  border-bottom-left-radius: var(--op-radius-large);
  border-bottom-right-radius: var(--op-radius-large);
}
.table tbody:last-child td {
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border);
}
.table tbody:last-child tr:last-of-type td:first-of-type {
  box-shadow: inset var(--inset-border-left) var(--op-color-border), inset var(--inset-border-bottom) var(--op-color-border);
  border-bottom-left-radius: var(--op-radius-large);
}
.table tbody:last-child tr:last-of-type td:last-of-type {
  box-shadow: inset var(--inset-border-right) var(--op-color-border), inset var(--inset-border-bottom) var(--op-color-border);
  border-bottom-right-radius: var(--op-radius-large);
}
.table tfoot th {
  text-transform: capitalize;
  white-space: nowrap;
  font-size: var(--_fd-table-font-size);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-eight);
}
.table .table__column--x-small {
  width: var(--fd-table-column-width-x-small);
}
.table .table__column--small {
  width: var(--op-table-column-width-small);
}
.table .table__column--small .tooltip-header {
  justify-content: end;
}
.table .table__column--medium {
  width: var(--op-table-column-width-medium);
}
.table .table__column--unpadded {
  padding-inline: 0;
}
.table .table__column--indicator {
  padding: 0 var(--op-space-small) !important;
  width: var(--op-space-medium);
}
.table .table__column--selection {
  width: var(--op-table-column-selection-width);
}
.table.table--sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.table.table--sticky-footer tfoot {
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.table .table__footer_contents {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  gap: var(--op-space-medium);
  align-items: center;
}
.table:has(tfoot) tbody:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.table:has(tfoot) tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 0;
}
.table:has(tfoot) tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 0;
}
.table tr:first-of-type td:last-of-type.noresults {
  box-shadow: inset var(--inset-border-right) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border);
  padding: calc(var(--op-space-2x-large)*3) var(--op-space-2x-large);
}
.table--has-hover tr:hover td {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
}
tr.active td {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-primary-on-plus-seven-alt);
}
tr:has(input#row_selector[type=checkbox]:checked) td {
  background-color: var(--op-color-primary-plus-seven);
  color: var(--op-color-primary-on-plus-seven-alt);
}
tr.active:hover td {
  background-color: var(--op-color-primary-plus-six);
  color: var(--op-color-primary-on-plus-six);
}
.table-container tr:not(:last-child),
.table-danger tr:not(:last-child),
.table-primary tr:not(:last-child),
.table tr:not(:last-child) {
  box-shadow: none;
}
.table-container tfoot,
.table-danger tfoot,
.table-primary tfoot,
.table tfoot {
  background-color: var(--op-color-neutral-plus-eight);
}
.table-container tfoot th,
.table-danger tfoot th,
.table-primary tfoot th,
.table tfoot th {
  border-bottom-left-radius: var(--op-radius-large);
  border-bottom-right-radius: var(--op-radius-large);
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border), inset var(--inset-border-right) var(--op-color-border);
}
.table__input-field--numeric {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}
.table__data--single-line,
.table__data--1st-line {
  padding-top: var(--op-space-x-small);
}
.table__data--truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 250px;
  overflow: hidden;
}
.table__data--single-line {
  padding-top: initial;
}
.table__data--2nd-line {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-minus-two);
  padding-bottom: var(--op-space-x-small);
}
.table__action-dropdown-trigger {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: var(--op-space-2x-small);
  min-width: 36px;
}
.table__record-link {
  color: var(--op-color-primary-base);
  padding: unset;
  text-align: left;
}
td a {
  text-decoration: none;
}
.table__row--empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.table__row--disabled td {
  opacity: var(--op-opacity-disabled);
  pointer-events: none;
}
.table__flex-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  text-decoration: none;
  color: var(--op-color-neutral-on-plus-eight);
}
.table__flex-header .sort-icon {
  visibility: hidden;
  margin-inline: var(--op-space-x-small) 0;
}
.table__flex-header--sortable:hover {
  color: var(--op-color-primary-original);
}
.table__flex-header--sortable:hover .tooltip-icon {
  cursor: pointer;
}
.table__flex-header--sortable.sortable-header--asc .sort-icon, .table__flex-header--sortable.sortable-header--desc .sort-icon, .table__flex-header--sortable:hover .sort-icon {
  visibility: visible;
}
.text-pair {
  --_op-text-pair-font-size-small: var(--op-font-x-small);
  --_op-text-pair-font-size-medium: var(--op-font-small);
  gap: 0px;
  .text-pair__subtitle {
    color: var(--op-color-neutral-on-plus-max);
  }
}
.tab-group {
  gap: var(--op-space-x-small);
}
.tab {
  --fd-tab-active-color: var(--op-color-primary-minus-one);
  background-color: unset;
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-max);
  --__op-tab-padding: var(--op-space-x-small) var(--op-space-2x-small);
  --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
}
.tab:hover {
  background-color: unset;
  box-shadow: none;
  color: var(--fd-tab-active-color);
}
.tab.tab--active, .tab.tab--active:hover {
  box-shadow: var(--__op-tab-indicator) var(--fd-tab-active-color);
  color: var(--fd-tab-active-color);
}
.avatar {
  --_op-avatar-size-small: var(--op-space-x-large);
  --_op-avatar-size-medium: calc(var(--op-space-scale-unit)*8);
  --_op-avatar-size-large: calc(var(--op-space-scale-unit)*15);
  border: 1px solid var(--op-color-neutral-plus-four);
}
.avatar--small {
  border: 2px solid var(--op-color-neutral-plus-max);
  box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.5) inset;
}
.card {
  --op-color-border: var(--op-color-neutral-plus-six);
  --_op-card-padding: var(--op-space-small) var(--op-space-medium);
  --fd-card-header-height: calc(var(--op-space-scale-unit)*4.8); /* 48px */
  --_op-card-radius: var(--op-radius-large);
  box-shadow: none;
  border: var(--op-border-width) solid var(--op-color-border);
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-small);
}
.card .card__header + .card__body,
.card .card__body + .card__footer {
  border-top: var(--op-border-width) solid var(--op-color-border);
}
.card .card__header {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  justify-content: space-between;
  height: var(--fd-card-header-height);
  font-weight: var(--op-font-weight-semi-bold);
  line-height: var(--op-line-height-densest);
}
.card .card__header .header__start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--op-space-x-small);
}
.card .card__header .header__subtitle {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.card .card__header .header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--op-space-x-small);
}
.card .card__body .body__hint {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.card .card__footer {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--op-space-2x-small);
}
.card .card__footer.card__footer--space-between {
  justify-content: space-between;
}
.card-list-item-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  container-type: inline-size;
  container-name: listCardContainer;
}
.card-list-item-group.card-list-item-group--default-padding {
  padding: var(--op-space-x-large);
}
.card-list-item-group__empty-list {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
  padding: var(--op-space-2x-large);
  border-radius: var(--op-radius-large);
  text-align: center;
}
.card-list-item {
  contain: initial;
  transition: var(--op-transition-input);
  border-radius: var(--op-radius-large);
  box-shadow: 0 0 0 var(--op-border-width) var(--op-color-neutral-plus-four);
  background-color: var(--op-color-primary-plus-max);
  border: none;
}
.card-list-item .card-list-item__more-menu {
  text-align: right;
}
.card-list-item .card-list-item__more-menu sl-dropdown::part(trigger) {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: var(--op-space-2x-small);
  min-width: 36px;
  opacity: var(--op-opacity-none);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.card-list-item:hover {
  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-base), var(--op-shadow-medium);
}
.card-list-item:hover .card-list-item__more-menu sl-dropdown::part(trigger) {
  opacity: var(--op-opacity-full);
  pointer-events: initial;
  -webkit-user-select: initial;
     -moz-user-select: initial;
          user-select: initial;
}
.card-list-item .card__body {
  --_card-column-width--large: calc(var(--op-space-scale-unit)*13);
  --_card-column-width--medium: calc(var(--op-space-scale-unit)*12);
  --_card-column-width--small: calc(var(--op-space-scale-unit)*8);
  --_card-column-width--x-small: calc(var(--op-space-scale-unit)*4);
  --_card-column-width--2x-small: var(--op-space-scale-unit);
  display: grid;
  gap: var(--op-space-3x-large);
  border-radius: var(--op-radius-large);
  align-items: center;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max-alt);
  padding: var(--op-space-medium);
}
.card-list-item .card__body:not(:last-child) {
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
}
.card-list-item .card__body .button_to {
  display: grid;
}
.card-list-item .card__body .button_to button {
  display: flex;
  gap: var(--op-space-x-small);
}
.card-list-item .card__body .hidden-column {
  opacity: 0;
  pointer-events: none;
}
sl-details {
  width: 100%;
}
sl-details .details__toggle-icon {
  margin-left: auto;
  transition: transform 0.5s;
}
sl-details[open] .details__toggle-icon {
  transform: rotate(90deg);
}
sl-details::part(base) {
  border: none;
  color: var(--op-color-neutral-on-plus-max);
  font-family: var(--op-font-family);
  font-size: 14px;
  font-weight: var(--op-font-weight-bold);
}
sl-details::part(header) {
  padding: 0;
}
sl-details::part(summary) {
  min-width: 0;
}
sl-details::part(summary-icon) {
  display: none;
}
sl-details::part(content) {
  padding: var(--op-border-width);
  padding-left: var(--op-space-x-large);
}
sl-drawer {
  --size: calc(var(--op-space-scale-unit)*51.2);
  --header-spacing: var(--op-space-x-large);
  --body-spacing: var(--op-space-x-large);
}
#drawer {
  transform: translateX(calc(var(--op-space-scale-unit)*-100));
  transition: 4s;
}
#drawer .drawer_header {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-bold);
  margin: 0;
}
#drawer::part(header) {
  border-bottom: 1px solid var(--op-color-neutral-plus-four);
}
#drawer::part(header-actions) {
  align-self: auto;
  padding: var(--header-spacing);
  padding-left: 0;
}
#drawer::part(close-button) {
  display: none;
}
#drawer::part(body) {
  background-color: var(--op-color-neutral-plus-eight);
}
#drawer::part(panel) {
  overflow-y: hidden;
}
#drawer::part(footer) {
  border-top: 1px solid var(--op-color-neutral-plus-four);
}
sl-dropdown::part(trigger) {
  display: flex;
  cursor: pointer;
}
sl-dropdown[disabled=true], sl-dropdown[disabled] {
  pointer-events: none;
}
sl-dropdown[disabled=true] button, sl-dropdown[disabled] button {
  opacity: var(--op-opacity-disabled);
}
sl-dropdown .dropdown__items-container {
  z-index: var(--op-z-index-dropdown);
  min-width: calc(var(--op-space-scale-unit)*20);
  background-color: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
  padding: var(--op-space-x-small);
}
sl-dropdown .dropdown__items-container::part(panel) {
  display: flex;
}
sl-dropdown .dropdown__items-container.hidden {
  visibility: hidden;
}
sl-dropdown .dropdown__items-container .dropdown__item::part(base) {
  flex-grow: 1;
  background-color: unset;
}
sl-dropdown .dropdown__items-container .dropdown__item:has(button[disabled], .btn--disabled) {
  pointer-events: none;
  cursor: not-allowed;
}
sl-dropdown .dropdown__items-container .dropdown__item::part(label) {
  overflow: unset;
}
sl-dropdown .dropdown__items-container .dropdown__item .btn {
  --fd-radius-dropdown: 6px;
  text-align: start;
  width: 100%;
  justify-content: left;
  border-radius: var(--fd-radius-dropdown);
}
sl-dropdown .dropdown__items-container .dropdown__item .btn:has(.icon) {
  display: flex;
  justify-content: space-between !important;
}
.divider {
  --_op-divider-padding-x-large: var(--op-space-x-large);
}
.divider.divider--spacing-x-large {
  --__op-divider-padding: var(--_op-divider-padding-x-large);
}
.flatpickr-innerContainer .flatpickr-day {
  color: var(--op-color-on-background);
}
.flatpickr-innerContainer .flatpickr-day:hover {
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  border-color: var(--op-color-neutral-plus-four);
}
.flatpickr-innerContainer .flatpickr-day.selected {
  background-color: var(--op-color-primary-base);
  color: var(--op-color-primary-on-base);
  border-color: var(--op-color-primary-base);
}
.flatpickr-innerContainer .flatpickr-day.selected:hover {
  background-color: var(--op-color-primary-plus-one);
  color: var(--op-color-primary-on-plus-one);
  border-color: var(--op-color-primary-plus-one);
}
.flatpickr-innerContainer .flatpickr-disabled, .flatpickr-innerContainer .notAllowed {
  color: var(--op-color-neutral-plus-four);
}
.flatpickr-innerContainer .flatpickr-disabled:hover, .flatpickr-innerContainer .notAllowed:hover {
  background-color: unset;
  border-color: transparent;
  color: var(--op-color-neutral-on-plus-four);
}
.flatpickr-innerContainer .flatpickr-disabled.inRange, .flatpickr-innerContainer .inRange.notAllowed {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-innerContainer .flatpickr-disabled.startRange:hover, .flatpickr-innerContainer .startRange.notAllowed:hover {
  background-color: var(--op-color-primary-base);
  border-color: var(--op-color-primary-base);
  color: var(--op-color-primary-on-base);
}
.flatpickr-innerContainer .flatpickr-disabled + .startRange, .flatpickr-innerContainer .notAllowed + .startRange {
  background-color: var(--op-color-primary-base);
  color: var(--op-color-primary-on-base);
}
.app__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--op-color-primary-base);
  color: var(--op-color-primary-on-base);
  height: var(--op-header-height);
  padding: 0 var(--op-space-4x-large);
  position: initial;
  z-index: initial;
}
.app-with-sidebar:not(:has(.sidebar)) .app__header {
  padding: 0 var(--op-space-4x-large) 0 0;
}
.app-with-sidebar:not(:has(.sidebar)) .app__header .flytedesk-logo {
  background-color: var(--op-color-primary-minus-two);
  height: var(--op-header-height);
  width: calc(var(--op-size-unit)*22);
  background-repeat: no-repeat;
  background-image: url("/assets/fd-arrow-32041cda.svg");
  background-position: center;
  background-size: var(--op-space-x-large);
  justify-self: flex-start;
}
.app__header_icon-group {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.app__header_icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--op-radius-circle);
  height: var(--op-space-5x-large);
  width: var(--op-space-5x-large);
  text-decoration: none;
}
.app__header_icon-button:hover {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one);
}
.app__header_icon-button:focus-visible {
  outline: none;
  box-shadow: var(--fd-focus-style);
  background-color: var(--op-color-primary-minus-two);
  color: var(--op-color-primary-on-minus-two);
}
.app__header_icon {
  color: var(--op-color-primary-plus-four);
}
.app__header_image {
  border-radius: 50%;
}
.form-control[aria-busy=true], .ts-wrapper [aria-busy=true].ts-control {
  background: url("/assets/busy-66cc8929.gif") no-repeat right center;
}
.form-control.form-control--numeric[aria-busy=true], .ts-wrapper .form-control--numeric[aria-busy=true].ts-control {
  background: url("/assets/busy-66cc8929.gif") no-repeat left center;
}
.form-control--numeric.form-control__icon {
  float: left;
  margin-left: var(--op-space-scale-unit);
  margin-top: calc(var(--op-space-scale-unit)*-4.5);
  position: relative;
  overflow: visible;
}
.form-control__icon.form-control__icon--error {
  color: var(--op-color-alerts-danger-plus-one);
}
.form-control__icon.form-control__icon--warning {
  color: var(--op-color-alerts-warning-plus-one);
}
.live-input__display-error {
  padding-top: var(--op-space-2x-small);
}
.new-activity-indicator {
  background-color: var(--op-color-primary-minus-one);
  padding: var(--op-space-x-small) var(--op-space-small);
  box-shadow: 0 4px 5px -1px grey;
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.new-activity-indicator a {
  display: flex;
  align-items: center;
  justify-content: stretch;
  color: var(--op-color-primary-on-minus-one-alt);
  text-decoration: none;
}
.note {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  background-color: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-medium);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  box-shadow: var(--op-shadow-x-small);
  color: var(--op-color-neutral-on-plus-eight-alt);
  font-size: var(--op-font-small);
  padding: var(--op-space-medium);
  width: 100%;
  .note__content {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
    .note__header {
      display: flex;
      align-items: center;
      font-weight: var(--op-font-weight-semi-bold);
      color: var(--op-color-primary-on-plus-eight); /* This primary on neutral background is intentional; passes AA accessibility */
      line-height: var(--op-line-height-densest);
    }
    .note__message {
      display: flex;
      flex-direction: column;
      gap: var(--op-space-2x-small);
    }
  }
  .note__actions {
    display: flex;
    justify-content: start;
    gap: var(--op-space-small);
  }
  &.note--large {
    border-radius: var(--op-radius-large);
    padding: var(--op-space-x-large);
    gap: var(--op-space-x-large);
    .note__content {
      gap: var(--op-space-small);
      .note__header {
        font-size: var(--op-font-large);
      }
    }
    .note__message {
      gap: var(--op-space-x-small);
    }
  }
  &.note--warning {
    background: var(--op-color-alerts-warning-plus-five);
    border-color: var(--op-color-alerts-warning-plus-two);
    color: var(--op-color-alerts-warning-on-plus-five-alt);
    .note__content .note__header {
      color: var(--op-color-alerts-warning-on-plus-five);
    }
  }
  &.note--danger {
    background: var(--op-color-alerts-danger-plus-five);
    border-color: var(--op-color-alerts-danger-plus-two);
    color: var(--op-color-alerts-danger-on-plus-five-alt);
    .note__content .note__header {
      color: var(--op-color-alerts-danger-on-plus-five);
    }
  }
  &.note--success {
    background: var(--op-color-alerts-notice-plus-seven);
    border-color: var(--op-color-alerts-notice-minus-one);
    color: var(--op-color-alerts-notice-on-plus-seven-alt);
    .note__content .note__header {
      color: var(--op-color-alerts-notice-on-plus-five);
    }
  }
  /* Alternate border color if occuring against a darker background */
  &.note--on-dark {
    border-color: var(--op-color-primary-minus-two);
    &.note--warning {
      border-color: var(--op-color-alerts-warning-minus-four);
    }
    &.note--danger {
      border-color: var(--op-color-alerts-danger-minus-four);
    }
    &.note--success {
      border-color: var(--op-color-alerts-notice-minus-five);
    }
  }
}
.pagination-control {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.pagination-control .pagination-control__progress {
  color: var(--op-color-neutral-on-plus-max-alt);
  text-align: center;
  text-wrap: nowrap;
  font-family: var(--op-font-family);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  line-height: normal;
}
.pagination-control .pagination-control__previous,
.pagination-control .pagination-control__first,
.pagination-control .pagination-control__next,
.pagination-control .pagination-control__last {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: var(--op-color-neutral-on-plus-eight);
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pagination-control .pagination-control__previous:not(.disabled):hover,
.pagination-control .pagination-control__first:not(.disabled):hover,
.pagination-control .pagination-control__next:not(.disabled):hover,
.pagination-control .pagination-control__last:not(.disabled):hover {
  color: var(--op-color-primary-base);
}
.pagination-control .pagination-control__previous.disabled,
.pagination-control .pagination-control__first.disabled,
.pagination-control .pagination-control__next.disabled,
.pagination-control .pagination-control__last.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.pagination-control--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.paginated-container {
  display: flex;
  flex-direction: column;
}
.paginated-container .paginated-container__content {
  flex: 1;
  overflow-y: auto;
}
.paginated-container .paginated-container__footer {
  background: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-medium);
  border-top: 1px solid var(--op-color-neutral-plus-five);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: center;
  gap: var(--op-space-medium);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.paginated-container .paginated-container__footer .pagination-control__previous,
.paginated-container .paginated-container__footer .pagination-control__first,
.paginated-container .paginated-container__footer .pagination-control__next,
.paginated-container .paginated-container__footer .pagination-control__last {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-eight-alt);
}
.paginated-container__empty-list {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
  padding: var(--op-space-2x-large);
  border-radius: var(--op-radius-large);
  text-align: center;
  margin: var(--op-space-x-large);
  height: unset;
}
.popover {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--op-radius-large);
  border: 1px solid var(--op-color-neutral-plus-four);
  background: var(--op-color-neutral-plus-eight);
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
  padding: var(--op-space-large) var(--op-space-x-large);
  min-width: calc(var(--op-space-scale-unit)*22.5);
  z-index: 1000;
}
.popover-trigger {
  cursor: pointer;
}
.popover__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-medium);
}
.popover__body small a {
  text-decoration: none;
}
.popover__body .text-pair {
  gap: var(--op-space-3x-small);
}
.progress-bar__message {
  font-size: var(--op-font-small);
  margin-top: var(--op-space-small);
}
.progress-bar__label {
  font-size: var(--op-font-small);
}
.progress-modal:not(:has(sl-progress-bar[value="100"])) .dialog__footer {
  display: none;
}
.search-input__wrapper {
  --_fd-search-input-bg-color: var(--op-color-neutral-plus-eight);
  padding: var(--op-space-x-small) var(--op-space-small);
  background: var(--_fd-search-input-bg-color);
  box-shadow: var(--op-inset-shadow-input), inset var(--op-border-all) var(--op-color-neutral-plus-four);
  border-radius: var(--op-space-x-small);
  width: 100%;
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: calc(var(--op-space-scale-unit)*50);
}
.search-input__wrapper .material-symbols-outlined, .search-input__wrapper .material-symbols {
  color: var(--op-color-neutral-plus-one);
  margin-right: var(--op-space-2x-small);
  padding: 1px;
}
.search-input__wrapper:focus-within {
  outline: none;
  box-shadow: 0 0 0 var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
}
.search-input__wrapper:focus-within:hover:not(:disabled) {
  box-shadow: 0 0 0 var(--op-border-width-x-large) var(--op-color-primary-plus-four), var(--fd-focus-style);
}
.search-input__wrapper:hover:not(:disabled) {
  background-color: var(--op-color-primary-plus-eight);
  color: var(--op-color-primary-on-plus-eight);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-two), var(--op-border-input);
}
.search-input__wrapper input {
  border-style: hidden;
  outline: none;
  background: var(--_fd-search-input-bg-color);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-eight);
  width: 90%;
}
.search-input__wrapper input[aria-busy=true] {
  background: url("/assets/busy-66cc8929.gif") no-repeat right center;
}
.search-input__wrapper input:-moz-placeholder + .search-input__clear-button {
  display: none;
}
.search-input__wrapper input:placeholder-shown + .search-input__clear-button {
  display: none;
}
.search-input__wrapper .search-input__clear-button {
  line-height: 0;
}
.search-input__wrapper .search-input__clear-button .material-symbols-outlined, .search-input__wrapper .search-input__clear-button .material-symbols {
  color: var(--op-color-neutral-on-plus-three);
  margin-right: 0;
}
.sl-search-input {
  --_fd-search-input-bg-color: var(--op-color-neutral-plus-eight);
  max-width: calc(var(--op-space-scale-unit)*50);
  width: 100%;
}
.sl-search-input::part(base) {
  background: var(--_fd-search-input-bg-color);
  border-radius: var(--op-space-x-small);
}
.sl-search-input::part(input) {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-primary-on-plus-eight);
}
.sl-search-input::part(input)[aria-busy=true] {
  background: url("/assets/busy-66cc8929.gif") no-repeat right center;
}
.sl-search-input::part(input)::-moz-placeholder {
  color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
}
.sl-search-input::part(input)::placeholder {
  color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
}
.sort-component {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.sort-component input:checked ~ label {
  display: none;
}
.sort-component input[type=radio] {
  display: none;
}
sl-tab-group.full-height::part(base) {
  height: 100%;
}
sl-tab-group::part(nav) {
  flex-shrink: 0;
  display: grid;
  width: 200px;
  background-color: var(--op-color-neutral-plus-max);
  padding: var(--op-space-large);
  box-shadow: var(--op-border-right) var(--op-color-neutral-plus-four);
}
sl-tab-group::part(active-tab-indicator) {
  display: none;
}
sl-tab-group::part(tabs) {
  border: unset;
  gap: var(--op-space-x-small);
  height: 100%;
}
sl-tab-group sl-tab-panel {
  height: 100%;
}
sl-tab-group sl-tab-panel::part(base) {
  padding: unset;
  height: 100%;
}
sl-tab-group sl-tab::part(base) {
  color: var(--op-color-primary-on-plus-five-alt);
  font-family: var(--op-font-family);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
  line-height: var(--op-line-height-base);
  gap: var(--op-space-x-small);
  padding: var(--op-space-x-small);
  width: 100%;
}
sl-tab-group sl-tab::part(base):hover {
  color: var(--op-color-primary-on-plus-eight);
}
sl-tab-group sl-tab::part(base).tab.tab--active {
  color: var(--op-color-primary-on-plus-eight);
}
sl-tab-group sl-tab[active] {
  border-radius: var(--op-radius-large);
  background: var(--op-color-primary-plus-five);
}
sl-tab-group .tab-title[aria-selected=false]:hover {
  background-color: var(--op-color-primary-plus-eight);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-three), var(--op-shadow-x-small);
  color: var(--op-color-primary-on-plus-eight);
  border-radius: var(--op-radius-large);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-two);
}
.no-input .ts-control .item + input {
  display: none !important;
}
.ts-control:has(.tooltip-container) {
  overflow: unset;
}
.ts-wrapper {
  grid-column: 1/3;
}
.ts-wrapper.multi .ts-control, .ts-wrapper.multi.input-active .ts-control {
  background-image: none !important;
  max-height: calc(var(--op-space-scale-unit)*28.8);
  overflow-y: auto;
}
.ts-wrapper.multi .ts-control div, .ts-wrapper.multi.input-active .ts-control div {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one-alt);
}
.ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control {
  background-image: var(--op-form-dropdown-arrow) !important;
}
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-wrapper.multi.input-active .ts-control {
  background-size: var(--op-space-large);
  box-shadow: var(--op-inset-shadow-input), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
}
.ts-wrapper .ts-control {
  flex-wrap: nowrap;
  line-height: var(--op-line-height-densest);
  padding-right: var(--op-space-7x-large) !important;
  background-image: var(--op-form-dropdown-arrow);
}
.ts-wrapper .ts-control div.clear-button {
  font-size: var(--op-font-medium);
  color: var(--op-color-neutral-on-plus-eight);
  opacity: 1;
  right: var(--op-space-medium);
  padding: unset;
  top: var(--op-space-small);
  transform: unset;
  display: none;
}
.ts-wrapper .ts-control div.item ~ .clear-button {
  display: unset;
}
.ts-wrapper .ts-control input {
  font-size: var(--op-font-small);
}
.ts-wrapper .ts-control input::-moz-placeholder {
  color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
  font-weight: var(--op-font-weight-semi-bold);
}
.ts-wrapper .ts-control input::placeholder {
  color: hsl(from var(--op-color-neutral-on-plus-eight-alt) h s l/0.44);
  font-weight: var(--op-font-weight-semi-bold);
}
.ts-wrapper.input-hidden .ts-control > input {
  position: inherit;
}
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control, .ts-wrapper.single.has-items .ts-control, .ts-wrapper.multi.has-items .ts-control {
  display: flex;
  align-items: center;
  padding: var(--op-space-x-small) var(--op-space-small);
  min-height: unset;
}
.ts-wrapper.multi.has-items .ts-control > input {
  margin: unset !important;
}
.ts-wrapper.multi .ts-control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-space-2x-small);
  min-height: var(--op-input-height-large);
  height: auto;
}
.ts-wrapper.multi .ts-control .item {
  display: flex;
  gap: var(--op-space-small);
  margin: 0;
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  border-radius: var(--op-radius-pill);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  line-height: var(--op-line-height-dense);
  max-width: 25ch;
}
.ts-wrapper.multi .ts-control .item .remove {
  border: none;
  padding: 0;
  margin: 0;
  width: var(--op-space-medium);
}
.ts-wrapper.multi .ts-control .item .remove:hover:not(:disabled) {
  background: unset;
}
.ts-wrapper.multi .ts-control .option {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.ts-wrapper.disabled.multi .ts-control .item {
  pointer-events: none;
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  padding-right: var(--op-space-x-small) !important;
}
.ts-wrapper.disabled.multi .ts-control .item .remove {
  display: none;
}
.ts-wrapper.disabled.multi .ts-control .clear-button {
  display: none;
}
.ts-wrapper.disabled.multi input {
  display: none !important;
}
.ts-wrapper.readonly.multi .ts-control .item {
  pointer-events: none;
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
  padding-right: var(--op-space-x-small) !important;
}
.ts-wrapper.readonly.multi .ts-control .item .remove {
  display: none;
}
.ts-wrapper.readonly.multi .ts-control .clear-button {
  display: none;
}
.ts-wrapper.readonly.multi input {
  display: none !important;
}
.ts-wrapper.dropdown-active .ts-control {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ts-wrapper.dropdown-active .ts-dropdown {
  margin-top: var(--op-space-4x-small);
  border: none;
  box-shadow: var(--op-border-all) var(--op-color-border);
  border-bottom-left-radius: var(--op-radius-large);
  border-bottom-right-radius: var(--op-radius-large);
  contain: paint;
}
.ts-wrapper.dropdown-active .ts-dropdown .option-subtext {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-minus-two);
}
.ts-wrapper .optgroup {
  border-bottom: 1px solid var(--op-color-neutral-plus-four);
}
.ts-wrapper .optgroup-header {
  color: var(--op-color-neutral-plus-three);
  font-weight: var(--op-font-weight-bold);
}
.ts-wrapper .optgroup-header .option {
  color: var(--op-color-neutral-on-plus-max);
  font-weight: var(--op-font-weight-semi-bold);
}
.tooltip-text .tooltip-text__text-container {
  height: calc(var(--lines)*1lh);
  display: -webkit-box;
  -webkit-line-clamp: var(--lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.tooltip-text .tooltip[data-show] {
  display: none;
}
.tooltip-text :has(.truncated) + .tooltip[data-show] {
  display: block;
  z-index: var(--op-z-index-tooltip);
}
.tooltip-header, .tooltip-container {
  display: flex;
  align-items: center;
}
.tooltip-icon {
  color: var(--op-color-neutral-plus-three);
  cursor: default;
}
.tooltip--pointer {
  cursor: pointer;
}
.tooltip {
  --op-tooltip-max-width: calc(var(--op-space-scale-unit)*25);
  position: fixed;
  width: -moz-max-content;
  width: max-content;
  top: 0;
  left: 0;
  padding: var(--op-space-medium);
  font-family: var(--op-font-family);
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-x-small);
  background-color: var(--op-color-neutral-minus-five);
  color: var(--op-color-neutral-on-minus-five-alt);
  border-radius: var(--op-radius-large);
  visibility: hidden;
  display: none;
  z-index: var(--op-z-index-tooltip);
  text-transform: none;
  max-width: var(--op-tooltip-max-width);
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
}
.tooltip[data-show] {
  display: block;
  visibility: visible;
  z-index: var(--op-z-index-tooltip);
}
.tooltip-arrow,
.tooltip-arrow::before {
  position: absolute;
  width: var(--op-space-x-small);
  height: var(--op-space-x-small);
  background: inherit;
}
.tooltip-arrow {
  visibility: hidden;
}
.tooltip-arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}
.tooltip[data-tooltip-placement^=top] > .tooltip-arrow {
  bottom: calc(var(--op-space-2x-small)*-1);
}
.tooltip[data-tooltip-placement^=bottom] > .tooltip-arrow {
  top: calc(var(--op-space-2x-small)*-1);
}
.tooltip[data-tooltip-placement^=left] > .tooltip-arrow {
  right: calc(var(--op-space-2x-small)*-1);
}
.tooltip[data-tooltip-placement^=right] > .tooltip-arrow {
  left: calc(var(--op-space-2x-small)*-1);
}
.tooltip--expandable-trigger {
  height: 100%;
  width: 100%;
}
.tooltip--expandable-trigger [data-tooltip-target=trigger] {
  height: 100%;
  width: 100%;
}
.turbo-progress-bar {
  height: var(--op-space-2x-small);
  background-color: var(--op-color-primary-plus-six);
}
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hidden {
  display: none !important;
}
.block {
  display: block;
}
.full-height {
  height: 100%;
}
.full-width {
  width: 100%;
}
.text-right,
th.text-right,
td.text-right {
  text-align: right;
}
.readonly-pointer {
  cursor: not-allowed;
}
.margin-right {
  margin-right: auto;
}
.margin-left {
  margin-left: auto;
}
.hidden-container {
  width: 100%;
  padding: 0;
  margin: 0;
}
.flex-one {
  flex: 1;
}
.contents {
  display: contents;
}
.pad-top-sm {
  padding-top: var(--op-space-small);
}
.pad-right-xl {
  padding-right: var(--op-space-x-large);
}
.text-no-wrap {
  white-space: nowrap;
}
.name_container {
  margin-right: var(--op-space-x-large);
}
.name_container .form-group {
  padding: 0;
  text-overflow: ellipsis;
}
.gap-2xl {
  gap: var(--op-space-2x-large);
}
.gap-3xl {
  gap: var(--op-space-3x-large);
}
.wrap-text {
  overflow-wrap: anywhere;
}
.padding-unset {
  padding: unset;
}
:root {
  /**
  * @tokens Input Focus
  */
  --op-input-outer-focus-thin: 0 0 0 var(--op-border-width-large);
}
.segmented-control {
  /* Use outer focus thin */
  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
  var(--op-input-outer-focus-thin) var(--op-color-primary-plus-five);
  /* Public API (customizable component options) */
  --_op-segmented-control-height-small: var(--op-input-height-small);
  --_op-segmented-control-height-medium: var(--op-input-height-medium);
  --_op-segmented-control-height-large: var(--op-input-height-large);
  --_op-segmented-control-font-small: var(--op-font-x-small);
  --_op-segmented-control-font-medium: var(--op-font-small);
  --_op-segmented-control-font-large: var(--op-font-small);
  --_op-segmented-control-label-padding-small: var(--op-space-x-small);
  --_op-segmented-control-label-padding-medium: var(--op-space-small);
  --_op-segmented-control-label-padding-large: var(--op-space-small);
  --_op-segmented-control-label-gap-small: var(--op-space-3x-small);
  --_op-segmented-control-label-gap-medium: var(--op-space-2x-small);
  --_op-segmented-control-label-gap-large: var(--op-space-2x-small);
  --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt);
  --_op-segmented-control-color-icon-active: light-dark(
                  var(--op-color-primary-on-plus-five),
                  var(--op-color-primary-on-minus-six)
  );
  /* Private API (component option defaults) */
  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
  --__fd-segmented-control-font-weight: bold;
  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default);
  position: relative;
  display: grid;
  width: -moz-fit-content;
  width: fit-content;
  height: var(--__op-segmented-control-height);
  padding: var(--op-space-2x-small);
  border-radius: var(--op-radius-large);
  background-color: var(--op-color-neutral-plus-eight);
  box-shadow: var(--op-border-all) var(--op-color-border);
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--__op-segmented-control-font-size);
  gap: var(--op-space-2x-small);
  grid-auto-flow: column;
  font-weight: var(--__fd-segmented-control-font-weight);
  /* Size Modifiers */
}
.segmented-control .icon {
  color: var(--__op-segmented-control-color-icon);
}
.segmented-control .segmented-control__input {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border-width: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* Selected Option */
}
.segmented-control .segmented-control__input:checked + .segmented-control__label {
  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active);
  background-color: var(--op-color-primary-plus-five);
  color: var(--op-color-primary-on-plus-five);
}
.segmented-control .segmented-control__input:checked + .segmented-control__label .segmented-control__active-indicator {
  display: unset;
}
.segmented-control .segmented-control__input:focus-visible + .segmented-control__label {
  box-shadow: var(--op-input-focus-primary);
}
.segmented-control .segmented-control__label {
  display: inline-flex;
  border-radius: var(--op-radius-medium);
  gap: var(--__op-segmented-control-label-gap);
  padding-inline: var(--__op-segmented-control-label-padding);
  place-items: center;
  white-space: nowrap;
}
.segmented-control .segmented-control__label .segmented-control__active-indicator {
  display: none;
}
.segmented-control .segmented-control__label:hover {
  background-color: var(--op-color-neutral-plus-five);
  color: var(--op-color-neutral-on-plus-five);
}
.segmented-control.segmented-control--small {
  --__op-segmented-control-height: var(--_op-segmented-control-height-small);
  --__op-segmented-control-font-size: var(--_op-segmented-control-font-small);
  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small);
  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small);
}
.segmented-control.segmented-control--small .icon {
  --__op-icon-font-size: var(--_op-icon-font-size-small);
  --__op-icon-optical-size: var(--_op-icon-optical-size-small);
}
.segmented-control.segmented-control--medium {
  --__op-segmented-control-height: var(--_op-segmented-control-height-medium);
  --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium);
  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium);
  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium);
}
.segmented-control.segmented-control--medium .icon {
  --__op-icon-font-size: var(--_op-icon-font-size-medium);
  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
}
.segmented-control.segmented-control--large {
  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
}
.segmented-control.segmented-control--large .icon {
  --__op-icon-font-size: var(--_op-icon-font-size-large);
  --__op-icon-optical-size: var(--_op-icon-optical-size-large);
}
.segmented-control.segmented-control--full-width {
  width: 100%;
}
.segmented-control.segmented-control--content-center .segmented-control__label {
  justify-content: center;
}
.favorite-button--container form {
  height: 100%;
}
.favorite-button--container button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
}
.favorite-button {
  opacity: 0.25;
}
.favorite-button:hover {
  opacity: 1;
}
.favorite-button--active:hover {
  text-shadow: 0 0 3px;
}
.form-card.card .readonly .form-control:not([type=radio], [type=checkbox]), .form-card.card .readonly .ts-wrapper .ts-control:not([type=radio], [type=checkbox]), .ts-wrapper .form-card.card .readonly .ts-control:not([type=radio], [type=checkbox]) {
  opacity: unset;
  font-weight: var(--op-font-weight-normal);
  box-shadow: none;
}
.form-card.card .readonly .form-control:not([type=radio], [type=checkbox]):hover:not(:disabled), .form-card.card .readonly .ts-wrapper .ts-control:not([type=radio], [type=checkbox]):hover:not(:disabled), .ts-wrapper .form-card.card .readonly .ts-control:not([type=radio], [type=checkbox]):hover:not(:disabled) {
  box-shadow: none;
  color: var(--op-color-neutral-on-plus-seven);
}
.form-card.card .readonly .ts-control {
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
  cursor: default !important;
}
:root {
  --progress-ring-size-large: 52px;
  --progress-ring-size-small: 24px;
}
sl-progress-ring {
  --track-color: var(--op-color-neutral-plus-six);
  --indicator-color: var(--op-color-alerts-notice-minus-one);
}
.progress-ring--small {
  --size: var(--progress-ring-size-small);
}
.progress-ring--large {
  --size: var(--progress-ring-size-large);
}
.progress-ring-container {
  display: flex;
  align-items: center;
}
.progress-ring-container .progress-ring__icon--small {
  --__op-icon-font-size: var(--progress-ring-size-small);
}
.progress-ring-container .progress-ring__icon--large {
  --__op-icon-font-size: var(--progress-ring-size-large);
}
.page-header {
  --fd-header-item-spacing: var(--op-space-medium);
  --fd-header-group-spacing: var(--op-space-small);
  --fd-header-vertical-spacing: var(--op-space-2x-small);
  --fd-header-padding: var(--op-space-medium);
  display: flex;
  flex-direction: column;
  padding: var(--fd-header-padding);
  gap: var(--fd-header-vertical-spacing);
  background-color: var(--op-color-neutral-plus-max);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-five);
}
.page-header .page-header__content {
  display: flex;
  gap: var(--fd-header-item-spacing);
}
.page-header .page-header__content .page-header__section {
  display: flex;
  align-items: center;
  gap: var(--fd-header-item-spacing);
}
.page-header .page-header__content .page-header__section.page-header__section--start {
  flex: 1 1 0;
  justify-content: flex-start;
}
.page-header .page-header__content .page-header__section.page-header__section--end {
  justify-content: flex-end;
}
.page-header .page-header__content .page-header__content-group {
  display: flex;
  gap: var(--fd-header-group-spacing);
  align-items: center;
}
.page-header.page-header--flush-bottom {
  --fd-header-padding: var(--op-space-medium) var(--op-space-medium) 0 var(--op-space-medium);
}
.page-header--main .page-header__back-link {
  display: flex;
  flex-direction: row;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}
.page-header--main .page-header__back-link a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.page-header--main .page-header__title {
  font-size: var(--op-font-3x-large);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-max-alt);
  min-width: var(--op-space-4x-large);
}
.page-header--main .page-header__run-dates {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
  white-space: nowrap;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.page-header--main .page-header__breadcrumbs {
  gap: var(--op-space-x-small);
  align-items: center;
}
.page-header--toolbar {
  --fd-header-vertical-spacing: var(--op-space-small);
  --fd-header-item-spacing: var(--op-space-3x-large);
}
.filter-sidebar-frame {
  --fd-filter-sidebar-width: 25%;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  overflow: auto;
  width: var(--fd-filter-sidebar-width);
  box-shadow: var(--op-border-right) var(--op-color-neutral-plus-five);
}
.filter-sidebar-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.filter-sidebar-content .form-control.numeric.integer, .filter-sidebar-content .ts-wrapper .numeric.integer.ts-control, .ts-wrapper .filter-sidebar-content .numeric.integer.ts-control {
  color: var(--op-color-neutral-on-plus-eight);
}
.filter-sidebar-content .filter-sidebar__operator .ts-control,
.filter-sidebar-content .filter-sidebar__boolean .ts-control {
  min-height: var(--__op-input-height);
  background-color: #fff;
}
.filter-sidebar-content .filter-sidebar__operator .ts-control .item,
.filter-sidebar-content .filter-sidebar__boolean .ts-control .item {
  font-weight: var(--op-font-weight-semi-bold);
  font-size: var(--op-font-small);
}
.filter-sidebar-content legend {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-bold);
  line-height: var(--op-line-height-dense);
  font-size: var(--op-font-x-small);
  padding-inline: unset;
  margin-bottom: calc(var(--op-space-2x-small)*-1);
}
.filter-sidebar-content .integer-filter__value-form-group {
  padding-top: 0;
}
.filter-sidebar-content .integer-filter__operator-form-group {
  padding-bottom: var(--op-space-x-small);
}
.filter-sidebar__header {
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
  padding: var(--op-space-medium) var(--op-space-large);
  box-shadow: inset var(--op-border-top) var(--op-color-neutral-plus-four);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-sidebar__header .filter-sidebar__header-section {
  display: flex;
  gap: var(--op-space-x-small);
}
.filter-sidebar__header .filter-sidebar__action {
  color: var(--op-color-primary-original);
  cursor: pointer;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
  text-decoration: none;
}
.filter-sidebar__body {
  overflow-y: auto;
  height: 100%;
  background-color: var(--op-color-neutral-plus-max);
  color: var(--op-color-neutral-on-plus-max);
}
.filter-group__header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.filter-group__header .filter-group__header-start {
  display: flex;
  flex-direction: row;
  gap: var(--op-space-small);
}
.filter-group__header .filter-group__header-start .badge.filter-group__filter-counter {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one);
}
.filter-group__header .filter-group__header-start .badge.filter-group__filter-counter[data-value="0"] {
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four-alt);
}
sl-tree-item.filter-sidebar__filter-group ::part(expand-button) {
  display: none;
}
.filter-sidebar__filter-tree {
  --indent-size: 0;
  padding: var(--op-space-medium) var(--op-space-large);
}
.filter-sidebar__filter-tree .filter-sidebar__filter-group {
  padding-bottom: var(--op-space-medium);
}
.filter-sidebar__filter-tree .filter-sidebar__filter-group .form-group {
  flex-grow: 1;
  width: 100%;
}
.filter-sidebar__filter-tree .filter-sidebar__filter-group::part(label) {
  font-size: var(--op-font-small);
  color: var(--op-color-secondary-on-plus-five-alt);
  text-transform: uppercase;
  font-weight: var(--op-font-weight-bold);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.filter-sidebar__filter-tree .filter-sidebar__filter-group:not(:first-of-type)::part(item) {
  box-shadow: inset var(--op-border-bottom) var(--op-color-neutral-plus-four);
  padding-top: var(--op-space-x-small);
}
.filter-sidebar__filter-tree ::part(item--selected), .filter-sidebar__filter-tree ::part(item) {
  background-color: unset;
  border-inline-start: unset;
}
.filter-sidebar__filter-tree ::part(label) {
  font-family: unset;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
.filter-sidebar__date-input-label {
  display: flex;
  gap: var(--op-space-3x-small);
}
sl-drawer.resource-details-drawer {
  --body-spacing: 0;
}
sl-drawer.resource-details-drawer--wide {
  --size: calc(var(--op-space-scale-unit)*71.2);
}
#drawer.resource-details-drawer:has([data-dirty]:not([data-dirty=false])) .pagination-control a, #drawer.resource-details-drawer:has([data-dirty]:not([data-dirty=false])) sl-tab, #drawer.resource-details-drawer:has([data-dirty]:not([data-dirty=false])) sl-dropdown, #drawer.resource-details-drawer:has([data-dirty]:not([data-dirty=false])) .dialog__header-close, #drawer.resource-details-drawer:has([data-dirty]:not([data-dirty=false])) .form-card__edit-button {
  pointer-events: none;
  opacity: var(--op-opacity-disabled);
}
#drawer.resource-details-drawer:has([data-dirty]:not([data-dirty=false])) .resource-details-drawer__save-indicator {
  display: none;
}
#drawer.resource-details-drawer .card__body .resource-details-drawer__field-header:first-child,
#drawer.resource-details-drawer .card__body .resource-details-drawer__row:first-child {
  padding-top: 0;
}
.resource-details-drawer__panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: var(--op-space-x-large);
}
.direct-content .resource-details-drawer__panel {
  padding: 0;
}
.resource-details-drawer__panel--padded {
  padding: var(--op-space-x-large);
}
.resource-details-drawer__tab {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.resource-details-drawer__header {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
}
.resource-details-drawer__toolbar {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-medium);
  background-color: var(--op-color-white);
  padding: var(--op-space-medium) var(--header-spacing);
  border-bottom: 1px solid var(--op-color-neutral-plus-four);
}
.resource-details-drawer__title {
  display: flex;
  gap: var(--op-space-small);
  align-items: start;
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-bold);
  margin: 0;
}
.resource-details-drawer__title .text-pair__title {
  font-size: inherit;
  font-weight: inherit;
}
.resource-details-drawer__title .text-pair__subtitle {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-medium);
}
.resource-details-drawer__title .badge, .resource-details-drawer__title .icon:not(button .icon) {
  margin-top: var(--op-space-3x-small);
}
.resource-details-drawer__subtitle-item--with-icon {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.resource-details-drawer__subtitle {
  display: flex;
  align-items: center;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-on-background);
}
.resource-details-drawer__section--headless .resource-details-drawer__field-header:first-child {
  padding-top: 0;
}
.resource-details-drawer__section--headless .resource-details-drawer__row:first-child {
  padding-top: 0;
}
.resource-details-drawer__section-header {
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--op-space-scale-unit);
}
.resource-details-drawer__section-header label {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
  cursor: text;
}
.resource-details-drawer__row {
  padding-top: var(--op-space-medium);
}
.resource-details-drawer__row .form-group {
  padding-top: 0;
  padding-bottom: 0;
}
.resource-details-drawer__row .form-control__suffix-text {
  padding-top: calc(var(--op-space-scale-unit)*3.3);
}
.resource-details-drawer__row .form-group--error ~ .form-control__suffix-text {
  padding-top: calc(var(--op-space-scale-unit)*2.9);
}
.resource-details-drawer__field-header {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  padding-top: var(--op-space-medium);
}
.resource-details-drawer__field {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  padding-top: var(--op-space-2x-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  text-wrap: auto;
}
.resource-details-drawer__field a {
  text-decoration: none;
}
.resource-details-drawer__section--row {
  display: flex;
  gap: var(--op-space-5x-large);
}
.resource-details-drawer__footer {
  display: flex;
  justify-content: center;
  min-height: var(--op-space-5x-large);
}
.resource-details-drawer__footer .resource-details-drawer__cancel-container {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-start;
}
.resource-details-drawer__footer .resource-details-drawer__save-container {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--op-space-medium);
  align-items: center;
}
.resource-details-drawer__footer .resource-details-drawer__save-indicator {
  color: var(--op-color-alerts-notice-on-plus-seven);
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: center;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.sidebar {
  --_op-sidebar-transition: none;
  --_op-sidebar-background-color: var(--op-color-neutral-plus-max);
  --_op-sidebar-content-spacing: 0;
  --_op-sidebar-content-item-spacing: 0;
  --_op-sidebar-border-color: var(--op-color-neutral-plus-five);
  box-shadow: none;
  overflow: hidden;
}
.sidebar .flytedesk-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  background-color: var(--op-color-primary-minus-two);
  height: var(--op-header-height);
  background-repeat: no-repeat;
  background-image: url("/assets/flytedesk_logo_light-c51e5bc2.svg");
  background-position: center;
}
.sidebar .sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  overflow: hidden;
  border-right: var(--op-border-width) solid var(--_op-sidebar-border-color);
}
.sidebar .sidebar__content {
  overflow: hidden;
  padding: var(--op-space-small);
}
.sidebar .sidebar__content.sidebar__content--start {
  overflow: auto;
}
.sidebar .sidebar__content.sidebar__content--end {
  flex: none;
  border-top: var(--op-border-width) solid var(--_op-sidebar-border-color);
}
.sidebar .sidebar__item {
  --_fd-sidebar-icon-color: var(--op-color-neutral-on-plus-max);
  --_fd-sidebar-text-color: var(--op-color-neutral-on-plus-max);
  --_fd-sidebar-item-height: calc(var(--op-space-scale-unit)*4);
  justify-content: start;
  width: 100%;
  color: var(--_fd-sidebar-text-color);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  letter-spacing: var(--op-letter-spacing-navigation);
}
.sidebar .sidebar__item .material-symbols-outlined {
  --__op-icon-font-size: var(--_op-icon-font-size-medium);
  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
  --__op-icon-weight: var(--_op-icon-weight-normal);
}
.sidebar .sidebar__item.btn--active {
  --_fd-sidebar-icon-color: var(--op-color-primary-on-plus-six);
  --_fd-sidebar-text-color: var(--op-color-primary-on-plus-six-alt);
  color: var(--_fd-sidebar-text-color);
  background-color: var(--op-color-primary-plus-six);
  box-shadow: none;
}
.sidebar .sidebar__item.btn--active:hover {
  background: var(--op-color-primary-plus-six);
  color: var(--_fd-sidebar-text-color);
}
.sidebar .sidebar__item:hover {
  --_fd-sidebar-icon-color: var(--op-color-neutral-on-plus-seven);
  color: var(--_fd-sidebar-text-color);
  background-color: var(--op-color-neutral-plus-seven);
  box-shadow: none;
}
.sidebar .sidebar__item .sidebar__item-text {
  min-width: 0;
  overflow: hidden;
  white-space: pre-wrap;
  text-align: left;
}
.sidebar .sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--op-color-neutral-plus-eight);
  border-top: var(--op-border-width) solid var(--_op-sidebar-border-color);
  width: 100%;
  text-align: center;
}
.sidebar .sidebar__toggle .material-symbols-outlined {
  --__op-icon-font-size: var(--_op-icon-font-size-x-large);
  --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
}
.sidebar .sidebar__toggle:hover {
  background-color: var(--op-color-neutral-plus-six);
}
.sidebar.sidebar--drawer .sidebar__grouped-nav--rail, .sidebar.sidebar--drawer .sidebar__toggle--expand, .sidebar.sidebar--drawer .tooltip, .sidebar.sidebar--drawer sl-dropdown {
  display: none;
}
.sidebar.sidebar--rail {
  --__op-sidebar-width: min-content;
}
.sidebar.sidebar--rail .flytedesk-logo {
  background-image: url("/assets/fd-arrow-32041cda.svg");
  background-position: center;
  background-size: var(--op-space-x-large);
}
.sidebar.sidebar--rail .sidebar__grouped-nav--drawer, .sidebar.sidebar--rail .sidebar__toggle--collapse {
  display: none;
}
.sidebar.sidebar--rail .sidebar__toggle .icon {
  transform: rotate(180deg);
}
.sidebar.sidebar--rail .sidebar__item:not(.dropdown__item > .sidebar__item) {
  width: var(--_fd-sidebar-item-height);
  min-width: var(--_fd-sidebar-item-height);
  justify-content: center;
  padding: 0;
  font-size: 0;
  gap: 0;
}
.sidebar.sidebar--rail:has(.sidebar__grouped-nav--rail) button {
  padding: 0;
}
.app__content-area:has(.error_page__container) {
  height: 100vh;
}
.error_page__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--op-space-medium);
  align-items: center;
  background-color: var(--op-color-background);
  padding: var(--op-space-medium);
}
.error_page__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--op-space-medium);
}
.error_page__logo {
  width: calc(var(--op-space-scale-unit)*15);
}
.error_page__user_email {
  font-size: var(--op-font-size-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.error_page__image {
  max-height: 80%;
  max-width: 80%;
}
.organization-indicator {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
}
.progress-elements__message {
  display: flex;
  flex-direction: row;
  align-content: center;
  gap: var(--op-space-x-small);
  padding-bottom: var(--op-space-2x-small);
  padding-top: var(--op-space-2x-small);
  font-size: var(--op-font-small);
}
.progress-elements__message a {
  text-decoration: none;
}
.progress-elements__subject {
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-x-small);
  margin-bottom: var(--op-space-x-small);
}
.card.card--review {
  --op-color-border: var(--op-color-neutral-plus-four);
}
.card.card--review .card__header.card__header--warning {
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
  border-bottom: 1px solid var(--op-color-neutral-plus-four);
  background-color: var(--op-color-neutral-plus-seven);
  flex-direction: column;
  align-items: start;
}
.card.card--review .card__header .card__header--warning-text {
  margin-bottom: var(--op-space-2x-large);
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-normal);
}
.card.card--review .card__header .card__header--warning-text .text-error {
  color: var(--op-color-alerts-danger-minus-one);
}
.card.card--review .card__header .card__header__title {
  align-self: start;
}
.card.card--review .card__header .card--review__data {
  color: var(--op-color-neutral-on-plus-max-alt);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.card.card--review .card__header .card--review__datetime {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}
.card.card--review .card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-large);
  width: 100%;
}
.card.card--review .card__body p {
  font-size: inherit;
}
.card.card--review .card__body p:last-of-type {
  margin-bottom: 0;
}
.card.card--review .card__body .review-form-step {
  padding-block: 0;
}
.card.card--review .card__body .review-form-step .form-label {
  font-size: inherit;
  font-weight: inherit;
}
.card.card--review .card__body .review-form-step.review-form-step--small .ts-wrapper {
  width: calc(var(--op-size-unit)*30);
}
.card.card--review .card__body .review-form-step.review-form-step--medium .ts-wrapper {
  width: calc(var(--op-size-unit)*45);
}
.card.card--review .card__body .contents:not(:has(.review-form-step)) {
  display: none;
}
.card.card--review .card__body .card__nested-body {
  display: inherit;
  flex-direction: inherit;
  gap: inherit;
  width: 100%;
}
.card.card--review .card__body .form-group {
  padding: 0;
}
.card.card--review .card--review__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--op-space-medium);
  width: 100%;
}
.card.card--review .card--review__details .details-group {
  display: flex;
  flex-direction: column;
}
.card.card--review .card--review__details .details-group__heading {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.card.card--review .card__footer--form {
  flex-direction: row-reverse;
  justify-content: space-between;
}
.card.card--review .card__body,
.card.card--review .card__footer {
  --op-color-border: var(--op-color-neutral-plus-four);
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-four);
}
.card.card--review.card--approved, .card.card--review.card--ignored {
  --op-color-border: var(--op-color-alerts-notice-minus-one);
}
.card.card--review.card--rejected {
  --op-color-border: var(--op-color-alerts-danger-plus-two);
}
.card--review__metrics {
  --fd-detail-item-width: calc(var(--op-size-unit)*30);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--fd-detail-item-width), 1fr));
  gap: var(--op-space-small);
}
.asset-items {
  display: grid;
  gap: var(--op-space-x-small);
  grid-template-columns: 1fr;
}
.asset-item {
  display: flex;
  gap: var(--op-space-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
}
.asset-item .form-group {
  padding: 0;
}
.asset-item.asset-item--inline {
  flex-direction: row;
  align-items: center;
}
.asset-item.asset-item--inline .asset-item__image {
  --fd-asset-item-image-inline-size: calc(var(--op-size-unit)*11);
  width: var(--fd-asset-item-image-inline-size);
  height: var(--fd-asset-item-image-inline-size);
}
.asset-item input::file-selector-button {
  display: none;
}
.asset-item .asset-item__image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: var(--op-color-neutral-plus-six);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-five);
  border-radius: var(--op-radius-large);
}
.asset-item .asset-item__main {
  display: flex;
  flex-direction: row;
  gap: var(--op-space-small);
  align-items: center;
  width: 0;
  flex-grow: 1;
}
.asset-item .asset-item__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-item .asset-item__filesize {
  color: var(--op-color-neutral-on-plus-max);
  font-weight: var(--op-font-weight-normal);
  flex-shrink: 0;
}
.asset-item .asset-item__filesize:empty {
  display: none;
}
.panel__body-section {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--op-space-small);
}
.section-header {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-weight: var(--op-font-weight-bold);
}
.review-status-badge--not_ready {
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
}
.review-status-badge--in_review {
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
}
.review-status-badge--change_requested {
  background-color: var(--op-color-alerts-warning-plus-four);
  color: var(--op-color-alerts-warning-on-plus-four);
}
.review-status-badge--approved {
  background-color: var(--op-color-alerts-notice-plus-five);
  color: var(--op-color-alerts-notice-on-plus-five);
}
.review-status-badge--ignored {
  background-color: var(--op-color-alerts-notice-plus-five);
  color: var(--op-color-alerts-notice-on-plus-five);
}
.review-status-badge--review_rejected {
  background-color: var(--op-color-alerts-danger-plus-five);
  color: var(--op-color-alerts-danger-on-plus-five);
}
.review-status-badge_container {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
}
.user_impersonation_toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--op-space-x-small) var(--op-space-small);
  background-color: var(--op-color-alerts-warning-plus-two);
  font-size: var(--op-font-small);
}
.user_impersonation_toolbar button {
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-x-small);
}
.user_impersonation_modal {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--op-space-scale-unit)*25);
  font-size: var(--op-font-small);
}
.ad-activity-panel__feed {
  overflow: auto;
  height: 100%;
  padding: 0 var(--op-space-x-large);
}
.ad-activity-card__comment-form {
  border-top: 1px solid var(--op-color-neutral-plus-five);
  width: 100%;
  background: var(--op-color-neutral-plus-eight);
}
.ad-activity-card__comment-form .ad-activity-card__comment-form-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-small);
  padding: var(--op-space-medium) var(--op-space-x-large) var(--op-space-x-large) var(--op-space-x-large);
}
.ad-activity-card__comment-form .ad-activity-card__comment-form-content:has(.ad-activity-card__comment-warning) {
  padding-top: var(--op-space-small);
}
.ad-activity-card__comment-form .ad-activity-card__comment-form-content .form-group {
  padding: 0;
  width: 100%;
}
.ad-activity-card__comment-form .ad-activity-card__comment-input {
  height: 90px;
  padding: 12px 15px 70px 15px;
}
.ad-activity-card__comment-form .ad-activity-card__submit-button {
  position: absolute;
  right: calc(var(--op-space-scale-unit)*4);
  bottom: var(--op-space-4x-large);
}
.ad-activity-card__comment-form:not([data-dirty=true]) .ad-activity-card__cancel-button {
  opacity: var(--op-opacity-disabled);
  pointer-events: none;
}
.ad-activity-card__comment-form .ad-activity-card__cancel-button {
  position: absolute;
  left: calc(var(--op-space-scale-unit)*4);
  bottom: var(--op-space-4x-large);
}
.ad-activity-card__comment-form .ad-activity-card__comment-warning {
  font-size: var(--op-font-small);
  color: var(--op-color-alerts-danger-on-minus-eight);
  font-weight: var(--op-font-weight-semi-bold);
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  text-align: center;
}
.ad-activity-card {
  padding: var(--op-space-small) var(--op-space-medium);
  background: var(--op-color-neutral-plus-max);
  border-radius: var(--op-radius-large);
}
.ad-activity-card:last-child {
  margin-bottom: var(--op-space-x-large);
}
.ad-activity-card:hover .ad-activity-card__delete_button .icon {
  visibility: visible;
}
.ad-activity-card + .ad-activity-card {
  margin-top: var(--op-space-small);
}
.ad-activity-card__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
  align-items: center;
}
.ad-activity-card__label {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.ad-activity-card__metadata {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.ad-activity-card__metadata .ad-activity-card__delete_button .icon {
  margin-top: -2px;
  visibility: hidden;
}
.ad-activity-card__attribution {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.ad-activity-card__metadata--flex-end {
  justify-content: flex-end;
}
.ad-activity-card__user-badge {
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-normal);
  gap: var(--op-space-2x-small);
}
.ad-activity-card__user-badge .fd-icon {
  height: 100%;
  width: var(--op-space-x-small);
  font-size: var(--op-font-2x-small);
}
.ad-activity-card__user-badge--current-user {
  background: var(--op-color-primary-minus-one);
  color: var(--op-color-neutral-plus-max);
}
.ad-activity-card__time {
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-eight);
}
.ad-activity-card__subtitle {
  color: var(--op-color-neutral-on-plus-eight);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  padding-left: calc(var(--op-space-scale-unit)*2.6);
  padding-top: var(--op-space-2x-small);
}
.ad-activity-card__other-org-comment {
  background: var(--op-color-neutral-plus-seven);
  box-shadow: var(--op-border-all) var(--op-color-neutral-plus-five);
  margin-right: 25%;
}
.ad-activity-card__current-org-comment {
  background: var(--op-color-neutral-plus-seven);
  box-shadow: var(--op-border-all) var(--op-color-neutral-plus-five);
  margin-left: 25%;
}
.ad-activity-card__current-user {
  background: var(--op-color-primary-plus-six);
  box-shadow: var(--op-border-all) var(--op-color-primary-plus-four);
}
.ad-activity-card__content p {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-seven-alt);
  margin: unset;
  padding-bottom: var(--op-space-x-small);
}
.ad-activity-card__content p:last-child {
  padding-bottom: var(--op-space-small);
}
.ad-activity-card__content--change-requested {
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-eight);
  padding-left: calc(var(--op-space-scale-unit)*2.6);
  padding-top: var(--op-space-small);
}
.ad-activity-panel__date-separator {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: var(--op-space-large);
}
.ad-activity-panel__date-separator:not(:first-child) {
  margin-top: var(--op-space-large);
}
.ad-activity-panel__date-separator:first-child {
  padding-top: var(--op-space-x-large);
}
.ad-activity-panel__date-separator .ad-activity-panel__date-separator-label {
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-max);
  flex-grow: 1;
  text-wrap: nowrap;
  padding: 0 var(--op-space-x-small);
}
.ad-activity-panel__new-activity-indicator {
  align-self: center;
  position: relative;
  bottom: var(--op-space-5x-large);
  margin-bottom: calc(var(--op-space-scale-unit)*-3);
}
#drawer.seller-ad-details-drawer[data-locked] .resource-details-drawer__panel input, #drawer.seller-ad-details-drawer[data-locked] .resource-details-drawer__panel button, #drawer.seller-ad-details-drawer[data-locked] .resource-details-drawer__panel .form-card__edit-button, #drawer.seller-ad-details-drawer[data-locked] .resource-details-drawer__panel sl-dropdown::part(trigger) {
  pointer-events: none;
  opacity: var(--op-opacity-disabled);
}
#drawer.seller-ad-details-drawer[data-locked] .resource-details-drawer__panel label {
  pointer-events: none;
}
#drawer.seller-ad-details-drawer sl-tab[panel=activity] {
  margin-top: auto;
}
.ad-drawer-header__subtitle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-x-large);
}
.ad-drawer-header__subtitle-text {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  padding-top: var(--op-space-x-small);
}
.ad-drawer-header__subtitle-text span {
  margin: unset;
}
.ad-status-badge--eligible {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight-alt);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-three);
}
.ad-status-badge--bookable {
  background-color: var(--op-color-alerts-warning-plus-one);
  color: var(--op-color-alerts-warning-on-plus-one-alt);
}
.ad-status-badge--unbookable {
  background-color: var(--op-color-alerts-warning-plus-eight);
  color: var(--op-color-alerts-warning-on-plus-eight-alt);
  border: var(--op-border-width) solid var(--op-color-alerts-warning-plus-one);
}
.ad-status-badge--rejected {
  background-color: var(--op-color-neutral-plus-one);
  color: var(--op-color-neutral-on-plus-one);
}
.ad-status-badge--pending {
  background-color: var(--op-color-primary-plus-three);
  color: var(--op-color-primary-on-plus-three-alt);
}
.ad-status-badge--delinquent {
  background-color: var(--op-color-alerts-danger-plus-one);
  color: var(--op-color-alerts-danger-on-plus-one-alt);
}
.ad-status-badge--booked {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one-alt);
}
.ad-status-badge--ready {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one-alt);
}
.ad-status-badge--started {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one-alt);
}
.ad-status-badge--completed {
  background-color: var(--op-color-alerts-notice-minus-two);
  color: var(--op-color-primary-on-minus-one-alt);
}
.ad-status-badge--canceled {
  background-color: var(--op-color-neutral-minus-max);
  color: var(--op-color-neutral-on-minus-max-alt);
}
.ad-table__run-dates {
  width: calc(var(--op-space-scale-unit)*17.5);
}
.ad-table__summary_row {
  background: var(--op-color-neutral-plus-six);
}
.ad-table__summary_row .ad-table__summary_row_header:first-child {
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border);
}
.ad-table__summary_row .ad-table__summary_row_header:last-child {
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-right) var(--op-color-border);
}
.ad-table__summary_row .ad-table__summary_row_header {
  text-transform: none;
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border);
}
.ad-table__summary_row:has(+ .ad-table__summary_row--selected) {
  display: none;
}
.ad-table__summary_row--selected {
  background: var(--op-color-primary-base);
}
.ad-table__summary_row--selected .ad-table__summary_row_header {
  color: var(--op-color-primary-on-minus-max-alt);
}
.bulk_updates__input_row {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.bulk_updates__input_row .bulk-updates__date-input--long {
  width: calc(var(--op-space-scale-unit)*30);
}
.bulk-updates__input-row--toggleable {
  padding-top: var(--op-space-medium);
  display: flex;
  align-items: center;
  gap: var(--op-space-scale-unit);
}
.bulk-updates__input-row--toggleable .ad_rate_form_input {
  width: calc(var(--op-space-scale-unit)*12.5);
}
.bulk-updates__input-row--toggleable div {
  padding-bottom: 0;
}
.bulk-updates__input-row--toggleable label.required abbr {
  display: none;
}
.bulk-updates__input-row--toggleable .form-error, .bulk-updates__input-row--toggleable .live-input__display-error {
  padding-top: var(--op-space-small);
}
.bulk_updates__radio_button {
  height: var(--op-space-x-large);
  width: var(--op-space-x-large);
  margin-right: calc(var(--op-space-2x-small)*-1);
}
.alert.bulk_updates__single-day-alert {
  background-color: var(--op-color-primary-plus-four);
  color: var(--op-color-primary-on-plus-five);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: var(--op-space-x-small);
  width: -moz-max-content;
  width: max-content;
  font-size: var(--op-font-x-small);
}
.bulk_updates__content-container {
  padding-left: var(--op-space-medium);
}
.bulk_updates__progress-bar-message {
  display: flex;
  flex-direction: row;
  align-content: center;
  gap: var(--op-space-x-small);
  padding-bottom: var(--op-space-2x-small);
  padding-top: var(--op-space-2x-small);
  font-size: var(--op-font-small);
}
.bulk_updates__progress-bar-message a {
  text-decoration: none;
}
.resource-details-drawer__panel.creative-management-panel .resource-details-drawer__section .form-group {
  padding: unset;
}
.resource-details-drawer__panel.creative-management-panel .resource-details-drawer__section.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-small);
}
.resource-details-drawer__panel.creative-management-panel .creative-data-section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-large);
}
.resource-details-drawer__panel.creative-management-panel .creative-data-section .resource-details-drawer__field-header {
  padding-top: unset !important;
}
.resource-details-drawer__panel.creative-management-panel .creative-data-section .resource-details-drawer__field-header a {
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.resource-details-drawer__panel.creative-management-panel .creative-data-section textarea.resource-details-drawer__field {
  border: none;
  resize: none;
  overflow: hidden;
  width: 100%;
  background: transparent;
  outline: none;
}
.resource-details-drawer__panel.creative-management-panel .creative-variation-toolbar__inactive-badge {
  background: var(--op-color-alerts-warning-plus-four);
}
.inventory-details-section__supplier-select {
  width: calc(var(--op-space-scale-unit)*35);
}
.inventory-details-section__supplier-select:has([data-dirty=true]) + .form-control__suffix-text {
  display: none;
}
.pricing-section__distributed-quantity {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  width: calc(var(--op-space-scale-unit)*12);
  white-space: nowrap;
}
.pricing-section__distributed-quantity input.form-control, .pricing-section__distributed-quantity .ts-wrapper input.ts-control, .ts-wrapper .pricing-section__distributed-quantity input.ts-control {
  width: calc(var(--op-space-scale-unit)*12);
}
.pricing-section__currency-row {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-large);
}
.pricing-section__currency-row input.form-control, .pricing-section__currency-row .ts-wrapper input.ts-control, .ts-wrapper .pricing-section__currency-row input.ts-control, .pricing-section__currency-row .readonly-data-display {
  width: calc(var(--op-space-scale-unit)*12);
}
.pricing-section__currency-row .pricing-section__rate-input-reset-wrapper:has(.form-group--error) ~ .form-group {
  gap: var(--op-space-2x-small);
}
.pricing-section__currency-row .readonly {
  -moz-column-gap: 0;
       column-gap: 0;
}
.pricing-section__currency-row .form-error, .pricing-section__currency-row .live-input__display-error {
  white-space: nowrap;
  max-width: calc(var(--op-space-scale-unit)*12);
}
.pricing-section__currency-row .pricing-section__rate-input-reset-wrapper {
  display: flex;
  gap: var(--op-space-x-small);
}
.pricing-section__currency-row .pricing-section__rate-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.pricing-section__currency-row .pricing-section__rate-input-group .btn--small {
  max-width: calc(var(--op-space-scale-unit)*8);
}
.pricing-section__price-mode-toggle {
  display: flex;
  justify-content: center;
  width: var(--op-space-4x-large);
  padding-top: calc(var(--op-space-scale-unit)*2.8);
}
.pricing-section__quantity-row {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-small);
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.pricing-section__quantity-row .form-control__suffix-text {
  margin: 0;
}
.pricing-section__quantity-row input.form-control, .pricing-section__quantity-row .ts-wrapper input.ts-control, .ts-wrapper .pricing-section__quantity-row input.ts-control, .pricing-section__quantity-row .form-group--error, .pricing-section__quantity-row .readonly-data-display {
  width: var(--op-space-8x-large);
}
.pricing-section__quantity-row .form-error, .pricing-section__quantity-row .live-input__display-error {
  white-space: nowrap;
}
.pricing-section__quantity-row .pricing-section__available-quantity-display {
  padding-top: calc(var(--op-space-scale-unit)*1.5);
}
.pricing-section__quantity-row:has(.form-group--error) .pricing-section__available-quantity-display {
  padding-top: calc(var(--op-space-scale-unit)*1.1);
}
.reschedule-ad-modal__container {
  display: flex;
  flex-direction: column;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.reschedule-ad-modal__form-container {
  display: flex;
  flex-direction: column;
}
.reschedule-ad-modal__input {
  display: flex;
  flex: 1 0 0;
}
.reschedule-ad-modal__input .form-label {
  white-space: nowrap;
}
.reschedule-ad-modal__input .ad_requested_quantity .form-error, .reschedule-ad-modal__input .ad_requested_quantity .live-input__display-error {
  white-space: nowrap;
}
.reschedule-ad-modal__input .date.form-label {
  display: flex;
  gap: var(--op-space-2x-small);
  align-items: flex-end;
}
.reschedule-ad-modal__input .reschedule-ad-modal__input--stretched {
  width: calc(var(--op-space-scale-unit)*27);
}
.reschedule-ad-modal__input--small {
  max-width: calc(var(--op-space-scale-unit)*8);
}
.reschedule-ad-modal__input--small span {
  width: calc(var(--op-space-scale-unit)*8);
}
.reschedule-ad-modal__input-modifier {
  width: 50%;
  padding: unset;
}
.reschedule-ad-modal__input-modifier label {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
.reschedule-ad-modal__input-modifier input[type=checkbox] {
  width: var(--op-space-medium);
  height: var(--op-space-medium);
}
.reschedule-ad-modal__input-modifier turbo-frame {
  display: block;
}
.reschedule-ad-modal__section-padding {
  padding-bottom: var(--op-space-medium);
}
.reschedule-ad-modal__quantity-type-text {
  margin: calc(var(--op-space-scale-unit)*4.4) 0 0 var(--op-space-x-small);
}
.reschedule-ad-modal__input-row {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-large);
  align-self: stretch;
}
.reschedule-ad-modal__input-row:has(.form-group--error) {
  align-items: flex-start;
}
.reschedule-ad-modal__input-row .form-group--error .input-with-icon {
  grid-column: unset;
}
.reschedule-ad-modal__horizontal-border {
  border-bottom: 1px solid var(--op-color-neutral-plus-four);
}
.review-progress-indicator--not-applicable {
  opacity: var(--op-opacity-disabled);
}
.review-progress-indicator--not-applicable .text-pair__title {
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
}
.asset-display-grid {
  display: grid;
  gap: var(--op-space-medium);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}
.asset-display-grid .asset-tile {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: var(--op-space-2x-small);
  height: 250px;
}
.asset-display-grid .asset-tile__container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--op-radius-large);
  border: 1px solid var(--op-color-neutral-plus-five);
  background: var(--op-color-neutral-plus-six);
  overflow: hidden;
}
.asset-display-grid .asset-tile__image {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--op-radius-large);
  height: 100%;
  border: 1px solid var(--op-color-border);
  overflow: hidden;
  position: relative;
}
.asset-display-grid .asset-tile__image .asset-tile__image-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.1s ease;
  background-color: var(--op-color-neutral-minus-two);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-x-small);
  color: var(--op-color-neutral-on-minus-two-alt);
  font-size: var(--op-font-small);
}
.asset-display-grid .asset-tile__image:hover .asset-tile__image-overlay {
  opacity: 0.9;
}
.asset-display-grid .asset-tile__image img {
  max-height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.asset-display-grid .asset-tile__details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  gap: var(--op-space-small);
  font-family: var(--op-font-family);
  font-size: var(--op-font-x-small);
  font-style: normal;
  font-weight: var(--op-font-weight-semi-bold);
  line-height: var(--op-line-height-normal);
}
.asset-display-grid .asset-tile__actions {
  display: flex;
  align-items: center;
  gap: var(--op-space-2x-small);
}
.dialog.dialog--asset-preview .dialog__footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
}
.dialog.dialog--asset-preview .dialog__footer .dialog__footer__navigation {
  display: flex;
  justify-content: center;
  grid-column: 2;
}
.dialog.dialog--asset-preview .dialog__footer .dialog__footer__actions {
  justify-self: end;
  gap: var(--op-space-small);
  grid-column: 3;
}
.dialog.dialog--asset-preview .dialog__footer .dialog__footer__label {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
  justify-self: start;
}
.dialog.dialog--asset-preview .dialog__footer .dialog__footer__label b {
  text-wrap: nowrap;
}
.asset-preview-tag__contents {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--op-color-neutral-plus-six);
  height: 100%;
  width: 100%;
}
.asset-preview-tag__contents img {
  max-height: 100%;
  max-width: 100%;
}
.asset-preview-tag__contents video {
  max-height: 100%;
  max-width: 100%;
}
.auth-page {
  background-color: var(--op-color-primary-plus-one);
  background-image: url("/assets/flytedesk_background-a1396e6d.svg");
  background-repeat: repeat repeat;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.sessions-page .auth-content {
  background: var(--op-color-neutral-plus-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 500px;
  min-height: 470px;
  text-decoration: none;
  border-radius: var(--op-radius-large);
  padding: var(--op-space-3x-large) var(--op-space-3x-large) var(--op-space-6x-large) var(--op-space-3x-large);
}
.sessions-page .auth-content label {
  font-weight: var(--op-font-weight-semi-bold);
}
.sessions-page .auth-content .form-group {
  padding-top: var(--op-space-x-small);
  padding-bottom: var(--op-space-x-small);
}
.sessions-page .auth-content .form-group.user_remember_me {
  padding-bottom: var(--op-space-x-large);
}
.sessions-page .auth-content .title img {
  height: calc(var(--op-space-scale-unit)*7.2);
}
.sessions-page .auth-content form {
  padding: var(--op-space-small) calc(var(--op-space-scale-unit)*3.2);
  width: 100%;
}
.sessions-page .auth-content form .form-actions {
  display: flex;
}
.sessions-page .auth-content form .form-actions input {
  flex-grow: 1;
}
.dialog:has(.account-settings__modal)::part(panel) {
  --height: min(85vh, 77.5rem);
  height: var(--height);
  max-height: var(--height);
}
.dialog:has(.account-settings__modal) .account-settings__modal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dialog:has(.account-settings__modal) turbo-frame {
  height: 100%;
  min-height: 100%;
}
.account-settings__body {
  padding-bottom: var(--op-space-x-large);
}
.account-settings__body .form-group {
  padding: 0;
  flex-grow: 1;
}
.account-settings__body .user_phone_extension {
  max-width: 5em;
}
.account-settings__section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
  flex-grow: 1;
}
.account-settings__section--icon {
  gap: var(--op-space-x-small);
  align-items: center;
}
.account-settings__section--icon img {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
.account-settings_upload-link {
  color: var(--op-color-primary-on-plus-max);
  cursor: pointer;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
}
.passwords-page .auth-content {
  background: var(--op-color-neutral-plus-max);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 500px;
  min-height: 470px;
  text-decoration: none;
  border-radius: var(--op-radius-large);
  padding: var(--op-space-3x-large) var(--op-space-3x-large) var(--op-space-6x-large) var(--op-space-3x-large);
}
.passwords-page .auth-content label {
  font-weight: var(--op-font-weight-semi-bold);
}
.passwords-page .auth-content .form-group {
  padding-top: var(--op-space-x-small);
  padding-bottom: var(--op-space-x-small);
}
.passwords-page .auth-content .title img {
  height: calc(var(--op-space-scale-unit)*7.2);
}
.passwords-page .auth-content form {
  padding: 0 calc(var(--op-space-scale-unit)*3.2);
  width: 100%;
}
.passwords-page .auth-content form .form-actions {
  display: flex;
}
.passwords-page .auth-content form .form-actions input {
  flex-grow: 1;
}
.invitations-page .auth-content {
  background: var(--op-color-neutral-plus-max);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 500px;
  min-height: 470px;
  text-decoration: none;
  border-radius: var(--op-radius-large);
  padding: var(--op-space-3x-large) var(--op-space-3x-large) var(--op-space-6x-large) var(--op-space-3x-large);
}
.invitations-page .auth-content label {
  font-weight: var(--op-font-weight-semi-bold);
}
.invitations-page .auth-content .form-group {
  padding-top: var(--op-space-x-small);
  padding-bottom: var(--op-space-x-small);
}
.invitations-page .auth-content .title img {
  height: calc(var(--op-space-scale-unit)*7.2);
}
.invitations-page .auth-content form {
  padding: 0 calc(var(--op-space-scale-unit)*3.2);
  width: 100%;
}
.invitations-page .auth-content form .form-actions {
  display: flex;
}
.invitations-page .auth-content form .form-actions input {
  flex-grow: 1;
}
.card-styleguide:has(.dropdown-card) {
  contain: unset;
}
.card-styleguide > .card__header {
  background-color: var(--op-color-primary-base);
  color: var(--op-color-primary-on-base);
}
.card-styleguide > .card__body {
  background-color: var(--op-color-primary-plus-max);
  color: var(--op-color-primary-on-plus-max);
}
.styleguide-swatch {
  width: var(--op-space-large);
  height: var(--op-space-large);
  box-shadow: var(--op-border-all) var(--op-color-border);
}
.dropdown-card {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  contain: unset;
}
.purchase-order-card__title {
  display: block;
  width: 100%;
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.purchase-order-card-panel {
  flex: 1;
  overflow-y: hidden;
}
.purchase-order-card-panel .paginated-container__content {
  padding: var(--op-space-x-large);
}
.purchase-order-card-panel .purchase-order-card__body {
  grid-template-columns: var(--_card-column-width--2x-small) minmax(0, 1fr) var(--_card-column-width--large) var(--_card-column-width--large) var(--_card-column-width--large) var(--_card-column-width--x-small);
}
.purchase-order-card-panel .purchase-order-card__body:has(+ .health-bar-turbo-frame:empty) {
  border-bottom: unset;
  border-radius: var(--op-radius-large);
}
.purchase-order-card-panel .purchase-order-card__body:hover .purchase-order-card__title {
  color: var(--op-color-primary-base);
}
.purchase-order-card-panel .purchase-order-card__body .card-list-item__date {
  white-space: nowrap;
}
.purchase-order-card-panel .purchase-order-card__body .text-pair__subtitle {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-max);
}
.purchase-order-card-panel .purchase-order-card__body .text-right.card-list-item__added-value .material-symbols-outlined {
  padding-right: var(--op-space-2x-small);
}
@container listCardContainer (width <= 1024px) {
  .purchase-order-card-panel .purchase-order-card__body {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "favorite header header header header header more-menu" "calendar calendar added_value added_value . . budget";
    row-gap: var(--op-space-x-small);
    -moz-column-gap: var(--op-space-x-small);
         column-gap: var(--op-space-x-small);
  }
  .purchase-order-card-panel .purchase-order-card__body .card-list-item__favorite {
    grid-area: favorite;
    justify-self: start;
  }
  .purchase-order-card-panel .purchase-order-card__body .card-list-item__label {
    grid-area: header;
  }
  .purchase-order-card-panel .purchase-order-card__body .card-list-item__more-menu {
    grid-area: more-menu;
    justify-self: end;
  }
  .purchase-order-card-panel .purchase-order-card__body .card-list-item__date {
    grid-area: calendar;
  }
  .purchase-order-card-panel .purchase-order-card__body .card-list-item__budget {
    grid-area: budget;
  }
  .purchase-order-card-panel .purchase-order-card__body .card-list-item__added-value {
    grid-area: added_value;
  }
}
.advertiser-select .form-group {
  padding: unset;
}
.dialog.dialog--inventory-search::part(panel) {
  width: var(--width);
  height: var(--height);
}
.dialog.dialog--inventory-search .dialog__body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dialog.dialog--inventory-search .inventory-search-page__container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialog .inventory-search-page__subheader {
  display: flex;
  justify-content: flex-start;
  gap: var(--op-space-medium);
  background-color: var(--op-color-neutral-plus-max);
  border-bottom: var(--op-border-width) solid var(--op-color-neutral-plus-four);
  padding: var(--op-space-small) var(--op-space-x-large);
}
.dialog .inventory-search-page__subheader .form-group {
  padding: unset;
}
.dialog .inventory-search-page__subheader .line-item-name-input {
  width: calc(var(--op-space-scale-unit)*44);
}
.dialog .inventory-search-page__body {
  height: 100%;
  display: flex;
  overflow: hidden;
}
.dialog .inventory-search-page__results-scroll-container {
  overflow-y: auto;
  flex-grow: 1;
}
.dialog .inventory-search-page__results {
  padding: var(--op-space-large);
}
.dialog .inventory-search-page__initial-content {
  display: flex;
  height: 50%;
  align-items: center;
  justify-content: center;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.dialog .inventory-search-results__table--empty {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog .inventory-search-results__table {
  margin-bottom: var(--op-space-large);
}
.dialog .inventory-search-page__button-with-warning {
  display: flex;
  gap: var(--op-space-small);
}
.dialog .inventory-search-page__warning-container {
  display: none;
}
.dialog .inventory-search-page__warning-text {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.dialog:has(.filter-sidebar-content [data-dirty=true]) .inventory-search-page__warning-container {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
.inventory-search-builder__tree-labels {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.inventory-search-builder__error-tooltip-icon {
  display: none;
}
sl-tree-item:has(.form-group--error) .inventory-search-builder__error-tooltip-icon {
  display: inline-block;
}
.health-bar {
  --_fd-health-bar-height: calc(var(--op-size-unit)*5);
  --_fd-health-bar-border-top: var(--op-border-top) var(--op-color-border);
  --_fd-health-bar-border-bottom: 0;
  position: relative;
  display: flex;
  gap: 0;
  background-color: var(--op-color-neutral-plus-seven);
  color: var(--op-color-neutral-on-plus-seven);
  box-shadow: var(--_fd-health-bar-border-bottom), var(--_fd-health-bar-border-top);
  height: var(--_fd-health-bar-height);
  border-radius: 0 0 var(--op-radius-large) var(--op-radius-large);
}
.health-bar .health-bar__segment {
  background-color: var(--op-color-neutral-minus-seven);
  color: var(--op-color-neutral-on-minus-seven);
  width: var(--section-width, 0%);
  height: var(--fd-height);
}
.health-bar .health-bar__segment:first-child {
  border-bottom-left-radius: var(--op-radius-large);
}
.health-bar .health-bar__segment:last-child {
  border-bottom-right-radius: var(--op-radius-large);
}
.health-bar .health-bar__segment.health-bar__segment--eligible {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight);
}
.health-bar .health-bar__segment.health-bar__segment--preordered {
  background: repeating-linear-gradient(-45deg, var(--op-color-neutral-base), var(--op-color-neutral-base) 8px, var(--op-color-neutral-plus-four) 5px, var(--op-color-neutral-plus-four) 15px);
}
.health-bar .health-bar__segment.health-bar__segment--bookable {
  background-color: var(--op-color-alerts-warning-plus-one);
  color: var(--op-color-alerts-warning-on-plus-one);
}
.health-bar .health-bar__segment.health-bar__segment--unbookable {
  background-color: var(--op-color-alerts-warning-plus-four);
  color: var(--op-color-alerts-warning-on-plus-four);
}
.health-bar .health-bar__segment.health-bar__segment--started, .health-bar .health-bar__segment.health-bar__segment--ready {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one);
}
.health-bar .health-bar__segment.health-bar__segment--pending {
  background-color: var(--op-color-primary-plus-three);
  color: var(--op-color-primary-on-plus-three);
}
.health-bar .health-bar__segment.health-bar__segment--open_healthy {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one);
}
.health-bar .health-bar__segment.health-bar__segment--delinquent {
  background-color: var(--op-color-alerts-danger-plus-one);
  color: var(--op-color-alerts-danger-on-plus-one);
}
.health-bar .health-bar__segment.health-bar__segment--verified {
  background-color: var(--op-color-alerts-notice-minus-one);
  color: var(--op-color-alerts-notice-on-minus-one);
}
.health-bar .health-bar__segment.health-bar__segment--blocked {
  background-color: var(--op-color-alerts-danger-plus-two);
  color: var(--op-color-alerts-danger-on-plus-two);
}
.health-bar .health-bar__segment.health-bar__segment--completed {
  background-color: var(--op-color-alerts-notice-minus-two);
  color: var(--op-color-alerts-notice-on-minus);
}
.health-bar .health-bar__segment .tooltip {
  position: absolute;
}
.health-bar.health-bar--subheader {
  --_fd-health-bar-height: var(--op-space-small);
  --_fd-health-bar-border-top: var(--op-border-top) var(--op-color-neutral-plus-five);
  --_fd-health-bar-border-bottom: var(--op-border-bottom) var(--op-color-neutral-plus-five);
  border-radius: 0;
}
.health-bar.health-bar--subheader .health-bar__segment:first-child, .health-bar.health-bar--subheader .health-bar__segment:last-child {
  border-radius: 0;
}
.health-bar-scale__line {
  display: block;
  background-color: var(--op-color-primary-plus-max);
  height: var(--op-space-small);
  border-top: var(--op-border-width) solid var(--op-color-neutral-plus-two);
}
.health-bar-scale__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--op-font-scale-unit);
  color: var(--op-color-neutral-plus-two);
  padding-right: var(--op-space-x-small);
  min-width: var(--op-space-7x-large);
}
.filter-sidebar-frame .precise-location-filter__margin-text {
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-small);
}
.filter-sidebar-frame .calendar-event-inclusion__container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-small);
  padding-top: var(--op-space-x-small);
}
.filter-sidebar-frame .calendar-event-inclusion__days-input {
  max-width: calc(var(--op-space-scale-unit)*5);
}
.filter-sidebar-frame .calendar-event-inclusion__inputs-row {
  display: flex;
  gap: var(--op-space-scale-unit);
  align-items: center;
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-x-small);
}
.filter-sidebar-frame .calendar-event-inclusion__inputs-row .calendar-event-inclusion__prefix-text {
  min-width: calc(var(--op-space-scale-unit)*5);
}
.filter-sidebar-frame .calendar-event-inclusion__inputs-row .form-group {
  padding: unset;
}
.filter-sidebar-frame .calendar-event-inclusion__inputs-row .form-error, .filter-sidebar-frame .calendar-event-inclusion__inputs-row .live-input__display-error {
  white-space: nowrap;
}
.filter-sidebar-frame .calendar-event-inclusion__inputs-row:has(.form-group--error) .calendar-event-inclusion__prefix-text, .filter-sidebar-frame .calendar-event-inclusion__inputs-row:has(.form-group--error) label {
  margin-top: calc(var(--op-space-scale-unit)*-2.4);
}
.filter-sidebar-frame .calendar-event-inclusion__inputs-row:has(.form-group--error) .form-group:not(.form-group--error) {
  margin-top: calc(var(--op-space-scale-unit)*-2.3);
}
.summary-card {
  display: flex;
  align-items: baseline;
  gap: var(--op-space-x-large);
}
.summary-card .summary-card__section {
  box-shadow: unset;
  display: flex;
  flex-direction: column;
  background-color: var(--op-color-neutral-plus-max);
  margin-left: auto;
  flex-wrap: unset;
  text-align: right;
}
.summary-card .summary-card__section-header {
  white-space: nowrap;
  font-weight: var(--op-font-weight-normal);
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-max);
}
.summary-card .summary-card__section-content {
  white-space: nowrap;
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-2x-large);
}
.line-item-card:hover .card-list-item__edit-configuration {
  visibility: visible;
}
.line-item-card__title {
  display: block;
  font-weight: var(--op-font-weight-bold);
  font-size: var(--op-font-small);
  color: var(--op-color-neutral-on-plus-max-alt);
  width: 100%;
  text-decoration: none;
  transition: var(--op-transition-input);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-item-card__body {
  grid-template-columns: minmax(0, 1fr) var(--_card-column-width--small) var(--_card-column-width--large) var(--_card-column-width--large) var(--_card-column-width--large) var(--_card-column-width--x-small) var(--_card-column-width--x-small);
}
.line-item-card__body:hover .line-item-card__title {
  color: var(--op-color-primary-base);
}
.line-item-card__body .text-pair__subtitle {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-max);
}
.line-item-card__body .card-list-item__date {
  white-space: nowrap;
}
.line-item-card__body .badge--status {
  justify-self: start;
}
.line-item-card__body .text-right.card-list-item__added-value .material-symbols-outlined {
  padding-right: var(--op-space-2x-small);
}
.line-item-card__body .card-list-item__edit-configuration {
  visibility: hidden;
}
.line-item-card__body .card-list-item__edit-configuration .btn {
  box-shadow: inset var(--op-border-all) var(--op-color-border);
}
@container listCardContainer (width <= 1024px) {
  .line-item-card__body {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "header1 header2 header3 header4 more-menu" "status manage-ads calendar added_value budget";
    row-gap: var(--op-space-x-small);
    -moz-column-gap: var(--op-space-x-small);
         column-gap: var(--op-space-x-small);
  }
  .line-item-card__body .card-list-item__label {
    grid-column-start: 1;
    grid-column-end: 5;
  }
  .line-item-card__body .card-list-item__edit-configuration {
    grid-area: manage-ads;
    justify-self: start;
  }
  .line-item-card__body .card-list-item__more-menu {
    grid-area: more-menu;
    justify-self: end;
  }
  .line-item-card__body .badge--status {
    grid-area: status;
    justify-self: start;
  }
  .line-item-card__body .card-list-item__date {
    grid-area: calendar;
  }
  .line-item-card__body .card-list-item__budget {
    grid-area: budget;
  }
  .line-item-card__body .card-list-item__added-value {
    grid-area: added_value;
  }
}
.added-value-toggle .added-value-toggle__switch {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: calc(var(--op-space-scale-unit)*-0.4);
}
.added-value-toggle .added-value-toggle__switch label {
  white-space: nowrap;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
}
.added-value-toggle .added-value-toggle__switch label .tooltip-container {
  margin-left: var(--op-space-2x-small);
}
.dialog__backdated-ad-form {
  --width: calc(var(--op-space-scale-unit)*72);
}
.booked_backdated_ad_form {
  min-height: calc(var(--op-space-scale-unit)*53);
  font-size: var(--op-font-small);
}
.booked_backdated_ad_form .two-column-form__row {
  gap: var(--op-space-x-large);
}
.booked_backdated_ad_form .readonly-data-display {
  width: calc(var(--op-space-scale-unit)*12);
}
.rate-card-modal__body {
  font-size: var(--op-font-small);
}
.rate-card-modal__last-updated-text {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  padding-top: var(--op-space-medium);
  font-weight: var(--op-font-weight-bold);
}
.rate-card-modal__last-updated-text .material-symbols-outlined {
  color: var(--op-color-alerts-info-minus-two);
}
.file.required.form-control.rate-card-upload__input, .ts-wrapper .file.required.rate-card-upload__input.ts-control {
  background-color: var(--op-color-neutral-plus-six);
}
.rate-card-modal__replacement-text {
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-max);
  padding-top: var(--op-space-x-small);
}
.rate_card_file {
  padding: var(--op-space-medium) 0 0 0;
}
.creative-management-group-card__body {
  grid-template-columns: minmax(0, 2fr) var(--_card-column-width--medium) var(--_card-column-width--medium) minmax(0, 1fr);
}
.creative-management-group-card__body.card__body {
  padding: var(--op-space-small) var(--op-space-medium);
}
.creative-management-group-card__body .text-pair {
  gap: var(--op-space-2x-small);
}
.creative-management-group-card__body .text-pair__title {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
}
.creative-management-group-card__body .text-pair__subtitle {
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-normal);
  color: var(--op-color-neutral-on-plus-max);
}
.creative-management-group-card__body .card-list-item__more-menu {
  justify-self: end;
}
.creative-management-group-card__body .card-list-item__date {
  white-space: nowrap;
}
.creative-management-group-card__body a {
  text-decoration: none;
}
.bulk-creative-management-drawer {
  --max-variations: 5;
}
.bulk-creative-management-drawer .variation-container .creative-variation-section:only-child [data-testid=delete-variation-btn] {
  visibility: hidden;
}
.bulk-creative-management-drawer .variation-container--single:has(> .creative-variation-section:nth-of-type(n+1)) + .add-variation-button {
  display: none;
}
.bulk-creative-management-drawer .variation-container--multiple:has(> .creative-variation-section:nth-of-type(n+5)) + .add-variation-button {
  display: none;
}
.bulk-creative-management-drawer .form-group {
  padding: unset;
}
.resource-details-drawer__toolbar .creatives_template_ad_ref {
  margin-right: var(--op-space-x-small);
  padding-block: 0;
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control {
  display: flex;
  flex-direction: row;
  gap: var(--op-space-large);
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .popover {
  background-color: var(--op-color-neutral-plus-max);
  padding: 0;
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form {
  font-weight: var(--op-font-weight-medium);
  font-size: var(--op-font-small);
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-info {
  display: flex;
  padding: var(--op-space-small) var(--op-space-medium);
  flex-direction: row;
  align-items: center;
  gap: var(--op-space-x-small);
  border-bottom: 1px solid var(--op-color-neutral-plus-six);
  background: var(--op-color-neutral-plus-eight);
  border-radius: var(--op-radius-large) var(--op-radius-large) 0 0;
  font-size: var(--op-font-x-small);
  color: var(--op-color-neutral-on-plus-max);
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small) var(--op-space-medium);
  border-bottom: 1px solid var(--op-color-neutral-plus-six);
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-section .dimension-control__form-section-label {
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-section .form-group {
  padding: 0;
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-section .options_dimension {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-section .options_dimension .radio {
  gap: var(--op-space-2x-small);
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-section .options_dimension input[type=radio] {
  margin: 0;
}
.page-header__content.page-header__content--bulk-creative-management .dimension-control .dimension-control__form-actions {
  display: flex;
  flex-direction: row;
  gap: var(--op-space-medium);
  justify-content: space-between;
  align-items: center;
  padding: var(--op-space-small) var(--op-space-medium);
}
.page-header__content.page-header__content--bulk-creative-management .creative-attached-progress-indicator .text-pair__title {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-bold);
}
.page-header__content.page-header__content--bulk-creative-management .creative-attached-progress-indicator .text-pair__subtitle {
  font-size: var(--op-font-small);
}
.page-header__content.page-header__content--bulk-creative-management .form-label {
  font-weight: var(--op-font-weight-medium);
  font-size: var(--op-font-small);
}
.page-header__content.page-header__content--bulk-creative-management input[type=checkbox] {
  width: var(--op-space-medium);
  height: var(--op-space-medium);
}
.creative-label-section .creative-label-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  grid-column: 1/-1;
}
.creative-label-section .creative-label-input-row {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-small);
}
.creative-label-section .creative-label-input-row button {
  margin-top: 4px;
  visibility: hidden;
}
.creative-label-section .creative-label-input-row:hover button {
  visibility: visible;
}
.creative-label-section .add-label-button {
  width: calc(var(--op-space-scale-unit)*9.5);
  grid-column: 1/-1;
}
.property_index-page__body {
  display: flex;
  overflow-y: auto;
}
.property_index-page__body .scrollable-table-container {
  box-shadow: 1px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;
}
.property_index-page__body .table__contents {
  padding: var(--op-space-medium);
}
.property_index-page__body .property-index-page__table-label {
  padding: var(--op-space-medium);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-bold);
  height: 40px;
}
.property_index-page__body .table__contents--primary-property-badge {
  background-color: var(--op-color-alerts-warning-plus-one);
}
.property_index-page__body .table__contents--primary-icon {
  font-size: var(--__op-icon-font-size);
}
.inventory_manager__supplier_select {
  height: calc(var(--op-space-scale-unit)*40);
}
.supplier_index-page__body {
  display: flex;
  overflow-y: auto;
}
.supplier_index-page__body .scrollable-table-container {
  box-shadow: 1px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;
}
.supplier_index-page__body .table__contents {
  padding: var(--op-space-medium);
}
.supplier_index-page__body .supplier-index-page__table-label {
  padding: var(--op-space-medium);
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-bold);
  height: 40px;
}
.supplier_index-page__body .table__contents--primary-property-badge {
  background-color: var(--op-color-alerts-warning-plus-one);
}
.supplier_index-page__body .table__contents--primary-icon {
  font-size: var(--__op-icon-font-size);
}
.property-show-page__table-header {
  display: flex;
  align-items: center;
  font-size: var(--op-font-medium);
  font-weight: var(--op-font-weight-bold);
  height: 40px;
}
#ad-units-table .size {
  text-transform: none;
}
.property_primary_publication {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: var(--op-space-medium) 0;
}
.property_primary_publication .form-control:active, .property_primary_publication .ts-wrapper .ts-control:active, .ts-wrapper .property_primary_publication .ts-control:active, .property_primary_publication .form-control:focus, .property_primary_publication .ts-wrapper .ts-control:focus, .ts-wrapper .property_primary_publication .ts-control:focus {
  box-shadow: none;
}
.property_primary_publication label {
  align-self: center;
}
.two-column-form__section-header.monthly {
  padding-bottom: var(--op-space-medium);
}
.property-form-active-input-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--op-space-small);
  padding: var(--op-space-small) 0;
}
.property-form-active-input-wrapper .property_active {
  gap: var(--op-space-medium);
  padding-top: 0;
}
.property_form__two_column_scheduling {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--op-space-medium);
}
.property-form__deactivation-warning {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: calc(var(--op-space-scale-unit)*2);
}
.property-form__deactivation-warning .property-form__deactivation-warning-text {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.property-form__deactivation-warning .icon--warning {
  font-size: var(--op-font-large);
  color: var(--op-color-alerts-warning-base);
  margin-right: var(--op-space-2x-small);
}
.inventory_manager__medium_image {
  width: 100%;
  height: calc(var(--op-space-scale-unit)*14.8);
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: var(--op-space-medium);
  padding: var(--op-space-x-large) 0;
  border-radius: var(--op-radius-large);
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.08), inset 0px 0px 0px var(--op-border-width) var(--op-color-neutral-plus-four);
}
.inventory_manager__medium_image img {
  height: calc(var(--op-space-scale-unit)*10);
  margin: auto;
}
.ad-unit-form-active-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--op-space-small);
}
.two-column-form__row.activation-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--op-space-small);
  height: 60px;
}
.two-column-form__row.activation-row .switch_checkbox.ad_unit_active {
  padding: 0;
  grid-template-columns: auto;
}
.two-column-form__row.activation-row .switch_checkbox.ad_unit_active label {
  color: var(--op-color-neutral-on-plus-max-alt);
}
.ad-unit-form__deactivation-warning {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  padding-bottom: var(--op-space-3x-small);
}
.ad-unit-form__deactivation-warning .icon--warning {
  font-size: var(--op-font-large);
  color: var(--op-color-alerts-warning-base);
  margin-right: var(--op-space-2x-small);
}
#ad_unit_form .form-label .tooltip-container span:first-child {
  max-height: 15px;
  overflow: visible;
}
.auto-inject-section .url-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  grid-column: 1/-1;
}
.auto-inject-section .url-input-row {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.auto-inject-section .url-input-row a {
  visibility: hidden;
}
.auto-inject-section .url-input-row:hover a {
  visibility: visible;
}
.auto-inject-section .add-url-button {
  width: calc(var(--op-space-scale-unit)*9.5);
  grid-column: 1/-1;
}
.inventory_unit_table--active-badge {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one-alt);
}
.inventory_unit_table--inactive-badge {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight-alt);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-three);
}
#drawer.inventory-unit-details-drawer .inventory_unit_active_input--vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-medium);
}
#drawer.inventory-unit-details-drawer .inventory_unit_active_input--vertical .switch {
  padding-left: var(--op-space-2x-small);
}
#drawer.inventory-unit-details-drawer .inventory-unit-details-drawer__events-container {
  padding-top: var(--op-space-small);
}
#drawer.inventory-unit-details-drawer .events-counter-badge {
  color: var(--op-color-primary-on-minus-one-alt);
}
#drawer.inventory-unit-details-drawer .inventory-unit-details-drawer__add-event-button {
  padding-top: var(--op-space-medium);
}
#drawer.inventory-unit-details-drawer .calendar-event-table thead {
  background: var(--op-color-neutral-plus-seven);
}
#drawer.inventory-unit-details-drawer .calendar-event-table tr a {
  visibility: hidden;
}
#drawer.inventory-unit-details-drawer .calendar-event-table tr:hover a {
  visibility: visible;
}
#drawer.inventory-unit-details-drawer .calendar-event-table td {
  height: unset;
  padding: var(--op-space-small) var(--op-space-medium);
}
#drawer.inventory-unit-details-drawer .calendar-event-table .form-group {
  padding-block: unset;
}
#drawer.inventory-unit-details-drawer .calendar-event-table .inventory_unit_calendar_events_name {
  width: calc(var(--op-space-scale-unit)*25);
}
#drawer.inventory-unit-details-drawer .calendar-event-table:has(.nested-fields:not([style*="display: none"])) .calendar-event-table__no-events-row {
  display: none;
}
#drawer.inventory-unit-details-drawer .calendar-event-table .calendar-event-table__no-events {
  margin: auto;
  padding: var(--op-space-small);
}
.institution_index__body {
  display: flex;
  overflow-y: auto;
}
.institution_index__body .scrollable-table-container {
  box-shadow: 1px 0px 8px 0px rgba(0, 0, 0, 0.1) inset;
}
.institution_index__body .table__contents {
  padding: var(--op-space-medium);
}
#drawer.institution-drawer .events-counter-badge {
  color: var(--op-color-primary-on-minus-one-alt);
}
#drawer.institution-drawer .institution-drawer__field-table {
  margin-top: var(--op-space-medium);
}
#drawer.institution-drawer .institution-drawer__field-table .institution-drawer__field-name {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-semi-bold);
  padding-block: var(--op-space-small);
  height: unset;
  width: 50%;
}
#drawer.institution-drawer .institution-drawer__field-table .institution-drawer__field-value {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
  height: unset;
  width: 50%;
}
#drawer.institution-drawer .institution-drawer__add-event-button {
  padding-top: var(--op-space-medium);
}
#drawer.institution-drawer .institution-drawer__events-container {
  padding-top: var(--op-space-small);
}
#drawer.institution-drawer .institution-drawer__error-row div.form-group:not(.form-group--error) {
  padding-bottom: var(--op-space-x-large);
}
#drawer.institution-drawer .institution-drawer__error-row a {
  margin-bottom: var(--op-space-x-large);
}
#drawer.institution-drawer .calendar-event-table thead {
  background: var(--op-color-neutral-plus-seven);
}
#drawer.institution-drawer .calendar-event-table tr a {
  visibility: hidden;
}
#drawer.institution-drawer .calendar-event-table tr:hover a {
  visibility: visible;
}
#drawer.institution-drawer .calendar-event-table td {
  height: unset;
  padding: var(--op-space-small) var(--op-space-medium);
}
#drawer.institution-drawer .calendar-event-table .form-group {
  padding-block: unset;
}
#drawer.institution-drawer .calendar-event-table .inventory_unit_calendar_events_name {
  width: calc(var(--op-space-scale-unit)*25);
}
#drawer.institution-drawer .calendar-event-table:has(.nested-fields:not([style*="display: none"])) .calendar-event-table__no-events-row {
  display: none;
}
#drawer.institution-drawer .calendar-event-table .calendar-event-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: calc(var(--op-space-scale-unit)*9);
}
#drawer.institution-drawer .calendar-event-table .calendar-event-table__no-events {
  margin: auto;
  padding: var(--op-space-small);
}
.supplier-ad-table .table__column--run-dates {
  width: calc(var(--op-space-scale-unit)*18);
}
.supplier-ads-index__preset-filters-container {
  display: flex;
  align-items: center;
  gap: var(--op-space-small);
}
.supplier-ads-index__preset-filters-container span {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
}
.supplier-ads-index__preset-filters-counter {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one);
}
.supplier-ads-index__preset-filters-counter--grey {
  background-color: var(--op-color-neutral-plus-four);
  color: var(--op-color-neutral-on-plus-four);
}
.supplier-ads-index__clear-filters-link {
  color: var(--op-color-primary-on-plus-max);
  cursor: pointer;
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-bold);
  text-decoration: none;
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__production-sizes-row {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-x-large);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__footer .pagination-control {
  justify-content: center;
  height: var(--op-space-5x-large);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__empty_creatives {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-x-small);
  text-align: center;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__empty_creatives img {
  width: 140px;
  height: 101px;
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__verification-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-x-large);
  text-align: center;
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-normal);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__verification-panel img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__verification-panel .ad-details-drawer__verification-link {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__verification-panel .ad-details-drawer__verification-unlock-date {
  font-weight: var(--op-font-weight-bold);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__progress-tab {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-x-small);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__progress-tab .text-pair {
  gap: var(--op-space-3x-small);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__progress-tab .text-pair__title {
  font-size: var(--op-font-small);
  font-weight: var(--op-font-weight-bold);
  color: var(--op-color-neutral-on-plus-max-alt);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__progress-tab .text-pair__subtitle {
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-neutral-on-plus-max);
}
#drawer.supplier-ad-details-drawer .ad-details-drawer__progress-tab .text-pair__subtitle--small {
  text-wrap: wrap;
  word-break: keep-all;
}
#drawer.supplier-ad-details-drawer sl-tab[panel=activity] {
  margin-top: auto;
}
.supplier-ad-details-drawer .creative-variation-section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-large);
  width: 100%;
}
.supplier-ad-details-drawer .creative-asset-section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-large);
}
.supplier-ad-details-drawer .creative-asset-display {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);
}
.supplier-ad-details-drawer .creative-asset-display__thumbnail-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--op-radius-large);
  border: 1px solid var(--op-color-neutral-plus-five);
  background: var(--op-color-neutral-plus-six);
  overflow: hidden;
}
.supplier-ad-details-drawer .creative-asset-display__metadata {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: var(--op-font-family);
  font-size: var(--op-font-x-small);
  font-style: normal;
  font-weight: var(--op-font-weight-semi-bold);
  line-height: var(--op-line-height-normal);
}
.supplier-ad-details-drawer .creative-data-section {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-large);
}
.supplier-ad-details-drawer .creative-data-section .resource-details-drawer__field-header {
  padding-top: unset !important;
}
.supplier-ad-details-drawer .creative-data-section .resource-details-drawer__field-header a {
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.supplier-ad-details-drawer .creative-data-section textarea.resource-details-drawer__field {
  border: none;
  resize: none;
  overflow: hidden;
  width: 100%;
  background: transparent;
  outline: none;
}
.supplier-ad-details-drawer .creative-variation-card {
  border-radius: var(--op-radius-large);
  border: 1px solid var(--op-color-neutral-plus-five);
  display: flex;
  padding: var(--op-space-medium);
  flex-direction: column;
  align-items: flex-start;
}
.supplier-ad-details-drawer .creative-variation-card .card {
  width: 100%;
}
.supplier-ad-details-drawer .creative-variation-card .creative-data-section {
  padding-bottom: unset;
}
.supplier-ad-details-drawer .creative-variations-group {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-large);
  padding-bottom: var(--op-space-x-large);
}
.supplier-ad-details-drawer .creative-variation-card__header {
  display: flex;
  gap: var(--op-space-x-small);
  align-items: center;
  width: 100%;
  padding-bottom: var(--op-space-x-large);
  font-size: var(--op-font-small);
}
.supplier-ad-details-drawer .creative-asset-display__overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.1s ease;
  background-color: var(--op-color-neutral-minus-two);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-space-x-small);
  color: var(--op-color-neutral-on-minus-two-alt);
  font-size: var(--op-font-small);
}
.supplier-ad-details-drawer .creative-asset-section:hover .creative-asset-display__overlay {
  opacity: 0.9;
}
.insertion-order {
  gap: var(--op-space-x-large);
}
.insertion-order__revenue {
  font-size: var(--op-font-medium);
}
.data-group {
  display: flex;
  flex-direction: column;
}
.data-group__heading {
  font-weight: var(--op-font-weight-bold);
}
.data-group__body {
  display: flex;
  flex-direction: column;
  font-weight: var(--op-font-weight-normal);
}
.invoice {
  gap: var(--op-space-x-large);
}
.invoice__revenue {
  font-size: var(--op-font-medium);
}
.invoice__revenue:last-child {
  padding-bottom: var(--op-space-x-large);
}
.printable-document {
  padding: var(--op-space-3x-large) var(--op-space-x-large) var(--op-space-x-large) var(--op-space-x-large);
  font-size: var(--op-font-small);
  max-width: var(--op-breakpoint-x-large);
}
.printable-document__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 100%;
  gap: var(--op-space-3x-large);
}
.printable-document__heading {
  margin: 0;
  font-weight: var(--op-font-weight-bold);
}
.printable-document__logo {
  --fd-printable-document-logo-width: calc(var(--op-space-scale-unit)*16);
  width: var(--fd-printable-document-logo-width);
}
.printable-document__notes {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-small);
  padding-bottom: var(--op-space-x-large);
}
@media print {
  * {
    overflow: visible !important;
  }
  body {
    background-color: var(--op-color-white);
    color: var(--op-color-black);
  }
  :not(:has(.printable-document)):not(.printable-document):not(.printable-document *) {
    display: none;
  }
  .printable-document {
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
    padding: 0;
    font-size: var(--op-font-x-small);
  }
  .printable-document:has(.table) {
    padding-right: 1px;
  }
  .printable-document .table {
    --_fd-table-font-size: var(--op-font-x-small);
    --op-table-column-width-medium: calc(var(--op-space-scale-unit)*13);
  }
  .printable-document .table .text-pair {
    --_op-text-pair-font-size-medium: var(--op-font-x-small);
  }
  .printable-document .table tbody td {
    color: var(--op-color-black);
  }
  .printable-document .table tbody tr {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .printable-document .printable-document__notes {
    padding-bottom: 0;
  }
}
.table.table--document-metadata {
  --op-table-cell-height: var(--op-space-6x-large);
}
.table.table--document-metadata tbody {
  border-top-left-radius: var(--op-radius-large);
  border-top-right-radius: var(--op-radius-large);
}
.table.table--document-metadata tbody td:last-child {
  font-weight: var(--op-font-weight-normal);
}
.table.table--document-metadata tbody tr:first-child td:first-child {
  box-shadow: inset var(--inset-border-top) var(--op-color-border), inset var(--inset-border-bottom) var(--op-color-border);
  border-top-left-radius: var(--op-radius-large);
}
.table.table--document-metadata tbody tr:first-child td:last-child {
  box-shadow: inset var(--inset-border-top) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border), inset var(--inset-border-bottom) var(--op-color-border);
  border-top-right-radius: var(--op-radius-large);
}
.table.table--document-metadata tbody tr:not(:first-child) td:last-child {
  box-shadow: inset var(--inset-border-bottom) var(--op-color-border), inset var(--inset-border-left) var(--op-color-border);
}
.table.table--document-metadata tbody tr:last-child td:last-child {
  box-shadow: inset var(--inset-border-left) var(--op-color-border), inset var(--inset-border-bottom) var(--op-color-border);
}
.contact-section .contact-section__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--op-space-small);
  padding: var(--op-space-small) var(--op-space-large);
}
.direct-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  padding-block: var(--op-space-8x-large);
  padding-inline: var(--op-space-medium);
  background-color: var(--op-color-primary-minus-one);
  background-image: url("/assets/flytedesk_background-a1396e6d.svg");
  background-repeat: repeat repeat;
}
@media screen and (max-width: 768px) {
  .direct-content {
    padding-block: var(--op-space-4x-large);
  }
}
.direct-content .direct-content__main {
  --fd-direct-content-width: calc(var(--op-size-unit)*160);
  display: grid;
  align-items: center;
  gap: var(--op-space-2x-large);
  width: 100%;
  max-width: var(--fd-direct-content-width);
}
.direct-content .direct-content__logo {
  width: 100%;
  display: flex;
  justify-content: center;
}
.direct-content .direct-content__logo > img {
  --fd-logo-width: calc(var(--op-size-unit)*30);
  width: var(--fd-logo-width);
  position: absolute;
  top: var(--op-space-large);
  left: var(--op-space-x-large);
}
@media screen and (max-width: 768px) {
  .direct-content .direct-content__logo > img {
    position: static;
    --fd-logo-width: calc(var(--op-size-unit)*25);
  }
}
.direct-content .direct-content__alert {
  display: none;
}
@media screen and (min-width: 1024px) {
  .direct-content .direct-content__alert {
    display: flex;
    gap: var(--op-space-large);
    justify-content: space-between;
    align-items: center;
    background: var(--op-color-primary-minus-two);
    box-shadow: inset var(--op-border-all) var(--op-color-primary-minus-three);
    border-radius: var(--op-radius-large);
    color: var(--op-color-primary-on-minus-two);
    padding: var(--op-space-medium);
    font-size: var(--op-font-small);
    font-weight: var(--op-font-medium);
  }
  .direct-content .direct-content__alert .alert__content {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-3x-small);
  }
  .direct-content .direct-content__alert .alert__heading {
    color: var(--op-color-primary-on-minus-two-alt);
    font-weight: var(--op-font-weight-semi-bold);
  }
}
.direct-content .direct-content__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--op-color-primary-on-minus-one);
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-normal);
  text-align: center;
}
.direct-content .direct-content__header .direct-content__heading {
  font-size: var(--op-font-2x-large);
  font-weight: var(--op-font-weight-semi-bold);
  color: var(--op-color-primary-on-minus-one-alt);
}
.direct-content #verification-frame {
  display: contents;
}
.direct-content .card {
  --_op-card-padding: var(--op-space-x-large);
}
.direct-content .card .card__header {
  font-size: var(--op-font-large);
  font-weight: var(--op-font-weight-bold);
}
.direct-content .card .card__footer {
  --_op-card-padding: var(--op-space-small) var(--op-space-x-large);
}
/* --op-breakpoint-small */
@media screen and (max-width: 768px) {
  .details-group--inline-desktop {
    --fd-detail-item-width: 100%;
  }
}
.embedded-verification-panel {
  position: relative;
}
.embedded-verification-panel .alert {
  position: sticky;
  top: 0;
  border-radius: 0;
}
.embedded-verification-panel .resource-details-drawer__panel {
  height: unset;
}
.user-status-badge--active {
  background-color: var(--op-color-primary-minus-one);
  color: var(--op-color-primary-on-minus-one);
}
.user-status-badge--inactive {
  background-color: var(--op-color-neutral-plus-eight);
  color: var(--op-color-neutral-on-plus-eight-alt);
  border: var(--op-border-width) solid var(--op-color-neutral-plus-three);
}
.user-status-badge--invited {
  background-color: var(--op-color-primary-plus-four);
  color: var(--op-color-primary-on-plus-four);
}
.invite-user-modal .dialog__body {
  padding-bottom: calc(var(--op-space-scale-unit)*8);
}
.invite-user-modal .dialog__body .helper-text {
  min-height: 2lh;
}
.card--organization {
  display: flex;
  flex-direction: column;
}
.card--organization .card__header {
  padding: unset;
  height: calc(var(--op-space-scale-unit)*3.2);
}
.card--organization .card__subtitle {
  padding-bottom: var(--op-space-medium);
  color: var(--op-color-neutral-on-plus-max);
  font-size: var(--op-font-x-small);
  font-weight: var(--op-font-weight-semi-bold);
}
.card--organization .card__body {
  display: flex;
  flex-direction: column;
  gap: unset;
  align-items: start;
  background-color: var(--op-color-neutral-plus-seven);
  border-radius: var(--op-radius-large);
  color: var(--op-color-neutral-on-plus-seven-alt);
  font-size: var(--op-font-small);
  padding: var(--op-space-small);
}
.organizations.body__content--padded {
  max-width: calc(var(--op-space-scale-unit)*94.8);
}
.organizations.body__content--padded .organization-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: calc(var(--op-space-scale-unit)*22.7);
  grid-gap: var(--op-space-medium);
  grid-auto-flow: column;
}
.organizations.body__content--padded .organization-card-grid .address-card {
  grid-column: 1;
  grid-row: auto;
}
.organizations.body__content--padded .organization-card-grid .contact-card {
  grid-column: 2;
  grid-row: auto;
}
.organization-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-x-large);
  font-size: var(--op-font-small);
}
.organization-modal__body a {
  width: calc(var(--op-space-scale-unit)*16);
}
.organization-modal__body .form-group {
  padding: 0;
}
.organization-modal__body .segmented-control {
  font-weight: var(--op-font-weight-bold);
}
.organization-form {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-medium);
}
.organization-form .organization_address_state_or_province .ts-dropdown {
  max-height: 8lh;
}
.organization-form--padded {
  padding-bottom: calc(var(--op-space-scale-unit)*14);
}