.textField_sapphire-text-field__r11GX {
  outline: solid var(--sapphire-semantic-size-border-sm)
    var(--sapphire-semantic-color-border-field-default);
  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  border-radius: var(--sapphire-semantic-size-radius-sm);
  cursor: text;
  color: var(--sapphire-semantic-color-content-default-primary);
  background-color: var(--sapphire-semantic-color-background-field-default);
  height: var(--sapphire-semantic-size-height-input-lg);
  font-family: var(--sapphire-semantic-font-name-default);
  font-size: var(--sapphire-semantic-size-font-control-default);
  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.textField_sapphire-text-field--md__TTQLF {
  height: var(--sapphire-semantic-size-height-input-md);
  font-size: var(--sapphire-semantic-size-font-control-md);
}

.textField_sapphire-text-field__input__Twuwz {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
  line-height: var(--sapphire-semantic-size-line-height-md);

  font-family: inherit;
  font-size: inherit;
  font-weight: var(--sapphire-semantic-font-weight-default-regular);

  caret-color: var(--sapphire-semantic-color-cursor-default);
  color: inherit;

  background-color: transparent;
  border: none;
  outline: none;
}

.textField_sapphire-text-field--md__TTQLF .textField_sapphire-text-field__input__Twuwz {
  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
}

/**
 * Placeholder
 */

.textField_sapphire-text-field__input__Twuwz::placeholder {
  opacity: 1; /* some browsers set a lower than 1 opacity */
  color: var(--sapphire-semantic-color-content-default-secondary);
}

/**
 * Input text alignment
 */

.textField_sapphire-text-field__input--align-right__0Zitq {
  text-align: right;
}

/**
 * Single line
 * (this supports a prefix/postfix)
 */

.textField_sapphire-text-field__r11GX:not(.textField_sapphire-text-field--multiline__SgjTt) {
  gap: var(--sapphire-semantic-size-spacing-20);
}

/**
 * Prefix/postfix
 */

.textField_sapphire-text-field__r11GX:has(.textField_sapphire-text-field__prefix__CH80w)
  .textField_sapphire-text-field__input__Twuwz {
  padding-left: 0;
}

.textField_sapphire-text-field__r11GX .textField_sapphire-text-field__prefix__CH80w {
  color: var(--sapphire-semantic-color-content-default-primary);
  flex-shrink: 0;
  z-index: 1;
  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
}

.textField_sapphire-text-field--md__TTQLF .textField_sapphire-text-field__prefix__CH80w {
  margin-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
}

/**
 * Postfix
 */

.textField_sapphire-text-field__r11GX:has(.textField_sapphire-text-field__postfix__nBq-K)
  .textField_sapphire-text-field__input__Twuwz {
  padding-right: 0;
}

.textField_sapphire-text-field__r11GX .textField_sapphire-text-field__postfix__nBq-K {
  color: var(--sapphire-semantic-color-content-default-primary);
  flex-shrink: 0;
  z-index: 1;
  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
}

.textField_sapphire-text-field--md__TTQLF .textField_sapphire-text-field__postfix__nBq-K {
  margin-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
}

/**
 * Prefix/postfix icon
 */

.textField_sapphire-text-field__r11GX .textField_sapphire-text-field__prefix--icon__kgvwx,
.textField_sapphire-text-field__r11GX .textField_sapphire-text-field__postfix--icon__-mIb8 {
  width: var(--sapphire-semantic-size-icon-lg);
  height: var(--sapphire-semantic-size-icon-lg);
}

.textField_sapphire-text-field--md__TTQLF .textField_sapphire-text-field__prefix--icon__kgvwx,
.textField_sapphire-text-field--md__TTQLF .textField_sapphire-text-field__postfix--icon__-mIb8 {
  width: var(--sapphire-semantic-size-icon-md);
  height: var(--sapphire-semantic-size-icon-md);
}

/**
 * Multiline
 * (this does not support a prefix/postfix)
 */

.textField_sapphire-text-field--multiline__SgjTt {
  display: block;
  line-height: 0;
  height: unset;
  padding: 0;
}

.textField_sapphire-text-field--multiline__SgjTt .textField_sapphire-text-field__input__Twuwz {
  resize: none;
  width: 100%;
  padding: var(--sapphire-semantic-size-spacing-control-vertical-lg)
    var(--sapphire-semantic-size-spacing-control-horizontal-lg);
  scroll-padding-bottom: var(
    --sapphire-semantic-size-spacing-control-vertical-lg
  );
}

.textField_sapphire-text-field--md__TTQLF
  .textField_sapphire-text-field--multiline__SgjTt
  .textField_sapphire-text-field__input__Twuwz {
  padding: var(--sapphire-semantic-size-spacing-control-vertical-md)
    var(--sapphire-semantic-size-spacing-control-horizontal-md);
  scroll-padding-bottom: var(
    --sapphire-semantic-size-spacing-control-vertical-md
  );
}

/**
 * Resizable
 */

.textField_sapphire-text-field--multiline__SgjTt.textField_sapphire-text-field--resizable__vak7\+
  .textField_sapphire-text-field__input__Twuwz {
  resize: vertical;
}

.textField_sapphire-text-field__counter__wh1N7 {
  color: var(--sapphire-semantic-color-content-default-secondary);
  padding-left: var(--sapphire-semantic-size-spacing-20);
  margin-left: auto;
}

.textField_sapphire-text-field__counter--error__vyeSc {
  color: var(--sapphire-semantic-color-content-negative-secondary-default);
}

.textField_sapphire-text-field--error__MbfNA {
  outline: solid var(--sapphire-semantic-size-border-sm)
    var(--sapphire-semantic-color-border-field-error);
}

/**
 * Focus
 */

.textField_sapphire-text-field__r11GX.textField_is-focus__nEXp1,
.textField_sapphire-text-field__r11GX:focus-within {
  outline: solid var(--sapphire-semantic-size-focus-ring)
    var(--sapphire-semantic-color-focus-ring);
  outline-offset: calc(0px - var(--sapphire-semantic-size-focus-ring));
}

.textField_sapphire-text-field__r11GX.textField_is-focus__nEXp1 .textField_sapphire-text-field__input__Twuwz:autofill,
.textField_sapphire-text-field__r11GX:focus-within .textField_sapphire-text-field__input__Twuwz:autofill {
  /*
  * https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
  * Overriding background-color property of auto filled input is not possible,
  * so box-shadow is used here to achieve the same look.
  * Fixes the state when the field is focused and the user is hovering
  * or focusing on the list of browser autofilling suggestions.
  */
  box-shadow: 0 0 0 var(--sapphire-semantic-size-height-input-lg) inset
    var(--sapphire-semantic-color-background-surface) !important;
}

/**
 * Stepper
 *
 * This is used in some numeric inputs
 */

.textField_sapphire-text-field__stepper__nUtZA {
  display: flex;
  flex-direction: column;
  justify-items: stretch;
  padding: var(--sapphire-semantic-size-spacing-5)
    calc(
      var(--sapphire-semantic-size-spacing-5) +
        var(--sapphire-semantic-size-border-sm)
    );
  gap: var(--sapphire-semantic-size-spacing-5);
}

.textField_sapphire-text-field__r11GX:has(.textField_sapphire-text-field__stepper__nUtZA)
  .textField_sapphire-text-field__postfix__nBq-K {
  margin-right: 0;
}

.textField_sapphire-text-field__stepper-button__Fl-7O {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sapphire-semantic-size-icon-md);

  /* In Safari buttons get a 2px border
   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
   */
  margin: 0;
  padding: 0;

  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */

  /* shape */
  border-radius: var(
    --sapphire-semantic-size-radius-sm
  ); /* same as the control */
  border-style: solid;
  border-width: 0;
  border-color: transparent;

  /* transition */
  /* we don't want to transition outline-offset */
  transition-property: opacity, background-color, color;
  transition-duration: var(--sapphire-semantic-time-fade-quick);
  transition-timing-function: ease-in-out;
  cursor: pointer;

  /* color */
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-default
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-default);
}

.textField_sapphire-text-field__stepper-button__Fl-7O:not(:active):not(.textField_is-active__CukRP):not(
    .textField_js-hover__UuJTg
  ):hover,
.textField_sapphire-text-field__stepper-button__Fl-7O:not(:active):not(.textField_is-active__CukRP).textField_is-hover__iKu6x {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-hover
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
}

.textField_sapphire-text-field__stepper-button__Fl-7O.textField_is-active__CukRP,
.textField_sapphire-text-field__stepper-button__Fl-7O:active {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-active
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-active);
}

.textField_sapphire-text-field--md__TTQLF.textField_sapphire-text-field__stepper-button__Fl-7O {
  width: var(--sapphire-semantic-size-icon-sm);
}

.field_sapphire-field__XrV7a {
  display: inline-grid;
  grid-template-columns: auto; /* One column by default */
  row-gap: var(--sapphire-semantic-size-spacing-20);
  column-gap: var(--sapphire-semantic-size-spacing-40);
  font-family: var(--sapphire-semantic-font-name-default);
  grid-auto-rows: min-content;
  /* default width */
  width: var(--sapphire-semantic-size-width-control-default);

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  box-sizing: border-box;
}

.field_sapphire-field--no-width__ctJJU {
  width: auto;
}

/**
 * We need to reset browser styles in case the DOM element is a <fieldset>
 */

fieldset.field_sapphire-field__XrV7a {
  border: 0;
  margin: 0;
  padding: 0;
}

.field_sapphire-field__label__i\+6x8 {
  order: 1;
  justify-content: end;
}

/**
 * We need to reset browser styles in case the DOM element is a <legend>.
 * Setting "float" is ugly, but seems like it needs to be done.
 * https://stackoverflow.com/questions/3973456/default-css-values-for-a-fieldset-legend
 */

legend.field_sapphire-field__label__i\+6x8 {
  padding: 0;
  float: left;
}

.field_sapphire-field__control__NZnef {
  order: 2;
  width: 100%;
  min-width: 0;
}

/**
 * For when the control contains a group of inputs
 */

.field_sapphire-field__control--group__-vqSi {
  display: flex;
  gap: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
}

/**
 * Modifier which makes the control's width exceed the
 * field's container. This is useful when the control's
 * contents must not shrink beyond a min width.
 */

.field_sapphire-field--no-shrink__J2-NV .field_sapphire-field__control__NZnef {
  min-width: initial;
}

.field_sapphire-field__message__iQKnn {
  /**
   * The below "min-width" and "max-width" combination is a little bit magical.
   * It results in this element always having a width equal to the widest of the
   * other grid rows but never greater than that.
   *
   * The reason for why "max-width: 100%" alone is not enough has to do with
   * its interacton with the grid's column width definiton from the parent.
   **/
  min-width: 100%;
  max-width: min-content;
  order: 3;
}

/**
 * Note
 * An error message or a note, which by design are mutually exclusive.
 */

.field_sapphire-field__note-row__BLIGL {
  display: flex;
  align-items: top;
  font-size: var(--sapphire-semantic-size-font-label-md);
  line-height: var(--sapphire-semantic-size-line-height-md);
  color: var(--sapphire-semantic-color-content-default-secondary);
}

.field_sapphire-field--md__\+ckJd .field_sapphire-field__note-row__BLIGL {
  font-size: var(--sapphire-semantic-size-font-label-sm);
  line-height: var(--sapphire-semantic-size-line-height-sm);
}

.field_sapphire-field__note__w5ooG {
  flex: 1;
}

.field_sapphire-field--error__oTkOD .field_sapphire-field__note__w5ooG {
  color: var(--sapphire-semantic-color-content-negative-secondary-default);
}

/**
 * Disabled
 */

.field_sapphire-field__XrV7a.field_is-disabled__HWgv6 {
  opacity: var(--sapphire-semantic-opacity-disabled);
  cursor: not-allowed;
}

.field_sapphire-field__XrV7a.field_is-disabled__HWgv6 .field_sapphire-field__control__NZnef * {
  cursor: inherit;
}

/**
 * Side placement
 */

.field_sapphire-field--label-placement-side__if--Q {
  grid-template-columns: max-content auto;
  width: auto;
}

.field_sapphire-field--label-placement-side__if--Q:not(.field_sapphire-field--no-width__ctJJU)
  .field_sapphire-field__control__NZnef {
  /* default width */
  width: var(--sapphire-semantic-size-width-control-default);
}

.field_sapphire-field--label-placement-side__if--Q .field_sapphire-field__message__iQKnn {
  grid-column: 2;
}

.field_sapphire-field--label-placement-side__if--Q .field_sapphire-field__label__i\+6x8 {
  display: flex;
  align-items: center;
  /* label is center aligned with control by default. But if the control is too long (e.g. textarea)
   * the label stays at the top (max-height)
   */
  max-height: var(--sapphire-semantic-size-height-input-lg);
}

.field_sapphire-field--label-placement-side__if--Q.field_sapphire-field--md__\+ckJd
  .field_sapphire-field__label__i\+6x8 {
  max-height: var(--sapphire-semantic-size-height-input-md);
}

.field_sapphire-field--label-placement-side__if--Q.field_sapphire-field--label-alignment-top__rsdY3
  .field_sapphire-field__label__i\+6x8 {
  align-items: flex-start;
  max-height: unset;
}

/*
 * FieldSet - a wrapper for fields, that handles spacing, and label alignment when labels are on
 * the side.
 */

.field_sapphire-fieldset__55\+-C {
  display: inline-flex;
  flex-direction: column;
  width: min-content; /* this is needed to have the labels column shrunk to the largest one */
  gap: var(--sapphire-semantic-size-spacing-50);
}

.field_sapphire-fieldset__55\+-C .field_sapphire-field--label-placement-side__if--Q {
  grid-template-columns: 1fr min-content;
}

.field_sapphire-fieldset__55\+-C
  .field_sapphire-field--label-placement-side__if--Q
  .field_sapphire-field__label__i\+6x8 {
  /* That is necessary because of width: min-content on field-set. Would be nice to avoid it
     but couldn't find a way to avoid it while meeting the other requirements of having labels
     aligned and not take up more space than needed.
   */
  white-space: nowrap;
}

.label_sapphire-label__eBdhA {
  display: inline-flex;
  align-items: center;
  min-height: var(--sapphire-semantic-size-height-control-xs);
  line-height: var(--sapphire-semantic-size-line-height-md);
  font-size: var(--sapphire-semantic-size-font-label-md);
  gap: var(--sapphire-semantic-size-spacing-10);
}

.label_sapphire-label--md__imguO {
  line-height: var(--sapphire-semantic-size-line-height-sm);
  font-size: var(--sapphire-semantic-size-font-label-sm);
  min-height: var(--sapphire-semantic-size-height-control-2xs);
}

.label_sapphire-label__text__ap7pm {
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  color: var(--sapphire-semantic-color-content-default-primary);
}

.label_sapphire-label__required-indicator__Tnn9t {
  background-image: url("data:image/svg+xml,%3Csvg width=%278%27 height=%278%27 viewBox=%270 0 8 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z%27 fill=%27%23DD3254%27/%3E%3C/svg%3E%0A");
  width: 8px; /* Hard coded, since it's linked to the svg above */
  height: 8px; /* Hard coded, since it's linked to the svg above */
}

.label_sapphire-label__optional-indicator__JbEd6 {
  color: var(--sapphire-semantic-color-content-default-secondary);
}

.icon_sapphire-icon__Ki6Je {
  flex-shrink: 0;
}

.icon_sapphire-icon__Ki6Je.icon_sapphire-icon--sm__5kBA2 {
  height: var(--sapphire-semantic-size-icon-sm);
  width: var(--sapphire-semantic-size-icon-sm);
}

.icon_sapphire-icon__Ki6Je.icon_sapphire-icon--md__rMrF1 {
  height: var(--sapphire-semantic-size-icon-md);
  width: var(--sapphire-semantic-size-icon-md);
}

.icon_sapphire-icon__Ki6Je.icon_sapphire-icon--lg__HVulj {
  height: var(--sapphire-semantic-size-icon-lg);
  width: var(--sapphire-semantic-size-icon-lg);
}

.icon_sapphire-icon__Ki6Je.icon_sapphire-icon--xl__nbLFq {
  height: var(--sapphire-semantic-size-icon-xl);
  width: var(--sapphire-semantic-size-icon-xl);
}

.fieldGroup_sapphire-field-group__cuqUN {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sapphire-semantic-size-spacing-50);
  row-gap: var(--sapphire-semantic-size-spacing-30);
}

.fieldGroup_sapphire-field-group--horizontal__ci12G {
  flex-direction: row;
}

.fieldGroup_sapphire-field-group--vertical__a9cWf {
  flex-direction: column;
}

.fieldGroup_sapphire-field-group--md__Lhn3O {
  row-gap: var(--sapphire-semantic-size-spacing-20);
}

.checkbox_sapphire-checkbox__1wgpD {
  font-family: var(--sapphire-semantic-font-name-default);
  display: inline-flex;
  position: relative;
  max-width: 100%;
}

.checkbox_sapphire-checkbox__input__Bzz74 {
  margin: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  /*
   * Not setting opacity to 0 as it could be ignored by some screen readers
   */
  opacity: 0.0001;
  z-index: 1;

  cursor: pointer;
}

.checkbox_sapphire-checkbox__label__aXaQ7 {
  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  margin-left: var(--sapphire-semantic-size-spacing-20);
  font-size: var(--sapphire-semantic-size-font-control-default);
  color: var(--sapphire-semantic-color-content-default-primary);
  line-height: var(--sapphire-semantic-size-height-control-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--sapphire-semantic-size-spacing-10);
}

.checkbox_sapphire-checkbox__label__aXaQ7:empty {
  margin-left: 0;
}

.checkbox_sapphire-checkbox__required-indicator__YJNmz {
  background-image: url("data:image/svg+xml,%3Csvg width=%278%27 height=%278%27 viewBox=%270 0 8 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z%27 fill=%27%23DD3254%27/%3E%3C/svg%3E%0A");
  width: 8px; /* Hard coded, since it's linked to the svg above */
  height: 8px; /* Hard coded, since it's linked to the svg above */
}

.checkbox_sapphire-checkbox__optional-indicator__qYl06 {
  color: var(--sapphire-semantic-color-content-default-secondary);
}

.checkbox_sapphire-checkbox--md__K9QTI .checkbox_sapphire-checkbox__label__aXaQ7 {
  font-size: var(--sapphire-semantic-size-font-control-md);
  line-height: var(--sapphire-semantic-size-height-control-2xs);
}

.checkbox_sapphire-checkbox__error-text__i\+EzJ {
  display: block;
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
  font-size: var(--sapphire-semantic-size-font-label-md);
  line-height: var(--sapphire-semantic-size-line-height-md);
  color: var(--sapphire-semantic-color-content-negative-secondary-default);
  margin-top: var(--sapphire-semantic-size-spacing-20);

  margin-left: calc(
    var(--sapphire-semantic-size-spacing-20) +
      var(--sapphire-semantic-size-height-box-lg)
  );
}

.checkbox_sapphire-checkbox__error-text--md__wUrjk {
  font-size: var(--sapphire-semantic-size-font-label-sm);
  line-height: var(--sapphire-semantic-size-line-height-sm);
  margin-left: calc(
    var(--sapphire-semantic-size-spacing-20) +
      var(--sapphire-semantic-size-height-box-md)
  );
}

/* The checkbox box */

.checkbox_sapphire-checkbox__box__RQtU\+ {
  box-sizing: border-box;
  position: relative;
  width: var(--sapphire-semantic-size-height-box-lg);
  height: var(--sapphire-semantic-size-height-box-lg);
  border-radius: var(--sapphire-semantic-size-radius-sm);
  border: var(--sapphire-semantic-size-border-md) solid
    var(--sapphire-semantic-color-border-control-default);
  background-color: var(--sapphire-semantic-color-background-control-default);
  transition: all var(--sapphire-semantic-time-fade-quick);
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.checkbox_sapphire-checkbox__box__RQtU\+:has(~ .checkbox_sapphire-checkbox__label__aXaQ7:not(:empty)) {
  margin-top: var(--sapphire-semantic-size-spacing-5);
}

.checkbox_sapphire-checkbox--md__K9QTI .checkbox_sapphire-checkbox__box__RQtU\+ {
  width: var(--sapphire-semantic-size-height-box-md);
  height: var(--sapphire-semantic-size-height-box-md);
}

.checkbox_sapphire-checkbox__box-icon__HRSGx {
  display: inherit;
  line-height: 0;
  color: var(--sapphire-semantic-color-content-action-primary-default);
  margin: calc(var(--sapphire-semantic-size-border-md) * -1);
  height: var(--sapphire-semantic-size-height-box-lg);
  width: var(--sapphire-semantic-size-height-box-lg);
}

.checkbox_sapphire-checkbox--md__K9QTI .checkbox_sapphire-checkbox__box-icon__HRSGx {
  height: var(--sapphire-semantic-size-height-box-md);
  width: var(--sapphire-semantic-size-height-box-md);
}

.checkbox_sapphire-checkbox--error__4h3tH .checkbox_sapphire-checkbox__box__RQtU\+ {
  border-color: var(
    --sapphire-semantic-color-background-negative-primary-default
  );
}

/* Checked (same UI as indeterminate) */

.checkbox_sapphire-checkbox--checked__JmhEj .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--indeterminate__esvcQ .checkbox_sapphire-checkbox__box__RQtU\+ {
  border-width: var(--sapphire-global-size-generic-0);
  background-color: var(
    --sapphire-semantic-color-background-action-primary-default
  );
}

.checkbox_sapphire-checkbox--checked__JmhEj.checkbox_sapphire-checkbox--error__4h3tH .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--indeterminate__esvcQ.checkbox_sapphire-checkbox--error__4h3tH
  .checkbox_sapphire-checkbox__box__RQtU\+ {
  background-color: var(
    --sapphire-semantic-color-background-negative-primary-default
  );
}

/* HOVER */

/* Hover when not checked */

.checkbox_sapphire-checkbox__1wgpD:not(:active):not(.checkbox_is-active__Qh0Kb):not(
    .checkbox_sapphire-checkbox--checked__JmhEj
  ).checkbox_is-hover__oISLz
  .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox__1wgpD:not(:active):not(.checkbox_is-active__Qh0Kb):not(
    .checkbox_sapphire-checkbox--checked__JmhEj
  ):not(.checkbox_js-hover__ijsWT):hover
  .checkbox_sapphire-checkbox__input__Bzz74:not(:disabled)
  ~ .checkbox_sapphire-checkbox__box__RQtU\+ {
  border-color: var(--sapphire-semantic-color-border-control-hover);
}

.checkbox_sapphire-checkbox--error__4h3tH:not(:active):not(.checkbox_is-active__Qh0Kb):not(
    .checkbox_sapphire-checkbox--checked__JmhEj
  ).checkbox_is-hover__oISLz
  .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--error__4h3tH:not(:active):not(.checkbox_is-active__Qh0Kb):not(
    .checkbox_sapphire-checkbox--checked__JmhEj
  ):not(.checkbox_js-hover__ijsWT):hover
  .checkbox_sapphire-checkbox__input__Bzz74:not(:disabled)
  ~ .checkbox_sapphire-checkbox__box__RQtU\+ {
  border-color: var(
    --sapphire-semantic-color-background-negative-primary-hover
  );
}

/* Hover when checked (same UI as indeterminate) */

.checkbox_sapphire-checkbox--checked__JmhEj:not(:active):not(.checkbox_is-active__Qh0Kb).checkbox_is-hover__oISLz
  .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--checked__JmhEj:not(:active):not(.checkbox_is-active__Qh0Kb):not(.checkbox_js-hover__ijsWT):hover
  .checkbox_sapphire-checkbox__input__Bzz74:not(:disabled)
  ~ .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--indeterminate__esvcQ:not(:active):not(.checkbox_is-active__Qh0Kb).checkbox_is-hover__oISLz
  .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--indeterminate__esvcQ:not(:active):not(.checkbox_is-active__Qh0Kb):not(
    .checkbox_js-hover__ijsWT
  ):hover
  .checkbox_sapphire-checkbox__input__Bzz74:not(:disabled)
  ~ .checkbox_sapphire-checkbox__box__RQtU\+ {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-hover
  );
}

.checkbox_sapphire-checkbox--checked__JmhEj.checkbox_sapphire-checkbox--error__4h3tH:not(:active):not(
    .checkbox_is-active__Qh0Kb
  ).checkbox_is-hover__oISLz
  .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--checked__JmhEj.checkbox_sapphire-checkbox--error__4h3tH:not(:active):not(
    .checkbox_is-active__Qh0Kb
  ):not(.checkbox_js-hover__ijsWT):hover
  .checkbox_sapphire-checkbox__input__Bzz74:not(:disabled)
  ~ .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--indeterminate__esvcQ.checkbox_sapphire-checkbox--error__4h3tH:not(:active):not(
    .checkbox_is-active__Qh0Kb
  ).checkbox_is-hover__oISLz
  .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox--indeterminate__esvcQ.checkbox_sapphire-checkbox--error__4h3tH:not(:active):not(
    .checkbox_is-active__Qh0Kb
  ):not(.checkbox_js-hover__ijsWT):hover
  .checkbox_sapphire-checkbox__input__Bzz74:not(:disabled)
  ~ .checkbox_sapphire-checkbox__box__RQtU\+ {
  background-color: var(
    --sapphire-semantic-color-background-negative-primary-hover
  );
}

/* FOCUS */

.checkbox_sapphire-checkbox__1wgpD.checkbox_is-focus__yQfSn .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox__1wgpD:not(.checkbox_js-focus__wZ4tX)
  .checkbox_sapphire-checkbox__input__Bzz74:focus-visible
  ~ .checkbox_sapphire-checkbox__box__RQtU\+ {
  outline: var(--sapphire-semantic-size-focus-ring) solid
    var(--sapphire-semantic-color-focus-ring);
  outline-offset: var(--sapphire-semantic-size-focus-ring);
}

/* DISABLED */

.checkbox_sapphire-checkbox__input__Bzz74:disabled {
  cursor: not-allowed;
}

.checkbox_sapphire-checkbox__1wgpD:not(.checkbox_sapphire-checkbox--no-disabled__F7RpZ)
  .checkbox_sapphire-checkbox__input__Bzz74:disabled
  ~ .checkbox_sapphire-checkbox__box__RQtU\+,
.checkbox_sapphire-checkbox__1wgpD:not(.checkbox_sapphire-checkbox--no-disabled__F7RpZ)
  .checkbox_sapphire-checkbox__input__Bzz74:disabled
  ~ .checkbox_sapphire-checkbox__label__aXaQ7 {
  opacity: var(--sapphire-semantic-opacity-disabled);
}

.select_sapphire-select__gPrE7 {
  position: relative;
  display: block;
  color: var(--sapphire-semantic-color-content-default-primary);
  font-family: var(--sapphire-semantic-font-name-default);
  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.select_sapphire-select__button__q3FQA {
  display: flex;
  align-items: center;
  height: var(--sapphire-semantic-size-height-input-lg);
  box-sizing: border-box;
  cursor: pointer;
  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);
  border: none;
  background-color: var(--sapphire-semantic-color-background-field-default);
  width: 100%;
  outline: 0;
  text-align: left;
  color: inherit;
  font-family: inherit;
  box-shadow: inset 0px 0px 0px 1px
    var(--sapphire-semantic-color-border-field-default);
  border-radius: var(--sapphire-semantic-size-radius-sm);
  gap: var(--sapphire-semantic-size-spacing-30);
}

.select_sapphire-select--md__OmLbx .select_sapphire-select__button__q3FQA {
  height: var(--sapphire-semantic-size-height-input-md);
  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-md);
  gap: var(--sapphire-semantic-size-spacing-20);
}

.select_sapphire-select__value__2o5Br {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--sapphire-semantic-size-font-control-default);
  width: 100%;
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select_sapphire-select--md__OmLbx .select_sapphire-select__value__2o5Br {
  font-size: var(--sapphire-semantic-size-font-control-md);
}

.select_sapphire-select__placeholder__mOc6U {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sapphire-semantic-color-content-default-secondary);
  pointer-events: none;
}

.select_sapphire-select__icon-container__3k4Um {
  line-height: 0;
  width: var(--sapphire-semantic-size-icon-lg);
  height: var(--sapphire-semantic-size-icon-lg);
}

.select_sapphire-select--md__OmLbx .select_sapphire-select__icon-container__3k4Um {
  width: var(--sapphire-semantic-size-icon-md);
  height: var(--sapphire-semantic-size-icon-md);
}

/**
 * Prefix
 */

.select_sapphire-select__prefix__R\+9Yc {
  display: inherit; /* because this will not be a div */
  font-size: var(--sapphire-semantic-size-font-control-default);
}

.select_sapphire-select--md__OmLbx .select_sapphire-select__prefix__R\+9Yc {
  font-size: var(--sapphire-semantic-size-font-control-md);
}

/*
 * Search input. If visually-hidden styles are not inline,
 * data-hidden="true" can be added when the input is visually hidden,
 * for the default styles to not interfere with visually-hidden styles.
 */

.select_sapphire-select__search-input__ONqhD:not([data-hidden='true']) {
  all: inherit;
}

.select_sapphire-select__search-input__ONqhD::placeholder {
  color: var(--sapphire-semantic-color-content-default-secondary);
}

.select_sapphire-select__native-select__6CTPM {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.01;
  width: 100%;
  z-index: 1;
}

/**
 * Error
 */

.select_sapphire-select--error__-jFnG:not(.select_is-disabled__XyueF) .select_sapphire-select__button__q3FQA {
  box-shadow: inset 0px 0px 0px 1px
    var(--sapphire-semantic-color-border-field-error);
}

/*
 * Focus
 */

.select_sapphire-select__gPrE7:not(.select_is-disabled__XyueF).select_is-focus__yatzY .select_sapphire-select__button__q3FQA {
  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
    var(--sapphire-semantic-color-focus-ring);
}

.select_sapphire-select--error__-jFnG:not(.select_is-disabled__XyueF).select_is-focus__yatzY .select_sapphire-select__button__q3FQA {
  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
    var(--sapphire-semantic-color-border-field-error);
}

.select_sapphire-select__gPrE7.select_is-disabled__XyueF .select_sapphire-select__button__q3FQA {
  cursor: not-allowed;
}

.surface_sapphire-surface__\+yNNf {
  font-family: var(--sapphire-semantic-font-name-default);
  background-color: var(--sapphire-semantic-color-background-surface);
  color: var(--sapphire-semantic-color-content-default-primary);

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes backdrop_backdrop-fade-in__ZgmdL {
  from {
    background-color: transparent;
  }

  to {
    background-color: var(--sapphire-semantic-color-background-backdrop);
  }
}

@keyframes backdrop_backdrop-fade-out__TqiEr {
  from {
    background-color: var(--sapphire-semantic-color-background-backdrop);
  }

  to {
    background-color: transparent;
  }
}

.backdrop_sapphire-backdrop__JBwND {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  animation-name: backdrop_backdrop-fade-in__ZgmdL;
  animation-duration: var(--sapphire-semantic-time-fade-default);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.backdrop_sapphire-backdrop--exiting__H5nne {
  animation-name: backdrop_backdrop-fade-out__TqiEr;
}

@keyframes popover_fade-in__e\+d0T {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.popover_sapphire-popover__uBcse {
  box-sizing: border-box;
  background-color: var(--sapphire-semantic-color-background-popover-default);
  box-shadow: var(--sapphire-semantic-shadow-popover);
  animation: popover_fade-in__e\+d0T var(--sapphire-semantic-time-fade-quick) ease-in-out;
  border-radius: var(--sapphire-semantic-size-radius-popover);
  overflow: auto;

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /**
   * flex display makes it possible to have a content container with height: 100%, which otherwise
   * is not possible when popover only has a max-height and not a height.
   * Having an extra block inner container (.sapphire-popover__content) then avoid having the
   * content of the popover a direct flex child which comes with some side effects.
   */
  display: flex;
}

.popover_sapphire-popover__content__p4sLv {
  flex-basis: 100%;
}

.popover_sapphire-popover--padded__BUR5X {
  padding: var(--sapphire-semantic-size-spacing-container-horizontal-sm);
}

.popover_sapphire-popover--max-width__z1BOv {
  max-width: var(--sapphire-global-size-generic-1120);
}

.listbox_sapphire-listbox__5-N70 {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  list-style: none;
  outline: none;
  font-family: var(--sapphire-semantic-font-name-default);

  /**
   * tldr; Please inspect the listbox without these adding props, it's easier
   * to understand why these are here.
   *
   * Long version:
   *
   * Each item has a left/right padding which greater than the top/bottom one.
   *
   * This means that there will be a visual asymmetry for the padding around
   * the first/last item in the listbox. We want to adjust that by adding a
   * top/bottom padding to the whole listbox of a value that would guarantee
   * the corners of the listbox are padded equally all around.
   *
   * To achieve that, we want to add a padding equal to the missing difference
   * between the horizontal and vertical item paddings.
   */

  padding: calc(
      var(--sapphire-semantic-size-spacing-10) -
        var(--sapphire-semantic-size-spacing-5)
    )
    0;

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Item in the list */

.listbox_sapphire-listbox__item__Hio-S {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sapphire-semantic-size-spacing-5)
    var(--sapphire-semantic-size-spacing-10);
  color: var(--sapphire-semantic-color-content-selection-unselected-default);
  outline: none;
  cursor: pointer;
  text-decoration: none;

  /**
   * Making sure listbox will grow to the maximum width needed by the content, which should
   * practically disable text wrapping. Ideally we would want the text to wrap, if listbox width
   * is limited by a container, but with the implementation of virtualization, we couldn't find
   * a solution to both allow wrapping and not wrapping too eagerly.
   */
  min-width: max-content;
}

.listbox_sapphire-listbox__item--danger__\+A5yV {
  color: var(--sapphire-semantic-color-content-action-danger-default);
}

.listbox_sapphire-listbox__item--selected__14lom {
  color: var(--sapphire-semantic-color-content-selection-selected-default);
}

.listbox_sapphire-listbox__item--selected__14lom .listbox_sapphire-listbox__content__keHTh {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-default
  );
}

/* Content inside the item */

.listbox_sapphire-listbox__content__keHTh {
  width: 100%;
  /**
   * max-width set to mitigate the issue of not being able to set a max-width on the popover the
   * listbox is rendered in, in use cases like Select.
   */
  max-width: calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--sapphire-semantic-size-spacing-30);
  /*
   * We want the left-side icon column to not take space if it's empty. The
   * right-side "checkmark" icon column should always take space even if the
   * checkmark isn't there. This is to make sure the listbox doesn't jump when
   * selecting items that add the checkmark in the last column.
   */
  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-lg);
  padding: calc(
      var(--sapphire-semantic-size-spacing-30) -
        var(--sapphire-semantic-size-spacing-5)
    )
    var(--sapphire-semantic-size-spacing-30);
  border-radius: var(--sapphire-semantic-size-radius-sm);
  transition-property: opacity, background-color, color;
  transition-duration: var(--sapphire-semantic-time-fade-quick);
  transition-timing-function: ease-in-out;

  min-height: var(--sapphire-semantic-size-height-control-xs);
}

.listbox_sapphire-listbox--md__9PFKP .listbox_sapphire-listbox__content__keHTh {
  gap: var(--sapphire-semantic-size-spacing-25);
  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-md);
  padding: calc(
      var(--sapphire-semantic-size-spacing-20) -
        var(--sapphire-semantic-size-spacing-5)
    )
    var(--sapphire-semantic-size-spacing-25);
}

.listbox_sapphire-listbox--sm__0vbXQ .listbox_sapphire-listbox__content__keHTh {
  gap: var(--sapphire-semantic-size-spacing-20);
  grid-template-columns: auto 1fr var(--sapphire-semantic-size-icon-sm);
  padding: calc(
      var(--sapphire-semantic-size-spacing-10) -
        var(--sapphire-semantic-size-spacing-5)
    )
    var(--sapphire-semantic-size-spacing-20);
}

/* Icon content */

.listbox_sapphire-listbox__icon__U\+IoL {
  line-height: 0;
}

/* Text content */

.listbox_sapphire-listbox__text-container__ISs3b {
  line-height: var(--sapphire-semantic-size-line-height-md);
}

/*
 * When there is no icon before the content we want the content
 * to stretch 2 columns out of the 3.
 */

.listbox_sapphire-listbox__text-container__ISs3b:first-child {
  grid-column: span 2;
}

.listbox_sapphire-listbox__primary-text__3tv6f {
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-semantic-size-font-text-lg);
}

.listbox_sapphire-listbox__secondary-text__Ke9Px {
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
  font-size: var(--sapphire-semantic-size-font-text-md);
}

.listbox_sapphire-listbox--md__9PFKP .listbox_sapphire-listbox__primary-text__3tv6f {
  font-size: var(--sapphire-semantic-size-font-text-md);
}

.listbox_sapphire-listbox--sm__0vbXQ .listbox_sapphire-listbox__primary-text__3tv6f {
  font-size: var(--sapphire-semantic-size-font-text-sm);
}

.listbox_sapphire-listbox--md__9PFKP .listbox_sapphire-listbox__secondary-text__Ke9Px {
  font-size: var(--sapphire-semantic-size-font-text-sm);
}

.listbox_sapphire-listbox--sm__0vbXQ .listbox_sapphire-listbox__secondary-text__Ke9Px {
  font-size: var(--sapphire-semantic-size-font-text-sm);
}

.listbox_sapphire-listbox__item__Hio-S:not(.listbox_sapphire-listbox__item--danger__\+A5yV):not(
    .listbox_sapphire-listbox__item--selected__14lom
  )
  .listbox_sapphire-listbox__secondary-text__Ke9Px {
  color: var(--sapphire-semantic-color-content-default-secondary);
}

.listbox_sapphire-listbox__item__Hio-S.listbox_is-disabled__xuoEk {
  opacity: var(--sapphire-semantic-opacity-disabled);
  cursor: not-allowed;
}

.listbox_sapphire-listbox__section__PjsDV {
  padding: 0;
  list-style: none;
}

.listbox_sapphire-listbox__section-header__gyIv5 {
  font-size: var(--sapphire-semantic-size-font-text-md);
  color: var(--sapphire-semantic-color-content-default-secondary);
  padding: var(--sapphire-semantic-size-spacing-30)
    var(--sapphire-semantic-size-spacing-40)
    var(--sapphire-semantic-size-spacing-20)
    var(--sapphire-semantic-size-spacing-40);
}

.listbox_sapphire-listbox--md__9PFKP .listbox_sapphire-listbox__section-header__gyIv5 {
  font-size: var(--sapphire-semantic-size-font-text-sm);
  padding: var(--sapphire-semantic-size-spacing-25)
    var(--sapphire-global-size-generic-35)
    var(--sapphire-global-size-generic-15)
    var(--sapphire-global-size-generic-35);
}

.listbox_sapphire-listbox--sm__0vbXQ .listbox_sapphire-listbox__section-header__gyIv5 {
  font-size: var(--sapphire-semantic-size-font-text-sm);
  padding: var(--sapphire-semantic-size-spacing-20)
    var(--sapphire-semantic-size-spacing-30)
    var(--sapphire-semantic-size-spacing-10)
    var(--sapphire-semantic-size-spacing-30);
}

.listbox_sapphire-listbox__separator__2pepn {
  height: var(--sapphire-semantic-size-border-sm);
  width: 100%;
  background: var(--sapphire-semantic-color-border-separator-default);
  margin-top: calc(
    var(--sapphire-semantic-size-spacing-10) -
      var(--sapphire-semantic-size-spacing-5)
  );
  margin-bottom: calc(
    var(--sapphire-semantic-size-spacing-10) -
      var(--sapphire-semantic-size-spacing-5)
  );
}

/* Focus */

.listbox_sapphire-listbox__item__Hio-S:not(.listbox_is-disabled__xuoEk).listbox_is-focus__4o21k .listbox_sapphire-listbox__content__keHTh,
.listbox_sapphire-listbox__item__Hio-S:not(.listbox_is-disabled__xuoEk):not(.listbox_js-focus__y3jV\+):focus-visible
  .listbox_sapphire-listbox__content__keHTh {
  box-shadow: 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
    var(--sapphire-semantic-color-focus-ring);
}

/* Hover */

.listbox_sapphire-listbox__item__Hio-S:not(.listbox_is-disabled__xuoEk).listbox_is-hover__T9yMH:not(.listbox_is-active__jDf8d)
  .listbox_sapphire-listbox__content__keHTh,
.listbox_sapphire-listbox__item__Hio-S:not(.listbox_is-disabled__xuoEk):not(.listbox_js-hover__CWu2P):not(.listbox_is-active__jDf8d):hover
  .listbox_sapphire-listbox__content__keHTh {
  color: var(--sapphire-semantic-color-content-selection-unselected-hover);
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-hover
  );
}

.listbox_sapphire-listbox__item--danger__\+A5yV:not(.listbox_is-disabled__xuoEk):not(.listbox_is-active__jDf8d).listbox_is-hover__T9yMH
  .listbox_sapphire-listbox__content__keHTh,
.listbox_sapphire-listbox__item--danger__\+A5yV:not(.listbox_is-disabled__xuoEk):not(.listbox_js-hover__CWu2P):not(
    .listbox_is-active__jDf8d
  ):hover
  .listbox_sapphire-listbox__content__keHTh {
  color: var(--sapphire-semantic-color-content-action-danger-default);
  background-color: var(
    --sapphire-semantic-color-background-action-danger-default
  );
}

.listbox_sapphire-listbox__item--selected__14lom:not(.listbox_is-disabled__xuoEk):not(.listbox_is-active__jDf8d).listbox_is-hover__T9yMH
  .listbox_sapphire-listbox__content__keHTh,
.listbox_sapphire-listbox__item--selected__14lom:not(.listbox_is-disabled__xuoEk):not(.listbox_is-active__jDf8d):not(
    .listbox_js-hover__CWu2P
  ):hover
  .listbox_sapphire-listbox__content__keHTh {
  color: var(--sapphire-semantic-color-content-selection-selected-hover);
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-hover
  );
}

/* Active */

.listbox_sapphire-listbox__item__Hio-S:not(.listbox_is-disabled__xuoEk).listbox_is-active__jDf8d .listbox_sapphire-listbox__content__keHTh {
  color: var(--sapphire-semantic-color-content-selection-unselected-active);
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-active
  );
}

.listbox_sapphire-listbox__item--danger__\+A5yV:not(.listbox_is-disabled__xuoEk).listbox_is-active__jDf8d
  .listbox_sapphire-listbox__content__keHTh {
  color: var(--sapphire-semantic-color-content-action-danger-active);
  background-color: var(
    --sapphire-semantic-color-background-action-danger-hover
  );
}

.listbox_sapphire-listbox__item--selected__14lom:not(.listbox_is-disabled__xuoEk).listbox_is-active__jDf8d
  .listbox_sapphire-listbox__content__keHTh {
  color: var(--sapphire-semantic-color-content-selection-selected-active);
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-active
  );
}

@keyframes skeleton_skeletonPulse__3Qnvv {
  0%,
  25% {
    opacity: 1;
  }
  60%,
  65% {
    opacity: var(--sapphire-global-opacity-35);
  }
  100% {
    opacity: 1;
  }
}

.skeleton_sapphire-skeleton__\+pgJX {
  width: 100%;

  background-color: var(--sapphire-semantic-color-background-skeleton-default);

  animation: skeleton_skeletonPulse__3Qnvv infinite cubic-bezier(0.25, 0, 0.25, 1);
  animation-duration: var(--sapphire-semantic-time-fade-slow);
}

.skeleton_sapphire-skeleton--text__7phf4 {
  /* Design spec required 14px height in context of 16px text
   * We thus calculate that ratio from 1em to cater for
   * cases where context has other size than 16px.
   */
  height: calc(var(--sapphire-global-size-ratio-height) * 1em);
  /* We're translating on y-axis half of the remaining space from above ratio up to 1
   * Thus in this case pushing bar 1/16 down to leave that space above and below.
   * Ie. center it vertically, but still according to font-size in context.
   */
  transform: translateY(
    calc((1 - var(--sapphire-global-size-ratio-height)) / 2 * 1em)
  );
  /* For responding to text-align on parent */
  display: inline-block;
  border-radius: var(--sapphire-semantic-size-radius-sm);
}

.skeleton_sapphire-skeleton--circle__kPmnU {
  height: 100%;
  border-radius: 50%;
}

.skeleton_sapphire-skeleton--block__yD8HK {
  height: 100%;
  width: 100%;
}

.avatar_sapphire-avatar__TBtYU {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: var(--sapphire-semantic-size-height-control-md);
  width: var(--sapphire-semantic-size-height-control-md);
  border-radius: var(--sapphire-semantic-size-height-control-md);

  white-space: nowrap;
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-global-size-font-100);
  font-style: normal;
  text-transform: capitalize;
  /* Passive color by default */
  background-color: var(
    --sapphire-semantic-color-background-passive-secondary-default
  );
  color: var(--sapphire-semantic-color-content-default-primary);

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sizes */

.avatar_sapphire-avatar--xs__KQnot {
  height: var(--sapphire-semantic-size-height-control-xs);
  width: var(--sapphire-semantic-size-height-control-xs);
  border-radius: var(--sapphire-semantic-size-height-control-xs);
  font-size: var(--sapphire-semantic-size-font-control-sm);
}

.avatar_sapphire-avatar--sm__eCyGV {
  height: var(--sapphire-semantic-size-height-control-sm);
  width: var(--sapphire-semantic-size-height-control-sm);
  border-radius: var(--sapphire-semantic-size-height-control-sm);
  font-size: var(--sapphire-semantic-size-font-control-md);
}

.avatar_sapphire-avatar--lg__S06Hn {
  height: var(--sapphire-semantic-size-height-control-lg);
  width: var(--sapphire-semantic-size-height-control-lg);
  border-radius: var(--sapphire-semantic-size-height-control-lg);
  font-size: var(--sapphire-global-size-font-112);
}

.avatar_sapphire-avatar--xl__q\+hQZ {
  height: var(--sapphire-semantic-size-height-control-xl);
  width: var(--sapphire-semantic-size-height-control-xl);
  border-radius: var(--sapphire-semantic-size-height-control-xl);
  font-size: var(--sapphire-global-size-font-130);
}

/* Colors and variants */

.avatar_sapphire-avatar--positive__dvpra {
  color: var(--sapphire-semantic-color-content-positive-secondary-default);
  background-color: var(
    --sapphire-semantic-color-background-positive-secondary-default
  );
}

.avatar_sapphire-avatar--negative__pv3\+y {
  color: var(--sapphire-semantic-color-content-negative-secondary-default);
  background-color: var(
    --sapphire-semantic-color-background-negative-secondary-default
  );
}

.avatar_sapphire-avatar--warning__bj1Jf {
  color: var(--sapphire-semantic-color-content-warning-secondary-default);
  background-color: var(
    --sapphire-semantic-color-background-warning-secondary-default
  );
}

.avatar_sapphire-avatar--informative__y3j6g {
  color: var(--sapphire-semantic-color-content-informative-secondary-default);
  background-color: var(
    --sapphire-semantic-color-background-informative-secondary-default
  );
}

.avatar_sapphire-avatar--aqua__kUxlZ {
  background-color: var(--sapphire-global-color-secondary-aqua-75);
}

.avatar_sapphire-avatar--copper__wfQ9e {
  background-color: var(--sapphire-global-color-secondary-copper-75);
}

.avatar_sapphire-avatar--electro__Al6SX {
  background-color: var(--sapphire-global-color-secondary-electro-75);
}

.avatar_sapphire-avatar--indigo__TYk1w {
  background-color: var(--sapphire-global-color-secondary-indigo-75);
}

.avatar_sapphire-avatar--lime__CCWJO {
  background-color: var(--sapphire-global-color-secondary-lime-75);
}

.avatar_sapphire-avatar--pink__ir6c6 {
  background-color: var(--sapphire-global-color-secondary-pink-75);
}

.avatar_sapphire-avatar--violet__LbnHW {
  background-color: var(--sapphire-global-color-secondary-violet-75);
}

.avatar_sapphire-avatar--gold__Abg\+I {
  background-color: var(--sapphire-global-color-secondary-gold-75);
}

.avatar_sapphire-avatar--beige__GEYBp {
  background-color: var(--sapphire-global-color-secondary-beige-75);
}

.avatar_sapphire-avatar--orchid__h5OAC {
  background-color: var(--sapphire-global-color-secondary-orchid-75);
}

.avatar_sapphire-avatar--gray__oOq32 {
  background-color: var(--sapphire-global-color-secondary-gray-75);
}

.avatar_sapphire-avatar--cobalt__7liQU {
  background-color: var(--sapphire-global-color-secondary-cobalt-75);
}

.avatar_sapphire-avatar--forestGreen__f7Vze {
  background-color: var(--sapphire-global-color-secondary-forest-green-75);
}

.avatar_sapphire-avatar--teal__OhG1M {
  background-color: var(--sapphire-global-color-secondary-teal-75);
}

.avatar_sapphire-avatar--orange__OfVE5 {
  background-color: var(--sapphire-global-color-secondary-orange-75);
}

.iconButton_sapphire-icon-button__09N8U {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;

  /* In Safari buttons get a 2px border
   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
   */
  margin: 0;
  padding: 0;

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* sizing */
  height: var(--sapphire-semantic-size-height-control-md);
  width: var(--sapphire-semantic-size-height-control-md);
  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */

  /* shape */
  border-radius: var(--sapphire-semantic-size-height-control-md);
  border-style: solid;
  border-width: 0;
  border-color: transparent;

  /* typography */
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-semantic-size-font-control-md);

  /* transition */
  /* we don't want to transition outline-offset */
  transition-property: opacity, background-color, color;
  transition-duration: var(--sapphire-semantic-time-fade-quick);
  transition-timing-function: ease-in-out;
  cursor: pointer;
}

a.iconButton_sapphire-icon-button__09N8U {
  text-decoration: none;
}

/* Disabled state for all variants */

.iconButton_sapphire-icon-button__09N8U:disabled,
.iconButton_sapphire-icon-button__09N8U.iconButton_is-disabled__y16bu {
  opacity: var(--sapphire-semantic-opacity-disabled);
  cursor: not-allowed;
}

/* Focused state for all variants */

.iconButton_sapphire-icon-button__09N8U:focus {
  outline: none;
}

.iconButton_sapphire-icon-button__09N8U.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button__09N8U:not(.iconButton_js-focus__6nVGH):focus-visible {
  outline: var(--sapphire-semantic-size-focus-ring) solid
    var(--sapphire-semantic-color-focus-ring);
  outline-offset: var(--sapphire-semantic-size-focus-ring);
}

/* Button loading */

.iconButton_sapphire-icon-button__spinner__CIOgO {
  position: absolute;
  display: inherit;
  cursor: not-allowed;
}

.iconButton_sapphire-icon-button--loading__r7Y8b .iconButton_sapphire-icon-button__icon__fQefq {
  visibility: hidden;
}

/**
 * Skin rules
 */

/* ### Variant: Primary */

/* ## Style: Default */

.iconButton_sapphire-icon-button--primary__KTEUK {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-default
  );
  color: var(--sapphire-semantic-color-content-action-primary-default);
}

.iconButton_sapphire-icon-button--primary__KTEUK:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):not(.iconButton_js-hover__y7hA2):hover,
.iconButton_sapphire-icon-button--primary__KTEUK:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-hover
  );
}

.iconButton_sapphire-icon-button--primary__KTEUK.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--primary__KTEUK:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-default
  );
}

.iconButton_sapphire-icon-button--primary__KTEUK:not(:disabled):not(.iconButton_is-disabled__y16bu).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--primary__KTEUK:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--primary__KTEUK:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-active
  );
}

/* ### Variant: Secondary */

/* ## Style: Default */

.iconButton_sapphire-icon-button--secondary__Upppa {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-default
  );
  color: var(--sapphire-semantic-color-content-action-secondary-default);
}

.iconButton_sapphire-icon-button--secondary__Upppa:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):not(.iconButton_js-hover__y7hA2):hover,
.iconButton_sapphire-icon-button--secondary__Upppa:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-hover
  );
  color: var(--sapphire-semantic-color-content-action-secondary-hover);
}

.iconButton_sapphire-icon-button--secondary__Upppa.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--secondary__Upppa:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-default
  );
}

.iconButton_sapphire-icon-button--secondary__Upppa:not(:disabled):not(.iconButton_is-disabled__y16bu).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--secondary__Upppa:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--secondary__Upppa:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-active
  );
  color: var(--sapphire-semantic-color-content-action-secondary-active);
}

/* ## Style: Ghost */

.iconButton_sapphire-icon-button--secondary-ghost__1WveK {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-default
  );
  color: var(--sapphire-semantic-color-content-action-secondary-default);
}

.iconButton_sapphire-icon-button--secondary-ghost__1WveK:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):not(.iconButton_js-hover__y7hA2):hover,
.iconButton_sapphire-icon-button--secondary-ghost__1WveK:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-hover
  );
  color: var(--sapphire-semantic-color-content-action-secondary-hover);
}

.iconButton_sapphire-icon-button--secondary-ghost__1WveK.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--secondary-ghost__1WveK:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-default
  );
}

.iconButton_sapphire-icon-button--secondary-ghost__1WveK:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--secondary-ghost__1WveK:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--secondary-ghost__1WveK:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-active
  );
  color: var(--sapphire-semantic-color-content-action-secondary-active);
}

/* ### Variant: Tertiary */

/* ## Style: Default */

.iconButton_sapphire-icon-button--tertiary__xocho {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-default
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-default);
}

.iconButton_sapphire-icon-button--tertiary__xocho:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):not(.iconButton_js-hover__y7hA2):hover,
.iconButton_sapphire-icon-button--tertiary__xocho:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-hover
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
}

.iconButton_sapphire-icon-button--tertiary__xocho.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--tertiary__xocho:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-default
  );
}

.iconButton_sapphire-icon-button--tertiary__xocho:not(:disabled):not(.iconButton_is-disabled__y16bu).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--tertiary__xocho:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--tertiary__xocho:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-active
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-active);
}

/* ## Style: Ghost */

.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-default
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-default);
}

.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):not(.iconButton_js-hover__y7hA2):hover,
.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-hover
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
}

.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-default
  );
}

.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--tertiary-ghost__3S4Bs:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-active
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-active);
}

/* ### Variant: Danger */

/* ## Style: Default */

.iconButton_sapphire-icon-button--danger__rtH9a {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-default
  );
  color: var(--sapphire-semantic-color-content-action-danger-default);
}

.iconButton_sapphire-icon-button--danger__rtH9a:not(:disabled):not(.iconButton_is-disabled__y16bu):not(:active):not(
    .iconButton_is-active__jJDXM
  ):not(.iconButton_js-hover__y7hA2):hover,
.iconButton_sapphire-icon-button--danger__rtH9a:not(:disabled):not(.iconButton_is-disabled__y16bu):not(:active):not(
    .iconButton_is-active__jJDXM
  ).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-hover
  );
  color: var(--sapphire-semantic-color-content-action-danger-hover);
}

.iconButton_sapphire-icon-button--danger__rtH9a.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--danger__rtH9a:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-default
  );
}

.iconButton_sapphire-icon-button--danger__rtH9a:not(:disabled):not(.iconButton_is-disabled__y16bu).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--danger__rtH9a:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--danger__rtH9a:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-active
  );
  color: var(--sapphire-semantic-color-content-action-danger-active);
}

/* ## Style: Ghost */

.iconButton_sapphire-icon-button--danger-ghost__cMG0F {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-default
  );
  color: var(--sapphire-semantic-color-content-action-danger-default);
}

.iconButton_sapphire-icon-button--danger-ghost__cMG0F:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):not(.iconButton_js-hover__y7hA2):hover,
.iconButton_sapphire-icon-button--danger-ghost__cMG0F:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-hover
  );
  color: var(--sapphire-semantic-color-content-action-danger-hover);
}

.iconButton_sapphire-icon-button--danger-ghost__cMG0F.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--danger-ghost__cMG0F:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-default
  );
}

.iconButton_sapphire-icon-button--danger-ghost__cMG0F:not(:disabled):not(.iconButton_is-disabled__y16bu).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--danger-ghost__cMG0F:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--danger-ghost__cMG0F:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-active
  );
  color: var(--sapphire-semantic-color-content-action-danger-active);
}

/**
 * Icon
 */

.iconButton_sapphire-icon-button__icon__fQefq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: var(--sapphire-semantic-size-icon-md);
  width: var(--sapphire-semantic-size-icon-md);
}

.iconButton_sapphire-icon-button--lg__Ja1nl .iconButton_sapphire-icon-button__icon__fQefq {
  height: var(--sapphire-semantic-size-icon-lg);
  width: var(--sapphire-semantic-size-icon-lg);
}

.iconButton_sapphire-icon-button--sm__iTwQg .iconButton_sapphire-icon-button__icon__fQefq {
  height: var(--sapphire-semantic-size-icon-sm);
  width: var(--sapphire-semantic-size-icon-sm);
}

.iconButton_sapphire-icon-button--xs__2RmXh .iconButton_sapphire-icon-button__icon__fQefq {
  height: var(--sapphire-semantic-size-icon-sm);
  width: var(--sapphire-semantic-size-icon-sm);
}

/**
 * Size variations
 */

/**
 * LARGE
 */

.iconButton_sapphire-icon-button--lg__Ja1nl {
  height: var(--sapphire-semantic-size-height-control-lg);
  width: var(--sapphire-semantic-size-height-control-lg);
  border-radius: var(--sapphire-semantic-size-height-control-lg);
  font-size: var(--sapphire-semantic-size-font-control-default);
}

/**
 * SMALL
 */

.iconButton_sapphire-icon-button--sm__iTwQg {
  height: var(--sapphire-semantic-size-height-control-sm);
  width: var(--sapphire-semantic-size-height-control-sm);
  border-radius: var(--sapphire-semantic-size-height-control-sm);
  font-size: var(--sapphire-semantic-size-font-control-sm);
}

/**
 * EXTRA SMALL
 */

.iconButton_sapphire-icon-button--xs__2RmXh {
  height: var(--sapphire-semantic-size-height-control-xs);
  width: var(--sapphire-semantic-size-height-control-xs);
  border-radius: var(--sapphire-semantic-size-height-control-xs);
  font-size: var(--sapphire-semantic-size-font-control-sm);
}

/**
 * Toggle Icon  Button
 */

/* Selected */

.iconButton_sapphire-icon-button--selected__9Ug9o {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-default
  );
  color: var(--sapphire-semantic-color-content-selection-selected-default);
}

.iconButton_sapphire-icon-button--selected__9Ug9o:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):hover,
.iconButton_sapphire-icon-button--selected__9Ug9o:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-hover
  );
}

.iconButton_sapphire-icon-button--selected__9Ug9o.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--selected__9Ug9o:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-default
  );
}

.iconButton_sapphire-icon-button--selected__9Ug9o:not(:disabled):not(.iconButton_is-disabled__y16bu).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--selected__9Ug9o:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--selected__9Ug9o:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-active
  );
  color: var(--sapphire-semantic-color-content-selection-selected-active);
}

/* Unselected */

.iconButton_sapphire-icon-button--unselected__tH2\+A {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-default
  );
  color: var(--sapphire-semantic-color-content-selection-unselected-default);
}

.iconButton_sapphire-icon-button--unselected__tH2\+A:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM):hover,
.iconButton_sapphire-icon-button--unselected__tH2\+A:not(:disabled):not(.iconButton_is-disabled__y16bu):not(
    :active
  ):not(.iconButton_is-active__jJDXM).iconButton_is-hover__TH2\+5 {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-hover
  );
}

.iconButton_sapphire-icon-button--unselected__tH2\+A.iconButton_is-focus__ZHfZ2,
.iconButton_sapphire-icon-button--unselected__tH2\+A:not(.iconButton_js-focus__6nVGH):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-default
  );
}

.iconButton_sapphire-icon-button--unselected__tH2\+A:not(:disabled):not(.iconButton_is-disabled__y16bu).iconButton_is-active__jJDXM,
.iconButton_sapphire-icon-button--unselected__tH2\+A:not(:disabled):not(.iconButton_is-disabled__y16bu):active,
.iconButton_sapphire-icon-button--unselected__tH2\+A:not(:disabled):not(
    .iconButton_is-disabled__y16bu
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-active
  );
  color: var(--sapphire-semantic-color-content-selection-unselected-active);
}

@keyframes spinner_rotate__5IQT- {
  0% {
    transform: rotate(0deg);
  }

  80% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.spinner_sapphire-spinner__ZfpXN {
  width: var(--sapphire-global-size-generic-100);
  height: var(--sapphire-global-size-generic-100);

  animation: spinner_rotate__5IQT- var(--sapphire-semantic-time-motion-very-slow)
    cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-iteration-count: infinite;
}

.spinner_sapphire-spinner__track__gobUR {
  fill: var(--sapphire-semantic-color-background-spinner-primary-default);
}

.spinner_sapphire-spinner__accent__lR1lW {
  fill: var(--sapphire-semantic-color-background-spinner-secondary-default);
}

.spinner_sapphire-spinner--inherit__\+7GL- .spinner_sapphire-spinner__track__gobUR {
  fill: currentColor;
  opacity: var(--sapphire-semantic-opacity-50);
}

.spinner_sapphire-spinner--inherit__\+7GL- .spinner_sapphire-spinner__accent__lR1lW {
  fill: currentColor;
}

/*
 * Sizes
 */

.spinner_sapphire-spinner--3xs__oj56m {
  width: var(--sapphire-global-size-generic-40);
  height: var(--sapphire-global-size-generic-40);
}

.spinner_sapphire-spinner--2xs__kiEgT {
  width: var(--sapphire-global-size-generic-50);
  height: var(--sapphire-global-size-generic-50);
}

.spinner_sapphire-spinner--xs__u14kk {
  width: var(--sapphire-global-size-generic-60);
  height: var(--sapphire-global-size-generic-60);
}

.spinner_sapphire-spinner--sm__AtzqB {
  width: var(--sapphire-global-size-generic-80);
  height: var(--sapphire-global-size-generic-80);
}

.spinner_sapphire-spinner--lg__tHrtd {
  width: var(--sapphire-global-size-generic-120);
  height: var(--sapphire-global-size-generic-120);
}

.spinner_sapphire-spinner--xl__jbksO {
  width: var(--sapphire-global-size-generic-160);
  height: var(--sapphire-global-size-generic-160);
}

.contextualHelp_sapphire-contextual-help__pB2JG {
  color: var(--sapphire-semantic-color-content-default-primary);
  line-height: var(--sapphire-global-size-line-height-sm);
  max-width: var(--sapphire-global-size-generic-750);
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
  font-size: var(--sapphire-semantic-size-font-text-md);
  padding: var(--sapphire-semantic-size-spacing-50)
    var(--sapphire-semantic-size-spacing-50);
  /* if implemented as focusable, we don't want the outline because this is not
   * an an interactive element in itself */
  outline: none;

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.contextualHelp_sapphire-contextual-help__header__-mout {
  padding-bottom: var(--sapphire-semantic-size-spacing-30);
}

.contextualHelp_sapphire-contextual-help__footer__U0xG4 {
  padding-top: var(--sapphire-semantic-size-spacing-20);
}

.contextualHelp_sapphire-contextual-help--no-max-width__5gEkU {
  max-width: initial;
}

.text_sapphire-text__GBrs7 {
  font-family: var(--sapphire-semantic-font-name-default);

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text_sapphire-text--strong__BpKAE {
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
}

.text_sapphire-text--underlined__Z5ysz {
  text-decoration: underline;
}

/* Heading */

.text_sapphire-text--heading-1__S3M3L,
.text_sapphire-text--heading-2__pk4IN,
.text_sapphire-text--heading-3__AzWtO,
.text_sapphire-text--heading-4__ePwAb,
.text_sapphire-text--heading-5__cGnT2,
.text_sapphire-text--heading-6__O-II8 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: var(--sapphire-semantic-color-content-default-primary);
  line-height: var(--sapphire-global-size-line-height-sm);
}

.text_sapphire-text--heading-1__S3M3L {
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-global-size-font-220);
}

.text_sapphire-text--heading-2__pk4IN {
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-global-size-font-150);
}

.text_sapphire-text--heading-3__AzWtO {
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-global-size-font-130);
}

.text_sapphire-text--heading-4__ePwAb {
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-global-size-font-112);
}

.text_sapphire-text--heading-5__cGnT2 {
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-global-size-font-106);
}

.text_sapphire-text--heading-6__O-II8 {
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-global-size-font-100);
}

/* Alternative Heading */

.text_sapphire-text--heading-1__S3M3L.text_sapphire-text--heading-alternative__ZDJAw {
  font-family: var(--sapphire-semantic-font-name-display);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
}

.text_sapphire-text--heading-2__pk4IN.text_sapphire-text--heading-alternative__ZDJAw {
  font-family: var(--sapphire-semantic-font-name-display);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
}

.text_sapphire-text--heading-3__AzWtO.text_sapphire-text--heading-alternative__ZDJAw {
  font-family: var(--sapphire-semantic-font-name-display);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
}

.text_sapphire-text--heading-4__ePwAb.text_sapphire-text--heading-alternative__ZDJAw {
  font-family: var(--sapphire-semantic-font-name-display);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
}

.text_sapphire-text--heading-5__cGnT2.text_sapphire-text--heading-alternative__ZDJAw {
  font-family: var(--sapphire-semantic-font-name-display);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
}

.text_sapphire-text--heading-6__O-II8.text_sapphire-text--heading-alternative__ZDJAw {
  font-family: var(--sapphire-semantic-font-name-display);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
}

/* Subheading */

.text_sapphire-text--subheading-1__KpGXE,
.text_sapphire-text--subheading-2__PJd6Q {
  color: var(--sapphire-semantic-color-content-default-primary);
  line-height: var(--sapphire-global-size-line-height-sm);
}

.text_sapphire-text--subheading-1__KpGXE {
  font-size: var(--sapphire-global-size-font-88);
}

.text_sapphire-text--subheading-2__PJd6Q {
  font-size: var(--sapphire-global-size-font-75);
}

/* Body text */

.text_sapphire-text--body-1__OmacF,
.text_sapphire-text--body-2__L4dYW,
.text_sapphire-text--body-3__qjEDk {
  color: var(--sapphire-semantic-color-content-default-primary);
  line-height: var(--sapphire-global-size-line-height-md);
  margin-top: 0px;
  margin-bottom: 0px;
}

.text_sapphire-text--body-1__OmacF {
  font-size: var(--sapphire-global-size-font-100);
}

.text_sapphire-text--body-2__L4dYW {
  font-size: var(--sapphire-global-size-font-88);
}

.text_sapphire-text--body-3__qjEDk {
  font-size: var(--sapphire-global-size-font-75);
}

/* Caption text */

.text_sapphire-text--caption-1__aSwIl,
.text_sapphire-text--caption-2__9Bdaw {
  color: var(--sapphire-semantic-color-content-default-primary);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  line-height: var(--sapphire-global-size-line-height-sm);
}

.text_sapphire-text--caption-1__aSwIl {
  font-size: var(--sapphire-global-size-font-88);
}

.text_sapphire-text--caption-2__9Bdaw {
  font-size: var(--sapphire-global-size-font-75);
}

.link_sapphire-link__cpIZ9 {
  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Flink%2Flink.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: inline;

  font-family: var(--sapphire-semantic-font-name-default);
  font-size: var(--sapphire-semantic-size-font-text-lg);
  line-height: var(--sapphire-semantic-size-line-height-md);
  cursor: pointer;
  border-radius: var(--sapphire-semantic-size-radius-xs);

  text-decoration-skip-ink: none;

  outline: none;
}

/* Disabled state for all variants */

.link_sapphire-link__cpIZ9.link_is-disabled__mxYg8 {
  opacity: var(--sapphire-semantic-opacity-disabled);
  cursor: not-allowed;
}

/**
 * Skin rules
 */

/* primary */

.link_sapphire-link--primary__1sS\+9 {
  color: var(--sapphire-semantic-color-content-link-primary-default);
}

.link_sapphire-link--primary__1sS\+9:not(:disabled):not(.link_is-disabled__mxYg8):not(:active):not(
    .link_is-active__Qu\+uF
  ):not(.link_js-hover__KvnO6):hover,
.link_sapphire-link--primary__1sS\+9:not(:disabled):not(.link_is-disabled__mxYg8):not(:active):not(
    .link_is-active__Qu\+uF
  ).link_is-hover__a7S1S {
  color: var(--sapphire-semantic-color-content-link-primary-hover);
}

.link_sapphire-link--primary__1sS\+9.link_is-focus__j52we,
.link_sapphire-link--primary__1sS\+9:not(.link_js-focus__AEJ71):focus-visible {
  color: var(--sapphire-semantic-color-content-link-primary-default);
  text-decoration-style: double;
}

.link_sapphire-link--primary__1sS\+9:not(:disabled):not(.link_is-disabled__mxYg8).link_is-active__Qu\+uF,
.link_sapphire-link--primary__1sS\+9:not(:disabled):not(.link_is-disabled__mxYg8):active,
.link_sapphire-link--primary__1sS\+9:not(:disabled):not(.link_is-disabled__mxYg8):focus-visible:active {
  color: var(--sapphire-semantic-color-content-link-primary-active);
}

/* secondary */

.link_sapphire-link--secondary__GpVXA {
  color: var(--sapphire-semantic-color-content-link-secondary-default);
}

.link_sapphire-link--secondary__GpVXA:not(:disabled):not(.link_is-disabled__mxYg8):not(:active):not(
    .link_is-active__Qu\+uF
  ):not(.link_js-hover__KvnO6):hover,
.link_sapphire-link--secondary__GpVXA:not(:disabled):not(.link_is-disabled__mxYg8):not(:active):not(
    .link_is-active__Qu\+uF
  ).link_is-hover__a7S1S {
  color: var(--sapphire-semantic-color-content-link-secondary-hover);
}

.link_sapphire-link--secondary__GpVXA.link_is-focus__j52we,
.link_sapphire-link--secondary__GpVXA:not(.link_js-focus__AEJ71):focus-visible {
  color: var(--sapphire-semantic-color-content-link-secondary-default);
  text-decoration-style: double;
}

.link_sapphire-link--secondary__GpVXA:not(:disabled):not(.link_is-disabled__mxYg8).link_is-active__Qu\+uF,
.link_sapphire-link--secondary__GpVXA:not(:disabled):not(.link_is-disabled__mxYg8):active,
.link_sapphire-link--secondary__GpVXA:not(:disabled):not(
    .link_is-disabled__mxYg8
  ):focus-visible:active {
  color: var(--sapphire-semantic-color-content-link-secondary-active);
}

/**
 * Size variations
 */

.link_sapphire-link--md__E-toQ {
  font-size: var(--sapphire-semantic-size-font-text-md);
}

.link_sapphire-link--sm__a1c2f {
  font-size: var(--sapphire-semantic-size-font-text-sm);
}

.accordion_sapphire-accordion__m7tkR {
  box-sizing: border-box;
  width: 100%;

  /* sizing */
  padding: 0;
  margin: 0;

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accordion_sapphire-accordion__item__eV2zp {
  display: flex;
  flex-direction: column;
  position: relative;
  line-height: var(--sapphire-semantic-size-line-height-md);
  font-family: var(--sapphire-semantic-font-name-default);
  background-color: var(--sapphire-semantic-color-background-surface);
  color: var(--sapphire-semantic-color-content-default-primary);
  box-shadow: 0 -1px 0 0 var(--sapphire-semantic-color-border-separator-default);
}

/* Adds bottom border to the last accordion item as default */

.accordion_sapphire-accordion__item__eV2zp:last-child {
  border-bottom: var(--sapphire-semantic-size-border-sm) solid
    var(--sapphire-semantic-color-border-separator-default);
}

.accordion_sapphire-accordion--without-last-divider__R6fmp .accordion_sapphire-accordion__item__eV2zp:last-child {
  border-bottom: none;
}

/* Disabled */

.accordion_sapphire-accordion__item__eV2zp.accordion_is-disabled__gS13w .accordion_sapphire-accordion__item-header__SoYNl,
.accordion_sapphire-accordion__item__eV2zp.accordion_is-disabled__gS13w
  .accordion_sapphire-accordion__item-content-wrapper__ziu7l {
  cursor: not-allowed;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: var(--sapphire-semantic-opacity-disabled);
}

/* Header */

.accordion_sapphire-accordion__item-header__SoYNl {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sapphire-semantic-size-spacing-30)
    var(--sapphire-semantic-size-spacing-40);
  border: none;
  background-color: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  width: 100%;
}

/* Hover header */

.accordion_sapphire-accordion__item__eV2zp:not(.accordion_is-disabled__gS13w)
  .accordion_sapphire-accordion__item-header__SoYNl:not(:active):not(.accordion_is-active__MAUmK):not(
    .accordion_js-hover__X1okq
  ):hover,
.accordion_sapphire-accordion__item__eV2zp:not(.accordion_is-disabled__gS13w)
  .accordion_sapphire-accordion__item-header__SoYNl:not(:active):not(.accordion_is-active__MAUmK).accordion_is-hover__QvcrU {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-default
  );
}

/* Active header */

.accordion_sapphire-accordion__item__eV2zp:not(.accordion_is-disabled__gS13w)
  .accordion_sapphire-accordion__item-header__SoYNl.accordion_is-active__MAUmK,
.accordion_sapphire-accordion__item__eV2zp:not(.accordion_is-disabled__gS13w)
  .accordion_sapphire-accordion__item-header__SoYNl:active,
.accordion_sapphire-accordion__item__eV2zp:not(.accordion_is-disabled__gS13w)
  .accordion_sapphire-accordion__item-header__SoYNl:not(.accordion_js-focus__mCnhT):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-hover
  );
}

/* Focus header */

.accordion_sapphire-accordion__item-header__SoYNl:focus {
  outline: none;
}

.accordion_sapphire-accordion__item__eV2zp:not(.accordion_is-disabled__gS13w)
  .accordion_sapphire-accordion__item-header__SoYNl.accordion_is-focus__evIQL,
.accordion_sapphire-accordion__item__eV2zp:not(.accordion_is-disabled__gS13w)
  .accordion_sapphire-accordion__item-header__SoYNl:not(.accordion_js-focus__mCnhT):focus-visible {
  outline: none;
  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
    var(--sapphire-semantic-color-focus-ring);
  border: 0;
  border-radius: var(--sapphire-semantic-size-radius-sm);
}

/* Remove the top box-shadow border (divider) from:
- first item of the accordion
- the focused item itself when the accordion is opened and header is focused
- the accordion item that is immediately preceded by a closed focused item
- the focused item itself when the accordion is closed and header is focused
*/

.accordion_sapphire-accordion__item__eV2zp:first-child,
.accordion_sapphire-accordion__item__eV2zp.accordion_sapphire-accordion__item--open__MUj94:has(
    .accordion_sapphire-accordion__item-header__SoYNl.accordion_is-focus__evIQL
  ),
.accordion_sapphire-accordion__item__eV2zp:not(.accordion_sapphire-accordion__item--open__MUj94):has(
    .accordion_sapphire-accordion__item-header__SoYNl.accordion_is-focus__evIQL,
    .accordion_sapphire-accordion__item-header__SoYNl:not(.accordion_js-focus__mCnhT):focus-visible
  )
  + .accordion_sapphire-accordion__item__eV2zp {
  box-shadow: none;
}

/* Remove closed item's box-shadow & bottom border if header is focused
  The border-bottom removal is intended if the last accordion item is focused
*/

.accordion_sapphire-accordion__item__eV2zp:not(.accordion_sapphire-accordion__item--open__MUj94):has(
    .accordion_sapphire-accordion__item-header__SoYNl.accordion_is-focus__evIQL,
    .accordion_sapphire-accordion__item-header__SoYNl:not(.accordion_js-focus__mCnhT):focus-visible
  ) {
  box-shadow: none;
  border-bottom: none;
}

.accordion_sapphire-accordion__item-heading__CxXC\+ {
  font-size: var(--sapphire-semantic-size-font-text-lg);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  text-align: left;
  flex: 1;
  /* Wrap if title is long */
  min-width: 0px;
  word-wrap: break-word;
}

.accordion_sapphire-accordion__item-arrow__0MBrc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--sapphire-semantic-size-height-control-md);
  height: var(--sapphire-semantic-size-height-control-md);
  transition: transform var(--sapphire-semantic-time-motion-quick) ease-in-out;
}

.accordion_sapphire-accordion__item--open__MUj94 > :first-child .accordion_sapphire-accordion__item-arrow__0MBrc {
  transform: rotate(180deg);
}

/* Content */

.accordion_sapphire-accordion__item-content-wrapper__ziu7l {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sapphire-semantic-time-motion-quick)
    ease-in-out;
}

.accordion_sapphire-accordion__item-content__gV0YE {
  font-size: var(--sapphire-semantic-size-font-text-lg);
  font-weight: var(--sapphire-semantic-font-weight-default-regular);
  overflow: hidden;
  visibility: hidden;
  transition: padding-top var(--sapphire-semantic-time-motion-quick) ease-in-out,
    padding-bottom var(--sapphire-semantic-time-motion-quick) ease-in-out;
  padding-right: var(--sapphire-semantic-size-spacing-40);
  padding-left: var(--sapphire-semantic-size-spacing-40);
}

.accordion_sapphire-accordion__item--open__MUj94 > .accordion_sapphire-accordion__item-content-wrapper__ziu7l {
  grid-template-rows: 1fr;
}

.accordion_sapphire-accordion__item--open__MUj94
  > .accordion_sapphire-accordion__item-content-wrapper__ziu7l
  > .accordion_sapphire-accordion__item-content__gV0YE {
  padding-top: var(--sapphire-semantic-size-spacing-40);
  padding-bottom: var(--sapphire-semantic-size-spacing-50);
  visibility: visible;
}

.accordion_sapphire-accordion--negative-margin-self__pHj0C {
  margin-left: calc(var(--sapphire-semantic-size-spacing-40) * -1);
  width: calc(100% + (var(--sapphire-semantic-size-spacing-40) * 2));
}

.list_sapphire-list__\+fpUo {
  box-sizing: border-box;
  width: 100%;

  /* sizing */
  padding: 0;
  margin: 0;

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  list-style: none;
}

.list_sapphire-list__item__1oZe9 {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: var(--sapphire-semantic-size-spacing-30)
    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg);
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-default
  );
  outline: none;
  font-family: var(--sapphire-semantic-font-name-default);
}

/**
* .sapphire-list__item--interactive is used either for a list item or list item content wrapper.
* Created to reuse the same styles for angular and react.
*/

.list_sapphire-list__item--interactive__JdMUw {
  /* When list item is a button or anchor, we need to remove the default styles */
  border: none;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
  width: 100%;

  transition-property: opacity, background-color, color;
  transition-duration: var(--sapphire-semantic-time-fade-quick);
  transition-timing-function: ease-in-out;

  cursor: pointer;
}

.list_sapphire-list__item__1oZe9:has(.list_sapphire-list__item--interactive__JdMUw) {
  padding: 0;
}

.list_sapphire-list__item__1oZe9:focus-within {
  z-index: 1;
}

/* the flex style needed in the scenario where the 
--interactive element is rendered as a wrapper of the content inside the list item, 
instead of being applied on the list item itself  */

.list_sapphire-list__item__1oZe9 > .list_sapphire-list__item--interactive__JdMUw {
  display: flex;
  justify-content: space-between;
  width: 100%;
  /*
   * Same as outermost element (li) as this should control padding instead
   * if element is a (href prop has value) or button (action prop has value).
   */
  padding: var(--sapphire-semantic-size-spacing-30)
    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg);

  /* Counterstyling anything passed as custom content wrapper */
  text-decoration: none;
  background-color: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  border: none;
  text-align: inherit;
  align-items: inherit;
}

.list_sapphire-list--negative-margin-self__QTFcJ {
  margin-left: calc(
    var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg) *
      -1
  );
  width: calc(
    100% +
      (
        var(--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg) *
          2
      )
  );
}

.list_sapphire-list__item--interactive__JdMUw:disabled,
.list_sapphire-list__item--interactive__JdMUw[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: var(--sapphire-semantic-opacity-disabled);
}

/*
  Only render a divider if
  - item isn't last child of without-last-divider list
  - next item is focused (as next item's top box-shadow will act as divider) either by
    - parent item of item--interactive not having a sibling with a focused child item--interactive
    - sibling of a list item without a child item--interactive not having a focused child item--interactive
  - item--interactive is not focused itself

  Note that using box-shadow both for divider and focus styling complicates the selectors
  as we for instance have to exclude the focus states when adding the divider.
*/

.list_sapphire-list__item--interactive__JdMUw:not(.list_is-focus__\+QapH, :not(.list_js-focus__LO7WK):focus),
.list_sapphire-list__item__1oZe9:not(:has(.list_sapphire-list__item--interactive__JdMUw)) {
  box-shadow: inset 0px -1px 0px 0px var(--sapphire-semantic-color-border-separator-default);
}

/* For not virtualized list */

.list_sapphire-list--without-last-divider__SDYVE:not(:has([role="presentation"] > [role="presentation"]))
  .list_sapphire-list__item__1oZe9:last-child
.list_sapphire-list__item--interactive__JdMUw:not(.list_is-focus__\+QapH):not(:focus),
.list_sapphire-list--without-last-divider__SDYVE:not(:has([role="presentation"] > [role="presentation"]))
  .list_sapphire-list__item__1oZe9:not(.list_sapphire-list__item--interactive__JdMUw):last-child,

.list_sapphire-list--without-last-divider__SDYVE
  [role="presentation"]:last-child > .list_sapphire-list__item__1oZe9
  .list_sapphire-list__item--interactive__JdMUw:not(.list_is-focus__\+QapH):not(:focus),
.list_sapphire-list--without-last-divider__SDYVE
  [role="presentation"]:last-child > .list_sapphire-list__item__1oZe9,

.list_sapphire-list__item__1oZe9:has(+ .list_sapphire-list__item__1oZe9
    > .list_sapphire-list__item--interactive__JdMUw.list_is-focus__\+QapH)
  > .list_sapphire-list__item--interactive__JdMUw:not(.list_is-focus__\+QapH, :not(.list_js-focus__LO7WK):focus),
.list_sapphire-list__item__1oZe9:has(+ .list_sapphire-list__item__1oZe9
    > .list_sapphire-list__item--interactive__JdMUw:not(.list_js-focus__LO7WK):focus)
  > .list_sapphire-list__item-ineractive__78A2z:not(.list_is-focus__\+QapH, :not(.list_js-focus__LO7WK):focus),
.list_sapphire-list__item__1oZe9:has(+ .list_sapphire-list__item__1oZe9
    > .list_sapphire-list__item--interactive__JdMUw.list_is-focus__\+QapH),
.list_sapphire-list__item__1oZe9:has(+ .list_sapphire-list__item__1oZe9
    > .list_sapphire-list__item--interactive__JdMUw:not(.list_js-focus__LO7WK):focus) {
  box-shadow: none;
}

/* 
 * This is used in the list item in Anular to remove the last divider
 */

.list_sapphire-list__item__1oZe9.list_sapphire-list__item--interactive__JdMUw:not(
    .list_is-focus__\+QapH,
    :not(.list_js-focus__LO7WK):focus
  ).list_sapphire-list__item--without-divider__S97YP {
  box-shadow: none;
}

/*
 * Hover
 */

.list_sapphire-list__item--interactive__JdMUw.list_is-hover__TesG\+:not(.list_is-active__GWEOi),
.list_sapphire-list__item--interactive__JdMUw:not(.list_js-hover__FGAPF):not(
    [aria-disabled='true']
  ):not(:disabled):not(:active):hover {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-default
  );
}

/*
 * Focus
 */

.list_sapphire-list__item-content-interactive__yM3W5:focus,
.list_sapphire-list__item-content-interactive__yM3W5:focus-visible {
  outline: none;
}

.list_sapphire-list__item--interactive__JdMUw.list_is-focus__\+QapH,
.list_sapphire-list__item--interactive__JdMUw:not(.list_js-focus__LO7WK):focus {
  outline: none;
  box-shadow: inset 0px 0px 0px var(--sapphire-semantic-size-focus-ring)
    var(--sapphire-semantic-color-focus-ring);
  border: 0;
  border-radius: var(--sapphire-semantic-size-radius-sm);
}

/* Active */

.list_sapphire-list__item--interactive__JdMUw:not(.list_is-disabled__Va84G).list_is-active__GWEOi,
.list_sapphire-list__item--interactive__JdMUw:not([aria-disabled='true']):not(
    :disabled
  ):active,
.list_sapphire-list__item--interactive__JdMUw:not([aria-disabled='true']):not(
    :disabled
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-hover
  );
}

.list_sapphire-list__item-content-left__B0VEa {
  display: flex;
  align-items: center;
  margin-right: var(--sapphire-semantic-size-spacing-30);
  /* This was added to accommodate nowrap + hidden text overflow situations */
  min-width: 0;
  gap: var(--sapphire-semantic-size-spacing-30);
}

.list_sapphire-list__item-content-right__4u6rn {
  display: flex;
  align-items: center;
  text-align: right;
  margin-left: var(--sapphire-semantic-size-spacing-30);
  color: var(--sapphire-semantic-color-content-default-primary);
  gap: var(--sapphire-semantic-size-spacing-30);
}

.list_sapphire-list__item-text__kKq9L {
  display: flex;
  flex-direction: column;
  font-family: var(--sapphire-semantic-font-name-default);
  /* This was added to accommodate nowrap + hidden text overflow situation */
  min-width: 0;
  overflow-wrap: break-word;
}

.list_sapphire-list__item-text--reversedOrder__IMEjk {
  flex-direction: column-reverse;
}

.list_sapphire-list__item-text-primary__FIKXD {
  color: var(--sapphire-semantic-color-content-default-primary);
  line-height: var(--sapphire-semantic-size-line-height-md);
  font-size: var(--sapphire-semantic-size-font-text-lg);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
}

.list_sapphire-list__item-text-secondary__irBCU {
  color: var(--sapphire-semantic-color-content-default-secondary);
  line-height: var(--sapphire-semantic-size-line-height-md);
  font-size: var(--sapphire-semantic-size-font-text-md);
}

.feedbackMessage_sapphire-feedback-message__B58Id {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap: var(--sapphire-semantic-size-spacing-50);
  max-width: var(--sapphire-global-size-generic-1000);
}

.feedbackMessage_sapphire-feedback-message__icon__LTZWh {
  padding: var(--sapphire-semantic-size-spacing-30);
  border-radius: 100%; /* big enough value */
  line-height: 0; /* to make sure height won't exceed width */
}

.feedbackMessage_sapphire-feedback-message__icon--success__Jk-1H {
  background-color: var(
    --sapphire-semantic-color-background-positive-secondary-default
  );
  color: var(--sapphire-semantic-color-content-positive-secondary-default);
}

.feedbackMessage_sapphire-feedback-message__icon--error__Pisv- {
  background-color: var(
    --sapphire-semantic-color-background-negative-secondary-default
  );
  color: var(--sapphire-semantic-color-content-negative-secondary-default);
}

.feedbackMessage_sapphire-feedback-message__icon--warning__nj59G {
  background-color: var(
    --sapphire-semantic-color-background-warning-secondary-default
  );
  color: var(--sapphire-semantic-color-content-warning-secondary-default);
}

.feedbackMessage_sapphire-feedback-message__icon--informative__NIKlj {
  background-color: var(
    --sapphire-semantic-color-background-informative-secondary-default
  );
  color: var(--sapphire-semantic-color-content-informative-secondary-default);
}

.feedbackMessage_sapphire-feedback-message__content__zunDG {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sapphire-semantic-size-spacing-30);
}

.feedbackMessage_sapphire-feedback-message__body__rBhx3 {
  color: var(--sapphire-semantic-color-content-default-secondary);
  font-family: var(--sapphire-semantic-font-name-default);
  font-size: var(--sapphire-global-size-font-88);
  line-height: var(--sapphire-semantic-size-line-height-md);
}

@font-face {
  font-family: 'Danske Text v2';
  font-weight: 400;
  font-style: normal;
  src: url('DanskeTextv2-Regular.eot');
  src: url('DanskeTextv2-Regular.eot#iefix') format('embedded-opentype'),
    url('DanskeTextv2-Regular.woff2') format('woff2'),
    url('DanskeTextv2-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Danske Text v2';
  font-weight: 600;
  font-style: normal;
  src: url('DanskeTextv2-SemiBold.eot');
  src: url('DanskeTextv2-SemiBold.eot#iefix') format('embedded-opentype'),
    url('DanskeTextv2-SemiBold.woff2') format('woff2'),
    url('DanskeTextv2-SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'Danske Text v2';
  font-weight: 400;
  font-style: italic;
  src: url('DanskeTextv2-Italic.eot');
  src: url('DanskeTextv2-Italic.eot#iefix') format('embedded-opentype'),
    url('DanskeTextv2-Italic.woff2') format('woff2'),
    url('DanskeTextv2-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Danske Narrow';
  font-weight: 400;
  font-style: normal;
  src: url('DanskeNarrow.eot');
  src: url('DanskeNarrow.eot#iefix') format('embedded-opentype'),
    url('DanskeNarrow.woff') format('woff');
}

@font-face {
  font-family: 'Danske Narrow';
  font-weight: 600;
  font-style: normal;
  src: url('DanskeNarrowSemibold.eot');
  src: url('DanskeNarrowSemibold.eot#iefix') format('embedded-opentype'),
    url('DanskeNarrowSemibold.woff') format('woff');
}

@font-face {
  font-family: 'Danske Narrow';
  font-weight: 400;
  font-style: italic;
  src: url('DanskeNarrow-Italic.eot');
  src: url('DanskeNarrow-Italic.eot#iefix') format('embedded-opentype'),
    url('DanskeNarrow-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Danske Human';
  font-weight: 400;
  font-style: normal;
  src: url('DanskeHuman-MediumItalic.eot');
  src: url('DanskeHuman-MediumItalic.eot#iefix') format('embedded-opentype'),
    url('DanskeHuman-MediumItalic.woff') format('woff');
}

/**
 * Do not edit directly
 * Generated on Thu, 10 Apr 2025 08:14:50 GMT
 * 
 * CSS Module file output, allowing the theme to be imported as a css module.
 * The content is the same as tokens.css
 */

.tokens_sapphire-theme-default__hyVtV, .tokens_sapphire-theme--secondary__a52Ws, .tokens_sapphire-theme--contrast__OsdBO {
  --sapphire-semantic-size-breakpoint-xl: 1400px; /* Minimum width of large laptops & desktops. */
  --sapphire-semantic-size-breakpoint-l: 1200px; /* Minimum width of laptops. */
  --sapphire-semantic-size-breakpoint-m: 960px; /* Minimum width of tablets, landscape. */
  --sapphire-semantic-size-breakpoint-s: 768px; /* Minimum width of tablets, portrait & large phones, landscape. */
  --sapphire-semantic-size-breakpoint-xs: 576px; /* Minimum width of small phones, landscape. */
  --sapphire-semantic-size-width-panel-lg: 100%;
  --sapphire-semantic-size-width-panel-sm: 100%;
  --sapphire-semantic-font-weight-display-bold: 700; /* Bold display font weight. */
  --sapphire-semantic-font-weight-display-regular: 400; /* Regular display font weight. */
  --sapphire-semantic-font-weight-default-bold: 700; /* Bold body font weight. */
  --sapphire-semantic-font-weight-default-semibold: 600; /* Semibold body font weight. */
  --sapphire-semantic-font-weight-default-regular: 400; /* Regular body font weight. */
  --sapphire-global-time-2000: 2.00s;
  --sapphire-global-time-1800: 1.80s;
  --sapphire-global-time-1000: 1.00s;
  --sapphire-global-time-400: 0.40s;
  --sapphire-global-time-200: 0.20s;
  --sapphire-global-time-100: 0.10s;
  --sapphire-global-size-ratio-height: 0.875;
  --sapphire-global-size-line-height-md: 1.5;
  --sapphire-global-size-line-height-sm: 1.2;
  --sapphire-global-size-font-300: 3rem;
  --sapphire-global-size-font-220: 2.1875rem;
  --sapphire-global-size-font-188: 1.875rem;
  --sapphire-global-size-font-150: 1.5rem;
  --sapphire-global-size-font-130: 1.3125rem;
  --sapphire-global-size-font-112: 1.125rem;
  --sapphire-global-size-font-106: 1.0625rem;
  --sapphire-global-size-font-100: 1rem; /* This is the base size. All other font sizes are a % of this. */
  --sapphire-global-size-font-88: 0.875rem;
  --sapphire-global-size-font-75: 0.75rem;
  --sapphire-global-size-font-60: 0.625rem;
  --sapphire-global-size-generic-4320: 108rem;
  --sapphire-global-size-generic-3780: 94.5rem;
  --sapphire-global-size-generic-3600: 90rem;
  --sapphire-global-size-generic-3200: 80rem;
  --sapphire-global-size-generic-2560: 64rem;
  --sapphire-global-size-generic-2400: 60rem;
  --sapphire-global-size-generic-1920: 48rem;
  --sapphire-global-size-generic-1600: 40rem;
  --sapphire-global-size-generic-1400: 35rem;
  --sapphire-global-size-generic-1280: 32rem;
  --sapphire-global-size-generic-1200: 30rem;
  --sapphire-global-size-generic-1120: 28rem;
  --sapphire-global-size-generic-1000: 25rem;
  --sapphire-global-size-generic-960: 24rem;
  --sapphire-global-size-generic-940: 23.5rem;
  --sapphire-global-size-generic-900: 22.5rem;
  --sapphire-global-size-generic-800: 20rem;
  --sapphire-global-size-generic-750: 18.75rem;
  --sapphire-global-size-generic-640: 16rem;
  --sapphire-global-size-generic-600: 15rem;
  --sapphire-global-size-generic-560: 14rem;
  --sapphire-global-size-generic-480: 12rem;
  --sapphire-global-size-generic-400: 10rem;
  --sapphire-global-size-generic-340: 8.5rem;
  --sapphire-global-size-generic-320: 8rem;
  --sapphire-global-size-generic-300: 7.5rem;
  --sapphire-global-size-generic-280: 7rem;
  --sapphire-global-size-generic-240: 6rem;
  --sapphire-global-size-generic-200: 5rem;
  --sapphire-global-size-generic-180: 4.5rem;
  --sapphire-global-size-generic-160: 4rem;
  --sapphire-global-size-generic-140: 3.5rem;
  --sapphire-global-size-generic-120: 3rem;
  --sapphire-global-size-generic-100: 2.5rem;
  --sapphire-global-size-generic-80: 2rem;
  --sapphire-global-size-generic-60: 1.5rem;
  --sapphire-global-size-generic-50: 1.25rem;
  --sapphire-global-size-generic-40: 1rem;
  --sapphire-global-size-generic-35: 0.875rem;
  --sapphire-global-size-generic-30: 0.75rem;
  --sapphire-global-size-generic-25: 0.625rem;
  --sapphire-global-size-generic-20: 0.5rem;
  --sapphire-global-size-generic-15: 0.375rem;
  --sapphire-global-size-generic-10: 0.25rem; /* This is the base size. All other sizes are a % of this, rounded. */
  --sapphire-global-size-generic-5: 0.125rem;
  --sapphire-global-size-generic-2: 0.0625rem;
  --sapphire-global-size-generic-0: 0rem;
  --sapphire-global-size-static-60: 24px;
  --sapphire-global-size-static-30: 12px;
  --sapphire-global-size-static-20: 8px;
  --sapphire-global-size-static-10: 4px; /* This is the base size. All other sizes are a % of this, rounded. */
  --sapphire-global-size-static-5: 2px;
  --sapphire-global-size-static-2: 1px;
  --sapphire-global-size-static-0: 0px;
  --sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, 0.02), 0px -1.5px 6px 0px rgba(34, 64, 82, 0.03), 0px 4.5px 12px 0px rgba(34, 64, 82, 0.04), 0px 14.5px 18px 0px rgba(34, 64, 82, 0.04), 0px 26px 34px 0px rgba(34, 64, 82, 0.05), 0px 84px 92px 0px rgba(34, 64, 82, 0.07), 0px 0px 2px 0px rgba(34, 64, 82, 0.05), 0px 0px 1px 0px rgba(34, 64, 82, 0.2); /* Special token that is made only for use with CSS */
  --sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, 0.02), 0px 3px 7px 0px rgba(34, 64, 82, 0.03), 0px 6.5px 14px 0px rgba(34, 64, 82, 0.04), 0px 13px 29px 0px rgba(34, 64, 82, 0.05), 0px 36px 80px 0px rgba(34, 64, 82, 0.07), 0px 0px 2px 0px rgba(34, 64, 82, 0.05), 0px 0px 1px 0px rgba(34, 64, 82, 0.2); /* Special token that is made only for use with CSS */
  --sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, 0.06), 0px 1.5px 4px 0px rgba(34, 64, 82, 0.04), 0px 4.5px 6px 0px rgba(34, 64, 82, 0.04), 0px 10.5px 12px 0px rgba(34, 64, 82, 0.03), 0px 25px 24px 0px rgba(34, 64, 82, 0.02), 0px 100px 64px 0px rgba(34, 64, 82, 0.02), 0px 0px 2px 0px rgba(34, 64, 82, 0.05), 0px 0px 1px 0px rgba(34, 64, 82, 0.20); /* Special token that is made only for use with CSS */
  --sapphire-global-opacity-50: 0.5;
  --sapphire-global-opacity-40: 0.4;
  --sapphire-global-opacity-35: 0.35;
  --sapphire-global-font-danske-human-name: 'Danske Human';
  --sapphire-global-font-danske-text-name: 'Danske Text v2';
  --sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);
  --sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);
  --sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);
  --sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);
  --sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);
  --sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);
  --sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);
  --sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);
  --sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);
  --sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);
  --sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);
  --sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);
  --sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);
  --sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);
  --sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);
  --sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);
  --sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);
  --sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);
  --sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);
  --sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);
  --sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);
  --sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);
  --sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);
  --sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);
  --sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);
  --sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);
  --sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);
  --sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);
  --sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);
  --sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);
  --sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);
  --sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);
  --sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);
  --sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);
  --sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);
  --sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);
  --sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);
  --sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);
  --sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);
  --sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);
  --sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);
  --sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);
  --sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);
  --sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);
  --sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);
  --sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);
  --sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);
  --sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);
  --sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);
  --sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);
  --sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);
  --sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);
  --sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);
  --sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);
  --sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);
  --sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);
  --sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);
  --sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);
  --sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);
  --sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);
  --sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);
  --sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);
  --sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);
  --sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);
  --sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);
  --sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);
  --sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);
  --sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);
  --sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);
  --sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);
  --sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);
  --sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);
  --sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);
  --sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);
  --sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);
  --sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);
  --sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);
  --sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);
  --sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);
  --sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);
  --sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);
  --sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);
  --sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);
  --sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);
  --sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);
  --sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);
  --sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);
  --sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);
  --sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);
  --sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);
  --sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);
  --sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);
  --sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);
  --sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);
  --sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);
  --sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);
  --sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);
  --sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);
  --sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);
  --sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);
  --sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);
  --sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);
  --sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);
  --sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);
  --sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);
  --sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);
  --sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);
  --sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);
  --sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);
  --sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);
  --sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);
  --sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);
  --sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);
  --sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);
  --sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);
  --sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);
  --sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);
  --sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);
  --sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);
  --sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);
  --sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);
  --sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);
  --sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);
  --sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);
  --sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);
  --sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);
  --sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);
  --sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);
  --sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);
  --sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);
  --sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);
  --sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);
  --sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);
  --sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);
  --sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);
  --sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);
  --sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);
  --sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);
  --sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);
  --sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);
  --sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);
  --sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);
  --sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);
  --sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);
  --sapphire-global-color-yellow-975: hsl(20, 95%, 8%);
  --sapphire-global-color-yellow-950: hsl(19, 89%, 11%);
  --sapphire-global-color-yellow-925: hsl(21, 87%, 15%);
  --sapphire-global-color-yellow-900: hsl(21, 88%, 19%);
  --sapphire-global-color-yellow-875: hsl(21, 86%, 23%);
  --sapphire-global-color-yellow-850: hsl(22, 85%, 27%);
  --sapphire-global-color-yellow-800: hsl(22, 88%, 29%);
  --sapphire-global-color-yellow-750: hsl(24, 89%, 33%);
  --sapphire-global-color-yellow-700: hsl(25, 93%, 37%);
  --sapphire-global-color-yellow-650: hsl(28, 94%, 41%);
  --sapphire-global-color-yellow-600: hsl(31, 93%, 44%);
  --sapphire-global-color-yellow-550: hsl(34, 94%, 48%);
  --sapphire-global-color-yellow-500: hsl(37, 95%, 52%);
  --sapphire-global-color-yellow-450: hsl(40, 95%, 54%);
  --sapphire-global-color-yellow-400: hsl(43, 98%, 55%);
  --sapphire-global-color-yellow-350: hsl(44, 98%, 60%);
  --sapphire-global-color-yellow-300: hsl(46, 98%, 64%);
  --sapphire-global-color-yellow-250: hsl(47, 97%, 70%);
  --sapphire-global-color-yellow-200: hsl(48, 98%, 76%);
  --sapphire-global-color-yellow-150: hsl(48, 98%, 79%);
  --sapphire-global-color-yellow-125: hsl(49, 97%, 85%);
  --sapphire-global-color-yellow-100: hsl(48, 100%, 89%);
  --sapphire-global-color-yellow-75: hsl(49, 100%, 92%);
  --sapphire-global-color-yellow-50: hsl(51, 100%, 96%);
  --sapphire-global-color-yellow-25: hsl(54, 100%, 98%);
  --sapphire-global-color-red-975: hsl(0, 33%, 10%);
  --sapphire-global-color-red-950: hsl(355, 38%, 12%);
  --sapphire-global-color-red-925: hsl(356, 41%, 14%);
  --sapphire-global-color-red-900: hsl(355, 43%, 15%);
  --sapphire-global-color-red-875: hsl(354, 44%, 18%);
  --sapphire-global-color-red-850: hsl(353, 48%, 21%);
  --sapphire-global-color-red-800: hsl(353, 50%, 26%);
  --sapphire-global-color-red-750: hsl(351, 54%, 31%);
  --sapphire-global-color-red-700: hsl(351, 55%, 35%);
  --sapphire-global-color-red-650: hsl(350, 57%, 39%);
  --sapphire-global-color-red-600: hsl(349, 60%, 44%);
  --sapphire-global-color-red-550: hsl(349, 61%, 48%);
  --sapphire-global-color-red-500: hsl(348, 72%, 53%);
  --sapphire-global-color-red-450: hsl(351, 73%, 59%);
  --sapphire-global-color-red-400: hsl(353, 75%, 65%);
  --sapphire-global-color-red-350: hsl(355, 79%, 71%);
  --sapphire-global-color-red-300: hsl(356, 82%, 76%);
  --sapphire-global-color-red-250: hsl(357, 88%, 81%);
  --sapphire-global-color-red-200: hsl(358, 92%, 86%);
  --sapphire-global-color-red-150: hsl(359, 100%, 91%);
  --sapphire-global-color-red-125: hsl(358, 100%, 94%);
  --sapphire-global-color-red-100: hsl(357, 100%, 96%);
  --sapphire-global-color-red-75: hsl(356, 100%, 97%);
  --sapphire-global-color-red-50: hsl(355, 100%, 98%);
  --sapphire-global-color-red-25: hsl(0, 100%, 99%);
  --sapphire-global-color-green-975: hsl(159, 100%, 5%);
  --sapphire-global-color-green-950: hsl(159, 100%, 6%);
  --sapphire-global-color-green-925: hsl(159, 100%, 7%);
  --sapphire-global-color-green-900: hsl(159, 100%, 7%);
  --sapphire-global-color-green-875: hsl(159, 100%, 9%);
  --sapphire-global-color-green-850: hsl(158, 100%, 10%);
  --sapphire-global-color-green-800: hsl(159, 100%, 13%);
  --sapphire-global-color-green-750: hsl(159, 100%, 15%);
  --sapphire-global-color-green-700: hsl(159, 100%, 17%);
  --sapphire-global-color-green-650: hsl(159, 100%, 19%);
  --sapphire-global-color-green-600: hsl(159, 100%, 22%);
  --sapphire-global-color-green-550: hsl(159, 100%, 24%);
  --sapphire-global-color-green-500: hsl(159, 100%, 27%);
  --sapphire-global-color-green-450: hsl(159, 71%, 34%);
  --sapphire-global-color-green-400: hsl(159, 51%, 42%);
  --sapphire-global-color-green-350: hsl(159, 37%, 50%);
  --sapphire-global-color-green-300: hsl(159, 36%, 57%);
  --sapphire-global-color-green-250: hsl(159, 36%, 66%);
  --sapphire-global-color-green-200: hsl(160, 36%, 74%);
  --sapphire-global-color-green-150: hsl(159, 36%, 83%);
  --sapphire-global-color-green-125: hsl(159, 37%, 88%);
  --sapphire-global-color-green-100: hsl(159, 35%, 92%);
  --sapphire-global-color-green-75: hsl(162, 33%, 94%);
  --sapphire-global-color-green-50: hsl(158, 40%, 96%);
  --sapphire-global-color-green-25: hsl(150, 40%, 98%);
  --sapphire-global-color-blue-975: hsl(202, 100%, 7%);
  --sapphire-global-color-blue-950: hsl(203, 100%, 9%);
  --sapphire-global-color-blue-925: hsl(203, 100%, 10%);
  --sapphire-global-color-blue-900: hsl(202, 100%, 11%);
  --sapphire-global-color-blue-875: hsl(203, 100%, 13%);
  --sapphire-global-color-blue-850: hsl(203, 100%, 15%);
  --sapphire-global-color-blue-800: hsl(203, 100%, 19%);
  --sapphire-global-color-blue-750: hsl(202, 100%, 22%);
  --sapphire-global-color-blue-700: hsl(203, 100%, 25%);
  --sapphire-global-color-blue-650: hsl(203, 100%, 29%);
  --sapphire-global-color-blue-600: hsl(203, 100%, 32%);
  --sapphire-global-color-blue-550: hsl(203, 100%, 35%);
  --sapphire-global-color-blue-500: hsl(203, 100%, 39%);
  --sapphire-global-color-blue-450: hsl(203, 90%, 44%);
  --sapphire-global-color-blue-400: hsl(203, 80%, 50%);
  --sapphire-global-color-blue-350: hsl(203, 75%, 57%);
  --sapphire-global-color-blue-300: hsl(203, 70%, 65%);
  --sapphire-global-color-blue-250: hsl(203, 64%, 72%);
  --sapphire-global-color-blue-200: hsl(203, 65%, 79%);
  --sapphire-global-color-blue-150: hsl(203, 64%, 86%);
  --sapphire-global-color-blue-125: hsl(204, 65%, 90%);
  --sapphire-global-color-blue-100: hsl(203, 64%, 94%);
  --sapphire-global-color-blue-75: hsl(206, 67%, 95%);
  --sapphire-global-color-blue-50: hsl(202, 65%, 97%);
  --sapphire-global-color-blue-25: hsl(204, 56%, 98%);
  --sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, 0.7); /* Same as 900 but with 70% opacity */
  --sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, 0.04); /* Same as 900 but with 4% opacity */
  --sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);
  --sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);
  --sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);
  --sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);
  --sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);
  --sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);
  --sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);
  --sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);
  --sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);
  --sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);
  --sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);
  --sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);
  --sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);
  --sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);
  --sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);
  --sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);
  --sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);
  --sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);
  --sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);
  --sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);
  --sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);
  --sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);
  --sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);
  --sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);
  --sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);
  --sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);
  --sapphire-global-color-neutral-black: hsl(0, 0%, 0%);
  --sapphire-global-color-neutral-white: hsl(0, 0%, 100%);
  --sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100); /* Duration of quick slide transitions. */
  --sapphire-semantic-time-motion-default: var(--sapphire-global-time-200); /* Duration of default slide transitions. */
  --sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400); /* Duration of slow slide transitions. */
  --sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000); /* Duration of very slow slide transitions. */
  --sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800); /* Duration of slow fade transitions. */
  --sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100); /* Duration of quick fade transitions. */
  --sapphire-semantic-time-fade-default: var(--sapphire-global-time-200); /* Duration of default fade transitions. */
  --sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5); /* Generic spacing for defining the distance between elements (eg. paddings, gaps, margins). */
  --sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md); /* The medium line height. Suitable for small text sizes. */
  --sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm); /* The small line height. Suitable for medium and larger text sizes. */
  --sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100); /* The text size of default (large) controls (eg. buttons, tabs). */
  --sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88); /* The text size of medium controls (eg. medium buttons, medium tabs). */
  --sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75); /* The text size of small controls (eg. small buttons, small tabs). */
  --sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100); /* The text size of large labels of fields. */
  --sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88); /* The text size of medium labels of fields. */
  --sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75); /* The text size of small labels of fields. */
  --sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100); /* The size of large body text. */
  --sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88); /* The size of medium body text. */
  --sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75); /* The size of small body text. */
  --sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60); /* The size of the extra large radius. */
  --sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30); /* The size of the large radius. */
  --sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20); /* The size of the medium radius. */
  --sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10); /* The size of the small radius. */
  --sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5); /* The size of the extra small radius. */
  --sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10); /* Width of large borders */
  --sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5); /* Width of medium borders */
  --sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2); /* Width of small borders */
  --sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80); /* Width and height of extra large icons. */
  --sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60); /* Width and height of large icons. */
  --sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50); /* Width and height of medium icons. */
  --sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40); /* Width and height of small icons. */
  --sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750); /* Default width of fields. (the name 'control' is wrong). */
  --sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40); /* Medium height of form controls (eg. Radio Checkbox, Switch) */
  --sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140); /* The height of extra large controls (eg. tabs) */
  --sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120); /* The height of large controls (eg. large button, large segmented control) */
  --sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100); /* The height of medium controls (eg. medium button, medium tabs) */
  --sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80); /* The height of small controls (eg. small button, small switch) */
  --sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60); /* The height of extra small controls (eg. extra small icon button) */
  --sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50); /* The height of extra extra small controls (eg. small switch, checkbox, radio) */
  --sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md); /* Shadow of popovers. The value is a css value of the 'box-shadow' property. */
  --sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40); /* Opacity of disabled elements. */
  --sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);
  --sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name); /* Font name of display text (eg. special headings). DEPRECATED. Will not be part of new CVI */
  --sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name); /* Font name of body text. */
  --sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);
  --sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);
  --sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);
  --sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);
  --sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);
  --sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);
  --sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);
  --sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);
  --sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);
  --sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);
  --sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);
  --sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);
  --sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);
  --sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);
  --sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);
  --sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550); /* Color of text or icons in secondary 'passive' elements (eg. draft, archived). */
  --sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white); /* Color of text or icons in primary 'passive' elements (eg. draft, archived). */
  --sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550); /* Color of text or icons in secondary 'informative' elements (eg. new, active, unread). */
  --sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white); /* Color of text or icons in primary 'informative' elements (eg. new, active, unread). */
  --sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700); /* Color of text or icons in secondary 'warning' elements (eg. caution, needs attention). */
  --sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700); /* Color of text or icons in secondary 'negative' elements (eg. rejected, failed) when pressed. */
  --sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600); /* Color of text or icons in secondary 'negative' elements (eg. rejected, failed) when hovered. */
  --sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550); /* Color of text or icons in secondary 'negative' elements (eg. rejected, failed). */
  --sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white); /* Color of text or icons in primary 'negative' elements (eg. rejected, failed). */
  --sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550); /* Color of text or icons in secondary 'positive' elements (eg. approved, saved). */
  --sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white); /* Color of text or icons in primary 'positive' elements (eg. approved, saved). */
  --sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900); /* Color of text or icons in selectable elements when not selected and pressed. */
  --sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900); /* Color of text or icons in selectable elements when not selected and hovered. */
  --sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900); /* Color of text or icons in selectable elements when not selected. */
  --sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700); /* Color of text or icons in selectable elements when selected and pressed. */
  --sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600); /* Color of text or icons in selectable elements when selected and hovered. */
  --sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550); /* Color of text or icons in selectable elements when selected. */
  --sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975); /* Color of text or icons in actionable tertiary elements when pressed. */
  --sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950); /* Color of text or icons in actionable tertiary elements when hovered. */
  --sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900); /* Color of text or icons in actionable tertiary elements. */
  --sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700); /* Color of text or icons in actionable secondary elements when pressed. */
  --sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600); /* Color of text or icons in actionable secondary elements when hovered. */
  --sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550); /* Color of text or icons in actionable secondary elements. */
  --sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white); /* Color of text or icons in actionable primary elements. */
  --sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600); /* Secondary color of text or icons on the primary surface. */
  --sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900); /* Default color of text or icons on the primary surface. */
  --sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400); /* Border color of the focus ring in all elements focused by keyboard. */
  --sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);
  --sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);
  --sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);
  --sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);
  --sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);
  --sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);
  --sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);
  --sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);
  --sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);
  --sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);
  --sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);
  --sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);
  --sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);
  --sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);
  --sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);
  --sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200); /* Border color of secondary 'informative' elements (eg. new, active, unread). */
  --sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300); /* Border color of secondary 'warning' elements (eg. caution, needs attention). */
  --sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200); /* Border color of secondary 'positive' elements (eg. approved, saved). */
  --sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200); /* Border color of secondary 'negative' elements (eg. rejected, failed). */
  --sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500); /* Border color of fields (eg. text field, select field, date field) with an error. */
  --sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);
  --sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);
  --sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);
  --sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);
  --sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);
  --sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p); /* Background color of top layer of multi-layer controls (eg. segmented control). */
  --sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white); /* Background color of bottom layer of multi-layer controls (eg. segmented control). */
  --sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white); /* Background color of regular controls (eg. checkbox, radio, switch) */
  --sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white); /* Background color of fields (eg. text field, select field, date field). */
  --sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);
  --sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);
  --sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);
  --sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);
  --sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);
  --sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);
  --sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);
  --sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);
  --sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);
  --sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);
  --sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);
  --sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);
  --sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);
  --sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);
  --sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);
  --sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);
  --sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);
  --sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);
  --sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);
  --sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);
  --sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);
  --sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);
  --sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);
  --sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);
  --sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);
  --sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);
  --sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);
  --sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);
  --sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);
  --sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);
  --sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50); /* Background color of secondary 'passive' elements (eg. draft, archived). */
  --sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450); /* Background color of primary 'passive' elements (eg. draft, archived). */
  --sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50); /* Background color of secondary 'informative' elements (eg. new, active, unread). */
  --sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500); /* Background color of primary 'informative' elements (eg. new, active, unread). */
  --sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75); /* Background color of secondary 'warning' elements (eg. caution, needs attention). */
  --sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300); /* Background color of primary 'warning' elements (eg. caution, needs attention). */
  --sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50); /* Background color of secondary 'positive' elements (eg. approved, saved). */
  --sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500); /* Background color of primary 'positive' elements (eg. approved, saved). */
  --sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100); /* Background color of secondary 'negative' elements (eg. rejected, failed) when pressed. */
  --sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75); /* Background color of secondary 'negative' elements (eg. rejected, failed) when hovered. */
  --sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50); /* Background color of secondary 'negative' elements (eg. rejected, failed). */
  --sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650); /* Background color of primary 'negative' elements (eg. rejected, failed) when pressed. */
  --sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600); /* Background color of primary 'negative' elements (eg. rejected, failed) when hovered. */
  --sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500); /* Background color of primary 'negative' elements (eg. rejected, failed). */
  --sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100); /* Background color of selectable elements when not selected and pressed. */
  --sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75); /* Background color of selectable elements when not selected and hovered. */
  --sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50); /* Background color of selectable elements when not selected. */
  --sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100); /* Background color of selectable elements when selected and pressed. */
  --sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75); /* Background color of selectable elements when selected and hovered. */
  --sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50); /* Background color of selectable elements when selected. */
  --sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent); /* Background color of 'danger' actionable (eg. delete) elements with text appearance. */
  --sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent); /* Background color of 'danger' actionable (eg. delete) elements with ghost appearance. */
  --sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent); /* Background color of tertiary actionable elements with text appearance. */
  --sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100); /* Background color of secondary actionable elements when pressed. */
  --sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75); /* Background color of secondary actionable elements when hovered. */
  --sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent); /* Background color of tertiary actionable elements on the secondary surface. Same as secondary by design, the content color is different. */
  --sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100); /* Background color of tertiary actionable elements when pressed. Same as secondary by design, the content color is different. */
  --sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75); /* Background color of tertiary actionable elements when hovered. Same as secondary by design, the content color is different. */
  --sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50); /* Background color of tertiary actionable elements. Same as secondary by design, the content color is different. */
  --sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent); /* Background color of secondary actionable elements with text appearance. */
  --sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100); /* Background color of secondary actionable elements with ghost appearance when pressed. */
  --sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75); /* Background color of secondary actionable elements with ghost appearance when hovered. */
  --sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent); /* Background color of secondary actionable elements with ghost appearance. */
  --sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100); /* Background color of secondary actionable elements when pressed. */
  --sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75); /* Background color of secondary actionable elements when hovered. */
  --sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50); /* Background color of secondary actionable elements. */
  --sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650); /* Background color of primary actionable elements when pressed. */
  --sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600); /* Background color of primary actionable elements when hovered. */
  --sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500); /* Background color of primary actionable elements. */
  --sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60); /* Default horizontal spacing between content of a container and its edges. */
  --sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-30); /* Default horizontal spacing between content of a small container (like Popover) and its edges. */
  --sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40); /* Default horizontal spacing between content of a container and its edges. */
  --sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30); /* Default horizontal spacing between content of a container and its edges. */
  --sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20); /* Default horizontal spacing between content of a container and its edges. */
  --sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30); /* Horizontal spacing between content of a large control and its edges. */
  --sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25); /* Horizontal spacing between content of a medium control and its edges. */
  --sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30); /* Vertical spacing between content of a large control and its edges. */
  --sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25); /* Vertical spacing between content of a medium control and its edges. */
  --sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10); /* Vertical spacing between content of a small control and its edges. */
  --sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md); /* The size of the radius of floating popovers. */
  --sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md); /* Width of the border of the focus ring in all elements while focused by keyboard */
  --sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs); /* Standard height of form controls (eg. Radio Checkbox, Switch) */
  --sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md); /* Medium height of input fields (eg. TextField, Select) */
  --sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg); /* Standard height of input fields (eg. TextField, Select) */
  --sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default); /* Color of the cursor in text fields. */
  --sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary); /* Color of text or icons in primary 'warning' elements (eg. caution, needs attention). */
  --sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary); /* Link text color on primary surfaces when pressed. */
  --sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary); /* Link text color on primary surfaces when hovered. */
  --sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary); /* Link text color on primary surfaces. */
  --sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active); /* Link text color on primary surfaces when pressed. */
  --sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover); /* Link text color on primary surfaces when hovered. */
  --sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default); /* Link text color on primary surfaces. */
  --sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active); /* Color of text or icons in actionable 'danger' elements (eg. delete) when pressed. */
  --sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover); /* Color of text or icons in actionable 'danger' elements (eg. delete) when hovered. */
  --sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default); /* Color of text or icons in actionable 'danger' elements (eg. delete). */
  --sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default); /* Border color of secondary 'passive' elements (eg. draft, archived). */
  --sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default); /* Border color of the separator (eg. separator of list items or sections in a listbox). */
  --sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active); /* Border color of controls (eg. checkbox, radio, switch) when not selected and pressed. */
  --sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover); /* Border color of controls (eg. checkbox, radio, switch) when not selected and hovered. */
  --sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default); /* Border color of controls (eg. checkbox, radio, switch) when not selected. */
  --sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);
  --sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);
  --sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);
  --sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active); /* Background color of 'danger' actionable (eg. delete) elements with ghost appearance when pressed. */
  --sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover); /* Background color of 'danger' actionable (eg. delete) elements with ghost appearance when hovered. */
  --sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active); /* Background color of 'danger' actionable (eg. delete) elements when pressed. */
  --sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover); /* Background color of 'danger' actionable (eg. delete) elements when hovered. */
  --sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default); /* Background color of 'danger' actionable (eg. delete) elements. */
  --sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default); /* Border color of fields (eg. text field, select field, date field). */
}

@media screen and (min-width: 768px) {
  .tokens_sapphire-theme-default__hyVtV, .tokens_sapphire-theme--secondary__a52Ws, .tokens_sapphire-theme--contrast__OsdBO {
     --sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);
     --sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600);
  }
}

@media (prefers-reduced-motion) {
  .tokens_sapphire-theme-default__hyVtV, .tokens_sapphire-theme--secondary__a52Ws, .tokens_sapphire-theme--contrast__OsdBO {
     --sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);
     --sapphire-semantic-time-motion-slow: 0.00s;
     --sapphire-semantic-time-motion-default: 0.00s;
     --sapphire-semantic-time-motion-quick: 0.00s;
  }
}

/**
 * Do not edit directly
 * Generated on Thu, 10 Apr 2025 08:14:50 GMT
 */

.tokens_sapphire-theme-default__hyVtV.tokens_sapphire-theme--secondary__a52Ws, .tokens_sapphire-theme-default__hyVtV .tokens_sapphire-theme--secondary__a52Ws {
  --sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-125);
  --sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-125);
  --sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-125);
  --sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-125);
  --sapphire-semantic-color-background-action-danger-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-background-action-danger-hover: var(--sapphire-global-color-red-100);
  --sapphire-semantic-color-background-action-danger-active: var(--sapphire-global-color-red-125);
  --sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-global-color-red-100);
  --sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-global-color-red-125);
  --sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-sapphire-900-4p);
  --sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-neutral-white);
  --sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-125);
  --sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-50);
}

/**
 * Do not edit directly
 * Generated on Thu, 10 Apr 2025 08:14:50 GMT
 */

.tokens_sapphire-theme-default__hyVtV.tokens_sapphire-theme--contrast__OsdBO, .tokens_sapphire-theme-default__hyVtV .tokens_sapphire-theme--contrast__OsdBO {
  --sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);
  --sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);
  --sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);
  --sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);
  --sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);
  --sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);
  --sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);
  --sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);
  --sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);
  --sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);
  --sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);
  --sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);
  --sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);
  --sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);
  --sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);
  --sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);
  --sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);
  --sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);
  --sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);
  --sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);
  --sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);
  --sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);
  --sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);
  --sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);
  --sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);
  --sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, 0.3);
  --sapphire-global-color-blue-25: hsl(202, 100%, 7%);
  --sapphire-global-color-blue-50: hsl(203, 100%, 9%);
  --sapphire-global-color-blue-75: hsl(203, 100%, 10%);
  --sapphire-global-color-blue-100: hsl(202, 100%, 11%);
  --sapphire-global-color-blue-125: hsl(203, 100%, 13%);
  --sapphire-global-color-blue-150: hsl(203, 100%, 15%);
  --sapphire-global-color-blue-200: hsl(203, 100%, 19%);
  --sapphire-global-color-blue-250: hsl(202, 100%, 22%);
  --sapphire-global-color-blue-300: hsl(203, 100%, 25%);
  --sapphire-global-color-blue-350: hsl(203, 100%, 29%);
  --sapphire-global-color-blue-400: hsl(203, 100%, 32%);
  --sapphire-global-color-blue-450: hsl(203, 100%, 35%);
  --sapphire-global-color-blue-500: hsl(203, 100%, 39%);
  --sapphire-global-color-blue-550: hsl(203, 90%, 44%);
  --sapphire-global-color-blue-600: hsl(203, 80%, 50%);
  --sapphire-global-color-blue-650: hsl(203, 75%, 57%);
  --sapphire-global-color-blue-700: hsl(203, 70%, 65%);
  --sapphire-global-color-blue-750: hsl(203, 64%, 72%);
  --sapphire-global-color-blue-800: hsl(203, 65%, 79%);
  --sapphire-global-color-blue-850: hsl(203, 64%, 86%);
  --sapphire-global-color-blue-875: hsl(204, 65%, 90%);
  --sapphire-global-color-blue-900: hsl(203, 64%, 94%);
  --sapphire-global-color-blue-925: hsl(206, 67%, 95%);
  --sapphire-global-color-blue-950: hsl(202, 65%, 97%);
  --sapphire-global-color-blue-975: hsl(204, 56%, 98%);
  --sapphire-global-color-green-25: hsl(159, 100%, 5%);
  --sapphire-global-color-green-50: hsl(159, 100%, 6%);
  --sapphire-global-color-green-75: hsl(159, 100%, 7%);
  --sapphire-global-color-green-100: hsl(159, 100%, 7%);
  --sapphire-global-color-green-125: hsl(159, 100%, 9%);
  --sapphire-global-color-green-150: hsl(158, 100%, 10%);
  --sapphire-global-color-green-200: hsl(159, 100%, 13%);
  --sapphire-global-color-green-250: hsl(159, 100%, 15%);
  --sapphire-global-color-green-300: hsl(159, 100%, 17%);
  --sapphire-global-color-green-350: hsl(159, 100%, 19%);
  --sapphire-global-color-green-400: hsl(159, 100%, 22%);
  --sapphire-global-color-green-450: hsl(159, 100%, 24%);
  --sapphire-global-color-green-500: hsl(159, 100%, 27%);
  --sapphire-global-color-green-550: hsl(159, 71%, 34%);
  --sapphire-global-color-green-600: hsl(159, 51%, 42%);
  --sapphire-global-color-green-650: hsl(159, 37%, 50%);
  --sapphire-global-color-green-700: hsl(159, 36%, 57%);
  --sapphire-global-color-green-750: hsl(159, 36%, 66%);
  --sapphire-global-color-green-800: hsl(160, 36%, 74%);
  --sapphire-global-color-green-850: hsl(159, 36%, 83%);
  --sapphire-global-color-green-875: hsl(159, 37%, 88%);
  --sapphire-global-color-green-900: hsl(159, 35%, 92%);
  --sapphire-global-color-green-925: hsl(162, 33%, 94%);
  --sapphire-global-color-green-950: hsl(158, 40%, 96%);
  --sapphire-global-color-green-975: hsl(150, 40%, 98%);
  --sapphire-global-color-red-25: hsl(0, 33%, 10%);
  --sapphire-global-color-red-50: hsl(355, 38%, 12%);
  --sapphire-global-color-red-75: hsl(356, 41%, 14%);
  --sapphire-global-color-red-100: hsl(355, 43%, 15%);
  --sapphire-global-color-red-125: hsl(354, 44%, 18%);
  --sapphire-global-color-red-150: hsl(353, 48%, 21%);
  --sapphire-global-color-red-200: hsl(353, 50%, 26%);
  --sapphire-global-color-red-250: hsl(351, 54%, 31%);
  --sapphire-global-color-red-300: hsl(351, 55%, 35%);
  --sapphire-global-color-red-350: hsl(350, 57%, 39%);
  --sapphire-global-color-red-400: hsl(349, 60%, 44%);
  --sapphire-global-color-red-450: hsl(349, 61%, 48%);
  --sapphire-global-color-red-500: hsl(348, 72%, 53%);
  --sapphire-global-color-red-550: hsl(351, 73%, 59%);
  --sapphire-global-color-red-600: hsl(353, 75%, 65%);
  --sapphire-global-color-red-650: hsl(355, 79%, 71%);
  --sapphire-global-color-red-700: hsl(356, 82%, 76%);
  --sapphire-global-color-red-750: hsl(357, 88%, 81%);
  --sapphire-global-color-red-800: hsl(358, 92%, 86%);
  --sapphire-global-color-red-850: hsl(359, 100%, 91%);
  --sapphire-global-color-red-875: hsl(358, 100%, 94%);
  --sapphire-global-color-red-900: hsl(357, 100%, 96%);
  --sapphire-global-color-red-925: hsl(356, 100%, 97%);
  --sapphire-global-color-red-950: hsl(355, 100%, 98%);
  --sapphire-global-color-red-975: hsl(0, 100%, 99%);
  --sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);
  --sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);
  --sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);
  --sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);
  --sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);
  --sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);
  --sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);
  --sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);
  --sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);
  --sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);
  --sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);
  --sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);
  --sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);
  --sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);
  --sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);
  --sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);
  --sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);
  --sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);
  --sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);
  --sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);
  --sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);
  --sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);
  --sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);
  --sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);
  --sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);
  --sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);
  --sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);
  --sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);
  --sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);
  --sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);
  --sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);
  --sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);
  --sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);
  --sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);
  --sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);
  --sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);
  --sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);
  --sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);
  --sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);
  --sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);
  --sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);
  --sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);
  --sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);
  --sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);
  --sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);
  --sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);
  --sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);
  --sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);
  --sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);
  --sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);
  --sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);
  --sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);
  --sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);
  --sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);
  --sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);
  --sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);
  --sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);
  --sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);
  --sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);
  --sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);
  --sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);
  --sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);
  --sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white);
}

/**
 * main rules
 */
.button_sapphire-button__cdDSi {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;

  /* In Safari buttons get a 2px border
   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
   */
  margin: 0;

  /* typography */
  font-family: var(--sapphire-semantic-font-name-default);
  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
  font-size: var(--sapphire-semantic-size-font-control-md);
  text-transform: none;
  letter-spacing: 0.01em;

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* sizing */
  padding: 0 var(--sapphire-global-size-generic-50);
  height: var(--sapphire-semantic-size-height-control-md);
  min-width: var(--sapphire-global-size-generic-100);
  max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
  flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */

  /* shape */
  border-radius: var(--sapphire-semantic-size-height-control-md);
  border-style: solid;
  border-width: 0;
  border-color: transparent;

  /* transition */
  /* we don't want to transition outline-offset */
  transition-property: opacity, background-color, color;
  transition-duration: var(--sapphire-semantic-time-fade-quick);
  transition-timing-function: ease-in-out;
  cursor: pointer;
}
.button_sapphire-button__content__MNqew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;

  /* In Safari buttons get a 2px border
   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
   */
  margin: 0;
  width: 100%;
}
a.button_sapphire-button__cdDSi {
  text-decoration: none;
}
/* Disabled state for all variants */
.button_sapphire-button__cdDSi:disabled,
.button_sapphire-button__cdDSi.button_is-disabled__d76kM {
  opacity: var(--sapphire-semantic-opacity-disabled);
  cursor: not-allowed;
}
/* Focused state for all variants */
.button_sapphire-button__cdDSi:focus {
  outline: none;
}
.button_sapphire-button__cdDSi.button_is-focus__GLYGe,
.button_sapphire-button__cdDSi:not(.button_js-focus__LzRg-):focus-visible {
  outline: var(--sapphire-semantic-size-focus-ring) solid
    var(--sapphire-semantic-color-focus-ring);
  outline-offset: var(--sapphire-semantic-size-focus-ring);
}
/* Button with icon */
.button_sapphire-button--with-left-icon__9do6i {
  min-width: var(--sapphire-global-size-generic-100);
}
.button_sapphire-button--with-right-icon__svAaO {
  min-width: var(--sapphire-global-size-generic-100);
}
.button_sapphire-button--with-right-icon__svAaO .button_sapphire-button__icon__AOwRQ {
  margin-left: var(--sapphire-semantic-size-spacing-20);
}
.button_sapphire-button--with-left-icon__9do6i .button_sapphire-button__icon__AOwRQ {
  margin-right: var(--sapphire-semantic-size-spacing-20);
}
/* Button loading */
.button_sapphire-button--loading__60VOe {
  cursor: not-allowed;
}
.button_sapphire-button__spinner__Ok0rW {
  position: absolute;
  display: inherit;
}
.button_sapphire-button--loading__60VOe .button_sapphire-button__content__MNqew {
  visibility: hidden;
}
/**
 * Skin rules
 */
/* ### Variant: Primary */
/* ## Style: Default */
.button_sapphire-button--primary__0411z {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-default
  );
  color: var(--sapphire-semantic-color-content-action-primary-default);
}
.button_sapphire-button--primary__0411z:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--primary__0411z:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-hover
  );
}
.button_sapphire-button--primary__0411z.button_is-focus__GLYGe,
.button_sapphire-button--primary__0411z:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-default
  );
}
.button_sapphire-button--primary__0411z:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--primary__0411z:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--primary__0411z:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-primary-active
  );
}
/* ### Variant: Secondary */
/* ## Style: Default */
.button_sapphire-button--secondary__G1LlA {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-default
  );
  color: var(--sapphire-semantic-color-content-action-secondary-default);
}
.button_sapphire-button--secondary__G1LlA:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--secondary__G1LlA:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-hover
  );
  color: var(--sapphire-semantic-color-content-action-secondary-hover);
}
.button_sapphire-button--secondary__G1LlA.button_is-focus__GLYGe,
.button_sapphire-button--secondary__G1LlA:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-default
  );
}
.button_sapphire-button--secondary__G1LlA:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--secondary__G1LlA:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--secondary__G1LlA:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-active
  );
  color: var(--sapphire-semantic-color-content-action-secondary-active);
}
/* ## Style: Ghost */
.button_sapphire-button--secondary-ghost__S-V5M {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-default
  );
  color: var(--sapphire-semantic-color-content-action-secondary-default);
}
.button_sapphire-button--secondary-ghost__S-V5M:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--secondary-ghost__S-V5M:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-hover
  );
  color: var(--sapphire-semantic-color-content-action-secondary-hover);
}
.button_sapphire-button--secondary-ghost__S-V5M.button_is-focus__GLYGe,
.button_sapphire-button--secondary-ghost__S-V5M:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-default
  );
}
.button_sapphire-button--secondary-ghost__S-V5M:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--secondary-ghost__S-V5M:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--secondary-ghost__S-V5M:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-secondary-ghost-active
  );
  color: var(--sapphire-semantic-color-content-action-secondary-active);
}
/* ## Style: Text */
.button_sapphire-button--secondary-text__cwc2d {
  color: var(--sapphire-semantic-color-content-action-secondary-default);
  border-radius: var(--sapphire-semantic-size-radius-xs);
  background: var(--sapphire-semantic-color-background-action-secondary-text);
  padding: 0;
}
.button_sapphire-button--secondary-text__cwc2d:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--secondary-text__cwc2d:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU).button_is-hover__1Km01 {
  color: var(--sapphire-semantic-color-content-action-secondary-hover);
}
.button_sapphire-button--secondary-text__cwc2d:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--secondary-text__cwc2d:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--secondary-text__cwc2d:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  color: var(--sapphire-semantic-color-content-action-secondary-active);
}
/* ### Variant: Tertiary */
/* ## Style: Default */
.button_sapphire-button--tertiary__dmGzp {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-default
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-default);
}
.button_sapphire-button--tertiary__dmGzp:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--tertiary__dmGzp:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-hover
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
}
.button_sapphire-button--tertiary__dmGzp.button_is-focus__GLYGe,
.button_sapphire-button--tertiary__dmGzp:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-default
  );
}
.button_sapphire-button--tertiary__dmGzp:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--tertiary__dmGzp:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--tertiary__dmGzp:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-active
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-active);
}
/* ## Style: Ghost */
.button_sapphire-button--tertiary-ghost__FNo9b {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-default
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-default);
}
.button_sapphire-button--tertiary-ghost__FNo9b:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--tertiary-ghost__FNo9b:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-hover
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
}
.button_sapphire-button--tertiary-ghost__FNo9b.button_is-focus__GLYGe,
.button_sapphire-button--tertiary-ghost__FNo9b:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-default
  );
}
.button_sapphire-button--tertiary-ghost__FNo9b:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--tertiary-ghost__FNo9b:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--tertiary-ghost__FNo9b:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-tertiary-ghost-active
  );
  color: var(--sapphire-semantic-color-content-action-tertiary-active);
}
/* ## Style: Text */
.button_sapphire-button--tertiary-text__T3sFO {
  color: var(--sapphire-semantic-color-content-action-tertiary-default);
  border-radius: var(--sapphire-semantic-size-radius-xs);
  background: var(--sapphire-semantic-color-background-action-tertiary-text);
  padding: 0;
}
.button_sapphire-button--tertiary-text__T3sFO:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--tertiary-text__T3sFO:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU).button_is-hover__1Km01 {
  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
}
.button_sapphire-button--tertiary-text__T3sFO:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--tertiary-text__T3sFO:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--tertiary-text__T3sFO:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  color: var(--sapphire-semantic-color-content-action-tertiary-active);
}
/* ### Variant: Danger */
/* ## Style: Default */
.button_sapphire-button--danger__tVEs6 {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-default
  );
  color: var(--sapphire-semantic-color-content-action-danger-default);
}
.button_sapphire-button--danger__tVEs6:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--danger__tVEs6:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-hover
  );
  color: var(--sapphire-semantic-color-content-action-danger-hover);
}
.button_sapphire-button--danger__tVEs6.button_is-focus__GLYGe,
.button_sapphire-button--danger__tVEs6:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-default
  );
}
.button_sapphire-button--danger__tVEs6:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--danger__tVEs6:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--danger__tVEs6:not(:disabled):not(.button_is-disabled__d76kM):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-active
  );
  color: var(--sapphire-semantic-color-content-action-danger-active);
}
/* ## Style: Ghost */
.button_sapphire-button--danger-ghost__3j7vg {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-default
  );
  color: var(--sapphire-semantic-color-content-action-danger-default);
}
.button_sapphire-button--danger-ghost__3j7vg:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--danger-ghost__3j7vg:not(:disabled):not(.button_is-disabled__d76kM):not(
    :active
  ):not(.button_is-active__VtTRU).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-hover
  );
  color: var(--sapphire-semantic-color-content-action-danger-hover);
}
.button_sapphire-button--danger-ghost__3j7vg.button_is-focus__GLYGe,
.button_sapphire-button--danger-ghost__3j7vg:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-default
  );
}
.button_sapphire-button--danger-ghost__3j7vg:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--danger-ghost__3j7vg:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--danger-ghost__3j7vg:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-action-danger-ghost-active
  );
  color: var(--sapphire-semantic-color-content-action-danger-active);
}
/* ## Style: Text */
.button_sapphire-button--danger-text__bKR7S {
  color: var(--sapphire-semantic-color-content-action-danger-default);
  border-radius: var(--sapphire-semantic-size-radius-xs);
  background: var(--sapphire-semantic-color-background-action-danger-text);
  padding: 0;
}
.button_sapphire-button--danger-text__bKR7S:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--danger-text__bKR7S:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ).button_is-hover__1Km01 {
  color: var(--sapphire-semantic-color-content-action-danger-hover);
}
.button_sapphire-button--danger-text__bKR7S:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--danger-text__bKR7S:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--danger-text__bKR7S:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  color: var(--sapphire-semantic-color-content-action-danger-active);
}
/**
 * Toggle Button
 */
.button_sapphire-button--selected__nkPa9 {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-default
  );
  color: var(--sapphire-semantic-color-content-selection-selected-default);
}
.button_sapphire-button--selected__nkPa9:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--selected__nkPa9:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-hover
  );
}
.button_sapphire-button--selected__nkPa9.button_is-focus__GLYGe,
.button_sapphire-button--selected__nkPa9:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-default
  );
}
.button_sapphire-button--selected__nkPa9:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--selected__nkPa9:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--selected__nkPa9:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-selection-selected-active
  );
  color: var(--sapphire-semantic-color-content-selection-selected-active);
}
.button_sapphire-button--unselected__J\+i-w {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-default
  );
  color: var(--sapphire-semantic-color-content-selection-unselected-default);
}
.button_sapphire-button--unselected__J\+i-w:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ):not(.button_js-hover__kMKGU):hover,
.button_sapphire-button--unselected__J\+i-w:not(:disabled):not(.button_is-disabled__d76kM):not(:active):not(
    .button_is-active__VtTRU
  ).button_is-hover__1Km01 {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-hover
  );
}
.button_sapphire-button--unselected__J\+i-w.button_is-focus__GLYGe,
.button_sapphire-button--unselected__J\+i-w:not(.button_js-focus__LzRg-):focus-visible {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-default
  );
}
.button_sapphire-button--unselected__J\+i-w:not(:disabled):not(.button_is-disabled__d76kM).button_is-active__VtTRU,
.button_sapphire-button--unselected__J\+i-w:not(:disabled):not(.button_is-disabled__d76kM):active,
.button_sapphire-button--unselected__J\+i-w:not(:disabled):not(
    .button_is-disabled__d76kM
  ):focus-visible:active {
  background-color: var(
    --sapphire-semantic-color-background-selection-unselected-active
  );
  color: var(--sapphire-semantic-color-content-selection-unselected-active);
}
/**
 * Icon
 */
.button_sapphire-button__icon__AOwRQ {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: var(--sapphire-semantic-size-icon-md);
  width: var(--sapphire-semantic-size-icon-md);
}
.button_sapphire-button--lg__MXSqx .button_sapphire-button__icon__AOwRQ {
  height: var(--sapphire-semantic-size-icon-lg);
  width: var(--sapphire-semantic-size-icon-lg);
}
.button_sapphire-button--sm__NKA\+O .button_sapphire-button__icon__AOwRQ {
  height: var(--sapphire-semantic-size-icon-sm);
  width: var(--sapphire-semantic-size-icon-sm);
}
/**
 * Size variations
 */
/**
 * LARGE
 */
.button_sapphire-button--lg__MXSqx {
  height: var(--sapphire-semantic-size-height-control-lg);
  min-width: var(--sapphire-global-size-generic-120);
  padding: 0 var(--sapphire-semantic-size-spacing-50);
  font-size: var(--sapphire-semantic-size-font-control-default);
  border-radius: var(--sapphire-semantic-size-height-control-lg);
}
.button_sapphire-button--lg__MXSqx.button_sapphire-button--secondary-text__cwc2d,
.button_sapphire-button--lg__MXSqx.button_sapphire-button--tertiary-text__T3sFO,
.button_sapphire-button--lg__MXSqx.button_sapphire-button--danger-text__bKR7S {
  padding: 0;
  border-radius: var(--sapphire-semantic-size-radius-xs);
}
/**
 * SMALL
 */
.button_sapphire-button--sm__NKA\+O {
  height: var(--sapphire-semantic-size-height-control-sm);
  min-width: var(--sapphire-global-size-generic-80);
  padding: 0 var(--sapphire-semantic-size-spacing-40);
  font-size: var(--sapphire-semantic-size-font-control-sm);
  border-radius: var(--sapphire-semantic-size-height-control-sm);
}
.button_sapphire-button--sm__NKA\+O.button_sapphire-button--secondary-text__cwc2d,
.button_sapphire-button--sm__NKA\+O.button_sapphire-button--tertiary-text__T3sFO,
.button_sapphire-button--sm__NKA\+O.button_sapphire-button--danger-text__bKR7S {
  padding: 0;
  border-radius: var(--sapphire-semantic-size-radius-xs);
}

.radio_sapphire-radio__EXkqf {
  display: inline-flex;
  font-family: var(--sapphire-semantic-font-name-default);
  max-width: 100%;
  position: relative;
}

.radio_sapphire-radio__input__FDsIN {
  margin: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.0001; /** Some of the screen readers may ignore element with opacity:0 */
  z-index: 1;
  cursor: pointer;
}

.radio_sapphire-radio__label__y0gZJ {
  margin-left: var(--sapphire-semantic-size-spacing-20);
  font-size: var(--sapphire-semantic-size-font-control-default);
  line-height: var(--sapphire-semantic-size-height-control-xs);
  color: var(--sapphire-semantic-color-content-default-primary);

  /* The below is meant to address a font rendering quirk in OSX where the text
   * looks bolder than intended due to subpixel rendering. This quirk generally
   * occurs for bold fonts on dark backgrounds but depending on the font, it
   * can happen in other contexts as well.
   *
   * These do not do anything except in webkit browsers & firefox on OSX.
   *
   * For more details see:
   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.radio_sapphire-radio--md__pvo08 .radio_sapphire-radio__label__y0gZJ {
  font-size: var(--sapphire-semantic-size-font-control-md);
  line-height: var(--sapphire-semantic-size-height-control-2xs);
}

/* The radio box */

.radio_sapphire-radio__box__yHxXd {
  box-sizing: border-box;
  background-color: var(--sapphire-semantic-color-background-control-default);
  width: var(--sapphire-semantic-size-height-box-lg);
  height: var(--sapphire-semantic-size-height-box-lg);
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--sapphire-semantic-size-border-md) solid
    var(--sapphire-semantic-color-border-control-default);
  position: relative;
  margin-top: var(--sapphire-semantic-size-spacing-5);

  transition-property: background-color, border-color, border-width;
  transition-duration: var(--sapphire-semantic-time-fade-quick);
  transition-timing-function: ease-in-out;
}

.radio_sapphire-radio--md__pvo08 .radio_sapphire-radio__box__yHxXd {
  width: var(--sapphire-semantic-size-height-box-md);
  height: var(--sapphire-semantic-size-height-box-md);
}

.radio_sapphire-radio--checked__4IXD4 .radio_sapphire-radio__box__yHxXd {
  border-color: var(
    --sapphire-semantic-color-background-action-primary-default
  );
  border-width: calc(
    (
        var(--sapphire-semantic-size-height-box-lg) -
          var(--sapphire-global-size-generic-20)
      ) / 2
  );
}

.radio_sapphire-radio--md__pvo08.radio_sapphire-radio--checked__4IXD4 .radio_sapphire-radio__box__yHxXd {
  border-width: calc(
    (
        var(--sapphire-semantic-size-height-box-md) -
          var(--sapphire-global-size-generic-15)
      ) / 2
  );
}

.radio_sapphire-radio--checked__4IXD4 .radio_sapphire-radio__box__yHxXd::after {
  display: block;
}

/* HOVER */

/* Hover when not checked */

.radio_sapphire-radio__EXkqf:not(:active):not(.radio_is-active__rd2pb):not(
    .radio_sapphire-radio--checked__4IXD4
  ).radio_is-hover__gg3v8
  .radio_sapphire-radio__box__yHxXd,
.radio_sapphire-radio__EXkqf:not(:active):not(.radio_is-active__rd2pb):not(.radio_sapphire-radio--checked__4IXD4):not(
    .radio_js-hover__fc-6R
  ):hover
  .radio_sapphire-radio__input__FDsIN:not(:disabled)
  ~ .radio_sapphire-radio__box__yHxXd {
  border-color: var(--sapphire-semantic-color-border-control-hover);
}

/* Hover when checked */

.radio_sapphire-radio--checked__4IXD4:not(:active):not(.radio_is-active__rd2pb).radio_is-hover__gg3v8
  .radio_sapphire-radio__box__yHxXd,
.radio_sapphire-radio--checked__4IXD4:not(:active):not(.radio_is-active__rd2pb):not(.radio_js-hover__fc-6R):hover
  .radio_sapphire-radio__input__FDsIN:not(:disabled)
  ~ .radio_sapphire-radio__box__yHxXd {
  border-color: var(--sapphire-semantic-color-background-action-primary-hover);
}

/* FOCUS */

.radio_sapphire-radio__EXkqf.radio_is-focus__ANIeP .radio_sapphire-radio__input__FDsIN ~ .radio_sapphire-radio__box__yHxXd,
.radio_sapphire-radio__EXkqf:not(.radio_js-focus__-iOD-)
  .radio_sapphire-radio__input__FDsIN:focus-visible
  ~ .radio_sapphire-radio__box__yHxXd {
  outline: var(--sapphire-semantic-size-focus-ring) solid
    var(--sapphire-semantic-color-focus-ring);
  outline-offset: var(--sapphire-semantic-size-focus-ring);
}

/* DISABLED */

.radio_sapphire-radio__input__FDsIN:disabled {
  cursor: not-allowed;
}

.radio_sapphire-radio__EXkqf:not(.radio_sapphire-radio--no-disabled__4vu6D)
  .radio_sapphire-radio__input__FDsIN:disabled
  ~ .radio_sapphire-radio__box__yHxXd,
.radio_sapphire-radio__EXkqf:not(.radio_sapphire-radio--no-disabled__4vu6D)
  .radio_sapphire-radio__input__FDsIN:disabled
  ~ .radio_sapphire-radio__label__y0gZJ {
  opacity: var(--sapphire-semantic-opacity-disabled);
}

[data-override-id='sitecoreOutlineOverride'] {
  outline: none;
}

[data-override-id='sitecoreOutlineOverride']:hover {
  outline: none;
}

[data-override-id='sitecoreOutlineOverride']:focus {
  outline: none;
}

[data-override-id='sitecoreOutlineOverride'] > *:focus {
  outline: none;
}

[data-override-id='sitecoreOutlineOverride'] > *:hover {
  outline: none;
}