.spr-accordion {
  interpolate-size: allow-keywords;
}
.spr-accordion .spr-accordion-card-spacer {
  transition: margin 0.4s ease-in-out;
}
.spr-accordion .spr-accordion-card-spacer.top-margin:has(.spr-accordion-card-open) {
  margin-top: 0.5rem;
}
.spr-accordion .spr-accordion-card-spacer.bottom-margin:has(.spr-accordion-card-open) {
  margin-bottom: 2rem;
}
.spr-accordion .spr-accordion-card.spr-accordion-card-open:not(:has(.spr-accordion-card-body .spr-accordion-nested)) {
  box-shadow: 0px 5px 7px 1px rgba(0, 0, 0, 0.2);
}
.spr-accordion .spr-accordion-card-header {
  cursor: pointer;
  min-height: 3.8rem;
  background-color: #e6e7e8;
  color: #123044;
  border-top: 1px solid #d0d2d3;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  padding-top: 0;
  padding-bottom: 0;
}
.spr-accordion .spr-accordion-card-header:hover {
  background-color: #e7eff7;
}
.spr-accordion .spr-accordion-card-header:hover .spr-accordion-card-expander {
  opacity: 1;
}
.spr-accordion .spr-accordion-card-header.spr-accordion-card-header-open {
  background-color: #3f5978;
  color: rgba(255, 255, 255, 0.8);
}
.spr-accordion .spr-accordion-card-header.spr-accordion-card-header-open a {
  color: #80bcff;
}
.spr-accordion .spr-accordion-card-header .spr-accordion-card-expander {
  opacity: 0;
  padding: 0;
  appearance: none;
  box-sizing: content-box;
  position: absolute;
  height: 100%;
  width: 1.5em;
  font-size: 1.4em;
  transform: translateX(calc(-100% - 1rem + 1px));
  color: inherit;
  background-color: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #d0d2d3;
  border-right: 0;
}
.spr-accordion .spr-accordion-card-header .spr-accordion-card-expander.spr-accordion-card-expander-no-header-padding {
  transform: translateX(-100%);
}
.spr-accordion .spr-accordion-card-header .spr-accordion-card-expander.spr-accordion-card-expander-loading,
.spr-accordion .spr-accordion-card-header .spr-accordion-card-expander.spr-accordion-card-expander-open,
.spr-accordion .spr-accordion-card-header .spr-accordion-card-expander:focus-visible {
  opacity: 1;
}
.spr-accordion .spr-accordion-card-body {
  background-color: #fff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  height: 0px;
  overflow: clip;
  transition: height 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  z-index: 11;
}
.spr-accordion .spr-accordion-card-body.spr-accordion-card-body-open {
  height: auto;
  overflow-clip-margin: 2px;
}
.spr-accordion .spr-accordion-card-body:has(> .spr-accordion-nested) {
  background-color: transparent;
  box-shadow: none;
}
.spr-accordion.spr-accordion-nested {
  margin-left: 2rem;
}
.spr-accordion.spr-accordion-nested .spr-accordion-card-header {
  border-top: none;
  color: #5e5f61;
}
.spr-accordion.spr-accordion-nested .spr-accordion-card-header .spr-accordion-card-expander {
  opacity: 1;
  border: none;
}
.spr-accordion.spr-accordion-nested .spr-accordion-card-header h2 {
  font-weight: 500;
}
.spr-accordion.spr-accordion-nested .spr-accordion-card-header.spr-accordion-card-header-open {
  background-color: #2a3b50;
  color: rgba(255, 255, 255, 0.8);
}
.spr-accordion.spr-accordion-nested .spr-accordion-card {
  box-shadow: none;
}
.spr-accordion.spr-accordion-nested .spr-accordion-card .spr-accordion-card-body {
  box-shadow: none;
}

/* nb: The ActionMenu still relies on styles from Spry and Spry uses jQuery animations to animate the menu entering and leaving.  These selectors use
   different classes in order to avoid them hitting on the Spry component (and thus breaking the animations and positioning).
 */
.actionsmenu-transition {
  width: 9em;
  transition: width 0.25s ease-out;
}
.actionsmenu-transition.open {
  width: 18em;
}
.actionsmenu-transition .actions-list-transition {
  display: block;
  transform: translateX(16em);
  transition: transform 0.25s ease-out;
}
.actionsmenu-transition .actions-list-transition.open {
  transform: translateX(0);
}

.alpha-bar-list {
  background: white;
  min-width: 5em;
  display: flex;
  flex-direction: column;
}
.alpha-bar-list .alpha-bar-button {
  box-sizing: border-box;
  padding: 0.25em;
  width: 100%;
  text-align: center;
}
.alpha-bar-list .alpha-bar-button.selected {
  font-weight: 900;
}

.spr-ico-button {
  display: inline-block;
  width: 2em;
  text-align: center;
  font-size: 1.5rem;
}
/* The CollapsibleSection component uses Spry styles. Those styles apply a white color using the css
   selector '.section-header-selectable.active span'. Now that the FontIcon component renders a span
   tag with the icon character that white color is being applied to the icon span when an IconButton
   is inside of a collapsible section header. The following style overrides the span's white color
   and instead inherits the standard blue color. This override can be removed if Spry-React styles
   are created for the CollapsibleSection component as long as those styles do not target span tags.
 */
.section-header-selectable.active a.spr-ico-button span {
  color: inherit;
}
/* In addition to the above, disabled styles are applied in Spry using the selector
   '.section-header-selectable.active a[class*="button-"][disabled]:before'.
   That however does not target the span created by the FontIcon component and therefore does not
   apply a disabled color. The following style applies the section header disabled link color.
 */
.section-header-selectable.active a.spr-ico-button[disabled] span {
  color: rgba(255, 255, 255, 0.3);
}

.card-header {
  min-height: 3.8rem;
  background-color: #e6e7e8;
  border-top: 1px solid #d0d2d3;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
}
.card-body {
  background-color: #fff;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.card-body:not(.card-body-no-padding) {
  padding: 1rem 2rem 1.5rem 2rem;
}

.spr-ckeditor-field {
  --ck-color-toolbar-background: transparent;
  --ck-border-radius: 0;
  padding: 1px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
}
.spr-ckeditor-field .ck.ck-toolbar {
  border: 0;
}
.spr-ckeditor-field .ck.ck-toolbar .ck.ck-font-size-dropdown .ck-dropdown__panel,
.spr-ckeditor-field .ck.ck-toolbar .ck.ck-font-family-dropdown .ck-dropdown__panel {
  overflow: auto;
  max-height: 20rem;
}
.spr-ckeditor-field .ck.ck-toolbar .ck.ck-font-size-dropdown .ck-list__item .ck-button .ck-button__label,
.spr-ckeditor-field .ck.ck-toolbar .ck.ck-font-family-dropdown .ck-list__item .ck-button .ck-button__label {
  line-height: normal;
}
.spr-ckeditor-field.spr-ckeditor-field-toolbar-border-top .ck.ck-toolbar {
  border-top: 1px solid #d0d2d3;
}
.spr-ckeditor-field:not(.spr-ckeditor-field-disabled):not(.spr-ckeditor-field-input-validation-error) .ck-editor__main:hover {
  border: 1px solid rgba(187, 189, 191, 0.7);
}
.spr-ckeditor-field:focus-within:not(.spr-ckeditor-field-disabled) .ck-editor__main {
  outline-color: #80bcff;
  outline-style: auto;
}
.spr-ckeditor-field.spr-ckeditor-field-required .ck-editor__main .ck-editor__editable_inline {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23C45900%27%20%2F%3E%20%3C%2Fsvg%3E");
  background-size: 0.85rem 0.85rem;
  background-repeat: no-repeat;
}
.spr-ckeditor-field.spr-ckeditor-field-disabled .ck-editor__main .ck-editor__editable_inline {
  background-color: rgba(255, 255, 255, 0.4);
  color: #3f5978;
}
.spr-ckeditor-field.spr-ckeditor-field-disabled.spr-ckeditor-field-required .ck-editor__main .ck-editor__editable_inline {
  background-image: none;
}
.spr-ckeditor-field.spr-ckeditor-field-input-validation-error .ck-editor__main .ck-editor__editable_inline {
  border: 1px solid #c00 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23cc0000%27%20%2F%3E%20%3C%2Fsvg%3E");
  background-size: 0.85rem 0.85rem;
  background-repeat: no-repeat;
  background-position: left top;
}
.spr-ckeditor-field .ck.ck-editor {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  min-height: 0px;
}
.spr-ckeditor-field .ck.ck-editor .ck-editor__main {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 auto;
  min-height: 0px;
  border: 1px solid transparent;
}
.spr-ckeditor-field .ck.ck-editor .ck-editor__main .ck-editor__editable_inline {
  border: none;
  flex: 1 1 auto;
}
.spr-ckeditor-field .ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
  outline: none;
  border: none;
  box-shadow: none;
}

.color-picker {
  position: relative;
}
.color-picker .color-picker-input {
  width: 100%;
  height: 3.45rem;
  padding: 0.7rem 1rem;
  display: flex;
}
.color-picker .color-picker-input.readonly {
  border: 1px solid transparent;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
  pointer-events: none;
}
.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.color-swatch:not(.color-swatch-selected):hover {
  border: 2px solid;
  border-color: black;
}
.react-colorful-container {
  font-size: 13px;
}
.react-colorful-container input {
  font-size: 13px;
}
.react-colorful-container .react-colorful__pointer,
.react-colorful-container .react-colorful__hue-pointer {
  width: 20px;
  height: 20px;
}

.spr-context-menu-indicator {
  border: 2px solid transparent;
  border-radius: 0.3rem;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  font-size: 1.8rem;
  display: inline-block;
}
.spr-context-menu-indicator:hover {
  border: 2px solid;
  opacity: 0.9;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-DatePicker {
  max-width: 100%;
  /* Hide the calendar icon when readonly, which is what Spry does. */
}
.react-aria-DatePicker .react-aria-Group {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: var(--spacing-8);
  /* Anchor the absolutely-positioned .field-Button below. */
  position: relative;
}
.react-aria-DatePicker .react-aria-DateInput {
  flex: 1;
  min-width: 0;
  /* Reserves space for the absolute positioned button that opens the popover */
  padding-right: 1.8em;
}
.react-aria-DatePicker[data-readonly] .field-Button {
  display: none;
}
.react-aria-DatePicker .field-Button {
  /* Remove background from button and use parent background */
  background: unset;
  color: var(--text-color);
  /* Position like Spry's old datepickerbutton: absolute on the right
     * of the input, full height, sized by icon + padding rather than
     * by aspect-ratio. Removing the button from flex flow lets the
     * DateInput take the full Group width (no 3px overflow).
     *
     * Inset by the rendered border width to sit the button inside the
     * DateInput's border. Chrome snaps 1px borders to ~1 device pixel
     * (0.667 CSS px at DPR 1.5) but does NOT snap positioning offsets,
     * so we use the post-snap value 0.667px directly to match. */
  position: absolute;
  right: 0.667px;
  top: 0.667px;
  height: calc(100% - 1.334px);
  width: 2em;
  margin-left: 0;
  aspect-ratio: auto;
  padding: 0 0.52em 0 0.5em;
  /* Reserve space for the hover separator  */
  border-left: 1px solid rgba(187, 189, 191, 0);
  transition: border-color 200ms;
  /* Weirdness with Spry's global styles which styles all 4 borders on `button:hover`
     * Currently using `[data-hovered]` to beat that specificity and only set the left border,
     * but it seems like there should be a better way */
  /* Match the DateInput's inset focus ring (see .react-aria-DateInput.inset
     * [data-focus-within] in dateField.less) instead of the default outside halo
     * from form.less's .field-Button rule. outline-offset:0 (vs 2px) keeps the ring
     * at the field's edge so a focused calendar button reads as part of the field. */
}
.react-aria-DatePicker .field-Button[data-hovered] {
  border-block: 0 none;
  border-right: 0 none;
  border-left-color: #bbbdbf;
}
.react-aria-DatePicker .field-Button[data-focus-visible] {
  outline-style: auto;
  outline-color: var(--focus-ring-color);
  outline-offset: 0;
}
.react-aria-Popover[data-trigger="DatePicker"] {
  /* disable the inherited drop-shadow */
  filter: none;
  /* shadow from tempus-dominus */
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  /* Width from dateField.less */
}
.react-aria-Popover[data-trigger="DatePicker"] .react-aria-Calendar {
  width: 20rem;
}
.react-aria-DatePicker .react-aria-Group.disabled-more-visible {
  --text-color-disabled: #3f5978;
}

a.spr-section-tab-link:focus-visible div.spr-dialog-tab:not(.spr-dialog-tab-selected) {
  border: 1px solid black;
}
a.spr-section-tab-link:focus-visible div.spr-dialog-tab.spr-dialog-tab-selected {
  outline: 1px solid #ffffff;
  outline-offset: -2px;
}
a.spr-section-tab-link:focus-visible div.spr-dialog-overflow-tab {
  border: 1px solid black;
}
a.spr-overflow-tab-flyout-link .spr-dialog-tab {
  background-color: #f1f1f0;
  border: 1px solid transparent;
  padding: 0.8em 0.5em;
}
a.spr-overflow-tab-flyout-link .spr-dialog-tab:hover:not(.spr-dialog-tab-disabled):not(.spr-dialog-tab-selected) {
  background-color: white;
  color: #000;
}
a.spr-overflow-tab-flyout-link:focus-visible div.spr-dialog-tab:not(.spr-dialog-tab-selected) {
  border: 1px solid black;
}
a.spr-overflow-tab-flyout-link:focus-visible div.spr-dialog-tab.spr-dialog-tab-selected {
  outline: 1px solid #ffffff;
  outline-offset: -2px;
}
.spr-dialog-tab {
  box-sizing: border-box;
  width: 100%;
  padding: 0.8em 2em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  color: #123044;
  background-color: #d0d2d3;
  border: 1px solid #bbbdbf;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.spr-dialog-tab:hover:not(.spr-dialog-tab-disabled):not(.spr-dialog-tab-selected) {
  background-color: #f2f3f3;
  color: #000;
}
.spr-dialog-tab.spr-dialog-tab-selected {
  background-color: #123044 !important;
  border-color: #123044;
  color: #ffffff;
  cursor: default;
}
.spr-dialog-tab.spr-dialog-tab-disabled {
  cursor: default;
  color: #bbbdbf;
}
.spr-dialog-overflow-tab {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #123044;
  background-color: #d0d2d3;
  border: 1px solid #bbbdbf;
  padding: 0 0.75rem;
}
.spr-dialog-overflow-tab.spr-dialog-overflow-tab-expanded {
  background-color: #c6c8c9;
}

div.spr-dialog-tabs-wrapper {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 0 0.5rem;
  position: relative;
}
div.spr-dialog-tabs-center-line {
  position: absolute;
  border-bottom: 1px solid #c6c8c9;
  width: 100%;
  top: 50%;
}

.display-field {
  font-size: 1.1rem;
}
.display-field h4 {
  font-size: 1.1rem;
}

.editable-grid-checkbox-cell {
  height: 100%;
  padding: 1px;
  box-sizing: border-box;
}
.editable-grid-checkbox-field {
  background-color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  box-sizing: border-box;
  height: 100%;
}
.editable-grid-checkbox-field.disabled {
  background-color: rgba(255, 255, 255, 0.4);
}
.editable-grid-delete-item {
  color: #5e5f61;
}
.editable-grid-delete-item:before {
  content: "\f014";
  font-family: FontAwesome;
  font-size: 1.5rem;
  text-align: center;
  width: 2em;
  display: inline-block;
  font-weight: 400;
  vertical-align: top;
}
.reorder-placeholder-text-field {
  text-align: center;
  background-color: transparent !important;
  color: #1464bb;
  transition: color 0.2s ease;
}
.reorder-placeholder-text-field:hover {
  color: #4997ec;
}

.filter-button-main[disabled]:hover {
  background-color: transparent;
}

.filter-tabs {
  transition: width 0.15s linear;
}
.filter-tabs.closed {
  width: 3.5rem;
}
.filter-tabs.closed .filter-tab-group.active {
  background: #d0d2d3;
  margin-right: 0.7em;
}
.filter-tabs.closed .filter-tab-label {
  padding: 0;
}
.filter-tabs.closed .spr-ico-button {
  outline-offset: -1px;
}
.filter-tabs.closed .filter-tab-group.filtered {
  background-color: #1464bb;
}
.filter-tabs.closed .filter-tab-group.filtered a {
  color: #A85200;
}
.filter-tabs.closed .filter-tab-group.filtered:hover {
  background-color: #1b7de7;
}
.filter-tabs .spr-ico-button {
  margin-top: 1px;
}

.grouped-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.grouped-check-list:has(> .grouped-check-list-scroll) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.grouped-check-list .grouped-check-list-scroll {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.grouped-check-list li,
.grouped-check-list .multiselect-select-all {
  display: block;
  padding: 0.6em 0.4em 0.5em 0.4em;
  font-size: 1.2rem;
  color: #222;
  cursor: pointer;
}
.grouped-check-list li .checkbox-unchecked-icon,
.grouped-check-list .multiselect-select-all .checkbox-unchecked-icon,
.grouped-check-list li .checkbox-checked-icon,
.grouped-check-list .multiselect-select-all .checkbox-checked-icon {
  color: #123044;
}
.grouped-check-list li .checkbox-unchecked-icon:before,
.grouped-check-list .multiselect-select-all .checkbox-unchecked-icon:before,
.grouped-check-list li .checkbox-checked-icon:before,
.grouped-check-list .multiselect-select-all .checkbox-checked-icon:before {
  font-size: 1em;
}
.grouped-check-list li .multiselect-check-field svg,
.grouped-check-list .multiselect-select-all .multiselect-check-field svg {
  --checkbox-stroke-fill: #5E5F61 !important;
}
.grouped-check-list li:hover,
.grouped-check-list .multiselect-select-all:hover {
  background-color: #123044;
}
.grouped-check-list li:hover div,
.grouped-check-list .multiselect-select-all:hover div,
.grouped-check-list li:hover span,
.grouped-check-list .multiselect-select-all:hover span {
  color: #fff;
}
.grouped-check-list li:hover .multiselect-optgroup-chevron span,
.grouped-check-list .multiselect-select-all:hover .multiselect-optgroup-chevron span {
  color: #fff !important;
}
.grouped-check-list li:hover .multiselect-check-field svg,
.grouped-check-list .multiselect-select-all:hover .multiselect-check-field svg {
  --checkbox-fill: #fff !important;
  --checkbox-symbol-fill: #123044 !important;
  --checkbox-stroke-fill: #fff !important;
}
.grouped-check-list li.selected,
.grouped-check-list .multiselect-select-all.selected {
  background-color: #e6e7e8;
}
.grouped-check-list.wrap-text li {
  align-items: flex-start;
}
.grouped-check-list.wrap-text .text-ellipsis,
.grouped-check-list.wrap-text .multiselect-optgroup-label {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.grouped-check-list .multiselect-optgroup-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.65em;
  cursor: pointer;
}
.grouped-check-list .multiselect-optgroup.chevron-focused .multiselect-optgroup-chevron {
  outline: 2px solid;
  outline-offset: 1px;
}
.grouped-check-list .multiselect-check-field {
  padding-right: 0.5em;
  padding-left: 0.5em;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.grouped-check-list .multiselect-select-all {
  display: flex;
  align-items: center;
}
.grouped-check-list .multiselect-select-all.scrolled {
  border-bottom: 1px solid #d0d2d3;
}
.grouped-check-list .multiselect-select-all:focus-visible {
  outline: 2px solid #123044;
  outline-offset: -2px;
}
.grouped-check-list .multiselect-optgroup {
  display: flex;
  align-items: center;
  font-weight: bold;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}
.grouped-check-list .multiselect-optgroup .multiselect-group-check {
  display: inline-flex;
  align-items: center;
}
.grouped-check-list .multiselect-optgroup .multiselect-optgroup-label {
  flex: 1 1 auto;
  min-width: 0;
}
.grouped-check-list .multiselect-optgroup.not-collapsible {
  cursor: default;
}
.grouped-check-list .multiselect-group-body {
  display: block;
  border-bottom: 1px solid #d0d2d3;
}
.grouped-check-list .multiselect-group-body:last-child {
  border-bottom: none;
}
.grouped-check-list .grouped-option {
  padding-left: 2.6em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  align-items: center;
}
.grouped-check-list.not-collapsible .grouped-option {
  padding-left: 2em;
}
.grouped-check-list .disabled {
  pointer-events: none;
  opacity: 0.4;
}

.icon-picker {
  width: 7rem;
  position: relative;
}
.icon-picker .dropdown-button[disabled] {
  pointer-events: none;
}
.icon-picker-input {
  width: 100%;
  height: 3.45rem;
  padding: 0.7rem 1rem;
  text-align: left;
}
.icon-picker-input[disabled] {
  border: 1px solid transparent;
  background-image: none;
  opacity: 0.4;
  box-shadow: none;
  pointer-events: auto;
}
.icon-picker-remove-link {
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem;
}
.icon-picker-remove-link:hover {
  cursor: pointer;
  border-color: #a3a5a8;
}
.icon-picker-flyout {
  width: 11.2rem;
  padding: 0 0 0.75rem 0;
  background-color: #fff;
}
.icon-picker-flyout .icon-picker-flout-content {
  display: flex;
  flex-direction: column;
}
.icon-picker-flyout .icon-picker-icon-section {
  flex-grow: 1;
  overflow-y: scroll;
  max-height: 24.5rem;
}
.icon-picker-flyout .icon-picker-icon {
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem;
  width: 2.5rem;
  text-align: center;
  font-size: 1.4rem;
}
.icon-picker-flyout .icon-picker-icon:hover {
  cursor: pointer;
  border-color: #a3a5a8;
}
.icon-picker-flyout .icon-picker-icon-selected {
  cursor: pointer;
  border-color: #a3a5a8;
}
.icon-picker-flyout .icon-picker-remove-section {
  flex-grow: unset;
}

.spr-icon-view-selector {
  display: inline-flex;
  align-items: center;
}
.spr-icon-view-selector .icon-view-button {
  display: flex;
  padding: 0.5rem 0.75rem;
  border-top: 2px solid #d0d2d3;
  border-bottom: 2px solid #d0d2d3;
}
.spr-icon-view-selector .icon-view-button.icon-view-button-active {
  display: flex;
  color: #fff;
  background-color: #3f5978;
  border-color: #3f5978;
}
.spr-icon-view-selector .icon-view-button-link {
  display: flex;
  color: #5e5f61;
}
.spr-icon-view-selector .icon-view-button-link[disabled] span {
  color: rgba(94, 95, 97, 0.2);
}
.spr-icon-view-selector .icon-view-button-link:hover:not([disabled]) {
  color: #231f20 !important;
  background-color: rgba(0, 0, 0, 0.075);
}
.spr-icon-view-selector .icon-view-button:first-child {
  border-left: 2px solid #d0d2d3;
  border-radius: 0.5rem 0 0 0.5rem;
}
.spr-icon-view-selector .icon-view-button:first-child.icon-view-button-active {
  border-color: #3f5978;
}
.spr-icon-view-selector .icon-view-button:last-child {
  border-right: 2px solid #d0d2d3;
  border-radius: 0 0.5rem 0.5rem 0;
}
.spr-icon-view-selector .icon-view-button:last-child.icon-view-button-active {
  border-color: #3f5978;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
@layer utilities {
  /* Flat button utility — Spry-style: solid background, no gradients or
   * specular highlights, transparent border by default. Hover and pressed
   * darken the background; pressed adds Spry's subtle inset depression. */
  .button-base {
    --button-color: var(--tint);
    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
    --button-border: transparent;
    --button-border-size: 1px;
    background: var(--button-background);
    color: var(--button-text);
    border: var(--button-border-size) solid var(--button-border);
    box-shadow: none;
    outline: none;
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }
  .button-base:where([data-hovered]) {
    --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
  }
  .button-base:where([data-pressed]) {
    --button-background: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
  .button-base:where([data-focus-visible]) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .button-base:where([data-variant=primary]) {
    --button-color: var(--orange);
    /* Spry @attention #bf5700 */
    --button-background: var(--button-color);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-variant=primary]):where([data-hovered]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.05) c h);
  }
  .button-base:where([data-variant=primary]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.1) c h);
  }
  .button-base:where([data-variant=secondary]) {
    --button-color: var(--gray);
  }
  .button-base:where([data-variant=quiet]) {
    --button-background: transparent;
    --button-text: var(--text-color);
  }
  .button-base:where([data-variant=quiet]):where([data-hovered], [data-pressed]) {
    --button-background: var(--tint-200);
    --button-text: var(--tint-1400);
  }
  .button-base:where([data-selected]) {
    --button-background: oklch(from var(--button-color) 55% c h);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-selected]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) 50% c h);
  }
  .button-base:where([data-disabled]) {
    cursor: not-allowed;
    box-shadow: none;
  }
  /* Flat indicator utility — solid white field with a 1px border, no inner
   * gloss or drop shadow. Selected fills with the highlight color. */
  .indicator {
    --indicator-color: var(--gray);
    --indicator-background: var(--field-background);
    --indicator-border: var(--border-color-hover);
    background: var(--indicator-background);
    box-shadow: inset 0 0 0 1px var(--indicator-border);
    transition: background 200ms, box-shadow 200ms;
    will-change: scale;
  }
  .indicator[data-pressed],
  [data-pressed] .indicator {
    scale: 0.9;
  }
  [data-selected] > .indicator,
  [data-indeterminate] > .indicator {
    --indicator-color: var(--highlight-background);
    --indicator-background: var(--indicator-color);
    --indicator-border: var(--indicator-background);
  }
  .indicator[data-invalid],
  [data-invalid] > .indicator {
    --indicator-color: var(--invalid-color);
    --indicator-color: var(--pink);
  }
  .indicator[data-focus-visible],
  [data-focus-visible] > .indicator {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .indicator[data-disabled],
  [data-disabled] > .indicator {
    background: var(--field-background);
    box-shadow: inset 0 0 0 1px var(--border-color-disabled);
  }
  /* Flat inset utility — Spry-style fields: white background with a
   * transparent border that becomes visible on hover and switches to the
   * link color on focus. No inner shadow. */
  .inset {
    --inset-background: var(--field-background);
    --inset-border: transparent;
    --inset-border-size: 1px;
    background: var(--inset-background);
    box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
    transition: box-shadow 200ms;
    forced-color-adjust: none;
    /* Required listed first so the invalid / warning rules below override
     * --inset-indicator-color when more than one state is active. Note that
     * required doesn't change the --inset-border because required is just the triangle without the border */
    /* Top-left corner indicator. Mask provides the triangle shape;
     * background-color (via --inset-indicator-color) provides the fill,
     * so the indicator follows the same theme tokens as the border. */
  }
  .inset:where([data-hovered], [data-pressed]) {
    --inset-border: var(--border-color);
  }
  .inset:where([data-focus-within], [data-focused]) {
    --inset-border: var(--link-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required]) {
    position: relative;
  }
  .inset:where([data-required]) {
    --inset-indicator-color: var(--required-color);
  }
  .inset:where([data-invalid]) {
    --inset-border: var(--invalid-color);
    --inset-indicator-color: var(--invalid-color);
  }
  .inset:where([data-warning]) {
    --inset-border: var(--warning-color);
    --inset-indicator-color: var(--warning-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--inset-indicator-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    pointer-events: none;
  }
  .inset:where([data-disabled]) {
    --inset-background: transparent;
    --inset-border: transparent;
  }
  .inset.track {
    --inset-background: var(--gray-200);
    --inset-border: var(--gray-400);
  }
}
.react-aria-Button {
  border: none;
  border-radius: var(--radius);
  appearance: none;
  font: var(--font-size) var(--font-family);
  font-weight: 500;
  margin: 0;
  height: var(--spacing-8);
  padding: 0 var(--spacing-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  -webkit-tap-highlight-color: transparent;
}
.react-aria-Button > svg {
  width: calc(var(--spacing) * 4.5);
  height: calc(var(--spacing) * 4.5);
}
.react-aria-Button:has(> svg:only-child) {
  width: var(--spacing-8);
  flex-shrink: 0;
  padding: 0;
  border-radius: 9999px;
}
.react-aria-Button[data-pressed] {
  scale: 0.95;
}
.react-aria-Button kbd {
  font: var(--font-size-sm) var(--font-family);
  background: var(--highlight-hover);
  border: 0.5px solid var(--tint-500);
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-sm);
  margin-inline-start: var(--spacing-3);
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
@layer utilities {
  /* Flat button utility — Spry-style: solid background, no gradients or
   * specular highlights, transparent border by default. Hover and pressed
   * darken the background; pressed adds Spry's subtle inset depression. */
  .button-base {
    --button-color: var(--tint);
    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
    --button-border: transparent;
    --button-border-size: 1px;
    background: var(--button-background);
    color: var(--button-text);
    border: var(--button-border-size) solid var(--button-border);
    box-shadow: none;
    outline: none;
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }
  .button-base:where([data-hovered]) {
    --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
  }
  .button-base:where([data-pressed]) {
    --button-background: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
  .button-base:where([data-focus-visible]) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .button-base:where([data-variant=primary]) {
    --button-color: var(--orange);
    /* Spry @attention #bf5700 */
    --button-background: var(--button-color);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-variant=primary]):where([data-hovered]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.05) c h);
  }
  .button-base:where([data-variant=primary]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.1) c h);
  }
  .button-base:where([data-variant=secondary]) {
    --button-color: var(--gray);
  }
  .button-base:where([data-variant=quiet]) {
    --button-background: transparent;
    --button-text: var(--text-color);
  }
  .button-base:where([data-variant=quiet]):where([data-hovered], [data-pressed]) {
    --button-background: var(--tint-200);
    --button-text: var(--tint-1400);
  }
  .button-base:where([data-selected]) {
    --button-background: oklch(from var(--button-color) 55% c h);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-selected]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) 50% c h);
  }
  .button-base:where([data-disabled]) {
    cursor: not-allowed;
    box-shadow: none;
  }
  /* Flat indicator utility — solid white field with a 1px border, no inner
   * gloss or drop shadow. Selected fills with the highlight color. */
  .indicator {
    --indicator-color: var(--gray);
    --indicator-background: var(--field-background);
    --indicator-border: var(--border-color-hover);
    background: var(--indicator-background);
    box-shadow: inset 0 0 0 1px var(--indicator-border);
    transition: background 200ms, box-shadow 200ms;
    will-change: scale;
  }
  .indicator[data-pressed],
  [data-pressed] .indicator {
    scale: 0.9;
  }
  [data-selected] > .indicator,
  [data-indeterminate] > .indicator {
    --indicator-color: var(--highlight-background);
    --indicator-background: var(--indicator-color);
    --indicator-border: var(--indicator-background);
  }
  .indicator[data-invalid],
  [data-invalid] > .indicator {
    --indicator-color: var(--invalid-color);
    --indicator-color: var(--pink);
  }
  .indicator[data-focus-visible],
  [data-focus-visible] > .indicator {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .indicator[data-disabled],
  [data-disabled] > .indicator {
    background: var(--field-background);
    box-shadow: inset 0 0 0 1px var(--border-color-disabled);
  }
  /* Flat inset utility — Spry-style fields: white background with a
   * transparent border that becomes visible on hover and switches to the
   * link color on focus. No inner shadow. */
  .inset {
    --inset-background: var(--field-background);
    --inset-border: transparent;
    --inset-border-size: 1px;
    background: var(--inset-background);
    box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
    transition: box-shadow 200ms;
    forced-color-adjust: none;
    /* Required listed first so the invalid / warning rules below override
     * --inset-indicator-color when more than one state is active. Note that
     * required doesn't change the --inset-border because required is just the triangle without the border */
    /* Top-left corner indicator. Mask provides the triangle shape;
     * background-color (via --inset-indicator-color) provides the fill,
     * so the indicator follows the same theme tokens as the border. */
  }
  .inset:where([data-hovered], [data-pressed]) {
    --inset-border: var(--border-color);
  }
  .inset:where([data-focus-within], [data-focused]) {
    --inset-border: var(--link-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required]) {
    position: relative;
  }
  .inset:where([data-required]) {
    --inset-indicator-color: var(--required-color);
  }
  .inset:where([data-invalid]) {
    --inset-border: var(--invalid-color);
    --inset-indicator-color: var(--invalid-color);
  }
  .inset:where([data-warning]) {
    --inset-border: var(--warning-color);
    --inset-indicator-color: var(--warning-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--inset-indicator-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    pointer-events: none;
  }
  .inset:where([data-disabled]) {
    --inset-background: transparent;
    --inset-border: transparent;
  }
  .inset.track {
    --inset-background: var(--gray-200);
    --inset-border: var(--gray-400);
  }
}
.react-aria-Calendar {
  width: calc(var(--spacing-9) * 7);
  max-width: 100%;
  container-type: inline-size;
  color: var(--text-color);
  font: var(--font-size) var(--font-family);
}
.react-aria-Calendar header {
  display: flex;
  gap: var(--spacing-1);
  align-items: center;
  margin: 0 var(--spacing-1) var(--spacing-4) var(--spacing-1);
  /* For selects within the calendar, add a border so the select is visible against the calendar background */
  /* Remove border on hover */
}
.react-aria-Calendar header .react-aria-Heading {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: var(--font-size-lg);
}
.react-aria-Calendar header .react-aria-Select {
  border: 1px solid var(--border-color);
  /* Shrink the month/year select buttons to roughly half the normal Select height */
}
.react-aria-Calendar header .react-aria-Select .react-aria-Button {
  font-size: 1em;
  padding: 0.2em 1.2em 0.2em 0.4em;
}
.react-aria-Calendar header [slot="previous"]:hover,
.react-aria-Calendar header [slot="previous"][data-hovered],
.react-aria-Calendar header [slot="next"]:hover,
.react-aria-Calendar header [slot="next"][data-hovered] {
  border: 0 none;
}
.react-aria-Calendar .react-aria-CalendarGrid {
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}
.react-aria-Calendar [slot=errorMessage] {
  font: var(--font-size-sm) var(--font-family);
  color: var(--invalid-color);
}
.react-aria-CalendarHeaderCell {
  /* From tempus-dominus .dow header style. This is the Sun/Mon/Tues header row on the calendar */
  font-size: var(--font-size-sm);
  font-weight: 900;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
/* Month/year mode: a 4-column grid of month buttons shown in place of the day grid. */
.react-aria-MonthGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-1);
  width: 100%;
}
/* Most styling for the calendar cells is comming whether they're for a regular calendar grid or a month grid */
.react-aria-CalendarCell,
.react-aria-MonthCell {
  --gap: var(--spacing-1);
  width: calc((100cqw / 7) - var(--gap));
  aspect-ratio: 1;
  margin: calc(var(--gap) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size);
  text-align: center;
  border-radius: 9999px;
  cursor: pointer;
  forced-color-adjust: none;
  transition: scale 200ms;
  -webkit-tap-highlight-color: transparent;
  /* Anchor the today ring (::before) below. */
  position: relative;
  /* "Today" indicator: a faint circle inside the cell, matching the legacy Tempus-Dominus picker.
     Drawn as an inset ::before ring so it layers over any selected background. */
  /* When today is also selected, lighten the ring so it stays visible on the selected background. */
}
@container (min-resolution: 200dpi) and (width < 300px) {
  .react-aria-CalendarCell,
  .react-aria-MonthCell {
    --gap: 0px;
  }
}
.react-aria-CalendarCell[data-outside-month],
.react-aria-MonthCell[data-outside-month] {
  opacity: 0.4;
}
.react-aria-CalendarCell[data-selected],
.react-aria-MonthCell[data-selected] {
  background: var(--selected-color);
}
.react-aria-CalendarCell[data-pressed],
.react-aria-MonthCell[data-pressed] {
  scale: 0.9;
}
.react-aria-CalendarCell[data-unavailable],
.react-aria-MonthCell[data-unavailable],
.react-aria-CalendarCell[data-disabled],
.react-aria-MonthCell[data-disabled] {
  text-decoration: line-through;
  cursor: not-allowed;
}
.react-aria-CalendarCell[data-invalid],
.react-aria-MonthCell[data-invalid] {
  --button-color: var(--invalid-color);
}
.react-aria-CalendarCell[data-today]::before,
.react-aria-MonthCell[data-today]::before {
  content: '';
  position: absolute;
  inset: 0.35em;
  border: 1px solid rgba(196, 89, 0, 0.3);
  border-radius: 9999px;
  pointer-events: none;
}
.react-aria-CalendarCell[data-today][data-selected]::before,
.react-aria-MonthCell[data-today][data-selected]::before {
  border-color: rgba(255, 255, 255, 0.3);
}
/* Styling overrides just for the month cell */
.react-aria-MonthCell {
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  padding: var(--spacing-2) 0;
}
.react-aria-MonthCell[data-disabled] {
  opacity: 0.4;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
@layer utilities {
  /* Flat button utility — Spry-style: solid background, no gradients or
   * specular highlights, transparent border by default. Hover and pressed
   * darken the background; pressed adds Spry's subtle inset depression. */
  .button-base {
    --button-color: var(--tint);
    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
    --button-border: transparent;
    --button-border-size: 1px;
    background: var(--button-background);
    color: var(--button-text);
    border: var(--button-border-size) solid var(--button-border);
    box-shadow: none;
    outline: none;
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }
  .button-base:where([data-hovered]) {
    --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
  }
  .button-base:where([data-pressed]) {
    --button-background: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
  .button-base:where([data-focus-visible]) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .button-base:where([data-variant=primary]) {
    --button-color: var(--orange);
    /* Spry @attention #bf5700 */
    --button-background: var(--button-color);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-variant=primary]):where([data-hovered]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.05) c h);
  }
  .button-base:where([data-variant=primary]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.1) c h);
  }
  .button-base:where([data-variant=secondary]) {
    --button-color: var(--gray);
  }
  .button-base:where([data-variant=quiet]) {
    --button-background: transparent;
    --button-text: var(--text-color);
  }
  .button-base:where([data-variant=quiet]):where([data-hovered], [data-pressed]) {
    --button-background: var(--tint-200);
    --button-text: var(--tint-1400);
  }
  .button-base:where([data-selected]) {
    --button-background: oklch(from var(--button-color) 55% c h);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-selected]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) 50% c h);
  }
  .button-base:where([data-disabled]) {
    cursor: not-allowed;
    box-shadow: none;
  }
  /* Flat indicator utility — solid white field with a 1px border, no inner
   * gloss or drop shadow. Selected fills with the highlight color. */
  .indicator {
    --indicator-color: var(--gray);
    --indicator-background: var(--field-background);
    --indicator-border: var(--border-color-hover);
    background: var(--indicator-background);
    box-shadow: inset 0 0 0 1px var(--indicator-border);
    transition: background 200ms, box-shadow 200ms;
    will-change: scale;
  }
  .indicator[data-pressed],
  [data-pressed] .indicator {
    scale: 0.9;
  }
  [data-selected] > .indicator,
  [data-indeterminate] > .indicator {
    --indicator-color: var(--highlight-background);
    --indicator-background: var(--indicator-color);
    --indicator-border: var(--indicator-background);
  }
  .indicator[data-invalid],
  [data-invalid] > .indicator {
    --indicator-color: var(--invalid-color);
    --indicator-color: var(--pink);
  }
  .indicator[data-focus-visible],
  [data-focus-visible] > .indicator {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .indicator[data-disabled],
  [data-disabled] > .indicator {
    background: var(--field-background);
    box-shadow: inset 0 0 0 1px var(--border-color-disabled);
  }
  /* Flat inset utility — Spry-style fields: white background with a
   * transparent border that becomes visible on hover and switches to the
   * link color on focus. No inner shadow. */
  .inset {
    --inset-background: var(--field-background);
    --inset-border: transparent;
    --inset-border-size: 1px;
    background: var(--inset-background);
    box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
    transition: box-shadow 200ms;
    forced-color-adjust: none;
    /* Required listed first so the invalid / warning rules below override
     * --inset-indicator-color when more than one state is active. Note that
     * required doesn't change the --inset-border because required is just the triangle without the border */
    /* Top-left corner indicator. Mask provides the triangle shape;
     * background-color (via --inset-indicator-color) provides the fill,
     * so the indicator follows the same theme tokens as the border. */
  }
  .inset:where([data-hovered], [data-pressed]) {
    --inset-border: var(--border-color);
  }
  .inset:where([data-focus-within], [data-focused]) {
    --inset-border: var(--link-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required]) {
    position: relative;
  }
  .inset:where([data-required]) {
    --inset-indicator-color: var(--required-color);
  }
  .inset:where([data-invalid]) {
    --inset-border: var(--invalid-color);
    --inset-indicator-color: var(--invalid-color);
  }
  .inset:where([data-warning]) {
    --inset-border: var(--warning-color);
    --inset-indicator-color: var(--warning-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--inset-indicator-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    pointer-events: none;
  }
  .inset:where([data-disabled]) {
    --inset-background: transparent;
    --inset-border: transparent;
  }
  .inset.track {
    --inset-background: var(--gray-200);
    --inset-border: var(--gray-400);
  }
}
.react-aria-DateField,
.react-aria-TimeField {
  display: flex;
  flex-direction: column;
}
.react-aria-DateInput {
  display: inline;
  padding: 0 var(--spacing-3);
  box-sizing: border-box;
  border-radius: var(--radius);
  font: var(--font-size) var(--font-family);
  color: var(--field-text-color);
  height: var(--spacing-8);
  line-height: var(--spacing-8);
  width: fit-content;
  min-width: 150px;
  white-space: nowrap;
  forced-color-adjust: none;
  cursor: text;
}
.react-aria-DateInput[data-focus-within] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -1px;
}
.react-aria-DateInput[data-disabled] {
  color: var(--text-color-disabled);
  cursor: default;
}
.react-aria-DateInput.disabled-more-visible {
  --text-color-disabled: #3f5978;
}
/* Spry Field styles. Used by TimeField and DateTimePicker2 */
.react-aria-DateInput.inset {
  width: 100%;
  font-size: 1.2em;
  /* Duplicates Spry styles that apply to the .input classes. Duplicated instead of adding the class to avoid
   * side effects from other parts of the input class 
   */
  font-weight: 500;
  line-height: 1.35;
  padding: 0.7em 0.6em;
  height: auto;
  overflow-x: auto;
  overflow-y: clip;
  scrollbar-width: none;
  /* Resting border held in a variable so individual consumers can
   * change just the resting color without having to override every
   * state rule (hover/invalid/disabled/etc.). DatePicker keeps #e6e7e8
   * to match Spry's `.input-container` border; TimeField overrides
   * this to transparent to match a bare Spry text input. */
  --inset-border-rest: #e6e7e8;
  --inset-border: var(--inset-border-rest);
  border: 1px solid var(--inset-border);
  box-shadow: none;
  transition: border-color 200ms;
  /* Focus uses the browser-native `auto` halo at --focus-ring-color.
   * The resting border stays as-is (no swap to --link-color from the
   * inset utility) — references --inset-border-rest so the focused
   * border color also follows any consumer override. */
  /* Re-apply the .inset utility's invalid/warning border colors. The
   * utility sets --inset-border via .inset:where([data-invalid]) at
   * (0,1,0) specificity, but the base rule above (0,2,0) wins, so the
   * border never goes red/yellow. Restate it here so it does. */
  /* Spry's disabled fill */
  /* Spry's read-only style */
  /* Inherit font size so the overall input matches Spry's height. */
}
.react-aria-DateInput.inset:where([data-hovered], [data-pressed]) {
  --inset-border: rgba(187, 189, 191, 0.7);
}
.react-aria-DateInput.inset[data-focus-within] {
  --inset-border: var(--inset-border-rest);
  outline-style: auto;
  outline-color: var(--focus-ring-color);
  outline-offset: 0;
}
.react-aria-DateInput.inset[data-invalid] {
  --inset-border: var(--invalid-color);
}
.react-aria-DateInput.inset[data-warning] {
  --inset-border: var(--warning-color);
}
.react-aria-DateInput.inset[data-disabled] {
  --inset-background: rgba(255, 255, 255, 0.4);
  --inset-border: transparent;
}
.react-aria-DateInput.inset[data-readonly] {
  --inset-background: rgba(255, 255, 255, 0.4);
  --field-text-color: #3f5978;
}
.react-aria-DateInput.inset .react-aria-DateSegment {
  font-size: inherit;
}
/* For military time, hide the separator between hour and minute segments and remove the segment padding 
   so HH:mm displays as HHmm */
.react-aria-DateInput[data-time-format="military"] .timeField-time-separator {
  display: none;
}
.react-aria-DateInput[data-time-format="military"] .react-aria-DateSegment[data-type="hour"] {
  padding-right: 0;
}
.react-aria-DateInput[data-time-format="military"] .react-aria-DateSegment[data-type="minute"] {
  padding-left: 0;
}
.react-aria-DateSegment {
  padding: 2px;
  font-size: var(--font-size);
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--field-text-color);
  -webkit-tap-highlight-color: transparent;
}
.react-aria-DateSegment[data-type=literal] {
  padding: 0;
}
.react-aria-DateSegment[data-placeholder] {
  color: var(--text-color-placeholder);
}
.react-aria-DateSegment:focus {
  color: var(--highlight-foreground);
  background: var(--highlight-background);
  outline: none;
  border-radius: 4px;
  caret-color: transparent;
}
.react-aria-DateSegment[data-disabled] {
  color: var(--text-color-disabled);
  cursor: default;
}
/* While a drag-to-select gesture is active, suppress native text selection inside the
 * input. The pointermove handler also defensively clears any window selection when the
 * threshold is met; this prevents the browser from re-establishing it as the drag continues. */
.react-aria-DateInput[data-dragging] {
  user-select: none;
}
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment {
  color: var(--highlight-foreground);
  background: var(--highlight-background);
  border-radius: 0;
}
/* Literals (`/`, `:`, space) ship with padding:0, so without this the highlight is
 * shorter vertically at each separator and the field reads as chopped boxes
 * instead of one continuous selection. */
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment[data-type=literal] {
  padding-top: 2px;
  padding-bottom: 2px;
}
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-Form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}
.react-aria-Form > .react-aria-Button {
  align-self: start;
}
.react-aria-Form [role=alert] {
  border: 2px solid var(--invalid-color);
  background: var(--overlay-background);
  border-radius: 6px;
  padding: 12px;
  max-width: 250px;
  outline: none;
}
.react-aria-Form [role=alert]:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.react-aria-Form [role=alert] h3 {
  margin-top: 0;
}
.react-aria-Form [role=alert] p {
  margin-bottom: 0;
}
.react-aria-Label {
  /* Copied from spry .label rule */
  display: block;
  color: var(--text-color);
  font-weight: 300;
  font-size: 1.2em;
  padding-bottom: 0.3em;
  /* Copied from spry `.label.required` style. */
}
[data-required=true] > .react-aria-Label {
  font-weight: 700;
}
.react-aria-FieldError {
  display: block;
  font: var(--font-size-sm) var(--font-family);
  color: var(--invalid-color);
  margin-top: var(--spacing-1);
  contain: inline-size;
}
.field-description {
  display: block;
  font: var(--font-size-sm) var(--font-family);
  margin-top: var(--spacing-1);
  contain: inline-size;
}
[data-invalid] > .field-description {
  display: none;
}
.field-Button {
  /* position: relative so the button paints on top of any sibling that becomes
   * positioned (e.g. the DateInput when it's invalid/warning). The negative
   * margin-left below makes the button overlap the input's right edge, so
   * paint order matters. */
  position: relative;
  background: var(--tint-200);
  color: var(--tint-1400);
  forced-color-adjust: none;
  border-radius: var(--radius-sm);
  border: none;
  margin-left: calc(-1 * var(--spacing-8) + 4px);
  height: calc(100% - 8px);
  aspect-ratio: 1/1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: scale, background;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;
}
.field-Button svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}
.field-Button:where([data-hovered], [data-pressed]) {
  background: var(--tint-300);
  color: var(--tint-1200);
}
.field-Button[data-pressed] {
  scale: 0.9;
}
.field-Button[data-focus-visible] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.field-Button[data-disabled] {
  background: none;
  color: var(--text-color-disabled);
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-ListBox {
  max-height: inherit;
  overflow: auto;
  border: 0.5px solid var(--border-color);
  border-radius: calc(var(--radius) + var(--spacing-1));
  background: var(--overlay-background);
  forced-color-adjust: none;
  outline: none;
  box-sizing: border-box;
  font: var(--font-size) var(--font-family);
  color: var(--text-color);
}
.react-aria-ListBox:has(.react-aria-ListBoxSection) {
  scroll-padding: 24px;
}
.react-aria-ListBox[data-focus-visible] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -1px;
}
.react-aria-ListBox[data-empty] {
  align-items: center;
  justify-content: center;
  font-style: italic;
}
.react-aria-ListBox[data-drop-target] {
  outline: 2px solid var(--highlight-background);
  outline-offset: -1px;
  background: var(--highlight-overlay);
}
.react-aria-ListBox .react-aria-DropIndicator[data-drop-target] {
  z-index: 3;
  outline: 1px solid var(--highlight-background);
}
.react-aria-ListBoxSection .react-aria-Header {
  position: sticky;
  top: -0.5px;
  z-index: 2;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variation-settings: initial;
  padding: var(--spacing-1) var(--spacing-4);
  background: var(--gray-100);
  border-block: 0.5px solid var(--gray-400);
  cursor: default;
  user-select: none;
  box-shadow: inset 0px 1px 0px white, inset 0px -4px 8px var(--gray-200);
}
.react-aria-ListBoxSection:first-child .react-aria-Header {
  margin-top: -0.5px;
}
.react-aria-ListBoxItem {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius);
  outline: none;
  cursor: default;
  color: var(--text-color);
  font: var(--font-size) var(--font-family);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--spacing-8);
  box-sizing: border-box;
  position: relative;
  transition-property: background, color, border-radius;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;
  --border-color: var(--gray-300);
}
.react-aria-ListBoxItem:not(:last-child)::after {
  content: '';
  display: block;
  position: absolute;
}
.react-aria-ListBoxItem[data-pressed] {
  background: var(--highlight-hover);
  border-radius: var(--radius);
}
.react-aria-ListBoxItem[data-focus-visible] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
  z-index: 2;
}
.react-aria-ListBoxItem[data-selected] {
  background: var(--highlight-background);
  color: var(--highlight-foreground);
  --border-color: transparent;
}
.react-aria-ListBoxItem[data-selected][data-focus-visible] {
  outline-color: var(--highlight-foreground);
  outline-offset: -4px;
}
.react-aria-ListBoxItem[data-selected][data-pressed] {
  background: var(--highlight-background-pressed);
}
.react-aria-ListBoxItem[data-selected]:has(+ [data-selected]),
.react-aria-ListBoxItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
  --border-color: rgba(255, 255, 255, 0.3);
}
.react-aria-ListBoxItem [slot=label] {
  font-weight: 500;
}
.react-aria-ListBoxItem [slot=description] {
  font-size: var(--font-size-sm);
}
.react-aria-ListBoxItem[href] {
  text-decoration: none;
  cursor: pointer;
  -webkit-touch-callout: none;
}
.react-aria-ListBoxItem[data-disabled] {
  color: var(--text-color-disabled);
}
.react-aria-ListBoxItem[data-dragging] {
  opacity: 0.6;
}
.react-aria-ListBoxItem[data-drop-target] {
  outline: 2px solid var(--highlight-background);
  background: var(--highlight-overlay);
}
.react-aria-ListBox[data-layout=stack] {
  display: flex;
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] {
  flex-direction: column;
  width: 250px;
  max-height: 300px;
  min-height: 100px;
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem {
  margin-inline: var(--spacing-1);
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem:where(:nth-child(1 of .react-aria-ListBoxItem)) {
  margin-top: var(--spacing);
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem:where(:nth-last-child(1 of .react-aria-ListBoxItem)) {
  margin-bottom: var(--spacing);
}
[role=presentation] > .react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem {
  margin: 0;
  /* virtualizer */
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem:not(:last-child)::after {
  bottom: 0;
  width: calc(100% - var(--spacing-6));
  border-bottom: 0.5px solid var(--border-color);
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected]:has(+ [data-selected]),
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected] + [data-selected],
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected] + .react-aria-DropIndicator + [data-selected] {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] {
  flex-direction: row;
  width: 100%;
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem {
  min-width: max-content;
  margin-block: var(--spacing-1);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem:nth-child(1 of .react-aria-ListBoxItem) {
  margin-inline-start: var(--spacing);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem:nth-last-child(1 of .react-aria-ListBoxItem) {
  margin-inline-end: var(--spacing);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem:not(:last-child)::after {
  inset-inline-end: 0;
  height: calc(100% - var(--spacing-2));
  border-inline-end: 0.5px solid var(--border-color);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected]:has(+ [data-selected]),
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected] + [data-selected],
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected] + .react-aria-DropIndicator + [data-selected] {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.react-aria-ListBox[data-layout=grid] {
  display: grid;
  gap: var(--spacing-1);
  width: fit-content;
  max-width: 100%;
  padding: var(--spacing-1);
}
.react-aria-ListBox[data-layout=grid][data-orientation=vertical] {
  grid-template-columns: 1fr 1fr;
}
.react-aria-ListBox[data-layout=grid][data-orientation=horizontal] {
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: none;
  grid-auto-columns: 160px;
}
.react-aria-ListBoxLoadingIndicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 100%;
}
.dropdown-listbox {
  display: block;
  max-height: inherit;
  overflow: auto;
  border-radius: inherit;
  forced-color-adjust: none;
  outline: none;
  box-sizing: border-box;
  font: var(--font-size) var(--font-family);
  color: var(--text-color);
}
.dropdown-listbox[data-empty] {
  min-height: var(--spacing-8);
  padding: var(--spacing-2);
}
.dropdown-listbox .react-aria-Header {
  padding-left: var(--spacing-7);
}
.dropdown-item {
  font-size: 1.2rem;
  font-weight: 300;
  padding: 0.6em 0.4em 0.5em 0.4em;
  color: #222;
  box-sizing: border-box;
  border-radius: var(--radius);
  outline: none;
  cursor: default;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms, color 200ms;
}
.dropdown-item[data-selected] {
  background-color: #e6e7e8;
  color: black;
}
.dropdown-item[data-hovered],
.dropdown-item[data-focus-visible] {
  background-color: #123044;
  color: #fff;
}
.dropdown-item [slot=label] {
  font-weight: 300;
}
.dropdown-item [slot=description] {
  font-size: var(--font-size-sm);
}
.dropdown-item[data-disabled] {
  color: var(--text-color-disabled);
}
.dropdown-item[href] {
  text-decoration: none;
  cursor: pointer;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-Popover {
  --background-color: var(--overlay-background);
  outline: 1px solid var(--overlay-border);
  box-sizing: border-box;
  filter: drop-shadow(var(--popover-shadow));
  border-radius: var(--radius-lg);
  background: var(--background-color);
  color: var(--text-color);
  transition: transform 200ms, opacity 200ms;
  font: var(--font-size) var(--font-family);
  padding: 8px;
}
.react-aria-Popover[data-trigger=MenuTrigger],
.react-aria-Popover[data-trigger=SubmenuTrigger] {
  padding: 0;
}
.react-aria-Popover .react-aria-OverlayArrow svg {
  display: block;
  fill: var(--background-color);
  stroke: var(--overlay-border);
  paint-order: stroke;
  stroke-width: 2px;
}
.react-aria-Popover[data-entering],
.react-aria-Popover[data-exiting] {
  transform: var(--origin);
  opacity: 0;
}
.react-aria-Popover[data-placement=top] {
  --origin: translateY(8px);
}
.react-aria-Popover[data-placement=top]:has(.react-aria-OverlayArrow) {
  margin-bottom: 6px;
}
.react-aria-Popover[data-placement=bottom] {
  --origin: translateY(-8px);
}
.react-aria-Popover[data-placement=bottom]:has(.react-aria-OverlayArrow) {
  margin-top: 6px;
}
.react-aria-Popover[data-placement=bottom] .react-aria-OverlayArrow svg {
  transform: rotate(180deg);
}
.react-aria-Popover[data-placement=right] {
  --origin: translateX(-8px);
}
.react-aria-Popover[data-placement=right]:has(.react-aria-OverlayArrow) {
  margin-left: 6px;
}
.react-aria-Popover[data-placement=right] .react-aria-OverlayArrow svg {
  transform: rotate(90deg);
}
.react-aria-Popover[data-placement=left] {
  --origin: translateX(8px);
}
.react-aria-Popover[data-placement=left]:has(.react-aria-OverlayArrow) {
  margin-right: 6px;
}
.react-aria-Popover[data-placement=left] .react-aria-OverlayArrow svg {
  transform: rotate(-90deg);
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-Select {
  color: var(--text-color);
  position: relative;
  width: 100%;
  /* Trigger button — overrides button-base so the Select renders as a Spry
     form field rather than a tint-colored button. Direct property values
     (not the --button-* custom-property cascade) keep [data-variant=primary]
     in utilities.less from winning when --button-color is overridden. */
  /* Hover divider — a 1px full-height line just left of the caret,
   * matching `.dropdown-button:hover { border-left: 1px solid #bbbdbf }`
   * in spry-nolayout.css:12442. Always present as a transparent pseudo
   * so the alpha-only transition avoids any flash, similar to the date
   * picker's icon-button divider. */
  /* Hide the the hover divider when the Select is disabled */
}
.react-aria-Select .react-aria-Button {
  background: var(--field-background);
  color: var(--field-text-color);
  border: 1px solid transparent;
  box-shadow: none;
  /* position: relative so the absolutely-positioned caret icon below
     * anchors to the button (not the Select wrapper). */
  position: relative;
  /* Match Spry's old .dropdown-input: 1.2em font, em-relative
     * padding (vertical 0.7em, left 0.6em, right 1.5em reserves room
     * for the caret), auto height so the box grows to fit the padded
     * content (same outer height as the old picker). */
  font-size: 1.2em;
  line-height: 1.35;
  height: auto;
  padding: 0.7em 1.5em 0.7em 0.6em;
  width: 100%;
  min-width: 0;
  font-weight: normal;
  text-align: left;
  transition: border-color 200ms;
  /* Match Spry's old focus style: the browser-default `auto` outline
     * halo at --focus-ring-color, with the field's resting (transparent)
     * border untouched. .button-base's `&:where([data-focus-visible])`
     * rule would otherwise paint a 2px solid inset blue outline; this
     * higher-specificity rule overrides it. */
}
.react-aria-Select .react-aria-Button:where([data-hovered]) {
  background: var(--field-background);
  border-color: var(--border-color);
}
.react-aria-Select .react-aria-Button[data-focused] {
  outline-style: auto;
  outline-color: var(--focus-ring-color);
  outline-offset: 0;
}
.react-aria-Select .react-aria-Button:where([data-pressed]) {
  scale: 1;
}
.react-aria-Select .react-aria-Button:where([data-disabled]) {
  background: var(--field-background);
  color: var(--text-color-disabled);
  border-color: transparent;
  cursor: default;
}
.react-aria-Select .react-aria-SelectValue {
  flex: 1;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.react-aria-Select .react-aria-SelectValue[data-placeholder] {
  color: var(--text-color-placeholder);
  font-weight: normal;
}
.react-aria-Select .react-aria-SelectValue [slot=description] {
  display: none;
}
.react-aria-Select .react-aria-Button > span:not(.react-aria-SelectValue) {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #a6a8ab;
  transition: color 200ms;
}
.react-aria-Select .react-aria-Button[data-hovered] > span:not(.react-aria-SelectValue) {
  color: #5e5f61;
}
.react-aria-Select .react-aria-Button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.3em;
  width: 1px;
  background-color: rgba(187, 189, 191, 0);
  transition: background-color 200ms;
  pointer-events: none;
}
.react-aria-Select .react-aria-Button[data-hovered]::before {
  background-color: #bbbdbf;
}
.react-aria-Select .react-aria-Button[data-disabled] > span:not(.react-aria-SelectValue),
.react-aria-Select .react-aria-Button[data-disabled]::before {
  display: none;
}
.react-aria-Select .lucide-chevron-down {
  margin-inline-start: var(--spacing-2);
  color: var(--text-color);
  flex-shrink: 0;
}
.select-popover[data-trigger=Select] {
  /* Match the trigger width, but never shrink narrower than the widest option — otherwise a
   * select with a small trigger (e.g. the month/year dropdowns in the calendar header) would
   * wrap option text like "2026" or "September" onto multiple lines. For normal field-width
   * selects the trigger is already wider than the content, so this changes nothing. */
  width: var(--trigger-width);
  min-width: max-content;
  padding: 1px;
  /* Cap the visible options at ~21em via the listbox. The popover
   * receives an inline max-height from react-aria (viewport-aware),
   * which can't be overridden in CSS without !important. .dropdown-listbox
   * defaults to `max-height: inherit`, so a value set here on the
   * listbox lets it shrink the listbox, which transitively shrinks the
   * popover (which sizes to content). */
}
.select-popover[data-trigger=Select] .dropdown-listbox {
  max-height: 21em;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}

/* The old time-only dateTimePicker that TimeField replaces is a block element that fills
 * (and, in a flex row, splits) its available space. The react-aria TimeField is a flex
 * column, which instead shrinks to its content — leaving the field narrower than the old
 * picker and not lining up with it. Make the TimeField fill its container so it occupies
 * the same footprint: full width in a block layout, an equal share of a flex row. */
.react-aria-TimeField {
  width: 100%;
}
/* The base .react-aria-DateInput rule floors the width at min-width:150px, a size picked
 * for a full date ("12/31/2025 12:00 AM"). On a time-only field that floor stops the field
 * from shrinking to share a flex row, so the two time fields can't split the space the way
 * the old picker did. Drop the floor. DateTimePicker2/3 do the equivalent with min-width:0
 * on their DateInput. */
.react-aria-TimeField .react-aria-DateInput.inset {
  min-width: 0;
}
/* Inside the DateTimePicker popover the time field sits below the calendar within an
 * already-bordered popover, so it stays borderless (its original look). A standalone
 * TimeField keeps the inherited #e6e7e8 border to match the old time-only dateTimePicker. */
.react-aria-Popover .react-aria-TimeField .react-aria-DateInput.inset {
  --inset-border-rest: transparent;
}

@layer utilities {
  /* Flat button utility — Spry-style: solid background, no gradients or
   * specular highlights, transparent border by default. Hover and pressed
   * darken the background; pressed adds Spry's subtle inset depression. */
  .button-base {
    --button-color: var(--tint);
    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
    --button-border: transparent;
    --button-border-size: 1px;
    background: var(--button-background);
    color: var(--button-text);
    border: var(--button-border-size) solid var(--button-border);
    box-shadow: none;
    outline: none;
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }
  .button-base:where([data-hovered]) {
    --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
  }
  .button-base:where([data-pressed]) {
    --button-background: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
  .button-base:where([data-focus-visible]) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .button-base:where([data-variant=primary]) {
    --button-color: var(--orange);
    /* Spry @attention #bf5700 */
    --button-background: var(--button-color);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-variant=primary]):where([data-hovered]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.05) c h);
  }
  .button-base:where([data-variant=primary]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.1) c h);
  }
  .button-base:where([data-variant=secondary]) {
    --button-color: var(--gray);
  }
  .button-base:where([data-variant=quiet]) {
    --button-background: transparent;
    --button-text: var(--text-color);
  }
  .button-base:where([data-variant=quiet]):where([data-hovered], [data-pressed]) {
    --button-background: var(--tint-200);
    --button-text: var(--tint-1400);
  }
  .button-base:where([data-selected]) {
    --button-background: oklch(from var(--button-color) 55% c h);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-selected]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) 50% c h);
  }
  .button-base:where([data-disabled]) {
    cursor: not-allowed;
    box-shadow: none;
  }
  /* Flat indicator utility — solid white field with a 1px border, no inner
   * gloss or drop shadow. Selected fills with the highlight color. */
  .indicator {
    --indicator-color: var(--gray);
    --indicator-background: var(--field-background);
    --indicator-border: var(--border-color-hover);
    background: var(--indicator-background);
    box-shadow: inset 0 0 0 1px var(--indicator-border);
    transition: background 200ms, box-shadow 200ms;
    will-change: scale;
  }
  .indicator[data-pressed],
  [data-pressed] .indicator {
    scale: 0.9;
  }
  [data-selected] > .indicator,
  [data-indeterminate] > .indicator {
    --indicator-color: var(--highlight-background);
    --indicator-background: var(--indicator-color);
    --indicator-border: var(--indicator-background);
  }
  .indicator[data-invalid],
  [data-invalid] > .indicator {
    --indicator-color: var(--invalid-color);
    --indicator-color: var(--pink);
  }
  .indicator[data-focus-visible],
  [data-focus-visible] > .indicator {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .indicator[data-disabled],
  [data-disabled] > .indicator {
    background: var(--field-background);
    box-shadow: inset 0 0 0 1px var(--border-color-disabled);
  }
  /* Flat inset utility — Spry-style fields: white background with a
   * transparent border that becomes visible on hover and switches to the
   * link color on focus. No inner shadow. */
  .inset {
    --inset-background: var(--field-background);
    --inset-border: transparent;
    --inset-border-size: 1px;
    background: var(--inset-background);
    box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
    transition: box-shadow 200ms;
    forced-color-adjust: none;
    /* Required listed first so the invalid / warning rules below override
     * --inset-indicator-color when more than one state is active. Note that
     * required doesn't change the --inset-border because required is just the triangle without the border */
    /* Top-left corner indicator. Mask provides the triangle shape;
     * background-color (via --inset-indicator-color) provides the fill,
     * so the indicator follows the same theme tokens as the border. */
  }
  .inset:where([data-hovered], [data-pressed]) {
    --inset-border: var(--border-color);
  }
  .inset:where([data-focus-within], [data-focused]) {
    --inset-border: var(--link-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required]) {
    position: relative;
  }
  .inset:where([data-required]) {
    --inset-indicator-color: var(--required-color);
  }
  .inset:where([data-invalid]) {
    --inset-border: var(--invalid-color);
    --inset-indicator-color: var(--invalid-color);
  }
  .inset:where([data-warning]) {
    --inset-border: var(--warning-color);
    --inset-indicator-color: var(--warning-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--inset-indicator-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%207%207%27%3E%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    pointer-events: none;
  }
  .inset:where([data-disabled]) {
    --inset-background: transparent;
    --inset-border: transparent;
  }
  .inset.track {
    --inset-background: var(--gray-200);
    --inset-border: var(--gray-400);
  }
}

div.spr-main-menu-toggle-wrapper {
  display: inline-block;
}
a.spr-main-menu-toggle-link-override-spry {
  width: auto !important;
  margin-right: 0 !important;
  color: inherit !important;
}
div.spr-main-menu-toggle-link-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  white-space: nowrap;
  text-transform: uppercase;
  user-select: none;
  color: rgba(255, 255, 255, 0.8);
}
div.spr-main-menu-toggle-link-content:hover {
  color: #fff;
}
span.spr-main-menu-toggle-link-icon {
  font-size: 1.2rem;
}
/** The search row and the column row share this track definition so the search
 *  field can be placed over the rightmost column regardless of how many columns
 *  render or how wide the window is. `auto-fill` (not `auto-fit`) is required:
 *  it keeps the empty tracks in the search row so `grid-column: -2` resolves to
 *  the last column rather than collapsing to full width. */
div.spr-main-menu {
  display: flex;
  flex-direction: column;
  padding: 3rem 2rem;
}
div.spr-main-menu-content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  /** Caps the grid at exactly one track per column, so `auto-fill` never adds an
   *  empty track to the right of the last column. --number-of-columns is set
   *  by the MainMenu component from the number of columns it renders. */
  max-width: calc(var(--number-of-columns, 3) * 25rem);
  margin: 0 auto;
}
div.spr-main-menu-search {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
}
div.spr-main-menu-search > * {
  grid-column: -2 / -1;
}
div.spr-main-menu-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
  row-gap: 1rem;
}
div.spr-main-menu-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
div.spr-main-menu-column:not(:first-of-type) {
  border-left: 1px solid #d0d2d3;
}
div.spr-main-menu-link-count {
  font-weight: 700;
  color: #123044;
}
h3.spr-main-menu-section-header {
  padding-left: 1.25rem;
  font-size: 1.1rem;
  font-weight: 300;
  text-transform: uppercase;
  color: #3f5978;
}
ul.spr-main-menu-section-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
li.spr-main-menu-section-list-item {
  margin: 0;
}
a.spr-main-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  color: #123044;
}
a.spr-main-menu-item:hover:not([disabled]) {
  background-color: #dddfdf;
  color: #1464bb;
}
a.spr-main-menu-item[disabled] {
  color: #bbbdbf;
}
span.spr-main-menu-item-icon {
  color: #5e5f61;
  width: 2rem;
}
span.spr-main-menu-item-icon.spr-main-menu-item-icon-disabled {
  color: inherit;
}

.multiselect-dropdown-flyout ul {
  max-height: 19em;
  overflow-y: auto;
}
.multiselect-dropdown-flyout li {
  display: block;
  font-size: 1.2rem;
  color: #222;
  cursor: pointer;
}
.multiselect-dropdown-flyout li .checkbox-unchecked-icon {
  color: #123044;
}
.multiselect-dropdown-flyout li .checkbox-unchecked-icon:before {
  font-size: 1em;
}
.multiselect-dropdown-flyout li .checkbox-checked-icon {
  color: #123044;
}
.multiselect-dropdown-flyout li .checkbox-checked-icon:before {
  font-size: 1em;
}
.multiselect-dropdown-flyout li:hover {
  background-color: #123044;
}
.multiselect-dropdown-flyout li:hover div,
.multiselect-dropdown-flyout li:hover span {
  color: #fff;
}
.multiselect-dropdown-flyout li:hover .checkbox-unchecked-icon {
  color: #fff;
}
.multiselect-dropdown-flyout li:hover .checkbox-checked-icon {
  color: #fff;
}
.multiselect-dropdown-flyout .multiselect-select-all {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #222;
  cursor: pointer;
  background: white;
  border: none;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}
.multiselect-dropdown-flyout .multiselect-select-all .checkbox-unchecked-icon {
  color: #123044;
}
.multiselect-dropdown-flyout .multiselect-select-all .checkbox-unchecked-icon:before {
  font-size: 1em;
}
.multiselect-dropdown-flyout .multiselect-select-all .checkbox-checked-icon {
  color: #123044;
}
.multiselect-dropdown-flyout .multiselect-select-all .checkbox-checked-icon:before {
  font-size: 1em;
}
.multiselect-dropdown-flyout .multiselect-select-all:hover {
  background-color: #123044;
}
.multiselect-dropdown-flyout .multiselect-select-all:hover div,
.multiselect-dropdown-flyout .multiselect-select-all:hover span {
  color: #fff;
}
.multiselect-dropdown-flyout .multiselect-select-all:hover .checkbox-unchecked-icon,
.multiselect-dropdown-flyout .multiselect-select-all:hover .checkbox-checked-icon {
  color: #fff;
}
.multiselect-dropdown-flyout .multiselect-select-all.disabled {
  pointer-events: none;
  opacity: 0.4;
}
.multiselect-dropdown-flyout .multiselect-select-all.scrolled {
  border-bottom: 1px solid #d0d2d3;
}
.multiselect-dropdown-flyout .multiselect-select-all:focus-visible {
  outline: 2px solid #123044;
  outline-offset: -2px;
}
.multiselect-dropdown-flyout .grouped-check-list.has-groups li:not(.footer-option) {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}
.multiselect-dropdown-flyout .footer-option {
  padding: 0;
  cursor: auto;
}
.multiselect-dropdown-flyout .footer-option:hover {
  background-color: transparent;
}
.multiselect-dropdown-flyout .field-clear.visible {
  display: block;
}
.multiselect-check-field {
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
}
.multiselectfield-filter {
  display: flex;
  float: none;
  color: #555;
  position: relative;
}
.multiselectfield-filter input {
  font-size: 1em;
  border: none;
  padding-left: 0.6em;
  padding: 0;
  height: 2.2em;
  background-color: transparent;
  width: 100%;
  margin-left: 0;
}
.multiselectfield-filter input:focus {
  outline: none;
}

.spry-react-tree-branch {
  padding: 0 !important;
}
.spry-react-selection-tree-content,
.spry-react-checkbox-tree-content {
  display: flex !important;
}
.spry-react-tree-node:focus {
  outline: none;
  border: solid black 1px;
}
.spry-react-tree-node:focus .spry-react-selection-tree-content {
  background-color: hsl(209, 61%, 90%);
}

.spr-entity-nav {
  font-size: 1.1rem;
  text-transform: uppercase;
}
.spr-entity-nav ul {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.spr-entity-nav .spr-entity-nav-main-button-link {
  display: flex;
  font-weight: 300;
  flex-grow: 1;
  padding: 1.1em 1.3em 1.1em 1em;
}
.spr-entity-nav .spr-entity-nav-main-button-link:before {
  font-size: 1.32rem !important;
  align-self: center;
  padding-right: 1em !important;
}
.spr-entity-nav .spr-entity-nav-main-button-link .count-circle {
  position: absolute;
  left: 1.8rem;
  bottom: 1.6rem;
  border: 1px solid;
  padding-top: 0;
  padding-bottom: 0;
}
.spr-entity-nav .spr-entity-nav-main-button {
  position: relative;
  display: flex;
}
.spr-entity-nav .spr-entity-nav-main-button.active:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 1.1rem solid transparent;
  border-bottom: 1.1rem solid transparent;
  border-right: 1rem solid #f1f1f0;
  position: absolute;
  right: 0;
  align-self: center;
}
.spr-entity-nav .spr-entity-nav-main-button.active.white:after {
  border-right: 1rem solid #fff;
}
.spr-entity-nav .spr-entity-nav-main-button.active .spr-entity-nav-main-button-link {
  font-weight: 700;
}
.spr-entity-nav .spr-entity-nav-group.active .spr-entity-nav-main-button-link {
  font-weight: 300;
}
.spr-entity-nav .spr-entity-nav-group.expanding .spr-entity-nav-button-group-toggle:after {
  content: "\f106";
}
.spr-entity-nav .spr-entity-nav-group .spr-entity-nav-main-button {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  align-content: center;
}
.spr-entity-nav .spr-entity-nav-group .spr-entity-nav-main-button-link {
  display: flex;
  flex-grow: 1;
  flex-wrap: nowrap;
}
.spr-entity-nav .spr-entity-nav-group .spr-entity-nav-button-group-toggle {
  flex-grow: 0;
}
.spr-entity-nav .spr-entity-nav-group.disabled {
  cursor: default;
}
.spr-entity-nav .spr-entity-nav-button-group-toggle {
  padding: 1.1em 0.5em 1.1em 0.5em;
}
.spr-entity-nav .spr-entity-nav-button-group-toggle:after {
  content: "\f107";
  font-family: FontAwesome;
  font-size: 1.15rem;
  text-align: center;
}
.spr-entity-nav .spr-entity-nav-sub-button {
  position: relative;
  display: flex;
}
.spr-entity-nav .spr-entity-nav-sub-button .spr-entity-nav-sub-button-link {
  display: flex;
  font-weight: 300;
  flex-grow: 1;
  padding: 0.6rem 0.3rem 0.6rem 4rem;
}
.spr-entity-nav .spr-entity-nav-sub-button.active:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 1.1rem solid transparent;
  border-bottom: 1.1rem solid transparent;
  border-right: 1rem solid #f1f1f0;
  position: absolute;
  right: 0;
  align-self: center;
}
.spr-entity-nav .spr-entity-nav-sub-button.active.white:after {
  border-right: 1rem solid #fff;
}
.spr-entity-nav .spr-entity-nav-sub-button.active .spr-entity-nav-sub-button-link {
  font-weight: 700;
}
.spr-entity-nav .spr-entity-nav-sub-button.disabled {
  cursor: default;
}
.spr-entity-nav .spr-expand-container {
  overflow: hidden;
}
.spr-entity-nav .spr-expand-container .spr-expand-contract {
  transition: margin-top 400ms cubic-bezier(0.33, 1, 0.68, 1);
}
.spr-entity-nav:not(.light) {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}
.spr-entity-nav:not(.light) .spr-entity-nav-main-button-link,
.spr-entity-nav:not(.light) .spr-entity-nav-sub-button-link {
  color: rgba(255, 255, 255, 0.7);
}
.spr-entity-nav:not(.light) .spr-entity-nav-main-button-link .count-circle {
  background-color: #3f5978;
  border-color: rgba(255, 255, 255, 0.7);
}
.spr-entity-nav:not(.light) .spr-entity-nav-sub-button:not(.disabled):hover {
  background-color: rgba(18, 48, 68, 0.5);
}
.spr-entity-nav:not(.light) .spr-entity-nav-sub-button .spr-entity-nav-sub-button-link[disabled] {
  color: rgba(140, 140, 140, 0.8);
}
.spr-entity-nav:not(.light) .spr-entity-nav-main-button-link[disabled] {
  color: rgba(140, 140, 140, 0.8) !important;
}
.spr-entity-nav:not(.light) .spr-entity-nav-main-button-link[disabled]:before {
  color: rgba(140, 140, 140, 0.8) !important;
}
.spr-entity-nav:not(.light) .spr-entity-nav-group:not(.active).expanding {
  background: rgba(18, 48, 68, 0.55);
}
.spr-entity-nav:not(.light) .spr-entity-nav-group:not(.active).expanding ul {
  background: rgba(63, 89, 120, 0.5);
}
.spr-entity-nav:not(.light) .spr-entity-nav-group.active .spr-entity-nav-main-button-link {
  color: rgba(255, 255, 255, 0.7);
}
.spr-entity-nav:not(.light) .spr-entity-nav-group.active .spr-entity-nav-main-button,
.spr-entity-nav:not(.light) .spr-entity-nav-group.active ul {
  background-color: #123044;
}
.spr-entity-nav:not(.light) .spr-entity-nav-group.active .spr-entity-nav-main-button:not(.disabled):hover {
  background-color: #123044;
}
.spr-entity-nav:not(.light) .spr-entity-nav-main-button.active {
  background-color: #123044;
}
.spr-entity-nav:not(.light) .spr-entity-nav-main-button:not(.disabled):hover {
  background-color: rgba(18, 48, 68, 0.5);
}
.spr-entity-nav:not(.light) .spr-entity-nav-sub-button.active {
  background-color: rgba(0, 0, 0, 0.2);
}
.spr-entity-nav:not(.light) .spr-entity-nav-main-button.active .spr-entity-nav-main-button-link,
.spr-entity-nav:not(.light) .spr-entity-nav-sub-button.active .spr-entity-nav-sub-button-link,
.spr-entity-nav:not(.light) .spr-entity-nav-main-button:not(.disabled):hover .spr-entity-nav-main-button-link,
.spr-entity-nav:not(.light) .spr-entity-nav-sub-button:not(.disabled):hover .spr-entity-nav-sub-button-link,
.spr-entity-nav:not(.light) .spr-entity-nav-group .spr-entity-nav-button-group-toggle:hover {
  color: #ffffff;
  cursor: pointer;
}
.spr-entity-nav.light {
  background: #fff;
  color: #231f20;
  height: 100%;
}
.spr-entity-nav.light .spr-entity-nav-group ul {
  border-bottom: 1px solid rgba(241, 241, 240, 0.1);
}
.spr-entity-nav.light .spr-entity-nav-group:not(.active) ul {
  border-color: #f1f1f0;
}
.spr-entity-nav.light .spr-entity-nav-main-button-link,
.spr-entity-nav.light .spr-entity-nav-sub-button-link {
  color: #231f20;
}
.spr-entity-nav.light .spr-entity-nav-main-button-link .count-circle {
  border-color: #231f20;
}
.spr-entity-nav.light .spr-entity-nav-main-button.active .spr-entity-nav-main-button-link .count-circle,
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-main-button-link .count-circle {
  background-color: #3f5978;
  border-color: rgba(255, 255, 255, 0.7);
}
.spr-entity-nav.light .spr-entity-nav-sub-button .spr-entity-nav-sub-button-link[disabled] {
  color: rgba(140, 140, 140, 0.8);
}
.spr-entity-nav.light .spr-entity-nav-main-button-link[disabled] {
  color: rgba(140, 140, 140, 0.8) !important;
}
.spr-entity-nav.light .spr-entity-nav-main-button-link[disabled]:before {
  color: rgba(140, 140, 140, 0.8) !important;
}
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-main-button-link,
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-sub-button-link,
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-button-group-toggle {
  color: rgba(255, 255, 255, 0.7);
}
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-main-button,
.spr-entity-nav.light .spr-entity-nav-group.active ul {
  background-color: #123044;
}
.spr-entity-nav.light .spr-entity-nav-main-button.active {
  background-color: #123044;
}
.spr-entity-nav.light .spr-entity-nav-main-button:not(.disabled):hover {
  background-color: #e7eff7;
}
.spr-entity-nav.light .spr-entity-nav-sub-button:not(.disabled):hover {
  background-color: #d0e0ef;
}
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-main-button:not(.disabled):hover {
  background-color: #1c394f;
}
.spr-entity-nav.light .spr-entity-nav-main-button.active:not(.disabled):hover {
  background-color: #28445e;
}
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-sub-button:not(.disabled):hover {
  background-color: #123044;
}
.spr-entity-nav.light .spr-entity-nav-sub-button.active {
  background-color: rgba(0, 0, 0, 0.2);
}
.spr-entity-nav.light .spr-entity-nav-sub-button:not(.disabled) .spr-entity-nav-main-button-link,
.spr-entity-nav.light .spr-entity-nav-main-button:not(.disabled) .spr-entity-nav-main-button-link,
.spr-entity-nav.light .spr-entity-nav-sub-button:not(.disabled) .spr-entity-nav-sub-button-link,
.spr-entity-nav.light .spr-entity-nav-main-button:not(.disabled) .spr-entity-nav-sub-button-link {
  cursor: pointer;
}
.spr-entity-nav.light .spr-entity-nav-main-button.active .spr-entity-nav-main-button-link,
.spr-entity-nav.light .spr-entity-nav-sub-button.active .spr-entity-nav-sub-button-link,
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-main-button:not(.disabled):hover .spr-entity-nav-main-button-link,
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-sub-button:not(.disabled):hover .spr-entity-nav-sub-button-link,
.spr-entity-nav.light .spr-entity-nav-group.active .spr-entity-nav-button-group-toggle:hover {
  color: #ffffff;
}

.more-menu-flyout {
  max-height: calc(95vh - 2.8em);
  overflow: auto !important;
}

.site-nav-link {
  border-left: 1px solid rgba(208, 210, 211, 0.1);
  padding-right: 0.8rem;
  padding-left: 0.8rem;
  padding-top: 0.7em;
  margin-right: -3px;
  height: 2.1em;
  width: 5em;
  display: inline-block;
  cursor: pointer;
}
.site-nav-link.disabled,
.site-nav-link[disabled] {
  cursor: default;
}

.plus-more-list-title-count-circle {
  color: #b1b3b5;
  font-size: 0.8rem;
  box-sizing: border-box;
  min-width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b1b3b5;
  border-radius: 1rem;
  padding: 0.125rem 0.3rem;
  position: relative;
  top: -0.5rem;
  left: 0.25rem;
}

.flyout-button.flyout-button-custom-icon:before {
  content: none;
}

.results-message {
  color: #231f20;
  font-weight: 700;
  flex: 1;
  justify-content: flex-start;
}

.outer-search-container .search-field-input[disabled],
.outer-search-container .search-field-input[disabled]:hover {
  background-color: rgba(255, 255, 255, 0.4);
  color: #bbbdbf;
}
.outer-search-container .search-field-input[disabled]::-webkit-input-placeholder {
  color: #bbbdbf;
}
.outer-search-container .search-field-input[disabled]::-moz-placeholder {
  color: #bbbdbf;
}
.outer-search-container .search-field-input[disabled]:-ms-input-placeholder {
  color: #bbbdbf;
}

.search-with-type-field {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: transparent;
  box-sizing: border-box;
  position: relative;
  border-left: solid 1px #d0d2d3;
  border-right: solid 1px #d0d2d3;
}
.search-with-type-field .search-with-type-clear {
  display: block;
  z-index: 5;
  cursor: pointer;
}
.search-with-type-field .search-with-type-clear:before {
  content: '\f057';
  font-family: FontAwesome;
  display: block;
  position: absolute;
  color: #ff8b2b;
  font-size: 1.2rem;
  right: 0;
  top: 0;
  margin-right: 0.3rem;
  margin-top: 0.85rem;
}
.search-with-type-field select,
.search-with-type-field input {
  background-color: transparent;
  font-size: 1em;
}
.search-with-type-field select:hover,
.search-with-type-field input:hover {
  background-color: #fff;
}
.search-with-type-field .search-text {
  width: 100%;
  margin-left: -1px;
}
.search-with-type-field .search-text:hover {
  border-left-color: transparent;
  border-right-color: transparent;
}
.search-with-type-field .search-type {
  border: solid 1px transparent;
  border-right: solid 1px #d0d2d3;
}
.search-with-type-field.focused {
  background-color: #fff;
}
.search-with-type-field.filtered {
  border-radius: 1rem;
  background-color: #1464bb;
  color: #fff;
}
.search-with-type-field.filtered:hover {
  background-color: #1b7de7;
  cursor: pointer;
}
.search-with-type-field.filtered:hover .search-text,
.search-with-type-field.filtered:hover .search-type {
  background-color: #1b7de7;
  cursor: pointer;
}
.search-with-type-field.filtered:hover option {
  background-color: #fff;
}
.search-with-type-field.filtered:hover .search-text {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-left-color: transparent;
}
.search-with-type-field.filtered:hover .search-type {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.search-with-type-field.filtered .search-text,
.search-with-type-field.filtered .search-type {
  color: #fff;
}
.search-with-type-field.filtered .search-type {
  border-right-color: #d0d2d3;
  color: #fff;
  transform: translateZ(0);
}
.search-with-type-field.filtered .dropdown-field span {
  text-shadow: #80bcff 0 0 0.8rem;
  color: #ff8b2b;
  z-index: 10;
}

.section-header-selectable .section-expander {
  padding: 0;
  appearance: none;
  box-sizing: content-box;
}
.section-header-selectable .section-expander:hover {
  border: 1px solid #d0d2d3;
  border-right: 0 none;
}
.section-header-selectable .section-expander:focus-visible {
  opacity: 1;
}
.section-header-context-menu-button.vertical-ellipsis-icon {
  border: 2px solid transparent;
  border-radius: 0.3rem;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.section-header-context-menu-button.vertical-ellipsis-icon:hover {
  border: 2px solid;
  opacity: 0.9;
}
.section-header-context-menu-button.vertical-ellipsis-icon:before {
  font-size: 1.8rem;
  top: -0.13rem;
  left: -0.03rem;
}

.sr-section-body {
  background-color: #fff;
}
.sr-section-header-wrapper {
  padding-bottom: 0.35rem;
}
.sr-section-shadow {
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.sr-section-body-padding {
  padding: 0.5rem 2rem 1rem 2rem;
}

.spr-overflow-tab-flyout {
  margin-top: -1px;
  width: auto;
  padding: 0px;
  border: none;
  background: none;
  z-index: 2;
  -webkit-box-shadow: 0px 10px 14px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 12px 10px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 12px 10px 0px rgba(0, 0, 0, 0.3);
}
nav.spr-overflow-tab-flyout-tabs {
  box-sizing: border-box;
  width: 100%;
  padding: 1em;
  background-color: #c6c8c9;
  border: 1px solid #a6a8ab;
  border-top-color: #c6c8c9;
}
ul.spr-overflow-tab-flyout-tab-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
li.spr-overflow-tab-flyout-tab-list-item {
  user-select: none;
  overflow-x: hidden;
  cursor: pointer;
}
a.spr-overflow-tab-flyout-link {
  height: 100%;
  width: 100%;
  display: block;
  color: revert;
  cursor: inherit;
}
a.spr-overflow-tab-flyout-link div.spr-section-tab-container {
  background-color: #f1f1f0;
  border: 1px solid transparent;
}
a.spr-overflow-tab-flyout-link div.spr-section-tab-container:not(.spr-section-tab-container-disabled):hover {
  background-color: #fff;
}
a.spr-overflow-tab-flyout-link div.spr-section-tab-container.spr-section-tab-container-with-padding {
  padding: 1.2em 1em;
}
a.spr-overflow-tab-flyout-link div.spr-section-tab-container.spr-section-tab-container-selected {
  background-color: #fff;
}
a.spr-overflow-tab-flyout-link .spr-section-tab-title {
  font-size: 1.1em;
}
a.spr-overflow-tab-flyout-link:focus-visible.spr-overflow-tab-flyout-link-with-focus-override {
  outline: none;
}

div.spr-overflow-tab-container {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  background-color: #c6c8c9;
  border: 1px solid #a6a8ab;
  border-bottom-color: #c6c8c9;
  color: #5e5f61;
}
div.spr-overflow-tab-container:hover {
  color: #000;
}
div.spr-overflow-tab-container.spr-overflow-tab-container-with-padding {
  padding: 1em 0.4em 0.8em 1em;
}
div.spr-overflow-tab-title-row {
  min-height: 1.6em;
  display: flex;
  justify-content: space-between;
  padding-right: 0.3em;
  gap: 0.5em;
}
.spr-overflow-tab-title {
  display: block;
  margin: 0;
  flex: 1 0 auto;
  gap: 0.5em;
  padding: 0;
  font-weight: 900;
  color: #123044;
  font-size: 1.75em;
  line-height: 0.75;
}
.spr-overflow-tab-title.spr-overflow-tab-title-expanded {
  color: #000;
}
.spr-overflow-tab-title.spr-overflow-tab-title-pinned {
  font-size: 1.5em;
}
p.spr-overflow-tab-total-count {
  flex: 0 1 auto;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
}

a.spr-section-tab-link:focus-visible div.spr-section-tab-container {
  border: 1px solid black;
}
a.spr-section-tab-link:focus-visible div.spr-overflow-tab-container {
  border: 1px solid black;
}
a.spr-overflow-tab-flyout-link:focus-visible div.spr-section-tab-container {
  border: 1px solid black;
}
div.spr-section-tab-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #dcddde;
  border: 1px solid #c6c8c9;
  color: #5e5f61;
}
div.spr-section-tab-container:not(.spr-section-tab-container-disabled):hover {
  color: #000;
  background-color: rgba(220, 221, 222, 0.6);
}
div.spr-section-tab-container.spr-section-tab-container-with-padding {
  padding: 1em 1em 0.7em 1em;
}
div.spr-section-tab-container.spr-section-tab-container-selected {
  background-color: #f1f1f0;
}
div.spr-section-tab-container.spr-section-tab-container-selected.spr-section-tab-container-with-bottom-border-removal {
  border-bottom-color: #f1f1f0;
}
div.spr-section-tab-container.spr-section-tab-container-selected.spr-section-tab-container-dialog {
  background-color: #e5e6e7;
}
div.spr-section-tab-container.spr-section-tab-container-selected.spr-section-tab-container-dialog.spr-section-tab-container-with-bottom-border-removal {
  border-bottom-color: #e5e6e7;
}
div.spr-section-tab-container.spr-section-tab-container-disabled {
  cursor: default;
  color: #bbbdbf;
}
.spr-section-tab-title {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 900;
  font-size: 1.2em;
  color: #123044;
}
.spr-section-tab-title.spr-section-tab-title-selected {
  color: #000;
}
.spr-section-tab-title.spr-section-tab-title-pinned {
  font-size: 1em;
}
.spr-section-tab-title.spr-section-tab-title-disabled {
  color: #bbbdbf;
}
p.spr-section-tab-subtitle {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: inherit;
}
div.spr-section-tab-content-container {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
div.spr-section-tab-wrapper {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding-top: 0.3em;
  position: relative;
}
div.spr-section-tab-selection-bar {
  position: absolute;
  top: 0px;
  height: 0.6em;
  width: 100%;
  background-color: #123044;
}

div.spr-section-tabs-wrapper {
  box-sizing: border-box;
  width: 100%;
  isolation: isolate;
  font-size: 1rem;
}
div.spr-section-tabs-wrapper.spr-section-tabs-wrapper-pin-on-scroll {
  background-color: #f1f1f0;
}
div.spr-section-tabs-wrapper.spr-section-tabs-wrapper-pin-on-scroll.spr-section-tabs-wrapper-dialog {
  background-color: #e6e7e8;
}
div.spr-section-tabs-row-wrapper {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 0;
}
div.spr-section-tabs-row-wrapper.spr-section-tabs-row-wrapper-hidden {
  visibility: hidden;
}
div.spr-section-tabs-intersection-checker {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  width: 100%;
  visibility: hidden;
}
div.spr-section-tabs-spacer {
  box-sizing: border-box;
  width: 100%;
}
nav.spr-section-tabs {
  box-sizing: border-box;
  width: 100%;
  display: flex;
}
nav.spr-section-tabs.spr-section-tabs-with-leading-padding {
  padding-left: 1.5%;
}
nav.spr-section-tabs.spr-section-tabs-with-bottom-border {
  border-bottom: 1px solid #c6c8c9;
}
nav.spr-section-tabs.spr-section-tabs-centered {
  justify-content: center;
}
ul.spr-section-tab-list {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  bottom: -1px;
  list-style: none;
  max-width: fit-content;
}
ul.spr-section-tab-list .spr-section-tab-list-measure-width {
  max-width: none;
}
ul.spr-section-tab-list.spr-section-tab-list-without-bottom-border {
  bottom: 0;
}
li.spr-section-tab-list-item {
  box-sizing: border-box;
  user-select: none;
  flex: 0 0 auto;
  max-width: 24em;
  overflow-x: hidden;
  cursor: pointer;
}
a.spr-section-tab-link {
  border-top: 1px solid transparent;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: stretch;
}
a.spr-section-tab-link:focus-visible.spr-section-tab-link-with-focus-override {
  outline: none;
}
li.spr-section-tab-overflow-list-item {
  user-select: none;
  flex: 0 0 auto;
  overflow-x: hidden;
  cursor: pointer;
}
div.spr-section-tabs-trailing-content-container {
  flex: 0 0 auto;
  align-self: stretch;
  max-width: fit-content;
}
div.spr-section-tabs-trailing-content-container.spr-section-tabs-trailing-content-container-with-padding {
  padding-top: 0.3em;
}
#spr-overflow-flyout-tether {
  width: 100%;
  height: 100%;
}

.dropdown-flyout li.select-field-grid-list-item {
  padding: 0;
}
.dropdown-flyout li.option .select-field-grid-grid:hover p,
.dropdown-flyout li.option .select-field-grid-grid:hover span {
  color: #fff;
}
.select-field-grid-header-wrapper {
  background-color: #e6e7e8;
  border-bottom: 1px solid white;
}
.select-field-grid-header {
  padding: 0.6em 0.4em 0.5em 0.4em !important;
}
.select-field-grid-header p {
  font-size: 1rem;
  color: #123044;
  font-weight: 900;
}
.select-field-grid-sort-header {
  padding-left: 0em;
  padding-right: 0em;
}
.select-field-grid-sort-header:first-child {
  padding-top: 0;
}
.select-field-grid-sort-header:last-child {
  padding-bottom: 0;
}

.sidebar {
  background: #3f5978;
}
.sidebar.open {
  width: 385px;
  min-width: 385px;
  overflow-y: auto;
}
.sidebar .section-title {
  font-weight: 300;
  padding: 1em;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
}
.sidebar .section-title:hover {
  background-color: rgba(18, 48, 68, 0.5);
  color: #ffffff;
}
.sidebar .section-title.expanded {
  background-color: #123044;
}
.sidebar .section-title .count-circle {
  position: absolute;
  top: -0.8em;
  left: 0.8em;
  background-color: #3f5978;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.sidebar .section-title .section-title-text {
  text-transform: uppercase;
  font-family: "museo-sans", arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}
.sidebar .section-title a {
  color: rgba(255, 255, 255, 0.7);
}
.sidebar .section-title a[disabled] {
  color: #bbbdbf;
}
.sidebar .sidebar-handle .section-title {
  background: hsl(0, 0%, 10%) !important;
}
.sidebar .sidebar-handle .section-title .section-title-text {
  color: white;
  font-weight: bold;
  vertical-align: middle;
}

.sidebar-panel {
  background: #3f5978;
}
.sidebar-panel .section-title {
  font-weight: 300;
  padding: 1em;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
}
.sidebar-panel .section-title:hover {
  background-color: rgba(18, 48, 68, 0.5);
  color: #ffffff;
}
.sidebar-panel .section-title.expanded {
  background-color: #123044;
}
.sidebar-panel .section-title .count-circle {
  position: absolute;
  top: -0.8em;
  left: 0.8em;
  background-color: #3f5978;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.sidebar-panel .section-title .section-title-text {
  text-transform: uppercase;
  font-family: "museo-sans", arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}
.sidebar-panel .section-title a {
  color: rgba(255, 255, 255, 0.7);
}
.sidebar-panel .section-title a[disabled] {
  color: #bbbdbf;
}
.sidebar-panel .section-content {
  background: white;
  border-left: 1px solid #aaa;
}
.sidebar-panel .section-content > ul {
  margin: 0;
  padding: 13px 40px;
}
.sidebar-panel .section-content .section-content-cell {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0;
}
.sidebar-panel .section-content .section-content-cell:last-child {
  padding-bottom: 0.5rem;
}

.sidebar-panel-collapsible-section .section-content-group-header-text {
  background: #f1f1f0;
  text-align: center;
  cursor: pointer;
  padding: 0.5em 1rem;
}
.sidebar-panel-collapsible-section .section-content-group-header-text > h5 {
  display: flex;
}
.sidebar-panel-collapsible-section .section-content-group-header-text > h5 > span:first-child {
  flex-grow: 1;
}

.spr-signature-wrapper {
  display: flex;
  height: 8rem;
  border: 1rem solid rgba(163, 165, 168, 0.4);
  background-color: #fff;
}
.spr-signature-s-signature-entry-method {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-self: center;
  align-items: center;
  margin: 0 2rem;
  width: 100%;
  max-width: 36rem;
  border-bottom: 2px solid #84868a;
  padding-bottom: 0.2rem;
}
.spr-signature-s-signature-entry-method .spr-signature-s-signature-slash {
  font-size: 1.2em;
  font-weight: 500;
  color: #231f20;
}
.spr-signature-s-signature-entry-method .spr-signature-s-signature-text-field {
  border: 1px solid rgba(187, 189, 191, 0.7);
}

.spr-type-signature-dialog-content {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 1rem;
}
.spr-type-signature-font-samples-grid {
  overflow: auto;
  background-color: #fff;
  border: 1px solid #BBBDBF;
}
.spr-type-signature-font-sample-row {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.spr-type-signature-font-sample-row:not(:first-child) {
  border-top: 1px solid #BBBDBF;
}
.spr-type-signature-font-sample-container {
  display: flex;
  align-items: center;
  min-height: 5rem;
  white-space: nowrap;
  overflow-x: hidden;
}
.spr-type-signature-font-sample {
  line-height: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
  flex: 1 1 auto;
  padding: 0px 3rem;
}

.spr-stacked-buttons-wrapper {
  display: flex;
  flex-direction: column;
}
.spr-stacked-buttons-wrapper.spr-stacked-buttons-wrapper-fit-content {
  width: fit-content;
}

.input-validation-warning .date-time-picker.input-validation-error:not([disabled]),
.input-validation-warning .selecttree-field .input-validation-error:not([disabled]) {
  border: 1px solid #D7BB15 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23D7BB15%27%20%2F%3E%20%3C%2Fsvg%3E") !important;
}
.input-validation-warning .date-time-picker.input-validation-error:not([disabled]):hover,
.input-validation-warning .selecttree-field .input-validation-error:not([disabled]):hover {
  border: 1px solid #D7BB15 !important;
}
.input-container.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="text"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="file"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="password"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="text"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="password"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="email"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="url"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="date"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="month"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="time"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="datetime"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="datetime-local"] input[type="week"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="number"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="search"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="tel"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="color"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
input[type="button"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
button[type="button"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
textarea.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
select.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
select[multiple] + button.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning) {
  border: 1px solid #D7BB15 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23D7BB15%27%20%2F%3E%20%3C%2Fsvg%3E") !important;
}
.input-container.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="text"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="file"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="password"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="text"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="password"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="email"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="url"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="date"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="month"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="time"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="datetime"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="datetime-local"] input[type="week"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="number"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="search"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="tel"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="color"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
input[type="button"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
button[type="button"].input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
textarea.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
select.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover,
select[multiple] + button.input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning):hover {
  border: 1px solid #D7BB15 !important;
}
select[multiple].input-validation-warning:not(.input-validation-error):not([disabled]) + button {
  border: 1px solid #D7BB15 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23D7BB15%27%20%2F%3E%20%3C%2Fsvg%3E") !important;
}
select[multiple].input-validation-warning:not(.input-validation-error):not([disabled]) + button:hover {
  border: 1px solid #D7BB15 !important;
}
.field .input-validation-warning:not(.input-validation-error):not([disabled]):not(.full-input-warning),
.field select[multiple].input-validation-warning:not(.input-validation-error):not([disabled]) + button {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23D7BB15%27%20%2F%3E%20%3C%2Fsvg%3E") !important;
  background-size: 0.7em 0.7em;
  background-repeat: no-repeat;
  background-position: left top;
}
.token-field {
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.4em;
  align-items: center;
  border: 1px solid transparent;
  background-color: #fff;
  background-clip: padding-box;
  font-size: 1.2rem;
  color: #231f20;
  padding: 0.7em 0.6em;
  overflow-x: hidden;
  overflow-y: auto;
}
.token-field.disabled {
  cursor: default;
  background-color: rgba(255, 255, 255, 0.4);
  color: #bbbdbf;
}
.token-field:not(.disabled).required {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23C45900%27%20%2F%3E%20%3C%2Fsvg%3E");
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  background-position: -1px -1px;
}
.token-field.input-validation-error {
  border: 1px solid #c00;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23cc0000%27%20%2F%3E%20%3C%2Fsvg%3E");
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  background-position: -1px -1px;
}
.token-field:not(.input-validation-error):not(.disabled):hover {
  border: 1px solid rgba(187, 189, 191, 0.7);
}
.token-field.input-validation-warning {
  background-position: -1px -1px;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  border: 1px solid #D7BB15 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20version%3D%271.1%27%20id%3D%27Layer_1%27%20x%3D%270px%27%20y%3D%270px%27%20viewBox%3D%270%200%207%207%27%20enable-background%3D%27new%200%200%207%207%27%20xml%3Aspace%3D%27preserve%27%3E%20%3Cpolygon%20points%3D%270%2C7%200%2C0%207%2C0%27%20fill%3D%27%23D7BB15%27%20%2F%3E%20%3C%2Fsvg%3E") !important;
}
.token-field.input-validation-warning:hover {
  border: 1px solid #D7BB15 !important;
}
.token-field:focus-within {
  outline-color: #80bcff;
  outline-style: auto;
}
.token-field > input[type=text] {
  flex: 1 1 0;
  border: none;
  font-size: 1.2rem;
  line-height: normal;
  align-self: stretch;
  padding: 0px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.token-field > input[type=text]:focus {
  outline: none;
}
.token-field > input[type=text]:hover {
  border: none;
}
.token-field-token {
  cursor: pointer;
  font-weight: 500;
  line-height: normal;
  display: inline-block;
  max-width: 100%;
  text-decoration: underline;
  padding: 0.25rem;
}
.token-field-token:focus {
  outline: none;
  background-color: #d8e5f2;
  border-radius: 0.3em;
}
.token-field-token.token-field-token-disabled {
  cursor: default;
  color: #bbbdbf;
}
.token-field-token.token-error {
  background-color: #ff9999;
  border-radius: 0.3em;
}
.token-field-token.token-error:focus {
  background-color: #ff7070;
}
.token-field-token.token-warning {
  background-color: #f4e691;
  border-radius: 0.3em;
}
.token-field-token.token-warning:focus {
  background-color: #f0db62;
}

.spry-react-tree {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: white;
  flex-grow: 1;
  min-width: 0;
}
.spry-react-tree.spry-react-tree-disabled {
  background-color: rgba(255, 255, 255, 0.4);
  color: #bbbdbf;
}
.spry-react-tree.spry-react-tree-disabled .spry-react-tree {
  background-color: transparent;
}
.spry-react-tree .spry-react-tree-branch,
.spry-react-tree .spry-react-tree-image {
  background-image: url(data:image/png;base64,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);
}
.spry-react-tree .spry-react-tree-branch {
  display: flex;
  flex-direction: column;
  background-position: -90px 0;
  background-repeat: repeat-y;
}
.spry-react-tree .spry-react-tree-branch:last-child {
  background: none;
}
.spry-react-tree .spry-react-tree-branch > .spry-react-tree-node {
  height: 20px;
  display: flex;
  flex-direction: row;
}
.spry-react-tree .spry-react-tree-branch > .spry-react-tree-node > .spry-react-tree-node-content-container {
  text-decoration: none;
  cursor: default;
  flex-grow: 1;
  min-width: 0;
}
.spry-react-tree:focus,
.spry-react-tree:focus-visible {
  outline: none;
}
.spry-react-tree:focus-within .spry-react-tree-branch-active > .spry-react-tree-node {
  background-color: #d6e6f5;
}
.spry-react-tree .spry-react-tree-subtree {
  display: flex;
  flex-direction: row;
  margin-left: 18px;
}
.spry-react-tree .spry-react-tree-image {
  display: inline-block;
  min-width: 18px;
  width: 18px;
  height: 18px;
}
.spry-react-tree .spry-react-tree-image.disabled {
  filter: grayscale(1);
}
.spry-react-tree .spry-react-tree-image.spry-react-tree-expanded-image {
  background-position: -72px 0;
}
.spry-react-tree .spry-react-tree-image.spry-react-tree-collapsed-image {
  background-position: -54px 0;
}
.spry-react-tree .spry-react-tree-image.spry-react-tree-leaf-image {
  background-position: -36px 0;
}
.spry-react-selection-tree-content {
  display: flex;
  align-items: center;
  height: 20px;
}
.spry-react-selection-tree-content:hover {
  background-color: #eee;
  cursor: pointer;
}
.spry-react-selection-tree-content:hover .spry-react-selection-tree-content-text {
  text-decoration: underline;
}
.spry-react-selection-tree-content.spry-react-selection-tree-selected {
  background-color: #d6e6f5;
}
.spry-react-selection-tree-content .spry-react-tree-image.spry-react-selection-tree-folder-image {
  background-position: -54px -18px;
}
.spry-react-selection-tree-content .spry-react-selection-tree-content-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 0.25em;
}
.spry-react-checkbox-tree-content {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.spry-react-checkbox-tree-content .spry-react-checkbox-tree-content-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 0.125em;
}
.spry-react-checkbox-tree-content .spry-react-tree-image.spry-react-checkbox-tree-unchecked-image {
  background-position: 0 -18px;
}
.spry-react-checkbox-tree-content .spry-react-tree-image.spry-react-checkbox-tree-unchecked-image:hover {
  background-position-y: -36px;
}
.spry-react-checkbox-tree-content .spry-react-tree-image.spry-react-checkbox-tree-checked-image {
  background-position: -36px -18px;
}
.spry-react-checkbox-tree-content .spry-react-tree-image.spry-react-checkbox-tree-checked-image:hover {
  background-position-y: -36px;
}
.spry-react-checkbox-tree-content .spry-react-tree-image.spry-react-checkbox-tree-indeterminate-image {
  background-position: -18px -18px;
}
.spry-react-checkbox-tree-content .spry-react-tree-image.spry-react-checkbox-tree-indeterminate-image:hover {
  background-position-y: -36px;
}
.spry-react-selection-tree-icon {
  font-size: unset !important;
  margin-left: 0.25em;
  text-decoration: none !important;
  display: inline-block;
}
.spry-react-checkbox-tree-icon {
  font-size: unset !important;
  margin-left: 0.25em;
  text-decoration: none !important;
  display: inline-block;
}

.worklist-grid {
  flex-grow: 1;
}
.worklist-grid .grid-body {
  flex-basis: 0;
}
.worklist-grid .nested-grid .grid-body {
  flex-basis: auto;
}
.worklist-grid .filter-tabs {
  overflow: auto;
  flex-basis: 0;
  flex-grow: 1;
}
@media screen and (min-width: 1062px) {
  .worklist-grid .filter-tabs:not(.closed) {
    width: 16rem;
  }
}
@media screen and (min-width: 1280px) {
  .worklist-grid .filter-tabs:not(.closed) {
    width: 18rem;
  }
}
@media screen and (min-width: 1420px) {
  .worklist-grid .filter-tabs:not(.closed) {
    width: 20rem;
  }
}
@media screen and (min-width: 1550px) {
  .worklist-grid .filter-tabs:not(.closed) {
    width: 22em;
  }
}
@media screen and (min-width: 1930px) {
  .worklist-grid .filter-tabs:not(.closed) {
    width: 24rem;
  }
}

.spr-labeled-yes-no-field--label-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.spr-labeled-yes-no-field--label-left > label {
  padding-bottom: 0;
}
.spr-yes-no-field input.switch {
  margin-left: -999em;
}
.spr-yes-no-field input.switch + span {
  position: relative;
  float: left;
  display: inline-block;
  width: 5em;
  height: 1.6em;
  line-height: 1.6em;
  text-indent: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.spr-yes-no-field input.switch + span:before,
.spr-yes-no-field input.switch + span:after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: "No";
  width: 5em;
  text-indent: 2.9em;
  color: white;
  background-color: #123044;
  box-shadow: inset 0 0.2em 0 rgba(0, 0, 0, 0.3);
}
.spr-yes-no-field input.switch + span:after {
  content: " ";
  width: 1.98em;
  top: 1px;
  bottom: 1px;
  text-align: center;
  text-indent: 0;
  margin-left: 1px;
  color: white;
  background-color: white;
  box-shadow: inset 0 -0.2em 0 rgba(0, 0, 0, 0.2);
  transition: all 100ms ease-in;
}
.spr-yes-no-field input.switch:checked + span:before {
  content: "Yes";
  text-indent: 0.6em;
  color: white;
  background-color: #A85200;
}
.spr-yes-no-field input.switch:checked + span:after {
  margin-left: 2.93em;
  color: white;
}
.spr-yes-no-field input.switch:focus + span {
  outline: #80bcff solid 1px;
  box-shadow: 0 0 1px 2px #80bcff;
  color: #000;
}
.spr-yes-no-field input.switch:disabled + span {
  opacity: 0.6;
  cursor: default;
}


/*# sourceMappingURL=678.ed3ca97e1fc1e6cd752c.css.map*/