.alert_alert-base__3z1R9,
.alert_alert__3Lmyp {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}

.alert_alert-end__kpqkN {
  justify-content: flex-end;
}

.alert_alert-skin__1OOFP,
.alert_alert__3Lmyp {
  padding: var(--agnostic-side-padding);
  background: var(--agnostic-gray-light);
}

.alert_alert-icon__3APuW {
  color: var(--agnostic-gray-mid-dark);
  -webkit-margin-end: var(--fluid-8);
          margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert_alert-border-top__1lOs3 {
  border-top: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert_alert-border-left__ouMUy {
  border-left: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert_alert-border-bottom__2OqBM {
  border-bottom: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert_alert-border-right__H7PpC {
  border-right: var(--fluid-8) solid var(--agnostic-gray-mid-dark);
}

.alert_alert-border-all__1Wu31 {
  border: var(--fluid-2) solid var(--agnostic-gray-mid-dark);
}

.alert_alert-rounded__2G5Zx {
  border-radius: 0.25rem;
  border-radius: var(--agnostic-alert-radius, var(--agnostic-radius, 0.25rem));
}

.alert_alert-dark__3NRwP {
  color: var(--agnostic-light);
  background: var(--agnostic-dark);
}

.alert_alert-dark__3NRwP .alert_alert-icon__3APuW,
.alert_alert-dark__3NRwP {
  color: var(--agnostic-light);
}

.alert_alert-warning__1UjKC {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

.alert_alert-warning-icon__3VqSj {
  color: var(--agnostic-warning-border-accent);
  -webkit-margin-end: var(--fluid-8);
          margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert_alert-warning__1UjKC.alert_alert-border-top__1lOs3 {
  border-top-color: var(--agnostic-warning-border-accent);
}

.alert_alert-warning__1UjKC.alert_alert-border-left__ouMUy {
  border-left-color: var(--agnostic-warning-border-accent);
}

.alert_alert-warning__1UjKC.alert_alert-border-bottom__2OqBM {
  border-bottom-color: var(--agnostic-warning-border-accent);
}

.alert_alert-warning__1UjKC.alert_alert-border-right__H7PpC {
  border-right-color: var(--agnostic-warning-border-accent);
}

.alert_alert-warning__1UjKC.alert_alert-border-all__1Wu31 {
  border: var(--fluid-2) solid var(--agnostic-warning-border);
}

.alert_alert-info__1Nbns {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.alert_alert-info-icon__28-bi {
  color: var(--agnostic-primary-dark);
  -webkit-margin-end: var(--fluid-8);
          margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert_alert-info__1Nbns.alert_alert-border-top__1lOs3 {
  border-top-color: var(--agnostic-primary-dark);
}

.alert_alert-info__1Nbns.alert_alert-border-left__ouMUy {
  border-left-color: var(--agnostic-primary-dark);
}

.alert_alert-info__1Nbns.alert_alert-border-bottom__2OqBM {
  border-bottom-color: var(--agnostic-primary-dark);
}

.alert_alert-info__1Nbns.alert_alert-border-right__H7PpC {
  border-right-color: var(--agnostic-primary-dark);
}

.alert_alert-info__1Nbns.alert_alert-border-all__1Wu31 {
  border: var(--fluid-2) solid var(--agnostic-primary-border);
}

.alert_alert-error__256V2 {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

.alert_alert-error-icon__3itNM {
  color: var(--agnostic-error-dark);
  -webkit-margin-end: var(--fluid-8);
          margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert_alert-error__256V2.alert_alert-border-top__1lOs3 {
  border-top-color: var(--agnostic-error-dark);
}

.alert_alert-error__256V2.alert_alert-border-left__ouMUy {
  border-left-color: var(--agnostic-error-dark);
}

.alert_alert-error__256V2.alert_alert-border-bottom__2OqBM {
  border-bottom-color: var(--agnostic-error-dark);
}

.alert_alert-error__256V2.alert_alert-border-right__H7PpC {
  border-right-color: var(--agnostic-error-dark);
}

.alert_alert-error__256V2.alert_alert-border-all__1Wu31 {
  border: var(--fluid-2) solid var(--agnostic-error-border);
}

.alert_alert-success__1If5A {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.alert_alert-success-icon__1pc77 {
  color: var(--agnostic-action-dark);
  -webkit-margin-end: var(--fluid-8);
          margin-inline-end: var(--fluid-8);

  /* Ensures our icon doesn't flex grow or shrink */
  flex: 0 0 var(--fluid-24);
}

.alert_alert-success__1If5A.alert_alert-border-top__1lOs3 {
  border-top-color: var(--agnostic-action-dark);
}

.alert_alert-success__1If5A.alert_alert-border-left__ouMUy {
  border-left-color: var(--agnostic-action-dark);
}

.alert_alert-success__1If5A.alert_alert-border-bottom__2OqBM {
  border-bottom-color: var(--agnostic-action-dark);
}

.alert_alert-success__1If5A.alert_alert-border-right__H7PpC {
  border-right-color: var(--agnostic-action-dark);
}

.alert_alert-success__1If5A.alert_alert-border-all__1Wu31 {
  border: var(--fluid-2) solid var(--agnostic-action-border);
}

/**
 * This is not in toast.css because it's actually applied on the Alert child element
 * conditionally if the Alert is a Toast alert :-)
 */
.alert_alert-toast-shadow__2yOno {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 6%), 0 3px 8px 0 rgb(0 0 0 / 7%), 0 6px 18px 0 rgb(0 0 0 / 6%);
}

.toast_alert-toast__-SXBQ {
  min-width: 19rem;
  max-width: 100%;
  position: fixed;
  z-index: 1100;
  font-size: var(--agnostic-small);

  /* Optimized to match with the height created when we have a
  24px icon. If no icon, this preserves the toast height. */
  line-height: var(--fluid-24);
  padding: 0;

  /* We use bottom: 0, left: 0 etc., so this
  actually pushes the toast away from edge */
  margin: var(--fluid-16);
}

.alert_alertBase__Wy6wL {
}
.alert_alert__1rDvL {
}
.alert_alertIcon__NH7Xe {
}
.alert_alertRounded__2l75Z {
}
.alert_alertDark__1zCqO {
}
.alert_alertInfo__1QdES {
}
.alert_alertInfoIcon__3Y1I4 {
}
.alert_alertSuccess__VJUgt {
}
.alert_alertSuccessIcon__3Jce2 {
}
.alert_alertError__179hY {
}
.alert_alertErrorIcon__xPaWo {
}
.alert_alertWarning__10CgC {
}
.alert_alertWarningIcon__2Rl39 {
}
.alert_alertBorderAll__24WX1 {
}
.alert_alertBorderTop__SH469 {
}
.alert_alertBorderBottom__18jns {
}
.alert_alertBorderLeft__32vKD {
}
.alert_alertBorderRight__1NYkS {
}
.alert_toastShadow__3ikwC {
}
.alert_alertToast__jfkB_ {
}

.dialog_dialog__RtTNh,
.dialog_dialog-overlay__1xDZS {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.dialog_dialog__RtTNh {
  z-index: 1001;
  display: flex;
}

.dialog_dialog__RtTNh[aria-hidden="true"] {
  display: none;
}

.dialog_dialog-overlay__1xDZS {
  background-color: rgb(50 50 50 / 60%);
  -webkit-animation: dialog_fade-in__12hqx var(--agnostic-timing-fast) both;
          animation: dialog_fade-in__12hqx var(--agnostic-timing-fast) both;
}

.dialog_dialog-content__1_TyN {
  background-color: var(--agnostic-light);
  margin: auto;
  z-index: 1001;
  position: relative;
  padding: var(--fluid-16);
  max-width: 90%;
  width: 600px;
  border-radius: var(--agnostic-radius);
}

.dialog_dialog-fade-in__6tcqB {
  -webkit-animation: dialog_fade-in__12hqx var(--agnostic-timing-fast) both;
          animation: dialog_fade-in__12hqx var(--agnostic-timing-fast) both;
}

.dialog_dialog-slide-up__27z7Z {
  -webkit-animation: dialog_slide-up__1ohif var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
          animation: dialog_slide-up__1ohif var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
}

/**
 * Cannot use two separate CSS classes with animation: foo, bar
 * as the later class will overwrite the first (so this combines)
 */
.dialog_dialog-slide-up-fade-in__YOzT3 {
  -webkit-animation:
    dialog_fade-in__12hqx var(--agnostic-timing-fast) both,
    dialog_slide-up__1ohif var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
          animation:
    dialog_fade-in__12hqx var(--agnostic-timing-fast) both,
    dialog_slide-up__1ohif var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
}

@media screen and (min-width: 700px) {
  .dialog_dialog-content__1_TyN {
    padding: var(--fluid-32);
  }
}

@-webkit-keyframes dialog_fade-in__12hqx {
  from {
    opacity: 0%;
  }
}

@keyframes dialog_fade-in__12hqx {
  from {
    opacity: 0%;
  }
}

@-webkit-keyframes dialog_slide-up__1ohif {
  from {
    transform: translateY(10%);
  }
}

@keyframes dialog_slide-up__1ohif {
  from {
    transform: translateY(10%);
  }
}

/* Shared with AgnosticUI close buton so only need positioning and transition */
.dialog_dialog-close__1v3Uo {
  position: absolute;
  top: var(--fluid-8);
  right: var(--fluid-8);
}

@media (prefers-reduced-motion), (update: slow) {
  .dialog_dialog-slide-up-fade-in__YOzT3,
  .dialog_dialog-fade-in__6tcqB,
  .dialog_dialog-slide-up__27z7Z,
  .dialog_dialog-content__1_TyN {
    transition-duration: 0.001ms !important;
  }
}

@media only screen and (min-width: 576px) {
  .dialog_dialog-close__1v3Uo {
    top: var(--fluid-12);
    right: var(--fluid-12);
  }
}

@media screen and (min-width: 768px) {
  .dialog_dialog-close__1v3Uo {
    top: var(--fluid-16);
    right: var(--fluid-16);
  }
}

.drawer_drawer-start__21yM- {
  right: initial;
}

.drawer_drawer-start__21yM-[aria-hidden] {
  transform: none;
}

.drawer_drawer-end__2tA2H {
  left: initial;
}

.drawer_drawer-end__2tA2H[aria-hidden] {
  transform: none;
}

.drawer_drawer-top__3r67F {
  bottom: initial;
  transform: none;
}

.drawer_drawer-top__3r67F[aria-hidden] {
  transform: none;
}

.drawer_drawer-bottom__2zvvu {
  top: initial;
  transform: none;
}

.drawer_drawer-bottom__2zvvu[aria-hidden] {
  transform: none;
}

.drawer_drawer-content__sC-2e {
  margin: initial;
  max-width: initial;
  border-radius: initial;
}

.drawer_drawer-start__21yM- .drawer_drawer-content__sC-2e,
.drawer_drawer-end__2tA2H .drawer_drawer-content__sC-2e {
  width: 25rem;
}

.drawer_drawer-top__3r67F .drawer_drawer-content__sC-2e,
.drawer_drawer-bottom__2zvvu .drawer_drawer-content__sC-2e {
  height: 25vh;
  width: 100%;
}

.dialog_dialog__1t2tm {
}

.dialog_dialogOverlay__2JDbA {
}

.dialog_dialogContent__1GprN {
}

.dialog_dialogCloseUpperRight__XaOwH {
}

.dialog_dialogFadeIn__15-hV {
}

.dialog_dialogSlideUp__2D3le {
}

.dialog_dialogSlideUpFadeIn__mGH0e {
}

/* DRAWER MODULES */
.dialog_drawerStart__1vF8U {
}

.dialog_drawerEnd__EnifB {
}

.dialog_drawerTop__13fmi {
}

.dialog_drawerBottom__faI0U {
}

.dialog_drawerContent__3HdF3 {

}

.avatar_avatar__1vO9k,
.avatar_avatar-base__3albJ {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar_avatar__1vO9k,
.avatar_avatar-skin__3oROi {
  width: var(--fluid-40);
  height: var(--fluid-40);
  max-width: 100%;
  background: var(--agnostic-gray-extra-light);
  border-radius: 50%;
}

.avatar_avatar-square__3gI73 {
  border-radius: 0;
}

.avatar_avatar-rounded__1Im56 {
  border-radius: var(--agnostic-radius);
}

.avatar_avatar-small__E4tJd {
  font-size: var(--fluid-12);
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.avatar_avatar-large__1EpJ7 {
  width: var(--fluid-48);
  height: var(--fluid-48);
}

.avatar_avatar-xlarge__2jFzG {
  font-size: var(--fluid-20);
  width: var(--fluid-64);
  height: var(--fluid-64);
}

.avatar_avatar__1vO9k::before {
  content: attr(data-text);
}

.avatar_avatar-image__80k7O {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar_avatar-info__THmoT {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.avatar_avatar-warning__OUn52 {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

.avatar_avatar-success__3pim3 {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.avatar_avatar-error__v5Hp3 {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

/* Must come after avatar-success, avatatar-warning, etc. so specificity is higher */
.avatar_avatar-transparent__1mJxa {
  background: transparent;
}

.avatar_avatar-group__2YZK4 {
  display: flex;
  flex-direction: row;

  /* TBD -- should we stack these on mobile? */
}

/* Helpful for Vue / Svelte SFC where the .avatar child will not be a global
but CSS Modules class. Unfortunately, it means those have to be spans though.
This should be ok -- it's our Avatar.vue and Avatar.svelte, for example, that
respectively generate the <span> tag in their own templates (not the consumer) */
.avatar_avatar-group__2YZK4 > span,
.avatar_avatar-group__2YZK4 .avatar_avatar__1vO9k {
  border: 2px solid var(--agnostic-light);
}

.avatar_avatar-group__2YZK4 > span:not(:first-child),
.avatar_avatar-group__2YZK4 .avatar_avatar__1vO9k:not(:first-child) {
  -webkit-margin-start: calc(-1 * var(--fluid-10));
          margin-inline-start: calc(-1 * var(--fluid-10));
}

.avatar_avatar__3by-W {
}

.avatar_avatarBase__2jlJq {
}

.avatar_avatarSquare__2ek41 {
}

.avatar_avatarRounded__rr0xx {
}

.avatar_avatarSmall__1Srdl {
}
.avatar_avatarLarge__2RUMu {
}
.avatar_avatarXlarge__12t47 {
}

.avatar_avatarImage__hMrCZ {
}

.avatar_avatarInfo__3NPqL {
}

.avatar_avatarWarning__1dO7o {
}
.avatar_avatarSuccess__1uFEv {
}
.avatar_avatarError__2nRNR {
}

.avatar_avatarTransparent__1Q4Nu {
}

.avatar_avatarTransparent__1Q4Nu {
}

.avatar_avatarGroup__3IvHH {
}

.breadcrumb_breadcrumb__11ise {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  white-space: nowrap;
  list-style: none;
}

.breadcrumb_breadcrumb-item__20W2f + .breadcrumb_breadcrumb-item__20W2f {
  -webkit-padding-start: var(--fluid-6);
          padding-inline-start: var(--fluid-6);
}

.breadcrumb_breadcrumb-item__20W2f + .breadcrumb_breadcrumb-item__20W2f::before {
  -webkit-padding-end: var(--fluid-6);
          padding-inline-end: var(--fluid-6);
  color: var(--agnostic-gray-mid-dark);
  content: "\203A";
}

.breadcrumb_breadcrumb-slash__2IkbC .breadcrumb_breadcrumb-item__20W2f + .breadcrumb_breadcrumb-item__20W2f::before {
  content: "\0002f";
}

.breadcrumb_breadcrumb-arrow__12eQl .breadcrumb_breadcrumb-item__20W2f + .breadcrumb_breadcrumb-item__20W2f::before {
  content: "\02192";
}

.breadcrumb_breadcrumb-bullet__BaTE1 .breadcrumb_breadcrumb-item__20W2f + .breadcrumb_breadcrumb-item__20W2f::before {
  content: "\02022";
}

.breadcrumb_breadcrumb__vD0vc {
}

.breadcrumb_breadcrumbItem__3BL5U {
}

.breadcrumb_breadcrumbArrow__2E1_R {
}

.breadcrumb_breadcrumbBullet__3KjN2 {
}

.breadcrumb_breadcrumbSlash__26M8h {
}

.button-core_btn-base__3W2jX {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition-property: all;
  transition-duration: var(--agnostic-timing-medium);
}

.button-core_btn__34dOE {
  /* TODO test this fallback override syntax is correct */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition-property: all;
  transition-duration: var(--agnostic-timing-medium);
}

.button-core_btn-skin__3qubo,
.button-core_btn__34dOE {
  color: var(--agnostic-dark);
  color: var(--agnostic-btn-font-color, var(--agnostic-dark));
  background-color: var(--agnostic-gray-light);
  background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-color: var(--agnostic-gray-light);
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));

  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
  border-style: solid;
  border-width: 1px;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-family: var(--agnostic-font-family-body);
  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
  font-weight: 400;
  font-weight: var(--agnostic-btn-font-weight, 400);
  font-size: 1rem;
  font-size: var(--agnostic-btn-font-size, 1rem);

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: 1.25rem;
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  -webkit-padding-before: 0.5rem;
          padding-block-start: 0.5rem;
  -webkit-padding-before: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
  -webkit-padding-after: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-start: 0.75rem;
          padding-inline-start: 0.75rem;
  -webkit-padding-start: var(--agnostic-side-padding, 0.75rem);
          padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  -webkit-padding-end: 0.75rem;
          padding-inline-end: 0.75rem;
  -webkit-padding-end: var(--agnostic-side-padding, 0.75rem);
          padding-inline-end: var(--agnostic-side-padding, 0.75rem);
  text-decoration: none;
  text-align: center;
  outline: none;
}

.button-core_btn__34dOE:visited {
  color: var(--agnostic-dark);
  color: var(--agnostic-btn-font-color, var(--agnostic-dark));
}

.button-core_btn__34dOE:hover {
  opacity: 85%;
  text-decoration: none;
}

.button-core_btn__34dOE:active {
  text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
  text-decoration: none;
  transition-duration: 0s;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}

.button-core_btn__34dOE:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

/*
* Disabled State
*
* The disabled state uses the class .disabled, is-disabled,
* and the form attribute disabled="disabled".
* The use of !important is only added because this is a state
* that must be applied to all buttons when in a disabled state.
*/
.button-core_btn__34dOE.button-core_disabled__1CZmU,
.button-core_btn__34dOE:disabled {
  top: 0 !important;
  background: var(--agnostic-gray-mid-dark) !important;
  background: var(--agnostic-btn-disabled-bg, var(--agnostic-gray-mid-dark)) !important;
  text-shadow: 0 1px 1px rgb(255 255 255 / 100%) !important;

  /* primary, secondary, natural, all look same when disabled; and we don't want to
  have an inadvertant looking blue primary border when disabled so it's transparent */
  border-color: transparent;
  color: var(--agnostic-gray-dark) !important;
  color: var(--agnostic-btn-disabled-color, var(--agnostic-gray-dark)) !important;
  cursor: default !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  box-shadow: none !important;
  opacity: 80% !important;
}

.button-core_btn-primary__2kF7l {
  background-color: var(--agnostic-primary);
  background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
  border-color: var(--agnostic-primary);
  border-color: var(--agnostic-btn-primary, var(--agnostic-primary));
  color: var(--agnostic-light);
  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
}

/* Border and font is primary. When hovered, we invert with primary background and white font */
.button-core_btn-primary__2kF7l.button-core_btn-bordered__nUJJt {
  color: var(--agnostic-primary);
  color: var(--agnostic-btn-primary, var(--agnostic-primary));
}

.button-core_btn-primary__2kF7l.button-core_btn-bordered__nUJJt:hover,
.button-core_btn-primary__2kF7l.button-core_btn-bordered__nUJJt:focus {
  background-color: var(--agnostic-primary);
  background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
  color: var(--agnostic-light);
  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
}

.button-core_btn-primary__2kF7l:visited {
  color: var(--agnostic-light);
  color: var(--agnostic-btn-primary-color, var(--agnostic-light));
}

.button-core_btn-secondary__31ln9 {
  background-color: var(--agnostic-secondary);
  background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
  border-color: var(--agnostic-secondary);
  border-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
  color: var(--agnostic-light);
  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
}

/* Border and font is secondary. When hovered, we invert with secondary background and white font */
.button-core_btn-secondary__31ln9.button-core_btn-bordered__nUJJt {
  color: var(--agnostic-secondary);
  color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
}

.button-core_btn-secondary__31ln9.button-core_btn-bordered__nUJJt:hover,
.button-core_btn-secondary__31ln9.button-core_btn-bordered__nUJJt:focus {
  background-color: var(--agnostic-secondary);
  background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
  color: var(--agnostic-light);
  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
}

.button-core_btn-secondary__31ln9:visited {
  color: var(--agnostic-light);
  color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
}

/*
/**
  * Border Buttons
  */
.button-core_btn-bordered__nUJJt {
  border-width: 1px;
  background: transparent;
}

/**
  * Sizes
  */
.button-core_btn-large__3lsSf {
  font-size: calc(1rem + 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 3rem;
  padding: 0 3rem;
}

.button-core_btn-small__35eYy {
  font-size: calc(1rem - 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 2rem;
  padding: 0 2rem;
}

/**
  * Rounded
  */
.button-core_btn-rounded__--3Xq {
  border-radius: 0.25rem;
  border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
}

.button-core_btn-pill__32GtP {
  border-radius: 200px;
}

/*
  * Size Adjustment for equal height & width buttons
  *
  * Remove padding
  */
.button-core_btn-circle__1Anhv {
  border-radius: 100%;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
}

.button-core_btn-circle-large__2d6Yz {
  font-size: calc(1rem + 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  width: 3rem;
  height: 3rem;
}

.button-core_btn-circle-small__1j5sx {
  font-size: calc(1rem - 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  width: 2rem;
  height: 2rem;
}

/**
 * Button Block (stacked)
 */
.button-core_btn-block__3vjNJ {
  width: 100%;
}

/* This is a utility class used if you literally want to stack block buttons one after another.
Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
.button-core_btn-block-following__tCW-t {
  -webkit-margin-before: -1px;
          margin-block-start: -1px;
}

.button-core_btn-grouped__1D_wk {
  border-radius: 0.25rem;
  border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
}

.button-core_btn-grouped__1D_wk:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-margin-end: -1px;
          margin-inline-end: -1px;
}

.button-core_btn-grouped__1D_wk:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.button-core_btn-capsule__1k5rs {
  --padding-side: calc(var(--agnostic-side-padding, 0.75rem) * 1.5);

  border-radius: var(--agnostic-radius-capsule);
  -webkit-padding-start: var(--padding-side);
          padding-inline-start: var(--padding-side);
  -webkit-padding-end: var(--padding-side);
          padding-inline-end: var(--padding-side);
}

@media (prefers-reduced-motion), (update: slow) {
  .button-core_btn__34dOE,
  .button-core_btn__34dOE:focus {
    transition-duration: 0.001ms !important;
  }
}

/**
 * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
 * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
 */
:is(.button-core_btn-link__278S8, .button-core_btn-blank__3Q-w6) {
  font-family: var(--agnostic-font-family-body);
  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
  font-size: 1rem;
  font-size: var(--agnostic-btn-font-size, 1rem);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

/* Since blank buttons can be used for things like input addons we don't want to go crazy
on the side padding. As such, these have a good bit less then regular buttons. */
.button-core_btn-blank__3Q-w6 {
  --agnostic-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);

  -webkit-padding-start: var(--agnostic-btn-blank-side-padding);

          padding-inline-start: var(--agnostic-btn-blank-side-padding);
  -webkit-padding-end: var(--agnostic-btn-blank-side-padding);
          padding-inline-end: var(--agnostic-btn-blank-side-padding);
}

/* A button blank with link color text */
.button-core_btn-link__278S8 {
  color: var(--agnostic-primary);
  color: var(--agnostic-btn-primary, var(--agnostic-primary));
}

.button-core_btn-link__278S8:hover {
  cursor: pointer;
}

/**
 * Button Groups. See also button-core.css which has btn-grouped which needs to be
 * applied to the buttons that are projected within a button group.
 */
.button-group_btn-group__1L49p {
  display: inline-flex;
  flex-direction: row;
}

.button_btn__3CldF {
}
.button_btnBase__1sFNH {
  /* Note: .btn is same as .btn-base + .btn-skin -- so this is a means for
  folks to "opt-out" of skinned buttons should they want full skinning control. */
}
.button_primary__2B_L8 {
}
.button_secondary__3sHXN {
}
.button_block__fv-MD {
}
.button_group__3BFeX {
}
.button_circle__16jtj {
}
.button_rounded__3_wFE {
}
.button_grouped__2SsGk {
}
.button_bordered__tEl55 {
}
.button_capsule__19QUf {
}
.button_small__1Hlf_ {
}
.button_large__36fkD {
}
.button_blank__xzrsz {
}
.button_link__3Eq_T {
}
.button_iconLeft__2iWnm {
}
.button_iconRight__b8UDn {
}
.button_disabled__1oNEb {
}

/**
 * Cards
 *
 * I drew some inspiration from the article on media-query less cards:
 * https://css-tricks.com/how-to-make-a-media-query-less-card-component/
 */
.card_card__1GFrT,
.card_card-base__2zZTl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.card_card-border__2eeSw {
  border: 1px solid var(--agnostic-gray-light);
  border: 1px solid var(--agnostic-card-border-color, var(--agnostic-gray-light));
}

.card_card-rounded__3MYq2 {
  border-radius: 0.25rem;
  border-radius: var(--agnostic-radius, 0.25rem);
}

.card_card-shadow__349XA {
  box-shadow:
    0
    0.375rem
    0.5625rem
    rgb(6 6 6 / 7.5%),
    0 0
    1px
    rgb(5 5 5 / 10%);
  box-shadow:
    var(--agnostic-card-boxshadow1-offset-x, 0)
    var(--agnostic-card-boxshadow1-offset-y, 0.375rem)
    var(--agnostic-card-boxshadow1-blur, 0.5625rem)
    var(--agnostic-card-boxshadow1-color, rgb(6 6 6 / 7.5%)),
    var(--agnostic-card-boxshadow2-offset-x, 0) var(--agnostic-card-boxshadow2-offset-y, 0)
    var(--agnostic-card-boxshadow2-blur, 1px)
    var(--agnostic-card-boxshadow2-color, rgb(5 5 5 / 10%));
  border-radius: 0.25rem;
  border-radius: var(--agnostic-card-border-radius, var(--agnostic-radius, 0.25rem));
  overflow: hidden;
}

.card_card-shadow__349XA:hover {
  box-shadow:
    0
    0.375rem
    0.875rem
    rgb(4 4 4 / 10%),
    0 0
    2px
    rgb(3 3 3 / 10%);
  box-shadow:
    var(--agnostic-card-boxshadow1-offset-x, 0)
    var(--agnostic-card-boxshadow1-offset-y, 0.375rem)
    var(--agnostic-card-boxshadow1-blur, 0.875rem)
    var(--agnostic-card-boxshadow1-color, rgb(4 4 4 / 10%)),
    var(--agnostic-card-boxshadow2-offset-x, 0) var(--agnostic-card-boxshadow2-offset-y, 0)
    var(--agnostic-card-boxshadow2-blur, 2px)
    var(--agnostic-card-boxshadow2-color, rgb(3 3 3 / 10%));
}

/**
 * Animates the y position and box shadow on hover
 */
.card_card-animated__3il6t {
  transition:
    box-shadow ease-out 5s,
    transform var(--agnostic-timing-fast)
    cubic-bezier(
      0.39,
      0.575,
      0.565,
      1);
  transition:
    box-shadow ease-out 5s,
    transform var(--agnostic-timing-fast)
    cubic-bezier(
      var(--agnostic-card-cubic-1, 0.39),
      var(--agnostic-card-cubic-2, 0.575),
      var(--agnostic-card-cubic-3, 0.565),
      var(--agnostic-card-cubic-4, 1)
    );
}

.card_card-animated__3il6t:hover {
  transform: translateY(-3px);
  transform: translateY(var(--agnostic-card-translate-y-hover, -3px));
  transition:
    box-shadow ease-out var(--agnostic-timing-fast),
    transform var(--agnostic-timing-slow)
    cubic-bezier(
      0.39,
      0.575,
      0.565,
      1);
  transition:
    box-shadow ease-out var(--agnostic-timing-fast),
    transform var(--agnostic-timing-slow)
    cubic-bezier(
      var(--agnostic-card-cubic-1, 0.39),
      var(--agnostic-card-cubic-2, 0.575),
      var(--agnostic-card-cubic-3, 0.565),
      var(--agnostic-card-cubic-4, 1)
    );
}

@media (prefers-reduced-motion), (update: slow) {
  .card_card-animated__3il6t,
  .card_card-animated__3il6t:hover {
    transition-duration: 0.001ms !important;
  }
}

.card_card-stacked__MHa5G {
  flex-direction: column;
}

.card_card-success__1-xfU {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.card_card-info__XL9Mn {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.card_card-error__71CpH {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

.card_card-warning__4vffR {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

.card_card__3m55h {
}

.card_cardBorder__1fhW7 {
}

.card_cardRounded__2SnM6 {
}

.card_cardShadow__3OnOp {
}

.card_cardSuccess__4Omi1 {
}

.card_cardInfo__3RORe {
}

.card_cardWarning__31GYv {
}

.card_cardError__2Bp5x {
}

.card_cardAnimated__23RNu {
}

.card_cardStacked__17lie {
}

.card_cardBase__25D3y {
}

/**
 * These radio and checkbox customizations are an amalgamation of various resources I've
 * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
 * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
 * of inclusive hiding and custom radio/checkbox inputs.
 */
.choice-input_checkbox-group__vbhon,
.choice-input_radio-group__CMLUO {
  --width-28: calc(7 * var(--fluid-4)); /* 1.75rem/28px */

  border: 1px solid var(--agnostic-gray-light);

  border: 1px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
  padding: var(--fluid-24);
  padding-top: var(--fluid-14);
  border-radius: var(--fluid-8);
}

.choice-input_checkbox-group-large__3j4Ix,
.choice-input_radio-group-large__2qFnn {
  padding: var(--width-28);
  padding-top: var(--fluid-16);
}

.choice-input_checkbox-legend__1FhCU,
.choice-input_radio-legend__3YsVP {
  padding: var(--fluid-2) var(--fluid-14);
  border-radius: var(--fluid-2);
}

/* Hiding technique from https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
 */
.choice-input_checkbox__1UPJv,
.choice-input_radio__aAlDi {
  position: absolute;
  width: var(--fluid-14);
  height: var(--fluid-14);
  opacity: 0%;
}

.choice-input_checkbox-small__8KluL,
.choice-input_radio-small__1jThT {
  width: var(--fluid-12);
  height: var(--fluid-12);
}

.choice-input_checkbox-large__-yYeN,
.choice-input_radio-large__1SlyN {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.choice-input_checkbox-label-wrap__qkbMb,
.choice-input_radio-label-wrap__39c7Q {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.choice-input_checkbox-label-wrap-inline__JGJpA,
.choice-input_radio-label-wrap-inline__zpMzL {
  display: inline-flex;
}

.choice-input_checkbox-label-wrap-inline__JGJpA:not(:last-child),
.choice-input_radio-label-wrap-inline__zpMzL:not(:last-child) {
  -webkit-margin-end: var(--fluid-8);
          margin-inline-end: var(--fluid-8);
}

/* These are not actual <label> elements but the <span> label copy elements */
.choice-input_checkbox-label-copy__3L4cB,
.choice-input_radio-label-copy__39C7V,
.choice-input_checkbox-label__3gK7F,
.choice-input_radio-label__refva {
  display: inline-flex;
  position: relative;
  align-items: center;
  flex-wrap: wrap;
}

.choice-input_checkbox-label-copy-small__3xRK_,
.choice-input_radio-label-copy-small__lFDFF {
  font-size: var(--agnostic-small); /* 0.875rem */
}

.choice-input_checkbox-label-copy-large__12U9u,
.choice-input_radio-label-copy-large__1CYvC {
  font-size: calc(var(--agnostic-body) + 2px); /* 1rem + 2px (~18px) */
}

/* The checkmark itself */
.choice-input_checkbox-label__3gK7F::after {
  content: "";
  position: absolute;
  left: var(--fluid-6);
  top: 1px;
  width: var(--fluid-6);
  height: var(--fluid-12);
  border: solid var(--agnostic-light);
  border-width: 0 var(--fluid-2) var(--fluid-2) 0;
  transform-origin: center center;
  transform: rotate(40deg) scale(0);
  transition-property: border, background-color, transform;
  transition-duration: var(--agnostic-timing-fast);
  transition-timing-function: ease-in-out;
}

.choice-input_checkbox-label__3gK7F::before,
.choice-input_radio-label__refva::before {
  content: "";
  display: inline-block;
  -webkit-margin-end: 0.75rem;
          margin-inline-end: 0.75rem;
  -webkit-margin-end: var(--agnostic-checkbox-spacing-end, 0.75rem);
          margin-inline-end: var(--agnostic-checkbox-spacing-end, 0.75rem);
  transition: var(--agnostic-timing-fast) ease-out all;
}

/* Since we build up the radio size outwardly, it's naturally larger then the checkboxes
 so we add a multiplyer to even those out initially */
.choice-input_checkbox-label__3gK7F::before {
  border: 2px solid var(--agnostic-gray-light);
  border: 2px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
  width: var(--fluid-16);
  height: var(--fluid-16);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.choice-input_radio-label__refva::before {
  width: var(--fluid-14);
  height: var(--fluid-14);
  vertical-align: calc(-1 * var(--fluid-2));
  border-radius: 50%;
  border: var(--fluid-2) solid var(--agnostic-light);
  border: var(--fluid-2) solid var(--agnostic-checkbox-light, var(--agnostic-light));
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-gray-light);
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .choice-input_checkbox-label__3gK7F::after,
  .choice-input_checkbox-label__3gK7F::before,
  .choice-input_radio-label__refva::before {
    transition-duration: 0.001ms !important;
  }
}

.choice-input_checkbox-label-small__QsWgM::after {
  left: calc(1.25 * var(--fluid-4));
  top: 0;
}

.choice-input_checkbox-label-small__QsWgM::before {
  width: var(--fluid-14);
  height: var(--fluid-14);
}

.choice-input_radio-label-small__3sqNB::before {
  width: var(--fluid-12);
  height: var(--fluid-12);
}

.choice-input_checkbox-label-large__3KAhY::after {
  left: calc(1.75 * var(--fluid-4));
}

.choice-input_checkbox-label-large__3KAhY::before {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.choice-input_radio-label-large__3RfNp::before {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

/* the checked style using the :checked pseudo class */
.choice-input_radio__aAlDi:checked + .choice-input_radio-label__refva::before {
  background: #08a880;
  background: var(--agnostic-checkbox-fill-color, #08a880);
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-gray-light);
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
}

.choice-input_radio__aAlDi:focus + .choice-input_radio-label__refva::before {
  /* stylelint-disable-next-line max-line-length */
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-gray-light), 0 0 0 calc(1.5 * var(--fluid-2)) var(--agnostic-light), 0 0 0 calc(2.25 * var(--fluid-2)) var(--agnostic-focus-ring-color);
  box-shadow: 0 0 0 var(--fluid-2) var(--agnostic-checkbox-border-color, var(--agnostic-gray-light)), 0 0 0 calc(1.5 * var(--fluid-2)) var(--agnostic-light), 0 0 0 calc(2.25 * var(--fluid-2)) var(--agnostic-focus-ring-color);
}

.choice-input_checkbox__1UPJv:focus + .choice-input_checkbox-label__3gK7F::before {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  /* stylelint-disable-next-line max-line-length */
  outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style) var(--agnostic-focus-ring-outline-color);
}

.choice-input_checkbox__1UPJv:checked + .choice-input_checkbox-label__3gK7F::after {
  transform: rotate(40deg) scale(1);
}

.choice-input_checkbox__1UPJv:checked + .choice-input_checkbox-label__3gK7F::before {
  background: #08a880;
  background: var(--agnostic-checkbox-fill-color, #08a880);
  border: 2px solid #08a880;
  border: 2px solid var(--agnostic-checkbox-fill-color, #08a880);
}

/**
  * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
  * utilities.css if they're design requires it.
  */
.choice-input_checkbox-group-hidden__TxhYE,
.choice-input_radio-group-hidden__W5NNP {
  border: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-padding-before: 0;
          padding-block-start: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  -webkit-padding-after: 0;
          padding-block-end: 0;
}

/* Targets both the label container and the span label that is used
to style the custom radio / checkbox. Note it does NOT target the input
itself. */
.choice-input_checkbox__1UPJv[disabled] ~ .choice-input_checkbox-label-copy__3L4cB,
.choice-input_radio__aAlDi[disabled] ~ .choice-input_radio-label-copy__39C7V,
.choice-input_checkbox-label-wrap__qkbMb[class="disabled"],
.choice-input_radio-label-wrap__39c7Q[class="disabled"],
.choice-input_checkbox-label-wrap-inline__JGJpA[class="disabled"],
.choice-input_radio-label-wrap-inline__zpMzL[class="disabled"] {
  color: var(--agnostic-disabled-color) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.choice-input_choice-input-error__3DAZp {
  color: var(--agnostic-error);
  color: var(--agnostic-input-error-color, var(--agnostic-error));
}

@media screen and (-ms-high-contrast: active) {
  /* High contrast mode outline hacks */
  .choice-input_checkbox-label-wrap__qkbMb[class="disabled"],
  .choice-input_radio-label-wrap__39c7Q[class="disabled"],
  .choice-input_checkbox-label-wrap-inline__JGJpA[class="disabled"],
  .choice-input_radio-label-wrap-inline__zpMzL[class="disabled"] {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
}

.choice-input_checkbox-group__1D0z6 {
}
.choice-input_radio-group__GlW3E {
}
.choice-input_checkbox-group-large__17FYK {
}
.choice-input_radio-group-large__2Altx {
}
.choice-input_checkbox-legend__YHUN4 {
}
.choice-input_radio-legend__KdXLi {
}
.choice-input_radio__2zqVA {
}
.choice-input_checkbox__2k3l9 {
}
.choice-input_checkbox-small__180E5 {
}
.choice-input_radio-small__1TOOp {
}
.choice-input_checkbox-large__ZYeOu {
}
.choice-input_radio-large__2KMw3 {
}
.choice-input_checkbox-label-wrap__2mvoN {
}
.choice-input_radio-label-wrap__mblT- {
}
.choice-input_checkbox-label-wrap-inline__1cbVa {
}
.choice-input_radio-label-wrap-inline__iqnLZ {
}
.choice-input_checkbox-label__2kDzb {
}
.choice-input_radio-label__YW0Vt {
}
.choice-input_checkbox-label-copy__FHpcR {
}
.choice-input_radio-label-copy__2mZIV {
}
.choice-input_checkbox-label-small__ngDne {
}
.choice-input_radio-label-small__1h8gG {
}
.choice-input_checkbox-label-large__1kdf5 {
}
.choice-input_radio-label-large__18Mb6 {
}
.choice-input_checkbox-label-copy-small__37-_O {
}
.choice-input_radio-label-copy-small__3d08e {
}
.choice-input_checkbox-label-copy-large__a23Cn {
}
.choice-input_radio-label-copy-large__2YAJi {
}
.choice-input_checkbox-group-hidden__1j2ZG {
}
.choice-input_radio-group-hidden__1TgUn {
}
.choice-input_choice-input-error__1-5yk {
}

.close_close-button__3wH3Y {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: var(--fluid-24);
  height: var(--fluid-24);
}

.close_close-button__3wH3Y:hover,
.close_close-button__3wH3Y:active,
.close_close-button__3wH3Y:focus {
  background: none;

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
}

.close_close-button__3wH3Y:focus {
  box-shadow: 0 0 0 3px var(--agnostic-focus-ring-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.close_close__1KHY5 {
  width: var(--fluid-12);
  height: var(--fluid-12);
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
  flex-shrink: 0;
  color: currentColor;
}

.close_close-button__3wH3Y .close_close__1KHY5 {
  opacity: 80%;
  transition: opacity var(--agnostic-timing-medium);
}

@media (prefers-reduced-motion), (update: slow) {
  .close_close-button__3wH3Y:focus,
  .close_close-button__3wH3Y .close_close__1KHY5 {
    transition-duration: 0.001ms !important;
  }
}

.close_close-button-small__2iw_T {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.close_close-button-large__JeXTI {
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.close_close-button-xlarge__3C7QU {
  width: var(--fluid-40);
  height: var(--fluid-40);
}

.close_close-button-small__2iw_T > .close_close__1KHY5 {
  width: 0.5625rem;
  height: 0.5625rem;
}

.close_close-button-large__JeXTI > .close_close__1KHY5 {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.close_close-button-xlarge__3C7QU > .close_close__1KHY5 {
  width: var(--fluid-20);
  height: var(--fluid-20);
}

.close_close-button__3wH3Y:hover .close_close__1KHY5 {
  opacity: 100%;
}

.close_close__2eXdL {
}
.close_closeButton__1xNsd {
}
.close_closeButtonSmall__2OfYz {
}
.close_closeButtonLarge__16H-C {
}
.close_closeButtonXlarge__2_Glc {
}

.disclose_disclose__31LQs {
  -webkit-margin-after: var(--fluid-4);
          margin-block-end: var(--fluid-4);

  /* When this element is a direct child of a flex container with
  flex-direction: column it collapses similar to an inline element even though
  it's block. This helps prevent that. */
  width: 100%;
}

.disclose_disclose-title__2j7sC {
  display: block;
  cursor: pointer;
  font-weight: 600;
  padding: var(--fluid-8) var(--fluid-12);

  /* Required to position the icon absolutely */
  position: relative;
  color: inherit;
  transition: color var(--agnostic-timing-slow);
}

.disclose_disclose-panel__39Dqk {
  font-weight: 400;
  padding: var(--fluid-16);
}

.disclose_disclose-title__2j7sC,
.disclose_disclose-panel__39Dqk {
  margin: 0;
}

/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
.disclose_disclose-title__2j7sC::webkit-details-marker {
  display: none;
}

.disclose_disclose-bordered__1ooMp .disclose_disclose-title__2j7sC {
  border: 1px solid var(--agnostic-gray-light);
}

.disclose_disclose-bg__2Tmrf .disclose_disclose-title__2j7sC {
  background-color: var(--agnostic-gray-light);
}

.disclose_disclose-title__2j7sC:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.disclose_disclose-title__2j7sC::after {
  color: var(--agnostic-gray-dark);
  content: "\203A";
  position: absolute;
  right: var(--fluid-12);
  top: 0;
  bottom: 0;

  /* Chevron thinning :) */
  font-size: var(--fluid-32);
  line-height: 1;
  font-weight: 100;
  transition: transform var(--agnostic-timing-slow);
  transform: rotate(0);
}

@media (prefers-reduced-motion), (update: slow) {
  .disclose_disclose-title__2j7sC,
  .disclose_disclose-title__2j7sC:focus,
  .disclose_disclose-title__2j7sC::after {
    transition: none;
  }
}

.disclose_disclose__31LQs[open] > .disclose_disclose-title__2j7sC::after {
  transform: rotate(90deg);
}

.disclose_disclose__1Yexz {
}

.disclose_discloseTitle__3mwvJ {
}

.disclose_disclosePanel__JG00n {
}

.disclose_discloseBg__1IaM5 {
}

.disclose_discloseBorder__2thzb {
}

.divider_divider__33nMb {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  width: 100%;
}

.divider_divider__33nMb::before,
.divider_divider__33nMb::after {
  content: "";
  background-color: var(--agnostic-gray-mid);
  height: var(--fluid-2);
  flex-grow: 1;
}

.divider_divider-small__1k8mz::before,
.divider_divider-small__1k8mz::after {
  height: 1px;
}

.divider_divider-large__3rU08::before,
.divider_divider-large__3rU08::after {
  height: var(--fluid-4);
}

.divider_divider-xlarge__1tH8C::before,
.divider_divider-xlarge__1tH8C::after {
  height: var(--fluid-6);
}

.divider_divider-justify-end__1PzE-::after,
.divider_divider-justify-start__2g24A::before {
  flex-grow: 0;
  flex-basis: 3%;
}

.divider_divider-content__3IDBR {
  -webkit-padding-start: var(--fluid-16);
          padding-inline-start: var(--fluid-16);
  -webkit-padding-end: var(--fluid-16);
          padding-inline-end: var(--fluid-16);
}

.divider_divider-vertical__3La9L {
  height: auto;
  margin: 0 var(--fluid-16);
  width: var(--fluid-16);
  flex-direction: column;
  align-self: stretch;
}

.divider_divider-vertical__3La9L::before,
.divider_divider-vertical__3La9L::after {
  width: var(--fluid-2);
}

.divider_divider-vertical__3La9L.divider_divider-small__1k8mz::before,
.divider_divider-vertical__3La9L.divider_divider-small__1k8mz::after {
  width: 1px;
}

.divider_divider-vertical__3La9L.divider_divider-large__3rU08::before,
.divider_divider-vertical__3La9L.divider_divider-large__3rU08::after {
  width: var(--fluid-4);
}

.divider_divider-vertical__3La9L.divider_divider-xlarge__1tH8C::before,
.divider_divider-vertical__3La9L.divider_divider-xlarge__1tH8C::after {
  width: var(--fluid-6);
}

.divider_divider-vertical__3La9L .divider_divider-content__3IDBR {
  -webkit-padding-start: var(--fluid-24);
          padding-inline-start: var(--fluid-24);
  -webkit-padding-end: var(--fluid-24);
          padding-inline-end: var(--fluid-24);

  /* Since we're vertical we need space from line above/below */
  -webkit-padding-before: var(--fluid-6);
          padding-block-start: var(--fluid-6);
  -webkit-padding-after: var(--fluid-6);
          padding-block-end: var(--fluid-6);
}

.divider_divider-warning__3rQuZ::before,
.divider_divider-warning__3rQuZ::after {
  background-color: var(--agnostic-warning-border);
}

.divider_divider-warning__3rQuZ .divider_divider-content__3IDBR {
  color: var(--agnostic-warning-border);
}

.divider_divider-error__297aV::before,
.divider_divider-error__297aV::after {
  background-color: var(--agnostic-error);
}

.divider_divider-error__297aV .divider_divider-content__3IDBR {
  color: var(--agnostic-error);
}

.divider_divider-success__2DAmz::before,
.divider_divider-success__2DAmz::after {
  background-color: var(--agnostic-action);
}

.divider_divider-success__2DAmz .divider_divider-content__3IDBR {
  color: var(--agnostic-action);
}

.divider_divider-info__1DAHt::before,
.divider_divider-info__1DAHt::after {
  background-color: var(--agnostic-primary);
}

.divider_divider-info__1DAHt .divider_divider-content__3IDBR {
  color: var(--agnostic-primary);
}

.divider_divider__9_4S5 {
}
.divider_dividerVertical__3cTpa {
}
.divider_dividerContent__3Uwqi {
}

.divider_dividerStart__1Bi6E {
}
.divider_dividerEnd__3h_AX {
}

.divider_dividerInfo__2fK09 {
}
.divider_dividerSuccess__CDO_E {
}
.divider_dividerError__2m4_C {
}
.divider_dividerWarning__3I8Eg {
}

.divider_dividerSmall__3M5-n {
}
.divider_dividerLarge__2SqlM {
}
.divider_dividerXlarge__2R6QB {
}



.empty-state_empty-base__36Ja6,
.empty-state_empty__2t37A {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  text-align: center;
  width: 100%;
}

.empty-state_empty__2t37A {
  padding: calc(2 * var(--agnostic-side-padding));
  background: var(--agnostic-gray-extra-light);
}

.empty-state_empty-bordered__SSNFJ {
  background: transparent;
  border: 1px solid var(--agnostic-gray-light);
}

.empty-state_empty-rounded__1xJxl {
  border-radius: var(--agnostic-radius);
}

.empty-state_empty-actions__1cyAP {
  -webkit-margin-before: var(--spacing-24);
          margin-block-start: var(--spacing-24);
}

.empty-state_empty__1ounm {
}

.empty-state_emptyBordered__SdWFQ {
}

.empty-state_emptyRounded__-FoJj {
}

.empty-state_emptyActions__37VUL {
}

.header_header__3vJhF,
.header_header-base__29S3w {
  display: block;
}

.header_header-base__29S3w img,
.header_header__3vJhF img {
  max-width: 100%;
  height: auto;
}

.header_header__3vJhF,
.header_header-skin__1EOrb {
  background-color: var(--agnostic-light);
  background-color: var(--agnostic-header-background-color, var(--agnostic-light));
  box-shadow:
    0 1px
    5px 2px
    rgb(0 0 0 / 10%);
  box-shadow:
    var(--agnostic-header-box-shadow-hor, 0) var(--agnostic-header-box-shadow-ver, 1px)
    var(--agnostic-header-box-shadow-blur, 5px) var(--agnostic-header-box-shadow-spread, 2px)
    var(--agnostic-header-box-shadow-color, rgb(0 0 0 / 10%));
  font-family: var(--agnostic-font-family-body);
  font-family: var(--agnostic-header-font-family, var(--agnostic-font-family-body));
  border-bottom: 1px solid var(--agnostic-gray-light);
  border-bottom: 1px solid var(--agnostic-header-border-color, var(--agnostic-gray-light));
  -webkit-padding-before: 0.5rem;
          padding-block-start: 0.5rem;
  -webkit-padding-before: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
  -webkit-padding-after: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-start: var(--fluid-24);
          padding-inline-start: var(--fluid-24);
  -webkit-padding-end: var(--fluid-24);
          padding-inline-end: var(--fluid-24);
}

.header_header-content__23PLV {
  width: 960px;
  width: var(--agnostic-header-content-width, 960px);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: wrap column;
}

/**
 * If you make your header sticky, you should likely consider that jump links
 * e.g. <h1 id="Jump-Here">... will tuck underneath the header! Here's a recommendation
 * for how to circumnavigate this issue via scroll-margin-top:
  h1[id],
  h2[id],
  h3[id],
  h4[id],
  h5[id],
  h6[id] {
    scroll-margin-top: 80px;
  }
 * In this case I have a 64px tall header so I've added 16px for clearance -- you'll need
 * to curate your own use case, but scroll-margin-top is super useful for this use case.
 */

.header_header-sticky__X_xnH {
  position: relative;
  top: 0;
  z-index: 10;
}

@media (min-width: 960px) {
  .header_header-sticky__X_xnH {
    position: sticky;
  }

  .header_header-content__23PLV {
    flex-direction: row;
    justify-content: space-between;
  }

  .header_header-content-start__1t1o- {
    justify-content: flex-start;
  }

  .header_header-content-end__1EA9Q {
    justify-content: flex-end;
  }
}

/* Goes on the <ul> */
.headernav_header-nav__1uvoP {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 960px) {
  .headernav_header-nav__1uvoP {
    flex-direction: row;
  }
}

.headernavitem_header-nav-item__19Ko3 {
  display: inline-block;
}

.headernavitem_header-nav-item__19Ko3:not(:last-child) {
  -webkit-margin-end: initial;
          margin-inline-end: initial;
  -webkit-margin-after: var(--fluid-8);
          margin-block-end: var(--fluid-8);
}

.headernavitem_header-nav-item__19Ko3 a {
  color: var(--agnostic-font-color);
  color: var(--agnostic-header-color, var(--agnostic-font-color));
}

@media (min-width: 960px) {
  .headernavitem_header-nav-item__19Ko3:not(:last-child) {
    -webkit-margin-end: var(--fluid-32);
            margin-inline-end: var(--fluid-32);
    -webkit-margin-end: var(--agnostic-header-nav-spacing, var(--fluid-32));
            margin-inline-end: var(--agnostic-header-nav-spacing, var(--fluid-32));
    -webkit-margin-after: initial;
            margin-block-end: initial;
  }
}

.header_headerBase__1aTZf {
}

.header_header__3ZSjI {
}

.header_headerContent__2CSLo {
}

.header_headerContentStart__24-VN {
}

.header_headerContentEnd__2WIGz {
}

.header_sticky__SMFdH {
}

.header_headerNav__3JIcB {
}

.header_headerNavItem__144a_ {
}

.icon_icon-base__2wKjw {
  display: inline-flex;
  text-align: center;

  /* Ensures no "stretching" of icons to reach 100% of container's width */
  max-width: 100%;

  /* Ensure SVGs don't have click events -- typically we want enclosing button to handle */
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* We need to make both the span and svg same height (span .icon-svg) */
.icon_icon__HmWea,
.icon_icon-skin__1bimA {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.icon_icon-14__OqWaz {
  width: var(--fluid-14);
  height: var(--fluid-14);
}

.icon_icon-16__2BiFG {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.icon_icon-18__1tFiH {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.icon_icon-20__2eeCV {
  width: var(--fluid-20);
  height: var(--fluid-20);
}

.icon_icon-24__2Fhmi,
.icon_icon-svg-24__2WzRD {
  width: var(--fluid-24);
  height: var(--fluid-24);
}

.icon_icon-32__crpYU {
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.icon_icon-36__iLsHq {
  width: var(--fluid-36);
  height: var(--fluid-36);
}

.icon_icon-40__PtyLP {
  width: var(--fluid-40);
  height: var(--fluid-40);
}

.icon_icon-48__gBLhl {
  width: var(--fluid-48);
  height: var(--fluid-48);
}

.icon_icon-56__iVMRu {
  width: var(--fluid-56);
  height: var(--fluid-56);
}

.icon_icon-64__3gCiY {
  width: var(--fluid-64);
  height: var(--fluid-64);
}

.iconsvg_icon-svg__ohnxp {
  width: var(--fluid-16);
  height: var(--fluid-16);
  fill: currentColor;
}

.iconsvg_icon-svg-14__36VVU {
  width: var(--fluid-14);
  height: var(--fluid-14);
}

.iconsvg_icon-svg-16__1I53- {
  width: var(--fluid-16);
  height: var(--fluid-16);
}

.iconsvg_icon-svg-18__f9gqL {
  width: var(--fluid-18);
  height: var(--fluid-18);
}

.iconsvg_icon-svg-20__4JEQK {
  width: var(--fluid-20);
  height: var(--fluid-20);
}

.iconsvg_icon-svg-24__2Hhgk {
  width: var(--fluid-24);
  height: var(--fluid-24);
}

.iconsvg_icon-svg-32__2bLpJ {
  width: var(--fluid-32);
  height: var(--fluid-32);
}

.iconsvg_icon-svg-36__BiD1W {
  width: var(--fluid-36);
  height: var(--fluid-36);
}

.iconsvg_icon-svg-40__3_J9x {
  width: var(--fluid-40);
  height: var(--fluid-40);
}

.iconsvg_icon-svg-48__FAiL0 {
  width: var(--fluid-48);
  height: var(--fluid-48);
}

.iconsvg_icon-svg-56__2y5FS {
  width: var(--fluid-56);
  height: var(--fluid-56);
}

.iconsvg_icon-svg-64__1xhhH {
  width: var(--fluid-64);
  height: var(--fluid-64);
}

.iconsvg_icon-svg-info__1EgWm {
  color: var(--agnostic-primary);
}

.iconsvg_icon-svg-action__1Ew5m,
.iconsvg_icon-svg-success__OjWi_ {
  color: var(--agnostic-action);
}

.iconsvg_icon-svg-warning__2xt5j {
  color: var(--agnostic-warning-border-accent);
}

.iconsvg_icon-svg-error__3Muil {
  color: var(--agnostic-error);
}

.input_input-base__15FoB,
.input_input__2dEho {
  /* Note this cannot be user-select: none else mobile safari won't accept input:
  https://stackoverflow.com/questions/49889003/cannot-write-into-input-field-on-safari/49901069
   */
  -webkit-user-select: initial;
     -moz-user-select: initial;
          user-select: initial;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;

  /* Use the same color for the cursor */
  caret-color: currentColor;
}

.input_label__3oz8i,
.input_label-base__9Y4VH {
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: inherit;
}

/* Electing to scope these as opposed to doing :root level definitions */
.input_field-help__zVMda,
.input_field-help-large__UlxVs,
.input_field-help-small__FY1Jo,
.input_field-error__Bm7iM,
.input_field-error-large__1yzuZ,
.input_field-error-small__3Ts34,
.input_label-skin__2SBmg,
.input_label__3oz8i,
.input_input-addon-container__3xMdZ,
.input_input-small__1QZek,
.input_input-large__2jyu5,
.input_input-skin__1bJtB,
.input_input-underlined__2tg5q,
.input_input-underlined-bg__2oc1p,
.input_input__2dEho {
  color: var(--agnostic-dark);
  color: var(--agnostic-font-color, var(--agnostic-dark));
  font-family: var(--agnostic-font-family-body);
  font-weight: 300;
  font-weight: var(--agnostic-font-weight, 300);
  font-size: 1rem;
  font-size: var(--agnostic-font-size, 1rem);
  line-height: 1.25rem;
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  width: 100%;
  max-width: 100%;
}

.input_input-skin__1bJtB,
.input_input__2dEho {
  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
  border-style: solid;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  border-width: 1px;
  border-width: var(--agnostic-input-border-size, 1px);
  border-color: var(--agnostic-gray-light);
  border-color: var(--agnostic-input-border-color, var(--agnostic-gray-light));

  /* these can be overriden, but it might mess with the balance of the inputheights across variants */
  -webkit-padding-before: 0.5rem;
          padding-block-start: 0.5rem;
  -webkit-padding-before: var(--agnostic-input-vertical-pad, 0.5rem);
          padding-block-start: var(--agnostic-input-vertical-pad, 0.5rem);
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
  -webkit-padding-after: var(--agnostic-input-vertical-pad, 0.5rem);
          padding-block-end: var(--agnostic-input-vertical-pad, 0.5rem);
  -webkit-padding-start: 0.75rem;
          padding-inline-start: 0.75rem;
  -webkit-padding-start: var(--agnostic-input-side-padding, 0.75rem);
          padding-inline-start: var(--agnostic-input-side-padding, 0.75rem);
  -webkit-padding-end: 0.75rem;
          padding-inline-end: 0.75rem;
  -webkit-padding-end: var(--agnostic-input-side-padding, 0.75rem);
          padding-inline-end: var(--agnostic-input-side-padding, 0.75rem);

  /* Note we only want to set properties that we actually want
  to transition in. For example, if we transition "all", the
  inputs will "grow in" on page load—not a happy effect :) */
  transition-property: box-shadow;
  transition-duration: var(--agnostic-timing-medium);
  transition-duration: var(--agnostic-input-timing, var(--agnostic-timing-medium));
}

.input_label__3oz8i {
  display: inline-block;

  /* Provided --agnostic-input-vertical-pad isn't overriden we'll get 20px
  label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-margin-after: 0.375rem;
          margin-block-end: 0.375rem;
  -webkit-margin-after: var(--agnostic-input-label-pad, 0.375rem);
          margin-block-end: var(--agnostic-input-label-pad, 0.375rem);
  vertical-align: initial;
}

/* Reset field errors and help text to be 2px less then input font size */
.input_field-help__zVMda,
.input_field-error__Bm7iM {
  font-size: calc(1rem - 2px);
  font-size: calc(var(--agnostic-font-size, 1rem) - 2px);
}

.input_label-inline__1E5i6,
.input_input-inline__1myP9 {
  width: auto;
}

/* When inlined, the margin-block-end will throw the label off-center with adjacent input */
.input_label-inline__1E5i6 {
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0.75rem;
          margin-inline-end: 0.75rem;
  -webkit-margin-end: var(--agnostic-input-side-padding, 0.75rem);
          margin-inline-end: var(--agnostic-input-side-padding, 0.75rem);
}

/**
* Placeholder
*/

/* stylelint-disable-next-line */
.input_input__2dEho::-webkit-input-placeholder {
  color: currentColor;
  opacity: 50%;
  -webkit-transition: opacity var(--agnostic-timing-fast) ease-out;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/* stylelint-disable-next-line */
.input_input__2dEho::-moz-placeholder {
  color: currentColor;
  opacity: 50%;
  -moz-transition: opacity var(--agnostic-timing-fast) ease-out;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}
.input_input__2dEho::placeholder {
  color: currentColor;
  opacity: 50%;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/* stylelint-disable-next-line */
.input_input__2dEho::-ms-placeholder {
  color: currentColor;
  opacity: 50%;
  -ms-transition: opacity var(--agnostic-timing-fast) ease-out;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/* stylelint-disable-next-line */
.input_input__2dEho:-ms-placeholder {
  color: currentColor;
  opacity: 50%;
  -ms-transition: opacity var(--agnostic-timing-fast) ease-out;
  transition: opacity var(--agnostic-timing-fast) ease-out;
}

/**
* Underlined inputs
*/
.input_input-underlined__2tg5q {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-color: var(--agnostic-gray-mid-dark);
  border-color: var(--agnostic-input-underlined-color, var(--agnostic-gray-mid-dark));
  background-color: transparent;
}

.input_input-underlined-bg__2oc1p {
  background-color: var(--agnostic-gray-extra-light);
  background-color: var(--agnostic-input-underlined-bg-color, var(--agnostic-gray-extra-light));
}

/**
* Rounded inputs
*/
.input_input-rounded__37_rT {
  border-radius: 0.25rem;
  border-radius: var(--agnostic-radius, 0.25rem);
}

/**
 * Errors
 * We provide a class-based approach to setting errors which means we do
 * not support :invalid, so it requires custom use of html4 validation API
 * (see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
 * of the example in corresponding input.html file). The reason I elected to
 * not include :invalid, is it seems to result in "shouting" at the user as
 * I did not find an easy way to only kick in errors after a certain number
 * of characters have been type (blur is actually better but I did not
 * implement that in the contrived example).
 */
.input_label-error__1GiX1 {
  color: var(--agnostic-error);
  color: var(--agnostic-input-error-color, var(--agnostic-error));
}

.input_input-error__2isdr {
  border-color: var(--agnostic-error);
  border-color: var(--agnostic-input-error-color, var(--agnostic-error));
}

.input_label-error__1GiX1,
.input_field-error__Bm7iM,
.input_field-error-small__3Ts34,
.input_field-error-large__1yzuZ {
  color: var(--agnostic-error);
  color: var(--agnostic-input-error-color, var(--agnostic-error));
}

.input_field-help__zVMda,
.input_field-help-small__FY1Jo,
.input_field-help-large__UlxVs {
  color: var(--agnostic-gray-dark);
  color: var(--agnostic-input-help-color, var(--agnostic-gray-dark));
}

.input_field-help__zVMda,
.input_field-help-small__FY1Jo,
.input_field-help-large__UlxVs,
.input_field-error__Bm7iM,
.input_field-error-small__3Ts34,
.input_field-error-large__1yzuZ {
  display: inline-block;
  width: 100%;
  -webkit-margin-before: calc(0.5rem / 2);
          margin-block-start: calc(0.5rem / 2);
  -webkit-margin-before: calc(var(--agnostic-input-vertical-pad, 0.5rem) / 2);
          margin-block-start: calc(var(--agnostic-input-vertical-pad, 0.5rem) / 2);
}

/**
  * Sizes
  */
.input_input-large__2jyu5 {
  font-size: calc(1rem + 0.25rem);
  font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
  line-height: 1.6rem;
}

.input_field-help-large__UlxVs,
.input_field-error-large__1yzuZ {
  /* We initially remove -2px from font-size so setting to font-size essentially adds the 2px back */
  font-size: 1rem;
  font-size: var(--agnostic-font-size, 1rem);
}

.input_label-large__1eaYI {
  font-size: calc(1rem + 0.25rem);
  font-size: calc(var(--agnostic-font-size, 1rem) + 0.25rem);
}

.input_input-small__1QZek {
  font-size: calc(1rem - 0.25rem);
  font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
  line-height: 1rem;
}

.input_field-help-small__FY1Jo,
.input_field-error-small__3Ts34,
.input_label-small__1HU8T {
  font-size: calc(1rem - 0.25rem);
  font-size: calc(var(--agnostic-font-size, 1rem) - 0.25rem);
}

.input_input__2dEho:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

/* Set the focus to transparent when there's an error since we use
borders that visually conflict. */
.input_input-error__2isdr:focus {
  box-shadow: 0 0 0 3px transparent;
}

/*
* Disabled State
*
* The disabled state uses the class .disabled,
* and the form attribute disabled="disabled".
* The use of !important is only added because this is a state
* that must be applied to all inputs when in a disabled state.
*/
.input_input__2dEho.input_disabled__34VuT, 
.input_input__2dEho:disabled {
  background: var(--agnostic-disabled-bg) !important;
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-disabled-color) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

@media screen and (-ms-high-contrast: active) {
  /* High contrast mode outline hacks */

  /* styleint-disable-next-line no-descending-specificity  */
  .input_input__2dEho:disabled {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
}

/**
 * Input "has addon"
 */

.input_input-addon-container__3xMdZ {
  display: flex;
  position: relative;
  width: 100%;
  min-height: 100%;
}

.input_input-has-left-addon__3CfHm {
  padding-left: calc(var(--agnostic-side-padding) * 3);
}

.input_input-has-right-addon__snUpK {
  padding-right: calc(var(--agnostic-side-padding) * 3);
}

.input_input-addon-left__3Z4FD {
  left: var(--agnostic-input-side-padding);
}

.input_input-addon-right__2tj5z {
  right: var(--agnostic-input-side-padding);
}

@media (prefers-reduced-motion), (update: slow) {
  /* stylelint-disable selector-no-vendor-prefix */
  .input_input-skin__1bJtB,
  .input_input__2dEho,
  .input_input__2dEho::placeholder,
  .input_input__2dEho::-webkit-input-placeholder,
  .input_input__2dEho::-ms-placeholder,
  .input_input__2dEho:-ms-placeholder,
  .input_input__2dEho:focus {
    transition-duration: 0.001ms !important;
  }
}

/*
* Input addons e.g. icons inside the input
*/
.input_input-addon-right__2tj5z,
.input_input-addon-left__3Z4FD {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;

  /* This allows an icon to sit in the vertical center regardless
  of if we've applied input-large or input-small */
  min-height: 100%;
}

.input_input-addon-left__3Z4FD {
  left: var(--agnostic-input-side-padding);
}

.input_input-addon-right__2tj5z {
  right: var(--agnostic-input-side-padding);
}

.input_inputBase__28GtJ {
}

.input_input__1iomh {
}

.input_rounded__3GpJt {
}

.input_underlined__1hhRc {
}
.input_underlinedWithBackground__1HfW9 {
}

.input_leftAddon__2bnBg {
}

.input_inputHasLeftAddon__2emA9 {
}

.input_rightAddon__3V0l6 {
}

.input_inputHasRightAddon__3bDNm {
}

.input_inputSmall__G2FvJ {
}

.input_inputLarge__3qKL7 {
}

.input_invalid__3YsWM {
}

.input_label__2ACSJ {
}

.input_labelError__34Krg {
}

.input_labelSmall__27V5q {
}

.input_labelLarge__bc0cS {
}

.input_inputAddonContainer__31Moh {
}

.input_fieldError__lShGo {
}

.input_fieldErrorSmall__1JpDM {
}

.input_fieldErrorLarge__2hNml {
}

.input_fieldHelp__1EtVJ {
}

.input_fieldHelpSmall__11mFA {
}

.input_fieldHelpLarge__1f6fA {
}

.input_disabled__1glh_ {
}

.input_labelInline__2zdZA {
}

.input_inputInline__2RuWD {
}

.loader_loader__1bLX- {
  --loading-color: var(--agnostic-loading-color, var(--agnostic-dark));
  --loading-size: var(--fluid-16);
  --loading-size-small: var(--fluid-12);
  --loading-size-large: var(--fluid-18);

  position: relative;
  box-sizing: border-box;
  -webkit-animation: loader_blink__2Pbtr 1s infinite;
          animation: loader_blink__2Pbtr 1s infinite;
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;

  /* Make up for negative positioning */
  margin-left: var(--loading-size);

  /* Initially set zero until aria-busy becomes true */
  opacity: 0%;
}

.loader_loader__1bLX-,
.loader_loader__1bLX-::before,
.loader_loader__1bLX-::after {
  width: calc(var(--loading-size) / 2);
  height: calc(var(--loading-size) / 2);
  border-radius: var(--fluid-6);
  background-color: var(--loading-color);
}

/* SMALL */
.loader_loader-small__2n0HY,
.loader_loader-small__2n0HY::before,
.loader_loader-small__2n0HY::after {
  width: calc(var(--loading-size-small) / 2);
  height: calc(var(--loading-size-small) / 2);
}

/* LARGE */
.loader_loader-large__1ALZY,
.loader_loader-large__1ALZY::before,
.loader_loader-large__1ALZY::after {
  width: calc(var(--loading-size-large) / 2);
  height: calc(var(--loading-size-large) / 2);
  border-radius: var(--fluid-8);
}

.loader_loader__1bLX-::before,
.loader_loader__1bLX-::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  -webkit-animation: loader_blink__2Pbtr 1s infinite;
          animation: loader_blink__2Pbtr 1s infinite;
}

.loader_loader__1bLX-::before {
  left: calc(-1 * var(--loading-size));
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.loader_loader__1bLX-::after {
  left: var(--loading-size);
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

/* SMALL */
.loader_loader-small__2n0HY::before {
  left: calc(-1 * var(--loading-size-small));
}

.loader_loader-small__2n0HY::after {
  left: var(--loading-size-small);
}

/* LARGE */
.loader_loader-large__1ALZY::before {
  left: calc(-1 * var(--loading-size-large));
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.loader_loader-large__1ALZY::after {
  left: var(--loading-size-large);
}

/**
 * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
 */
.loader_loader__1bLX-[aria-busy="true"] {
  opacity: 100%;
}

@-webkit-keyframes loader_blink__2Pbtr {
  50% {
    background-color: transparent;
  }
}

@keyframes loader_blink__2Pbtr {
  50% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .loader_loader__1bLX-,
  .loader_loader__1bLX-::before,
  .loader_loader__1bLX-::after {
    transition-duration: 0.001ms !important;
  }
}

.loader_loader__2rrVm {
}

.loader_loaderSmall__12m4l {
}

.loader_loaderLarge__3f7eD {
}


.menu_menu-trigger__3JqMP {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  background-color: var(--agnostic-gray-light);
  background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  cursor: pointer;
  text-align: left;

  /* TODO -- can we compose some of this from the button styles? */
  border-color: var(--agnostic-gray-light);
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-style: solid;
  border-width: 1px;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-size: inherit;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: 1.25rem;
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  -webkit-padding-before: 0.5rem;
          padding-block-start: 0.5rem;
  -webkit-padding-before: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
  -webkit-padding-after: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-start: 0.75rem;
          padding-inline-start: 0.75rem;
  -webkit-padding-start: var(--agnostic-side-padding, 0.75rem);
          padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  -webkit-padding-end: 0.75rem;
          padding-inline-end: 0.75rem;
  -webkit-padding-end: var(--agnostic-side-padding, 0.75rem);
          padding-inline-end: var(--agnostic-side-padding, 0.75rem);
}

.menu_menu-trigger__3JqMP[disabled] {
  background: var(--agnostic-disabled-bg) !important;
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-disabled-color) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.menu_menu-trigger__3JqMP:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

/* Sizes */
.menu_menu-trigger-large__3MaGo {
  font-size: calc(1rem + 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 2rem;
}

.menu_menu-trigger-small__1k_xJ {
  font-size: calc(1rem - 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 1rem;
}

.menu_menu-trigger-bordered__x-10B {
  --menu-item-background-color: var(--agnostic-menu-item-background-color, inherit);

  background-color: var(--menu-item-background-color);
}

.menu_menu-trigger-rounded__3Ew_S {
  border-radius: var(--agnostic-radius);
}

/* TODO make this more flexible eventually */
.menu_menu-icon__3hYAu {
  font-family: sans-serif;
  font-size: var(--fluid-18);
  -webkit-margin-start: var(--fluid-8);
          margin-inline-start: var(--fluid-8);
  line-height: 1;
}

.menu_menu__O6_59 {
  display: inline-flex;
  position: relative;
  background-color: inherit;
}

:is(.menu_menu-items__g0GQ4, .menu_menu-items-right__1V8sU) {
  position: absolute;
  background-color: var(--agnostic-light);
  -webkit-margin-before: var(--fluid-6);
          margin-block-start: var(--fluid-6);
  z-index: 10;
}

.menu_menu-items__g0GQ4 {
  right: initial;
  left: 0;
}

.menu_menu-items-right__1V8sU {
  left: initial;
  right: 0;
}


.menu-item_menu-item__2wcHt {
  --menu-item-background-color: var(--agnostic-menu-item-background-color, inherit);

  text-align: left;

  /* TODO -- can we compose some of this from the button styles? */
  border-color: var(--agnostic-gray-light);
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-style: solid;
  border-width: 1px;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-size: inherit;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: 1.25rem;
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  -webkit-padding-before: 0.5rem;
          padding-block-start: 0.5rem;
  -webkit-padding-before: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
  -webkit-padding-after: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-start: 0.75rem;
          padding-inline-start: 0.75rem;
  -webkit-padding-start: var(--agnostic-side-padding, 0.75rem);
          padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  -webkit-padding-end: 0.75rem;
          padding-inline-end: 0.75rem;
  -webkit-padding-end: var(--agnostic-side-padding, 0.75rem);
          padding-inline-end: var(--agnostic-side-padding, 0.75rem);
  background-color: var(--menu-item-background-color);
  display: block;
  min-width: 100%;
  white-space: nowrap;
  cursor: default;
}

.menu-item_menu-item__2wcHt[disabled] {
  background: var(--agnostic-disabled-bg) !important;
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-disabled-color) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.menu-item_menu-item__2wcHt:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

.menu-item_menu-item__2wcHt:not(:first-of-type) {
  border-top: 0;
}

.menu-item_menu-item-selected__g1i8z {
  color: var(--agnostic-light);
  background-color: var(--agnostic-primary);
  border-color: var(--agnostic-primary);
}

.menu-item_menu-item__2wcHt:active:not(.menu-item_menu-item-selected__g1i8z) {
  color: var(--agnostic-primary);
}

.menu-item_menu-item__2wcHt [aria-checked="true"]::before {
  /* TODO make this more flexible eventually */
  content: "\2713\0020";
}

/* Sizes */
.menu-item_menu-item-large__2p3Ws {
  font-size: calc(1rem + 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 2rem;
}

.menu-item_menu-item-small__1wfmU {
  font-size: calc(1rem - 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 1rem;
}

.menu-item_menu-item-rounded__3Auwi:first-of-type {
  border-top-left-radius: var(--agnostic-radius);
  border-top-right-radius: var(--agnostic-radius);
}

.menu-item_menu-item-rounded__3Auwi:last-of-type {
  border-bottom-left-radius: var(--agnostic-radius);
  border-bottom-right-radius: var(--agnostic-radius);
}

.menu-item_menu-item__2wcHt:hover:not([disabled]):not(.menu-item_menu-item-selected__g1i8z) {
  background-color: var(--agnostic-gray-extra-light);
  cursor: pointer;
}

.menu-trigger_btn-base__108f- {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition-property: all;
  transition-duration: var(--agnostic-timing-medium);
}

/**
 * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
 * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
 */
:is(.menu-trigger_btn-link__1xTBd, .menu-trigger_btn-blank__2EkIm) {
  font-family: var(--agnostic-font-family-body);
  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
  font-size: 1rem;
  font-size: var(--agnostic-btn-font-size, 1rem);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

/* Since blank buttons can be used for things like input addons we don't want to go crazy
on the side padding. As such, these have a good bit less then regular buttons. */
.menu-trigger_btn-blank__2EkIm {
  --agnostic-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);

  -webkit-padding-start: var(--agnostic-btn-blank-side-padding);

          padding-inline-start: var(--agnostic-btn-blank-side-padding);
  -webkit-padding-end: var(--agnostic-btn-blank-side-padding);
          padding-inline-end: var(--agnostic-btn-blank-side-padding);
}

/* A button blank with link color text */
.menu-trigger_btn-link__1xTBd {
  color: var(--agnostic-primary);
  color: var(--agnostic-btn-primary, var(--agnostic-primary));
}

.menu-trigger_btn-link__1xTBd:hover {
  cursor: pointer;
}

.menu-trigger_menu-trigger__35Dcv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  background-color: var(--agnostic-gray-light);
  background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  cursor: pointer;
  text-align: left;

  /* TODO -- can we compose some of this from the button styles? */
  border-color: var(--agnostic-gray-light);
  border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
  border-style: solid;
  border-width: 1px;
  border-width: var(--agnostic-btn-border-size, 1px);
  font-size: inherit;

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: 1.25rem;
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  -webkit-padding-before: 0.5rem;
          padding-block-start: 0.5rem;
  -webkit-padding-before: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
  -webkit-padding-after: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-start: 0.75rem;
          padding-inline-start: 0.75rem;
  -webkit-padding-start: var(--agnostic-side-padding, 0.75rem);
          padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  -webkit-padding-end: 0.75rem;
          padding-inline-end: 0.75rem;
  -webkit-padding-end: var(--agnostic-side-padding, 0.75rem);
          padding-inline-end: var(--agnostic-side-padding, 0.75rem);
}

.menu-trigger_menu-trigger__35Dcv[disabled] {
  background: var(--agnostic-disabled-bg) !important;
  background: var(--agnostic-input-disabled-bg, var(--agnostic-disabled-bg)) !important;
  color: var(--agnostic-disabled-color) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

.menu-trigger_menu-trigger__35Dcv:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;

  /* In order for the focused element's box-shadow to appear above its siblings we need to
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
  isolation: isolate;
}

/* Sizes */
.menu-trigger_menu-trigger-large__1f7Hj {
  font-size: calc(1rem + 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
  height: 3rem;
  line-height: 2rem;
}

.menu-trigger_menu-trigger-small__2B2wy {
  font-size: calc(1rem - 0.25rem);
  font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
  height: 2rem;
  line-height: 1rem;
}

.menu-trigger_menu-trigger-bordered__2P7id {
  --menu-item-background-color: var(--agnostic-menu-item-background-color, inherit);

  background-color: var(--menu-item-background-color);
}

.menu-trigger_menu-trigger-rounded__1VFp7 {
  border-radius: var(--agnostic-radius);
}

/* TODO make this more flexible eventually */
.menu-trigger_menu-icon__3ov7I {
  font-family: sans-serif;
  font-size: var(--fluid-18);
  -webkit-margin-start: var(--fluid-8);
          margin-inline-start: var(--fluid-8);
  line-height: 1;
}

:is(.menu-trigger_btn-kebab__1Sbnb, .menu-trigger_btn-meatball__1ijQP) {
  justify-content: space-around;
  height: var(--fluid-24);
  width: var(--fluid-24);

  /* Rest here is supplied by btn-base and btn-blank */
}

/* We use btn-blank which doesn't include this :( */
:is(.menu-trigger_btn-hamburger__DNWXY:focus, .menu-trigger_btn-kebab__1Sbnb:focus, .menu-trigger_btn-meatball__1ijQP:focus) {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
  outline:
    var(--agnostic-focus-ring-outline-width)
    var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.menu-trigger_btn-hamburger__DNWXY,
.menu-trigger_btn-kebab__1Sbnb {
  flex-direction: column;
}

.menu-trigger_btn-meatball__1ijQP {
  flex-direction: row;
}

/* stylelint-disable-next-line no-duplicate-selectors */
.menu-trigger_btn-meatball__1ijQP {
  --block-padding: var(--agnostic-side-padding);

  -webkit-padding-before: var(--block-padding);

          padding-block-start: var(--block-padding);
  -webkit-padding-after: var(--block-padding);
          padding-block-end: var(--block-padding);
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}

.menu-trigger_btn-hamburger__DNWXY {
  --vertical-padding: 3px;

  -webkit-padding-before: var(--vertical-padding);

          padding-block-start: var(--vertical-padding);
  -webkit-padding-after: var(--vertical-padding);
          padding-block-end: var(--vertical-padding);
  -webkit-padding-end: var(--fluid-2);
          padding-inline-end: var(--fluid-2);
  -webkit-padding-start: var(--fluid-2);
          padding-inline-start: var(--fluid-2);
}

.menu-trigger_dot__3G7RQ,
.menu-trigger_bar__Nb1_D {
  background-color: var(--agnostic-dark);
}

.menu-trigger_dot__3G7RQ {
  width: 5px;
  height: 5px;
  border-radius: 50px;
}

.menu-trigger_bar__Nb1_D {
  width: var(--fluid-20);
  height: var(--fluid-2);
  margin: var(--fluid-2) 0;
}


.menu_menu__1dpMS {
};

.menu_triggerSmall__68n8W {
};

.menu_itemSmall__3xVjm {
};

.menu_triggerLarge__2udBb {
};

.menu_itemLarge__3AnCz {
};

.menu_trigger__libTH {
};

.menu_items__382XM {
};

.menu_itemsRight__3QIKo {
};

.menu_item__Hw4yz {
};

.menu_selected__3zxdK {
};

.menu_icon__1wRSF {
};

.menu_triggerRounded__3B__W {
};

.menu_itemRounded__2iwMU {
};

.menu_triggerBordered__2_1NE {
};

.menu_buttonBase__2fN6R {
};

.menu_buttonBlank__3rNyy {
};

.menu_buttonLink__3TxIx {
};

.menu_buttonKebab__1aFiM {
};

.menu_buttonMeatball__3WEKu {
};

.menu_buttonHamburger__3ER15 {
};

.menu_bar__33Vqe {
};

.menu_dot__2GZB9 {
};

.pagination_pagination-container__2Sqt_ {
  display: flex;
}

.pagination_pagination__2UHiY {
  display: flex;
  list-style: none;
}

.pagination_pagination-item__3PxTR {
  -webkit-padding-start: var(--fluid-2);
          padding-inline-start: var(--fluid-2);
  -webkit-padding-end: var(--fluid-2);
          padding-inline-end: var(--fluid-2);
}

.pagination_pagination-button__1B3q0 {
  --agnostic-pagination-button-color: var(--agnostic-primary);

  color: var(--agnostic-pagination-button-color);
  display: inline-block;
  line-height: var(--fluid-20);
  -webkit-padding-start: var(--fluid-12);
          padding-inline-start: var(--fluid-12);
  -webkit-padding-end: var(--fluid-12);
          padding-inline-end: var(--fluid-12);
  -webkit-padding-before: var(--fluid-6);
          padding-block-start: var(--fluid-6);
  -webkit-padding-after: var(--fluid-6);
          padding-block-end: var(--fluid-6);
  border-radius: var(--agnostic-radius);

  /* We need a border set on both hovered and unhovered so it does not jump around */
  border: 1px solid transparent;
  background-color: transparent;
}

.pagination_pagination-button__1B3q0:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .pagination_pagination-button__1B3q0:focus {
    transition-duration: 0.001ms !important;
  }
}

.pagination_pagination-item-disabled__2c6fW {
  cursor: not-allowed;
}

.pagination_pagination-button__1B3q0:disabled,
.pagination_pagination-item-disabled__2c6fW .pagination_pagination-button__1B3q0 {
  color: var(--agnostic-gray-mid-dark);
  color: var(--agnostic-pagination-disabled-bg, var(--agnostic-gray-mid-dark));
  opacity: 80%;
  pointer-events: none;
}

.pagination_pagination-item-active__geIZq .pagination_pagination-button__1B3q0 {
  background-color: var(--agnostic-primary);
  color: var(--agnostic-light);
}

.pagination_pagination-bordered__18CJh .pagination_pagination-item-active__geIZq .pagination_pagination-button__1B3q0 {
  background-color: unset;
  border: 1px solid var(--agnostic-primary);
  color: var(--agnostic-primary);
}

.pagination_pagination-item__3PxTR:hover .pagination_pagination-button__1B3q0 {
  text-decoration: none;
}

.pagination_pagination-item__3PxTR:not(.pagination_pagination-item-active__geIZq):not(.pagination_pagination-item-disabled__2c6fW):hover .pagination_pagination-button__1B3q0 {
  background-color: var(--agnostic-gray-extra-light);
}

/* For ellipses like [1][2]...[3][4] */
.pagination_pagination-item-gap__1exId {
  transform: translateY(var(--fluid-6));
}

.pagination_pagination-center__3xNpN {
  justify-content: center;
}

.pagination_pagination-start__2-mkG {
  justify-content: flex-start;
}

.pagination_pagination-end__2evqI {
  justify-content: flex-end;
}

.pagination_paginationContainer__2Cl3y {
}

.pagination_pagination__GirfT {
}

.pagination_paginationBordered__3AcpE {
}

.pagination_paginationButton__3nvCD {
}

.pagination_paginationItem__2LImH {
}

.pagination_paginationActive__3y6ts {
}

.pagination_paginationItemGap__3jmoQ {
}


.pagination_paginationItemDisabled__3R7rd {
}
.pagination_paginationCenter__230-8 {
}

.pagination_paginationStart__2rAYa {
}

.pagination_paginationEnd__SVw8j {
}

/* https://stackoverflow.com/questions/45507970/how-can-i-change-the-color-of-a-progress-bar-value-in-html */

/**
 * Most examples show styling directly to the <progress> element itself. However,
 * my tests (chrome, ff, safari on mac mini 2020), showed it's perfectly possibly
 * to use a class selector instead. The reason I'd prefer that here, is that I can
 * then use CSS Modules composes against .progress (e.g. for React/Vue components)
 */
.progress_progress__1PlwV {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 0.625rem;
  height: var(--agnostic-progress-height, var(--fluid-10, 0.625rem));
  width: 100%;
  border: none;

  /* Next couple of rules are required to be here for FF (but not chrome) */
  background-color: #ededed;
  background-color: var(--agnostic-progress-background, var(--agnostic-gray-light, #ededed));
  border-radius: 0.625rem;
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress_progress__1PlwV[value]::-webkit-progress-bar {
  /* In my tests chrome requires this whereas FF wants it on the progress {} rule */
  background-color: #ededed;
  background-color: var(--agnostic-progress-background, var(--agnostic-gray-light, #ededed));
  border-radius: 0.625rem;
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress_progress__1PlwV[value]::-webkit-progress-value {
  background-color: #077acb;
  background-color: var(--agnostic-progress-fill-color, var(--agnostic-primary, #077acb));
  border-radius: 0.625rem;
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress_progress__1PlwV[value]::-moz-progress-bar {
  background-color: #077acb;
  background-color: var(--agnostic-progress-fill-color, var(--agnostic-primary, #077acb));
  border-radius: 0.625rem;
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress_progress__1PlwV[value]::-ms-fill {
  background-color: #077acb;
  background-color: var(--agnostic-progress-fill-color, var(--agnostic-primary, #077acb));
  border-radius: 0.625rem;
  border-radius: var(--agnostic-progress-radius, var(--fluid-10, 0.625rem));
}

.progress_progressBar__2Zc_B {
}

.select_select__19iE_,
.select_select-base__orzoL {
  display: block;
  width: 100%;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-appearance: none;
  appearance: none;
}

.select_select__19iE_,
.select_select-skin__3A4ws {
  padding: var(--fluid-6) var(--fluid-32) var(--fluid-6) var(--fluid-12);
  -moz-padding-start: calc(var(--fluid-12) - 3px);
  font-size: var(--fluid-16);
  font-weight: 400;
  line-height: 1.5;
  color: var(--agnostic-dark);
  border: 1px solid var(--agnostic-gray-light);
  border: 1px solid var(--agnostic-select-border-color, var(--agnostic-gray-light));
  border-radius: var(--agnostic-radius);
  transition:
    border-color var(--agnostic-timing-fast) ease-in-out,
    box-shadow var(--agnostic-timing-fast) ease-in-out;
}

/* Only shows the down arrow SVG if in single mode */
.select_select__19iE_:not([multiple]) {
  background-color: inherit;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--fluid-12) center;
  background-size: var(--fluid-16) var(--fluid-12);
}

.select_select__19iE_:focus {
  border-color: var(--agnostic-focus-ring-color);
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

.select_select-base__orzoL,
.select_select__19iE_:disabled {
  background-color: var(--agnostic-disabled-bg);
}

.select_select-base__orzoL,
.select_select__19iE_:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--agnostic-dark);
}

@media (prefers-reduced-motion), (update: slow) {
  .select_select__19iE_,
  .select_select-base__orzoL,
  .select_select__19iE_:focus {
    transition: none;
  }
}

.select_select-small__3gK4F {
  padding-top: var(--fluid-4);
  padding-bottom: var(--fluid-4);
  padding-left: var(--fluid-8);
  font-size: var(--fluid-14);
}

.select_select-large__1XBoT {
  padding-top: var(--fluid-8);
  padding-bottom: var(--fluid-8);
  padding-left: var(--fluid-16);
  font-size: var(--fluid-18);
}

.select_select__1fUTl {
}

.select_selectBase__3S7at {
}

.select_selectSmall__31QJS {
}

.select_selectLarge__1j5BT {
}

.spinner_spinner__2704a {
  --spinner-color: var(--agnostic-spinner-color, var(--agnostic-dark));

  /**
   * Inspiration to utilize grid for this from
   * https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
   */
  display: grid;
  grid-template: "content" 100% / auto;
  place-items: center;
  box-sizing: border-box;
}

.spinner_spinner__2704a::before,
.spinner_spinner__2704a::after {
  grid-area: content;
  width: var(--fluid-32);
  height: var(--fluid-32);
  content: "";
  display: block;
  border-radius: 50%;
  border-width: 3px;
  border-style: solid;
}

.spinner_spinner-small__BCUk4::before,
.spinner_spinner-small__BCUk4::after {
  width: var(--fluid-24);
  height: var(--fluid-24);
  border-width: var(--fluid-2);
}

.spinner_spinner-large__OzGt-::before,
.spinner_spinner-large__OzGt-::after {
  width: var(--fluid-40);
  height: var(--fluid-40);
  border-width: var(--fluid-4);
}

.spinner_spinner-xlarge__20qQs::before,
.spinner_spinner-xlarge__20qQs::after {
  width: var(--fluid-56);
  height: var(--fluid-56);
  border-width: var(--fluid-6);
}

/**
 * Before is the muted background
 */
.spinner_spinner__2704a::before {
  opacity: 0%;
  border-color: var(--spinner-color);
}

/**
 * After is the inner "snake"
 */
.spinner_spinner__2704a::after {
  opacity: 0%;
  border-color: transparent var(--spinner-color) transparent transparent;
  transition: opacity 0.1s;
  pointer-events: none;
  -webkit-animation: spinner_loading-circle__1SEgm 1s ease-in-out infinite;
          animation: spinner_loading-circle__1SEgm 1s ease-in-out infinite;

  /* TODO Research the whole null transform hack. It is quite confusing to figure out if it
  is beneficial or detrimental: See
  https://newbedev.com/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
  transform: translateZ(0);
  will-change: transform; */
}

/**
 * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
 */
.spinner_spinner__2704a[aria-busy="true"]::before {
  opacity: 12%;
}

.spinner_spinner__2704a[aria-busy="true"]::after {
  opacity: 100%;
}

@-webkit-keyframes spinner_loading-circle__1SEgm {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner_loading-circle__1SEgm {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .spinner_spinner__2704a::after {
    transition-duration: 0.001ms !important;
  }
}

.spinner_spinner__1Mcer {
}

.spinner_spinnerSmall__Rwl0W {
}

.spinner_spinnerLarge__bXfuu {
}

.spinner_spinnerXlarge__3R1td{
}

/**
 * Switch
 *
 * This switch is inspired by Scott Ohara's checkbox switch:
 * https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
 */
.switch_switch-container__3RwqH {
  display: block;

  /* TODO: Hopefully this doesn't become a problem but since we use absolute
  positioning extensively, we need some way to have adjacent spaced lines */
  min-height: 2.25rem;
  width: 100%;
  padding: 0.5rem;
  position: relative;
}

.switch_switch-container__3RwqH:hover {
  cursor: pointer;
}

/* using the before/after pseudo elements of the span to create the "switch" */
.switch_switch__9ktqH::before,
.switch_switch__9ktqH::after {
  border: 1px solid var(--agnostic-gray-mid-dark);
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* styling specific to the knob of the switch */
.switch_switch__9ktqH::after {
  background: #fff;
  border-radius: 100%;
  width: 1.4rem;
  height: 1.4rem;
  right: 1.4rem;
  transition: right var(--agnostic-timing-fast) ease-in-out;
}

/* styling specific to the knob "container" */
.switch_switch__9ktqH::before {
  background: #eee;
  border-radius: 1.75rem;
  width: 2.75rem;
  height: 1.75rem;
  right: 0.25rem;
  transition: background var(--agnostic-timing-medium) ease-in-out;
}

/* Sizes */
.switch_switch-small__2CtU5::after {
  width: 1.25rem;
  height: 1.25rem;
  right: 1.125rem;
}

.switch_switch-small__2CtU5::before {
  width: 2.25rem;
  height: 1.5rem;
}

.switch_switch-large__3rcqW::after {
  width: 1.65rem;
  height: 1.65rem;
  right: 1.65rem;
}

.switch_switch-large__3rcqW::before {
  width: 3.25rem;
  height: 2rem;
}

.switch_switch-border__3bYCh::before {
  border: 1px solid var(--agnostic-primary);
}

.switch_switch-action__didZp.switch_switch-border__3bYCh::before {
  border: 1px solid var(--agnostic-action);
}

/* Switch label on right */

/* We have to flip the positioning when the label is on the right of switch */
.switch_switch-right__2Tx4l .switch_switch__9ktqH::before {
  right: initial;
  left: 0.25rem;
}

.switch_switch-right__2Tx4l .switch_switch__9ktqH::after {
  right: initial;
  left: 1.4rem;
}

/* Switch sizes w/label on right -- I expect SMACSS so .switch .switch-small
classes should both exist so the right: initial was taken care of above :) */
.switch_switch-right__2Tx4l .switch_switch-small__2CtU5::after {
  left: 1.125rem;
}

.switch_switch-right__2Tx4l .switch_switch-large__3rcqW::after {
  left: 1.65rem;
}

/* ---- CHECKED STATE ----- */

/* change the position of the knob to indicate it has been checked */

.switch_switch-input__3WuoX:checked + .switch_switch-small__2CtU5::after {
  right: 0.425rem;
}

.switch_switch-input__3WuoX:checked + .switch_switch__9ktqH::after {
  right: 0.5em;
}

.switch_switch-right__2Tx4l .switch_switch-label__35F4z {
  position: absolute;
  right: 0;

  /* Flips transition target to left to preserve our smooth transitions */
  transition: left var(--agnostic-timing-fast) ease-in-out;
}

.switch_switch-right__2Tx4l .switch_switch-input__3WuoX:checked + .switch_switch__9ktqH::after {
  right: initial;
  left: 0.5em;
}

.switch_switch-right__2Tx4l .switch_switch-input__3WuoX:checked + .switch_switch-small__2CtU5::after {
  right: initial;
  left: 0.425rem;
}

/* From: https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
  hide the actual checkbox from view, but not from keyboards or ATs.
  Instead of standard visually hidden styling, instead set opacity to
  almost 0 (not zero for ChomeVox legacy bug), pointer-events none, and
  then set to full height/width of container element so that VO focus
  ring outlines the component, instead of a tiny box within the component
*/
.switch_switch-input__3WuoX {
  margin: 0;
  opacity: 0.01%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.switch_switch-input__3WuoX:focus + .switch_switch__9ktqH::before {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
}

/* update the color of the "container" to further visually indicate state */
.switch_switch-input__3WuoX:checked + .switch_switch__9ktqH:not(.switch_switch-border__3bYCh)::before {
  background: var(--agnostic-primary);
}

.switch_switch-input__3WuoX:checked + .switch_switch-action__didZp:not(.switch_switch-border__3bYCh)::before {
  background: var(--agnostic-action);
}

/* Border switch on checked the thumb gets primary or action bg respectively */
.switch_switch-input__3WuoX:checked + .switch_switch-border__3bYCh::after {
  background: var(--agnostic-primary);
}

.switch_switch-input__3WuoX:checked + .switch_switch-action__didZp.switch_switch-border__3bYCh::after {
  background: var(--agnostic-action);
}

/* Disabled aka :disabled is not actually supported for <label>
element so we use attribute selector for that:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#:~:text=The%20disabled%20attribute%20is%20supported,control%20or%20its%20descendant%20controls.
*/
.switch_switch-input__3WuoX[disabled] + .switch_switch__9ktqH,
.switch_switch-input__3WuoX[disabled] + .switch_switch-label__35F4z,
.switch_switch-container__3RwqH.switch_disabled__1al1i {
  color: var(--agnostic-disabled-color) !important;
  color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 80% !important;
}

@media screen and (-ms-high-contrast: active) {
  .switch_switch__9ktqH::after {
    background-color: windowText;
  }

  /* High contrast mode outline hacks */
  .switch_switch-input__3WuoX[disabled] + .switch_switch-label__35F4z,
  .switch_switch-container__3RwqH.switch_disabled__1al1i {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
}

@media (prefers-reduced-motion), (update: slow) {
  .switch_switch__9ktqH::after,
  .switch_switch__9ktqH::before {
    transition-duration: 0.001ms !important;
  }
}

/**
 * Switch
 * 
 * This switch is inspired by Scott Ohara's checkbox switch:
 * https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
 */
.switch_switch-container__1Z8Ws {
}

.switch_switch__FOkcE {
}
.switch_switch-label__2A3r4 {
}

.switch_switch-small__2l7iM {
}

.switch_switch-large__3NVGW {
}

.switch_switch-border__22soc {
}

.switch_switch-action__8RpU4 {
}

.switch_switch-input__2hVrZ {
}

.switch_switch-right__3Bnus {
}

.switch_disabled__1uPV7 {
}

.table_table__36Owe {
  --table-bg: transparent;
  --table-accent-bg: transparent;
  --table-striped-color: var(--agnostic-dark);
  --table-striped-bg: rgb(0 0 0 / 2.5%);
  --table-active-color: var(--agnostic-dark);
  --table-active-bg: rgb(0 0 0 / 1.5%);
  --table-hoverable-color: var(--agnostic-dark);
  --table-hoverable-bg: var(--agnostic-table-hover-bg, #f1faff);

  width: 100%;
  margin-bottom: var(--fluid-16);
  color: var(--agnostic-dark);
  vertical-align: top;
  border-color: var(--agnostic-gray-light);
  border-color: var(--agnostic-table-border-color, var(--agnostic-gray-light));
}

.table_table__36Owe > :not(caption) > * > * {
  padding: var(--fluid-8) var(--fluid-8);
  background-color: var(--table-bg);
  border-bottom-width: 1px;

  /* 4th is spread --table-accent-bg will gets reset for active, hover, striped */
  box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
}

.table_table__36Owe > tbody {
  vertical-align: inherit;
}

.table_table__36Owe > thead {
  vertical-align: bottom;
}

.table_table__36Owe thead th {
  font-weight: 600;
}

.table_table-caps__107cL thead th {
  font-size: var(--fluid-12);
  text-transform: uppercase;
}

.table_table__36Owe tbody td,
.table_table__36Owe tbody th {
  font-weight: 400;
}

.table_table__36Owe > :not(thead):not(caption) {
  border-top: var(--fluid-2) solid var(--agnostic-gray-light);
}

.table_caption-top__1ObJP {
  caption-side: top;
}

.table_caption-bottom__2MH_i {
  caption-side: bottom;
}

.table_caption-bottom__2MH_i,
.table_caption-top__1ObJP {
  -webkit-padding-before: var(--fluid-12);
          padding-block-start: var(--fluid-12);
  -webkit-padding-after: var(--fluid-12);
          padding-block-end: var(--fluid-12);

  /* Takes writing mode into account -- (mdn) same as left if direction is left-to-right
  and right if direction is right-to-left */
  text-align: start;
}

.table_caption-end__1o3AB {
  text-align: end;
}

.table_table-small__iWPBN > :not(caption) > * > * {
  padding: var(--fluid-4) var(--fluid-4);
}

.table_table-large__2Xojc > :not(caption) > * > * {
  padding: var(--fluid-12) var(--fluid-12);
}

.table_table-xlarge__2lewI > :not(caption) > * > * {
  padding: var(--fluid-18) var(--fluid-18);
}

.table_table-bordered__33oCL > :not(caption) > * {
  border-width: 1px 0;
}

.table_table-bordered__33oCL > :not(caption) > * > * {
  border-width: 0 1px;
}

.table_table-borderless__Qoj-S > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table_table-borderless__Qoj-S > :not(:first-child) {
  border-top-width: 0;
}

.table_table-striped__36iGA > tbody > tr:nth-of-type(odd) > * {
  --table-accent-bg: var(--table-striped-bg);

  color: var(--table-striped-color);
}

.table_table-active__eo2hl {
  --table-accent-bg: var(--table-active-bg);

  color: var(--table-active-color);
}

.table_table-hoverable__2k78I > tbody > tr:hover > * {
  --table-accent-bg: var(--table-hoverable-bg);

  color: var(--table-hoverable-color);
}

/* Stacked tables */
.table_table-stacked__2MLW2 thead {
  display: none;
}

.table_table-stacked__2MLW2 tr,
.table_table-stacked__2MLW2 tbody th,
.table_table-stacked__2MLW2 tbody td {
  display: block;
  width: 100%;
}

.table_table-stacked__2MLW2 tbody th,
.table_table-stacked__2MLW2 tbody td {
  border-bottom-width: 0;
}

.table_table-stacked__2MLW2 td[data-label] {
  padding-bottom: var(--fluid-12);
}

.table_table-stacked__2MLW2 tr {
  border-bottom: var(--fluid-2) solid var(--agnostic-gray-light);
  border-top-width: 0;
}

.table_table-stacked__2MLW2 th[data-label]::before,
.table_table-stacked__2MLW2 td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-weight: 600;
  margin: -0.5rem -1rem 0;
  padding: var(--fluid-12) var(--fluid-16) var(--fluid-6);
}

.table_table-stacked__2MLW2 tr th:first-child,
.table_table-stacked__2MLW2 tr td:first-child {
  border-top-width: 0;
}

.table_table-stacked__2MLW2 tr:nth-child(odd) td,
.table_table-stacked__2MLW2 tr:nth-child(odd) th {
  background-color: inherit;
}

.table_table-stacked__2MLW2 tr:first-child th:first-child,
.table_table-stacked__2MLW2 tr:first-child td:first-child {
  border-top: var(--fluid-2) solid var(--agnostic-gray-light);
}

.table_table-stacked__2MLW2 th[data-label],
.table_table-stacked__2MLW2 td[data-label] {
  padding-bottom: var(--fluid-12);
}

/* As soon as there's not enough width, it will kick in horizontal scrolling */
.table_table-responsive__1Iol7 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table is responsive only "up to" the breakpoint. Above it will not scroll */
@media (max-width: 576px) {
  .table_table-responsive-small__17mvl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .table_table-responsive-medium__13H9_ {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 992px) {
  .table_table-responsive-large__2u-sz {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 1200px) {
  .table_table-responsive-xlarge__aYBJL {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.table_table-header-container__3ER09 {
  display: flex;
  align-items: center;
}

.table_table-sort-label__2N30s {
  flex: 1 1;
  -webkit-padding-end: 0.5rem;
          padding-inline-end: 0.5rem;
  text-align: left;
}

.table_table-sort__2SZaa {
  flex: 0 1 var(--fluid-48);
  background-color: transparent;
  border-color: transparent;
  border-width: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  -webkit-padding-before: var(--fluid-2);
          padding-block-start: var(--fluid-2);
  -webkit-padding-after: var(--fluid-2);
          padding-block-end: var(--fluid-2);
}

.table_icon-sort__3zhP9 {
  width: 1.125rem;
  height: 1.125rem;
}

.table_table-sort__2SZaa:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .table_table-sort__2SZaa:focus {
    transition-duration: 0.001ms !important;
  }
}

.table_table__27MnS {
}

.table_tableCaps__38FPD {
}

.table_captionTop__3fO2d {
}

.table_captionBottom__3KEtK {
}

.table_captionEnd__iEDXI {
}

.table_tableSmall__CzTS8 {
}

.table_tableLarge__eOEeQ {
}

.table_tableXlarge__2vkba {
}

.table_tableBordered__3nst_ {
}

.table_tableBorderless__2jSYo {
}

.table_tableStriped__J1vma {
}

.table_tableHoverable__3W0RE {
}

.table_tableStacked__1AT36 {
}

/* TODO */
.table_tableCellActive__1uclO {
}

.table_tableResponsive__3MHT4 {
}

.table_tableResponsiveSmall__1qiDs {
}

.table_tableResponsiveMedium__20T6a {
}

.table_tableResponsiveLarge__3gjsC {
}

.table_tableResponsiveXLarge__2QtL6 {
}

.table_tableHeaderContainer__909DK {
}

.table_tableSort__377XE {
}

.table_tableSortLabel__1XiKw {
}

.table_iconSort__3c6SG {
}

.table_iconSortAscending__2EXrN {
}

.table_iconSortDescending__1Tqmx {
}

/* TODO -- should we use these for .nav? */
.tabs_tabs__1rnUo {
  display: flex;
  flex-direction: column;
}

.tabs_tabs-vertical__3CIFt {
  flex-direction: row;
}

.tabs_tab-list__1BElH,
.tabs_tab-list-base__1QGbT {
  display: flex;
  flex-flow: row wrap;
  flex: 0 0 auto;
}

.tabs_tab-list__1BElH,
.tabs_tab-skinned__2AT2d {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  border-bottom:
    1px solid
    var(--agnostic-gray-light);
  border-bottom:
    var(--agnostic-tabs-border-size, 1px) solid
    var(--agnostic-tabs-bgcolor, var(--agnostic-gray-light));
  transition-property: all;
  transition-duration: var(--agnostic-timing-medium);
}

/* In vertical orientation we want our tab buttons to stack */
.tabs_tabs-vertical__3CIFt .tabs_tab-list__1BElH,
.tabs_tabs-vertical__3CIFt .tabs_tab-base__1-g9K {
  flex-direction: column;
  border: none;
}

/* We can ask for .tab-button which is base and skin combined, or, we can utilize .tab-button-base
if we'd like to only blank out buttons but otherwise skin ourselves. */
.tabs_tab-button__26tAj,
.tabs_tab-button-base__33pDp {
  /* Blank out the button */
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  /* This fixes issue where upon focus, the a11y focus ring's box shadow would get tucked beneat
  adjacent tab buttons; relative creates new stacking context https://stackoverflow.com/a/31276836 */
  position: relative;

  /* Reset margins/padding; this will get added back if it's a "skinned" tab button. However, we have
  a use case where a tab-button is wrapping a faux button. For that, we don't want margins/padding because
  the faux button provides that. */
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-padding-before: 0;
          padding-block-start: 0;
  -webkit-padding-after: 0;
          padding-block-end: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
}

.tabs_tab-button__26tAj,
.tabs_tab-button-skin__2ukBg {
  display: block;

  /* Since this is a "skinned tab button" we add our padding here to previously "reset" .tab-button-base */
  -webkit-padding-before: 0.5rem;
          padding-block-start: 0.5rem;
  -webkit-padding-before: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-after: 0.5rem;
          padding-block-end: 0.5rem;
  -webkit-padding-after: var(--agnostic-vertical-pad, 0.5rem);
          padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
  -webkit-padding-start: 0.75rem;
          padding-inline-start: 0.75rem;
  -webkit-padding-start: var(--agnostic-side-padding, 0.75rem);
          padding-inline-start: var(--agnostic-side-padding, 0.75rem);
  -webkit-padding-end: 0.75rem;
          padding-inline-end: 0.75rem;
  -webkit-padding-end: var(--agnostic-side-padding, 0.75rem);
          padding-inline-end: var(--agnostic-side-padding, 0.75rem);
  font-family: var(--agnostic-font-family-body);
  font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
  font-weight: 400;
  font-weight: var(--agnostic-btn-font-weight, 400);
  font-size: 1rem;
  font-size: var(--agnostic-btn-font-size, 1rem);

  /* this can be overriden, but it might mess with the balance of the button heights across variants */
  line-height: 1.25rem;
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  color: var(--agnostic-primary);
  color: var(--agnostic-tabs-primary, var(--agnostic-primary));
  text-decoration: none;
  transition:
    color var(--agnostic-timing-fast) ease-in-out,
    background-color var(--agnostic-timing-fast) ease-in-out,
    border-color var(--agnostic-timing-fast) ease-in-out;
}

/* We pull back the 2nd subsequent tabs to remove the double border */
.tabs_tab-button__26tAj:not(:first-of-type),
.tabs_tab-button-base__33pDp:not(:first-of-type) {
  -webkit-margin-start: -1px;
          margin-inline-start: -1px;
}

.tabs_tab-borderless__3Qry3 {
  border: none !important;
}

.tabs_tab-button-large__3EvkH {
  -webkit-padding-before: calc(var(--agnostic-input-side-padding) * 1.25);
          padding-block-start: calc(var(--agnostic-input-side-padding) * 1.25);
  -webkit-padding-after: calc(var(--agnostic-input-side-padding) * 1.25);
          padding-block-end: calc(var(--agnostic-input-side-padding) * 1.25);
  -webkit-padding-start: calc(var(--agnostic-input-side-padding) * 1.75);
          padding-inline-start: calc(var(--agnostic-input-side-padding) * 1.75);
  -webkit-padding-end: calc(var(--agnostic-input-side-padding) * 1.75);
          padding-inline-end: calc(var(--agnostic-input-side-padding) * 1.75);
}

.tabs_tab-button-xlarge__3zBQl {
  -webkit-padding-before: calc(var(--agnostic-input-side-padding) * 2);
          padding-block-start: calc(var(--agnostic-input-side-padding) * 2);
  -webkit-padding-after: calc(var(--agnostic-input-side-padding) * 2);
          padding-block-end: calc(var(--agnostic-input-side-padding) * 2);
  -webkit-padding-start: calc(var(--agnostic-input-side-padding) * 3);
          padding-inline-start: calc(var(--agnostic-input-side-padding) * 3);
  -webkit-padding-end: calc(var(--agnostic-input-side-padding) * 3);
          padding-inline-end: calc(var(--agnostic-input-side-padding) * 3);
}

.tabs_tab-item__3COFL.tabs_tab-button__26tAj {
  -webkit-margin-after: -1px;
          margin-block-end: -1px;
  background: 0 0;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-left-radius: var(--agnostic-tabs-radius, 0.25rem);
  border-top-right-radius: 0.25rem;
  border-top-right-radius: var(--agnostic-tabs-radius, 0.25rem);
}

.tabs_tab-item__3COFL.tabs_tab-button__26tAj.tabs_active__3AW1f {
  color: var(--agnostic-dark);
  background-color: var(--agnostic-light);
  border-color: var(--agnostic-gray-light) var(--agnostic-gray-light) var(--agnostic-light);
}

.tabs_tab-item__3COFL:hover,
.tabs_tab-button__26tAj:focus {
  border-color:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-width)
    var(--agnostic-gray-light);
  isolation: isolate;
  z-index: 1;
  cursor: pointer;
}

.tabs_tabs-vertical__3CIFt .tabs_tab-button__26tAj {
  border: none;
}

.tabs_tab-button__26tAj:disabled {
  color: var(--agnostic-gray-mid-dark);
  color: var(--agnostic-tabs-disabled-bg, var(--agnostic-gray-mid-dark));
  background-color: transparent;
  border-color: transparent;
  opacity: 80%;
}

/**
 * Elects to additively use the AgnosticUI custom focus ring alongside the border
 * we already add above. It just makes things look more consistent across components.
 * For example, when we tab into the panels and links within.
 */
.tabs_tab-button-base__33pDp:focus,
.tabs_tab-panel__3zUb1:focus,
.tabs_tab-button__26tAj:focus {
  box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);

  /* Needed for High Contrast mode */
  outline:
    var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
    var(--agnostic-focus-ring-outline-color);
  transition: box-shadow var(--agnostic-timing-fast) ease-out;
}

@media (prefers-reduced-motion), (update: slow) {
  .tabs_tab-button__26tAj,
  .tabs_tab-button-base__33pDp:focus,
  .tabs_tab-button__26tAj:focus,
  .tabs_tab-panel__3zUb1:focus,
  .tabs_tab-list__1BElH,
  .tabs_tab-skinned__2AT2d {
    transition-duration: 0.001ms !important;
  }
}

.tabs_tabs__1VPqy {
}

.tabs_tabsVertical__zgfDZ {
}

.tabs_tabList__2gvhq {
}

.tabs_tabListBase__30txV {
}

.tabs_tabListBorderless__14kkY {
}

.tabs_tabButtonBorderless__38qI_ {
}

.tabs_tabItem__28BKy {
}

.tabs_tabButtonBase__YbGqF {
}

.tabs_tabButton__ehx3e {
}

.tabs_tabButtonLarge__2jpOn {
}

.tabs_tabButtonxlarge__2gplH {
}

.tabs_active__1Z0Ff {
}

.TabButtonCustom_customTabButton__2_4DZ {
  opacity: 1;
  transition: opacity 0.2s;
}
.TabButtonCustom_customTabButton__2_4DZ:not(:first-of-type) {
  /* So we don't get a "double border" between tab buttons */
  -webkit-margin-start: -1px;
          margin-inline-start: -1px;
}
.TabButtonCustom_customTabButton__2_4DZ:hover {
  opacity: 0.7;
}
.TabButtonCustom_customTabButton__2_4DZ:hover:focus {
  opacity: 1;
}

.TabButtonCustom_reactButton__1KnLu {
  padding: 1rem 2rem;
}
.TabButtonCustom_vueButton__dPpis {
  padding: 1.75rem 3.25rem;
}
.TabButtonCustom_angularButton__1V6F9 {
  padding: 1.75rem 3rem;
}
.TabButtonCustom_svelteButton__3qo1G {
  padding: 1.75rem 3.5rem;
}

.tag_tag-base__2biuD,
.tag_tag__fMKCn {
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
}

.tag_tag-skin__qaUr9,
.tag_tag__fMKCn {
  background-color: var(--agnostic-gray-light);
  color: var(--agnostic-dark);
  font-size: var(--fluid-12);
  line-height: 1.25rem;
  line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
  -webkit-padding-before: var(--fluid-2);
          padding-block-start: var(--fluid-2);
  -webkit-padding-after: var(--fluid-2);
          padding-block-end: var(--fluid-2);
  -webkit-padding-start: var(--fluid-8);
          padding-inline-start: var(--fluid-8);
  -webkit-padding-end: var(--fluid-8);
          padding-inline-end: var(--fluid-8);
}

.tag_tag-info__3wjx- {
  background: var(--agnostic-primary-light);
  color: var(--agnostic-primary-dark);
}

.tag_tag-warning__-Ibh1 {
  background: var(--agnostic-warning-light);
  color: var(--agnostic-warning-dark);
}

.tag_tag-error__2STW1 {
  background: var(--agnostic-error-light);
  color: var(--agnostic-error-dark);
}

.tag_tag-success__2_cb4 {
  background: var(--agnostic-action-light);
  color: var(--agnostic-action-dark);
}

.tag_tag-upper__355T0 {
  font-size: var(--fluid-10);
  text-transform: uppercase;
}

.tag_tag-circle__letyp {
  border-radius: 50%;
}

.tag_tag-round__1gxnT {
  border-radius: var(--agnostic-radius);
}

.tag_tag-pill__32kul {
  border-radius: 200px;
}

.tag_tag__1ESS3 {
}

.tag_tagInfo__2KBuw {
}

.tag_tagSuccess__3Bfov {
}

.tag_tagWarning__Pn8cA {
}

.tag_tagError__tOXIm {
}

.tag_tagUpper__3Fh3r {
}

.tag_tagCircle__2dj_s {
}

.tag_tagRound__3lgSd {
}

.tag_tagPill__2KHOx {
}

.tooltip_tooltip__2BLaj {
  
  position: absolute;
  background: var(--agnostic-dark);
  color: var(--agnostic-light);
  padding: var(--fluid-4) var(--fluid-8);
  border-radius: var(--fluid-4);
  pointer-events: none;
}

.tooltip_tooltip-arrow__2KShq {
  position: absolute;
  background: var(--agnostic-dark);
  width: var(--fluid-8);
  height: var(--fluid-8);
  transform: rotate(45deg);
}

.tooltip_tooltip__10x4W {
}

.tooltip_tooltipArrow__2nH1t {
}


/*# sourceMappingURL=main.87339d57.chunk.css.map*/