:root {
  --button-caution-outline-background: hsl(
    var(--caution-background-hue)
    var(--caution-background-saturation)
    var(--caution-background-lightness)
    / 5%
  );
  --button-caution-outline-background-hover: hsl(
    var(--caution-background-hue)
    var(--caution-background-saturation)
    var(--caution-background-lightness)
    / 18%
  );
  --button-caution-outline-border: .125em solid hsl(
    var(--caution-background-hue)
    var(--caution-background-saturation)
    var(--caution-background-lightness)
    / 90%
  );
  --button-caution-outline-border-hover: .125em solid hsl(
    var(--caution-background-hue)
    calc(var(--caution-background-saturation) * 1.1)
    calc(var(--caution-background-lightness) * .8)
  );
  --button-caution-outline-colour: hsl(
    var(--caution-background-hue)
    calc(var(--caution-background-saturation) * 1.1)
    calc(var(--caution-background-lightness) * .8)
  );
  --button-caution-outline-colour-hover: hsl(
    var(--caution-background-hue)
    calc(var(--caution-background-saturation) * 1.1)
    calc(var(--caution-background-lightness) * .8)
  );

  --button-caution-solid-background: var(--caution-background-colour);
  --button-caution-solid-background-hover: hsl(
    var(--caution-background-hue)
    calc(var(--caution-background-saturation) * 1.1)
    calc(var(--caution-background-lightness) * .8)
  );
  --button-caution-solid-border: .125em solid var(--button-caution-solid-background);
  --button-caution-solid-border-hover: .125em solid var(--button-caution-solid-background-hover);
  --button-caution-solid-colour: var(--caution-foreground-colour);
  --button-caution-solid-colour-hover: var(--caution-foreground-colour);

  --button-caution-text-background: var(--button-caution-outline-background);
  --button-caution-text-background-hover: var(--button-caution-outline-background-hover);
  --button-caution-text-border: .125em solid transparent;
  --button-caution-text-border-hover: .125em solid transparent;
  --button-caution-text-colour: var(--button-caution-outline-colour);
  --button-caution-text-colour-hover: var(--button-caution-outline-colour-hover);

  --button-danger-outline-background: hsl(
    var(--danger-background-hue)
    var(--danger-background-saturation)
    var(--danger-background-lightness)
    / 5%
  );
  --button-danger-outline-background-hover: hsl(
    var(--danger-background-hue)
    var(--danger-background-saturation)
    var(--danger-background-lightness)
    / 18%
  );
  --button-danger-outline-border: .125em solid hsl(
    var(--danger-background-hue)
    var(--danger-background-saturation)
    var(--danger-background-lightness)
    / 75%
  );
  --button-danger-outline-border-hover: .125em solid hsl(
    var(--danger-background-hue)
    calc(var(--danger-background-saturation) * 1.1)
    var(--danger-background-lightness)
  );
  --button-danger-outline-colour: var(--danger-background-colour);
  --button-danger-outline-colour-hover: var(--danger-background-colour);

  --button-danger-solid-background: var(--danger-background-colour);
  --button-danger-solid-background-hover: hsl(
    var(--danger-background-hue)
    calc(var(--danger-background-saturation) * 1.1)
    calc(var(--danger-background-lightness) * .8)
  );
  --button-danger-solid-border: .125em solid var(--button-danger-solid-background);
  --button-danger-solid-border-hover: .125em solid var(--button-danger-solid-background-hover);
  --button-danger-solid-colour: var(--danger-foreground-colour);
  --button-danger-solid-colour-hover: var(--danger-foreground-colour);

  --button-danger-text-background: var(--button-danger-outline-background);
  --button-danger-text-background-hover: var(--button-danger-outline-background-hover);
  --button-danger-text-border: .125em solid transparent;
  --button-danger-text-border-hover: .125em solid transparent;
  --button-danger-text-colour: var(--button-danger-outline-colour);
  --button-danger-text-colour-hover: var(--button-danger-outline-colour-hover);

  --button-primary-outline-background: hsl(
    var(--accent-background-hue)
    var(--accent-background-saturation)
    var(--accent-background-lightness)
    / 5%
  );
  --button-primary-outline-background-hover: hsl(
    var(--accent-background-hue)
    var(--accent-background-saturation)
    var(--accent-background-lightness)
    / 18%
  );
  --button-primary-outline-border: .125em solid hsl(
    var(--accent-background-hue)
    var(--accent-background-saturation)
    var(--accent-background-lightness)
    / 75%
  );
  --button-primary-outline-border-hover: .125em solid hsl(
    var(--accent-background-hue)
    calc(var(--accent-background-saturation) * 1.1)
    var(--accent-background-lightness)
  );
  --button-primary-outline-colour: var(--accent-background-colour);
  --button-primary-outline-colour-hover: var(--accent-background-colour);

  --button-primary-solid-background-hue: var(--accent-background-hue);
  --button-primary-solid-background-saturation: var(--accent-background-saturation);
  --button-primary-solid-background-lightness: var(--accent-background-lightness);
  --button-primary-solid-background: hsl(
    var(--button-primary-solid-background-hue)
    var(--button-primary-solid-background-saturation)
    var(--button-primary-solid-background-lightness)
  );
  --button-primary-solid-background-hover: hsl(
    var(--button-primary-solid-background-hue)
    calc(var(--button-primary-solid-background-saturation) * 1.1)
    calc(var(--button-primary-solid-background-lightness) * .8)
  );
  --button-primary-solid-border: .125em solid transparent;
  --button-primary-solid-border-hover: .125em solid transparent;
  --button-primary-solid-colour: var(--accent-foreground-colour);
  --button-primary-solid-colour-hover: var(--accent-foreground-colour);

  --button-primary-text-background: var(--button-primary-outline-background);
  --button-primary-text-background-hover: var(--button-primary-outline-background-hover);
  --button-primary-text-border: .125em solid transparent;
  --button-primary-text-border-hover: .125em solid transparent;
  --button-primary-text-colour: var(--button-primary-outline-colour);
  --button-primary-text-colour-hover: var(--button-primary-outline-colour-hover);

  --button-secondary-outline-background: hsl(
    var(--accent-alt-background-hue)
    var(--accent-alt-background-saturation)
    var(--accent-alt-background-lightness)
    / 5%
  );
  --button-secondary-outline-background-hover: hsl(
    var(--accent-alt-background-hue)
    var(--accent-alt-background-saturation)
    var(--accent-alt-background-lightness)
    / 18%
  );
  --button-secondary-outline-border: .125em solid hsl(
    var(--accent-alt-background-hue)
    var(--accent-alt-background-saturation)
    var(--accent-alt-background-lightness)
    / 75%
  );
  --button-secondary-outline-border-hover: .125em solid hsl(
    var(--accent-alt-background-hue)
    calc(var(--accent-alt-background-saturation) * 1.1)
    var(--accent-alt-background-lightness)
  );
  --button-secondary-outline-colour: var(--accent-alt-background-colour);
  --button-secondary-outline-colour-hover: var(--accent-alt-background-colour);

  --button-secondary-solid-background: var(--accent-alt-background-colour);
  --button-secondary-solid-background-hover: hsl(
    var(--accent-alt-background-hue)
    calc(var(--accent-alt-background-saturation) * 1.1)
    calc(var(--accent-alt-background-lightness) * .8)
  );
  --button-secondary-solid-border: .125em solid var(--button-secondary-solid-background);
  --button-secondary-solid-border-hover: .125em solid var(--button-secondary-solid-background-hover);
  --button-secondary-solid-colour: var(--accent-alt-foreground-colour);
  --button-secondary-solid-colour-hover: var(--accent-alt-foreground-colour);

  --button-secondary-text-background: var(--button-secondary-outline-background);
  --button-secondary-text-background-hover: var(--button-secondary-outline-background-hover);
  --button-secondary-text-border: .125em solid transparent;
  --button-secondary-text-border-hover: .125em solid transparent;
  --button-secondary-text-colour: var(--button-secondary-outline-colour);
  --button-secondary-text-colour-hover: var(--button-secondary-outline-colour-hover);

  --button-success-outline-background: hsl(
    var(--success-background-hue)
    var(--success-background-saturation)
    var(--success-background-lightness)
    / 5%
  );
  --button-success-outline-background-hover: hsl(
    var(--success-background-hue)
    var(--success-background-saturation)
    var(--success-background-lightness)
    / 18%
  );
  --button-success-outline-border: .125em solid hsl(
    var(--success-background-hue)
    var(--success-background-saturation)
    var(--success-background-lightness)
    / 75%
  );
  --button-success-outline-border-hover: .125em solid hsl(
    var(--success-background-hue)
    calc(var(--success-background-saturation) * 1.1)
    var(--success-background-lightness)
  );
  --button-success-outline-colour: var(--success-background-colour);
  --button-success-outline-colour-hover: var(--success-background-colour);

  --button-success-solid-background: var(--success-background-colour);
  --button-success-solid-background-hover: hsl(
    var(--success-background-hue)
    calc(var(--success-background-saturation) * 1.1)
    calc(var(--success-background-lightness) * .8)
  );
  --button-success-solid-border: .125em solid var(--button-success-solid-background);
  --button-success-solid-border-hover: .125em solid var(--button-success-solid-background-hover);
  --button-success-solid-colour: var(--success-foreground-colour);
  --button-success-solid-colour-hover: var(--success-foreground-colour);

  --button-success-text-background: var(--button-success-outline-background);
  --button-success-text-background-hover: var(--button-success-outline-background-hover);
  --button-success-text-border: .125em solid transparent;
  --button-success-text-border-hover: .125em solid transparent;
  --button-success-text-colour: var(--button-success-outline-colour);
  --button-success-text-colour-hover: var(--button-success-outline-colour-hover);

  --button-outline-disabled-background: hsl(
    var(--accent-alt-background-hue)
    calc(var(--accent-alt-background-saturation) * .75)
    calc(var(--accent-alt-background-lightness) * 1.5)
    / 5%
  );
  --button-outline-disabled-border: .125em solid var(--button-outline-disabled-colour);
  --button-outline-disabled-colour: hsl(
    var(--accent-alt-background-hue)
    calc(var(--accent-alt-background-saturation) * .75)
    calc(var(--accent-alt-background-lightness) * 1.5)
  );

  --button-solid-disabled-background: hsl(
    var(--accent-alt-background-hue)
    calc(var(--accent-alt-background-saturation) * .75)
    calc(var(--accent-alt-background-lightness) * 1.5)
  );
  --button-solid-disabled-border: .125em solid var(--button-solid-disabled-background);
  --button-solid-disabled-colour: hsl(
    var(--accent-alt-foreground-hue)
    calc(var(--accent-alt-foreground-saturation) * .75)
    calc(var(--accent-alt-foreground-lightness) * .75)
  );

  --button-text-disabled-background: var(--button-outline-disabled-background);
  --button-text-disabled-border: .125em solid transparent;
  --button-text-disabled-colour: var(--button-outline-disabled-colour);

  --button-small-font-size: .8em;
  --button-medium-font-size: 1em;
  --button-large-font-size: 1.25em;
  --button-font-weight: 500;
  --button-line-height: 1.5;
  --button-padding: .5em 1em;
  --button-padding-no-label: .5em;
}
.oui-Button--button {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 1em;
  font-size: var(--button-medium-font-size);
  font-weight: 500;
  font-weight: var(--button-font-weight);
  line-height: 1.5;
  line-height: var(--button-line-height);
  padding: .5em 1em;
  padding: var(--button-padding);
  transition-duration: .5s;
  transition-property: background-color, border-color, color;
  transition-timing-function: ease-out;
}
a.oui-Button--button {
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
}
a.oui-Button--button:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.oui-Button--button.oui-Button--no-label {
  padding: .5em;
  padding: var(--button-padding-no-label);
}
.oui-Button--button.oui-Button--no-label .oui-Button--icon {
  margin: 0;
}
.oui-Button--label {
  flex: 1 0 auto;
  flex-wrap: nowrap;
  margin: 0;
}
.oui-Button--icon {
  display: flex;
  height: 1.5em;
}
.oui-Button--icon.oui-Button--before {
  margin: 0 .25em 0 -.375em;
}
.oui-Button--icon.oui-Button--after {
  margin: 0 -.375em 0 .25em;
}
.oui-Button--caution.oui-Button--outline .oui-Button--icon {
  fill: var(--button-caution-outline-colour);
}
.oui-Button--caution.oui-Button--solid .oui-Button--icon {
  fill: var(--button-caution-solid-colour);
}
.oui-Button--danger.oui-Button--outline .oui-Button--icon {
  fill: var(--button-danger-outline-colour);
}
.oui-Button--danger.oui-Button--solid .oui-Button--icon {
  fill: var(--button-danger-solid-colour);
}
.oui-Button--primary.oui-Button--outline .oui-Button--icon {
  fill: var(--button-primary-outline-colour);
}
.oui-Button--primary.oui-Button--solid .oui-Button--icon {
  fill: var(--button-primary-solid-colour);
}
.oui-Button--secondary.oui-Button--outline .oui-Button--icon {
  fill: var(--button-secondary-outline-colour);
}
.oui-Button--secondary.oui-Button--solid .oui-Button--icon {
  fill: var(--button-secondary-solid-colour);
}
.oui-Button--success.oui-Button--outline .oui-Button--icon {
  fill: var(--button-success-outline-colour);
}
.oui-Button--success.oui-Button--solid .oui-Button--icon {
  fill: var(--button-success-solid-colour);
}

.oui-Button--caution.oui-Button--outline {
  background: var(--button-caution-outline-background);
  border: var(--button-caution-outline-border);
  color: var(--button-caution-outline-colour);
}
.oui-Button--caution.oui-Button--outline:hover:not([disabled]) {
  background: var(--button-caution-outline-background-hover);
  border: var(--button-caution-outline-border-hover);
  color: var(--button-caution-outline-colour-hover);
}
.oui-Button--caution.oui-Button--solid {
  background: var(--button-caution-solid-background);
  border: var(--button-caution-solid-border);
  color: var(--button-caution-solid-colour);
}
.oui-Button--caution.oui-Button--solid:hover:not([disabled]) {
  background: var(--button-caution-solid-background-hover);
  border: var(--button-caution-solid-border-hover);
  color: var(--button-caution-solid-colour-hover);
}
.oui-Button--caution.oui-Button--text {
  background: var(--button-caution-text-background);
  border: .125em solid transparent;
  border: var(--button-caution-text-border);
  color: var(--button-caution-text-colour);
}
.oui-Button--caution.oui-Button--text:hover:not([disabled]) {
  background: var(--button-caution-text-background-hover);
  border: .125em solid transparent;
  border: var(--button-caution-text-border-hover);
  color: var(--button-caution-text-colour-hover);
}
.oui-Button--danger.oui-Button--outline {
  background: var(--button-danger-outline-background);
  border: var(--button-danger-outline-border);
  color: var(--button-danger-outline-colour);
}
.oui-Button--danger.oui-Button--outline:hover:not([disabled]) {
  background: var(--button-danger-outline-background-hover);
  border: var(--button-danger-outline-border-hover);
  color: var(--button-danger-outline-colour-hover);
}
.oui-Button--danger.oui-Button--solid {
  background: var(--button-danger-solid-background);
  border: var(--button-danger-solid-border);
  color: var(--button-danger-solid-colour);
}
.oui-Button--danger.oui-Button--solid:hover:not([disabled]) {
  background: var(--button-danger-solid-background-hover);
  border: var(--button-danger-solid-border-hover);
  color: var(--button-danger-solid-colour-hover);
}
.oui-Button--danger.oui-Button--text {
  background: var(--button-danger-text-background);
  border: .125em solid transparent;
  border: var(--button-danger-text-border);
  color: var(--button-danger-text-colour);
}
.oui-Button--danger.oui-Button--text:hover:not([disabled]) {
  background: var(--button-danger-text-background-hover);
  border: .125em solid transparent;
  border: var(--button-danger-text-border-hover);
  color: var(--button-danger-text-colour-hover);
}
.oui-Button--primary.oui-Button--outline {
  background: var(--button-primary-outline-background);
  border: var(--button-primary-outline-border);
  color: var(--button-primary-outline-colour);
}
.oui-Button--primary.oui-Button--outline:hover:not([disabled]) {
  background: var(--button-primary-outline-background-hover);
  border: var(--button-primary-outline-border-hover);
  color: var(--button-primary-outline-colour-hover);
}
.oui-Button--primary.oui-Button--solid {
  background: var(--button-primary-solid-background);
  border: .125em solid transparent;
  border: var(--button-primary-solid-border);
  color: var(--button-primary-solid-colour);
}
.oui-Button--primary.oui-Button--solid:hover:not([disabled]) {
  background: var(--button-primary-solid-background-hover);
  border: .125em solid transparent;
  border: var(--button-primary-solid-border-hover);
  color: var(--button-primary-solid-colour-hover);
}
.oui-Button--primary.oui-Button--text {
  background: var(--button-primary-text-background);
  border: .125em solid transparent;
  border: var(--button-primary-text-border);
  color: var(--button-primary-text-colour);
}
.oui-Button--primary.oui-Button--text:hover:not([disabled]) {
  background: var(--button-primary-text-background-hover);
  border: .125em solid transparent;
  border: var(--button-primary-text-border-hover);
  color: var(--button-primary-text-colour-hover);
}
.oui-Button--secondary.oui-Button--outline {
  background: var(--button-secondary-outline-background);
  border: var(--button-secondary-outline-border);
  color: var(--button-secondary-outline-colour);
}
.oui-Button--secondary.oui-Button--outline:hover:not([disabled]) {
  background: var(--button-secondary-outline-background-hover);
  border: var(--button-secondary-outline-border-hover);
  color: var(--button-secondary-outline-colour-hover);
}
.oui-Button--secondary.oui-Button--solid {
  background: var(--button-secondary-solid-background);
  border: var(--button-secondary-solid-border);
  color: var(--button-secondary-solid-colour);
}
.oui-Button--secondary.oui-Button--solid:hover:not([disabled]) {
  background: var(--button-secondary-solid-background-hover);
  border: var(--button-secondary-solid-border-hover);
  color: var(--button-secondary-solid-colour-hover);
}
.oui-Button--secondary.oui-Button--text {
  background: var(--button-secondary-text-background);
  border: .125em solid transparent;
  border: var(--button-secondary-text-border);
  color: var(--button-secondary-text-colour);
}
.oui-Button--secondary.oui-Button--text:hover:not([disabled]) {
  background: var(--button-secondary-text-background-hover);
  border: .125em solid transparent;
  border: var(--button-secondary-text-border-hover);
  color: var(--button-secondary-text-colour-hover);
}
.oui-Button--success.oui-Button--outline {
  background: var(--button-success-outline-background);
  border: var(--button-success-outline-border);
  color: var(--button-success-outline-colour);
}
.oui-Button--success.oui-Button--outline:hover:not([disabled]) {
  background: var(--button-success-outline-background-hover);
  border: var(--button-success-outline-border-hover);
  color: var(--button-success-outline-colour-hover);
}
.oui-Button--success.oui-Button--solid {
  background: var(--button-success-solid-background);
  border: var(--button-success-solid-border);
  color: var(--button-success-solid-colour);
}
.oui-Button--success.oui-Button--solid:hover:not([disabled]) {
  background: var(--button-success-solid-background-hover);
  border: var(--button-success-solid-border-hover);
  color: var(--button-success-solid-colour-hover);
}
.oui-Button--success.oui-Button--text {
  background: var(--button-success-text-background);
  border: .125em solid transparent;
  border: var(--button-success-text-border);
  color: var(--button-success-text-colour);
}
.oui-Button--success.oui-Button--text:hover:not([disabled]) {
  background: var(--button-success-text-background-hover);
  border: .125em solid transparent;
  border: var(--button-success-text-border-hover);
  color: var(--button-success-text-colour-hover);
}

.oui-Button--solid:disabled {
  background: var(--button-solid-disabled-background);
  border: var(--button-solid-disabled-border);
  color: var(--button-solid-disabled-colour);
}
.oui-Button--outline:disabled {
  background: var(--button-outline-disabled-background);
  border: var(--button-outline-disabled-border);
  color: var(--button-outline-disabled-colour);
}
.oui-Button--text:disabled {
  background: var(--button-text-disabled-background);
  border: .125em solid transparent;
  border: var(--button-text-disabled-border);
  color: var(--button-text-disabled-colour);
}

.oui-Button--small {
  font-size: .8em;
  font-size: var(--button-small-font-size);
}
.oui-Button--medium {
  font-size: 1em;
  font-size: var(--button-medium-font-size);
}
.oui-Button--large {
  font-size: 1.25em;
  font-size: var(--button-large-font-size);
}
.oui-Button--full-width {
  width: 100%;
}

:root {
  --vp-sm-min-w: 576px;
  --vp-md-min-w: 768px;
  --vp-lg-min-w: 992px;
  --vp-xl-min-w: 1200px;
  --vp-xxl-min-w: 1400px;
}

.oui-Grid--root {
  box-sizing: border-box;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0 auto;
}

.oui-Grid--root > .oui-Grid--col-1 {
      grid-column-start: 1;
    }

.oui-Grid--root > .oui-Grid--row-1 {
      grid-row-start: 1;
    }

.oui-Grid--root > .oui-Grid--col-span-1 {
      grid-column-end: span 1;
    }

.oui-Grid--root > .oui-Grid--row-span-1 {
      grid-row-end: span 1;
    }

.oui-Grid--root > .oui-Grid--col-2 {
      grid-column-start: 2;
    }

.oui-Grid--root > .oui-Grid--row-2 {
      grid-row-start: 2;
    }

.oui-Grid--root > .oui-Grid--col-span-2 {
      grid-column-end: span 2;
    }

.oui-Grid--root > .oui-Grid--row-span-2 {
      grid-row-end: span 2;
    }

.oui-Grid--root > .oui-Grid--col-3 {
      grid-column-start: 3;
    }

.oui-Grid--root > .oui-Grid--row-3 {
      grid-row-start: 3;
    }

.oui-Grid--root > .oui-Grid--col-span-3 {
      grid-column-end: span 3;
    }

.oui-Grid--root > .oui-Grid--row-span-3 {
      grid-row-end: span 3;
    }

.oui-Grid--root > .oui-Grid--col-4 {
      grid-column-start: 4;
    }

.oui-Grid--root > .oui-Grid--row-4 {
      grid-row-start: 4;
    }

.oui-Grid--root > .oui-Grid--col-span-4 {
      grid-column-end: span 4;
    }

.oui-Grid--root > .oui-Grid--row-span-4 {
      grid-row-end: span 4;
    }

.oui-Grid--root > .oui-Grid--col-5 {
      grid-column-start: 5;
    }

.oui-Grid--root > .oui-Grid--row-5 {
      grid-row-start: 5;
    }

.oui-Grid--root > .oui-Grid--col-span-5 {
      grid-column-end: span 5;
    }

.oui-Grid--root > .oui-Grid--row-span-5 {
      grid-row-end: span 5;
    }

.oui-Grid--root > .oui-Grid--col-6 {
      grid-column-start: 6;
    }

.oui-Grid--root > .oui-Grid--row-6 {
      grid-row-start: 6;
    }

.oui-Grid--root > .oui-Grid--col-span-6 {
      grid-column-end: span 6;
    }

.oui-Grid--root > .oui-Grid--row-span-6 {
      grid-row-end: span 6;
    }

.oui-Grid--root > .oui-Grid--col-7 {
      grid-column-start: 7;
    }

.oui-Grid--root > .oui-Grid--row-7 {
      grid-row-start: 7;
    }

.oui-Grid--root > .oui-Grid--col-span-7 {
      grid-column-end: span 7;
    }

.oui-Grid--root > .oui-Grid--row-span-7 {
      grid-row-end: span 7;
    }

.oui-Grid--root > .oui-Grid--col-8 {
      grid-column-start: 8;
    }

.oui-Grid--root > .oui-Grid--row-8 {
      grid-row-start: 8;
    }

.oui-Grid--root > .oui-Grid--col-span-8 {
      grid-column-end: span 8;
    }

.oui-Grid--root > .oui-Grid--row-span-8 {
      grid-row-end: span 8;
    }

.oui-Grid--root > .oui-Grid--col-9 {
      grid-column-start: 9;
    }

.oui-Grid--root > .oui-Grid--row-9 {
      grid-row-start: 9;
    }

.oui-Grid--root > .oui-Grid--col-span-9 {
      grid-column-end: span 9;
    }

.oui-Grid--root > .oui-Grid--row-span-9 {
      grid-row-end: span 9;
    }

.oui-Grid--root > .oui-Grid--col-10 {
      grid-column-start: 10;
    }

.oui-Grid--root > .oui-Grid--row-10 {
      grid-row-start: 10;
    }

.oui-Grid--root > .oui-Grid--col-span-10 {
      grid-column-end: span 10;
    }

.oui-Grid--root > .oui-Grid--row-span-10 {
      grid-row-end: span 10;
    }

.oui-Grid--root > .oui-Grid--col-11 {
      grid-column-start: 11;
    }

.oui-Grid--root > .oui-Grid--row-11 {
      grid-row-start: 11;
    }

.oui-Grid--root > .oui-Grid--col-span-11 {
      grid-column-end: span 11;
    }

.oui-Grid--root > .oui-Grid--row-span-11 {
      grid-row-end: span 11;
    }

.oui-Grid--root > .oui-Grid--col-12 {
      grid-column-start: 12;
    }

.oui-Grid--root > .oui-Grid--row-12 {
      grid-row-start: 12;
    }

.oui-Grid--root > .oui-Grid--col-span-12 {
      grid-column-end: span 12;
    }

.oui-Grid--root > .oui-Grid--row-span-12 {
      grid-row-end: span 12;
    }

@media (0 < width) {
      .oui-Grid--root > .oui-Grid--xs-col-1 {
        grid-column-start: 1;
      }
      .oui-Grid--root > .oui-Grid--xs-row-1 {
        grid-row-start: 1;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-1 {
        grid-column-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-1 {
        grid-row-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--xs-col-2 {
        grid-column-start: 2;
      }
      .oui-Grid--root > .oui-Grid--xs-row-2 {
        grid-row-start: 2;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-2 {
        grid-column-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-2 {
        grid-row-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--xs-col-3 {
        grid-column-start: 3;
      }
      .oui-Grid--root > .oui-Grid--xs-row-3 {
        grid-row-start: 3;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-3 {
        grid-column-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-3 {
        grid-row-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--xs-col-4 {
        grid-column-start: 4;
      }
      .oui-Grid--root > .oui-Grid--xs-row-4 {
        grid-row-start: 4;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-4 {
        grid-column-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-4 {
        grid-row-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--xs-col-5 {
        grid-column-start: 5;
      }
      .oui-Grid--root > .oui-Grid--xs-row-5 {
        grid-row-start: 5;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-5 {
        grid-column-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-5 {
        grid-row-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--xs-col-6 {
        grid-column-start: 6;
      }
      .oui-Grid--root > .oui-Grid--xs-row-6 {
        grid-row-start: 6;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-6 {
        grid-column-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-6 {
        grid-row-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--xs-col-7 {
        grid-column-start: 7;
      }
      .oui-Grid--root > .oui-Grid--xs-row-7 {
        grid-row-start: 7;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-7 {
        grid-column-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-7 {
        grid-row-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--xs-col-8 {
        grid-column-start: 8;
      }
      .oui-Grid--root > .oui-Grid--xs-row-8 {
        grid-row-start: 8;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-8 {
        grid-column-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-8 {
        grid-row-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--xs-col-9 {
        grid-column-start: 9;
      }
      .oui-Grid--root > .oui-Grid--xs-row-9 {
        grid-row-start: 9;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-9 {
        grid-column-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-9 {
        grid-row-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--xs-col-10 {
        grid-column-start: 10;
      }
      .oui-Grid--root > .oui-Grid--xs-row-10 {
        grid-row-start: 10;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-10 {
        grid-column-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-10 {
        grid-row-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--xs-col-11 {
        grid-column-start: 11;
      }
      .oui-Grid--root > .oui-Grid--xs-row-11 {
        grid-row-start: 11;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-11 {
        grid-column-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-11 {
        grid-row-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--xs-col-12 {
        grid-column-start: 12;
      }
      .oui-Grid--root > .oui-Grid--xs-row-12 {
        grid-row-start: 12;
      }
      .oui-Grid--root > .oui-Grid--xs-col-span-12 {
        grid-column-end: span 12;
      }
      .oui-Grid--root > .oui-Grid--xs-row-span-12 {
        grid-row-end: span 12;
      }
  }

@media (576px <= width) {
      .oui-Grid--root > .oui-Grid--sm-col-1 {
        grid-column-start: 1;
      }
      .oui-Grid--root > .oui-Grid--sm-row-1 {
        grid-row-start: 1;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-1 {
        grid-column-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-1 {
        grid-row-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--sm-col-2 {
        grid-column-start: 2;
      }
      .oui-Grid--root > .oui-Grid--sm-row-2 {
        grid-row-start: 2;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-2 {
        grid-column-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-2 {
        grid-row-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--sm-col-3 {
        grid-column-start: 3;
      }
      .oui-Grid--root > .oui-Grid--sm-row-3 {
        grid-row-start: 3;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-3 {
        grid-column-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-3 {
        grid-row-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--sm-col-4 {
        grid-column-start: 4;
      }
      .oui-Grid--root > .oui-Grid--sm-row-4 {
        grid-row-start: 4;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-4 {
        grid-column-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-4 {
        grid-row-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--sm-col-5 {
        grid-column-start: 5;
      }
      .oui-Grid--root > .oui-Grid--sm-row-5 {
        grid-row-start: 5;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-5 {
        grid-column-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-5 {
        grid-row-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--sm-col-6 {
        grid-column-start: 6;
      }
      .oui-Grid--root > .oui-Grid--sm-row-6 {
        grid-row-start: 6;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-6 {
        grid-column-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-6 {
        grid-row-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--sm-col-7 {
        grid-column-start: 7;
      }
      .oui-Grid--root > .oui-Grid--sm-row-7 {
        grid-row-start: 7;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-7 {
        grid-column-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-7 {
        grid-row-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--sm-col-8 {
        grid-column-start: 8;
      }
      .oui-Grid--root > .oui-Grid--sm-row-8 {
        grid-row-start: 8;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-8 {
        grid-column-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-8 {
        grid-row-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--sm-col-9 {
        grid-column-start: 9;
      }
      .oui-Grid--root > .oui-Grid--sm-row-9 {
        grid-row-start: 9;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-9 {
        grid-column-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-9 {
        grid-row-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--sm-col-10 {
        grid-column-start: 10;
      }
      .oui-Grid--root > .oui-Grid--sm-row-10 {
        grid-row-start: 10;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-10 {
        grid-column-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-10 {
        grid-row-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--sm-col-11 {
        grid-column-start: 11;
      }
      .oui-Grid--root > .oui-Grid--sm-row-11 {
        grid-row-start: 11;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-11 {
        grid-column-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-11 {
        grid-row-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--sm-col-12 {
        grid-column-start: 12;
      }
      .oui-Grid--root > .oui-Grid--sm-row-12 {
        grid-row-start: 12;
      }
      .oui-Grid--root > .oui-Grid--sm-col-span-12 {
        grid-column-end: span 12;
      }
      .oui-Grid--root > .oui-Grid--sm-row-span-12 {
        grid-row-end: span 12;
      }
  }

@media (768px <= width) {
      .oui-Grid--root > .oui-Grid--md-col-1 {
        grid-column-start: 1;
      }
      .oui-Grid--root > .oui-Grid--md-row-1 {
        grid-row-start: 1;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-1 {
        grid-column-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-1 {
        grid-row-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--md-col-2 {
        grid-column-start: 2;
      }
      .oui-Grid--root > .oui-Grid--md-row-2 {
        grid-row-start: 2;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-2 {
        grid-column-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-2 {
        grid-row-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--md-col-3 {
        grid-column-start: 3;
      }
      .oui-Grid--root > .oui-Grid--md-row-3 {
        grid-row-start: 3;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-3 {
        grid-column-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-3 {
        grid-row-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--md-col-4 {
        grid-column-start: 4;
      }
      .oui-Grid--root > .oui-Grid--md-row-4 {
        grid-row-start: 4;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-4 {
        grid-column-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-4 {
        grid-row-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--md-col-5 {
        grid-column-start: 5;
      }
      .oui-Grid--root > .oui-Grid--md-row-5 {
        grid-row-start: 5;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-5 {
        grid-column-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-5 {
        grid-row-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--md-col-6 {
        grid-column-start: 6;
      }
      .oui-Grid--root > .oui-Grid--md-row-6 {
        grid-row-start: 6;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-6 {
        grid-column-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-6 {
        grid-row-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--md-col-7 {
        grid-column-start: 7;
      }
      .oui-Grid--root > .oui-Grid--md-row-7 {
        grid-row-start: 7;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-7 {
        grid-column-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-7 {
        grid-row-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--md-col-8 {
        grid-column-start: 8;
      }
      .oui-Grid--root > .oui-Grid--md-row-8 {
        grid-row-start: 8;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-8 {
        grid-column-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-8 {
        grid-row-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--md-col-9 {
        grid-column-start: 9;
      }
      .oui-Grid--root > .oui-Grid--md-row-9 {
        grid-row-start: 9;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-9 {
        grid-column-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-9 {
        grid-row-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--md-col-10 {
        grid-column-start: 10;
      }
      .oui-Grid--root > .oui-Grid--md-row-10 {
        grid-row-start: 10;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-10 {
        grid-column-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-10 {
        grid-row-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--md-col-11 {
        grid-column-start: 11;
      }
      .oui-Grid--root > .oui-Grid--md-row-11 {
        grid-row-start: 11;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-11 {
        grid-column-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-11 {
        grid-row-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--md-col-12 {
        grid-column-start: 12;
      }
      .oui-Grid--root > .oui-Grid--md-row-12 {
        grid-row-start: 12;
      }
      .oui-Grid--root > .oui-Grid--md-col-span-12 {
        grid-column-end: span 12;
      }
      .oui-Grid--root > .oui-Grid--md-row-span-12 {
        grid-row-end: span 12;
      }
  }

@media (992px <= width) {
      .oui-Grid--root > .oui-Grid--lg-col-1 {
        grid-column-start: 1;
      }
      .oui-Grid--root > .oui-Grid--lg-row-1 {
        grid-row-start: 1;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-1 {
        grid-column-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-1 {
        grid-row-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--lg-col-2 {
        grid-column-start: 2;
      }
      .oui-Grid--root > .oui-Grid--lg-row-2 {
        grid-row-start: 2;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-2 {
        grid-column-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-2 {
        grid-row-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--lg-col-3 {
        grid-column-start: 3;
      }
      .oui-Grid--root > .oui-Grid--lg-row-3 {
        grid-row-start: 3;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-3 {
        grid-column-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-3 {
        grid-row-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--lg-col-4 {
        grid-column-start: 4;
      }
      .oui-Grid--root > .oui-Grid--lg-row-4 {
        grid-row-start: 4;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-4 {
        grid-column-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-4 {
        grid-row-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--lg-col-5 {
        grid-column-start: 5;
      }
      .oui-Grid--root > .oui-Grid--lg-row-5 {
        grid-row-start: 5;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-5 {
        grid-column-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-5 {
        grid-row-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--lg-col-6 {
        grid-column-start: 6;
      }
      .oui-Grid--root > .oui-Grid--lg-row-6 {
        grid-row-start: 6;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-6 {
        grid-column-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-6 {
        grid-row-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--lg-col-7 {
        grid-column-start: 7;
      }
      .oui-Grid--root > .oui-Grid--lg-row-7 {
        grid-row-start: 7;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-7 {
        grid-column-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-7 {
        grid-row-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--lg-col-8 {
        grid-column-start: 8;
      }
      .oui-Grid--root > .oui-Grid--lg-row-8 {
        grid-row-start: 8;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-8 {
        grid-column-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-8 {
        grid-row-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--lg-col-9 {
        grid-column-start: 9;
      }
      .oui-Grid--root > .oui-Grid--lg-row-9 {
        grid-row-start: 9;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-9 {
        grid-column-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-9 {
        grid-row-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--lg-col-10 {
        grid-column-start: 10;
      }
      .oui-Grid--root > .oui-Grid--lg-row-10 {
        grid-row-start: 10;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-10 {
        grid-column-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-10 {
        grid-row-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--lg-col-11 {
        grid-column-start: 11;
      }
      .oui-Grid--root > .oui-Grid--lg-row-11 {
        grid-row-start: 11;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-11 {
        grid-column-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-11 {
        grid-row-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--lg-col-12 {
        grid-column-start: 12;
      }
      .oui-Grid--root > .oui-Grid--lg-row-12 {
        grid-row-start: 12;
      }
      .oui-Grid--root > .oui-Grid--lg-col-span-12 {
        grid-column-end: span 12;
      }
      .oui-Grid--root > .oui-Grid--lg-row-span-12 {
        grid-row-end: span 12;
      }
  }

@media (1200px <= width) {
      .oui-Grid--root > .oui-Grid--xl-col-1 {
        grid-column-start: 1;
      }
      .oui-Grid--root > .oui-Grid--xl-row-1 {
        grid-row-start: 1;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-1 {
        grid-column-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-1 {
        grid-row-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--xl-col-2 {
        grid-column-start: 2;
      }
      .oui-Grid--root > .oui-Grid--xl-row-2 {
        grid-row-start: 2;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-2 {
        grid-column-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-2 {
        grid-row-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--xl-col-3 {
        grid-column-start: 3;
      }
      .oui-Grid--root > .oui-Grid--xl-row-3 {
        grid-row-start: 3;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-3 {
        grid-column-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-3 {
        grid-row-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--xl-col-4 {
        grid-column-start: 4;
      }
      .oui-Grid--root > .oui-Grid--xl-row-4 {
        grid-row-start: 4;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-4 {
        grid-column-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-4 {
        grid-row-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--xl-col-5 {
        grid-column-start: 5;
      }
      .oui-Grid--root > .oui-Grid--xl-row-5 {
        grid-row-start: 5;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-5 {
        grid-column-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-5 {
        grid-row-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--xl-col-6 {
        grid-column-start: 6;
      }
      .oui-Grid--root > .oui-Grid--xl-row-6 {
        grid-row-start: 6;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-6 {
        grid-column-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-6 {
        grid-row-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--xl-col-7 {
        grid-column-start: 7;
      }
      .oui-Grid--root > .oui-Grid--xl-row-7 {
        grid-row-start: 7;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-7 {
        grid-column-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-7 {
        grid-row-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--xl-col-8 {
        grid-column-start: 8;
      }
      .oui-Grid--root > .oui-Grid--xl-row-8 {
        grid-row-start: 8;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-8 {
        grid-column-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-8 {
        grid-row-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--xl-col-9 {
        grid-column-start: 9;
      }
      .oui-Grid--root > .oui-Grid--xl-row-9 {
        grid-row-start: 9;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-9 {
        grid-column-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-9 {
        grid-row-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--xl-col-10 {
        grid-column-start: 10;
      }
      .oui-Grid--root > .oui-Grid--xl-row-10 {
        grid-row-start: 10;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-10 {
        grid-column-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-10 {
        grid-row-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--xl-col-11 {
        grid-column-start: 11;
      }
      .oui-Grid--root > .oui-Grid--xl-row-11 {
        grid-row-start: 11;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-11 {
        grid-column-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-11 {
        grid-row-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--xl-col-12 {
        grid-column-start: 12;
      }
      .oui-Grid--root > .oui-Grid--xl-row-12 {
        grid-row-start: 12;
      }
      .oui-Grid--root > .oui-Grid--xl-col-span-12 {
        grid-column-end: span 12;
      }
      .oui-Grid--root > .oui-Grid--xl-row-span-12 {
        grid-row-end: span 12;
      }
  }

@media (1400px <= width) {
      .oui-Grid--root > .oui-Grid--xxl-col-1 {
        grid-column-start: 1;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-1 {
        grid-row-start: 1;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-1 {
        grid-column-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-1 {
        grid-row-end: span 1;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-2 {
        grid-column-start: 2;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-2 {
        grid-row-start: 2;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-2 {
        grid-column-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-2 {
        grid-row-end: span 2;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-3 {
        grid-column-start: 3;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-3 {
        grid-row-start: 3;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-3 {
        grid-column-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-3 {
        grid-row-end: span 3;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-4 {
        grid-column-start: 4;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-4 {
        grid-row-start: 4;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-4 {
        grid-column-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-4 {
        grid-row-end: span 4;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-5 {
        grid-column-start: 5;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-5 {
        grid-row-start: 5;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-5 {
        grid-column-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-5 {
        grid-row-end: span 5;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-6 {
        grid-column-start: 6;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-6 {
        grid-row-start: 6;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-6 {
        grid-column-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-6 {
        grid-row-end: span 6;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-7 {
        grid-column-start: 7;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-7 {
        grid-row-start: 7;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-7 {
        grid-column-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-7 {
        grid-row-end: span 7;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-8 {
        grid-column-start: 8;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-8 {
        grid-row-start: 8;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-8 {
        grid-column-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-8 {
        grid-row-end: span 8;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-9 {
        grid-column-start: 9;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-9 {
        grid-row-start: 9;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-9 {
        grid-column-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-9 {
        grid-row-end: span 9;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-10 {
        grid-column-start: 10;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-10 {
        grid-row-start: 10;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-10 {
        grid-column-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-10 {
        grid-row-end: span 10;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-11 {
        grid-column-start: 11;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-11 {
        grid-row-start: 11;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-11 {
        grid-column-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-11 {
        grid-row-end: span 11;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-12 {
        grid-column-start: 12;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-12 {
        grid-row-start: 12;
      }
      .oui-Grid--root > .oui-Grid--xxl-col-span-12 {
        grid-column-end: span 12;
      }
      .oui-Grid--root > .oui-Grid--xxl-row-span-12 {
        grid-row-end: span 12;
      }
  }

.oui-Container--root {
  box-sizing: border-box;
  width: 100%;
  padding: 1em;
  margin: 0 auto;
  max-width: 576px;
}

@media (768px <= width) {

.oui-Container--root {
    max-width: 768px;
}
  }

@media (992px <= width) {

.oui-Container--root {
    max-width: 992px;
}
  }

@media (1200px <= width) {

.oui-Container--root {
    max-width: 1200px;
}
  }

@media (1400px <= width) {

.oui-Container--root {
    max-width: 1400px;
}
  }

.oui-Container--root.oui-Container--fluid {
    max-width: none;
    max-width: initial;
  }

.oui-Page--root {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  min-height: 100vh;
  padding: 0;
  position: relative;
  width: 100vw;
}

.oui-LinkGroup--root {
  display: block;
}
.oui-LinkGroup--root ul {
    list-style-type: none;
    margin: .5em 0;
    padding: 0;
  }
.oui-LinkGroup--title {
  color: var(--foreground-colour);
  margin: 1em 0 .5em 0;
  padding: 0 1em;
  text-transform: uppercase;
}
.oui-LinkGroup--title > span {
    font-size: .875em;
  }


  .oui-LinkItem--root a {
    box-sizing: content-box;
    border-radius: .25em;
    color: var(--foreground-colour);
    display: flex;
    gap: .5em;
    height: auto;
    padding: .5em 1em;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.oui-LinkItem--root a[aria-current='page'] {
      background: var(--accent-background-colour);
      color: var(--accent-foreground-colour);
    }
.oui-LinkItem--icon {
  flex: 0 0 1.25em;
  margin-top: .0625em;
}
.oui-LinkItem--label {
  line-height: 1.5;
}

:root {
  --error-margin: .5em 0;
  --error-font-size: .8125em;
}

.oui-Error--error {
  font-size: .8125em;
  font-size: var(--error-font-size);
  color: var(--error-foreground-colour);
  margin: .5em 0;
  margin: var(--error-margin);
}

:root {
  --select-background: var(--background-colour);

  --select-border-colour: var(--foreground-colour);
  --select-border-width: .0625em;
  --select-border-width-hover: calc(var(--select-border-width) * 2);
  --select-border: var(--select-border-width) solid var(--select-border-colour);
  --select-border-hover: var(--select-border-width-hover) solid var(--select-border-colour);

  --select-colour: var(--foreground-colour);
  --select-colour-hover: var(--select-colour);

  --select-error-border-colour: var(--error-foreground-colour);

  --select-font-size-small: .8em;
  --select-font-size-medium: 1em;
  --select-font-size-large: 1.25em;
  --select-font-weight: 400;

  --select-hint-line-height: 1.25;
  --select-hint-margin: .5em 0;
  --select-hint-font-size: .8em;
  --select-hint-colour: hsl(
    var(--foreground-hue)
    calc(var(--foreground-saturation) * .75)
    calc(var(--foreground-lightness) * 1.75)
  );

  --select-label-line-height: 1.25;
  --select-label-margin: .5em 0;
  --select-label-colour: var(--foreground-colour);

  --select-line-height: 1.5em;

  --select-margin: 1em 0;
  --select-padding: .5em;
  --select-underline-padding: calc(var(--select-padding) / 2) 0;

  --select-outline: none;
}
.oui-Select--select {
  box-sizing: border-box;
  margin: 1em 0;
  margin: var(--select-margin);
}
.oui-Select--select select {
  background: var(--select-background);
  box-sizing: border-box;
  border: var(--select-border);
  color: var(--select-colour);
  display: block;
  font-size: 1em;
  font-size: var(--select-font-size-medium);
  font-weight: 400;
  font-weight: var(--select-font-weight);
  line-height: 1.5em;
  line-height: var(--select-line-height);
  margin: 0;
  outline: none;
  outline: var(--select-outline);
  padding: .5em;
  padding: var(--select-padding);
  transition-duration: .5s;
  transition-property: background-color, border-color, color;
  transition-timing-function: ease-out;
}
.oui-Select--select:hover select,
.oui-Select--select select:focus {
  border: var(--select-border-hover);
  padding: calc(.5em - (.0625em * 2) + .0625em);
  padding: calc(.5em - calc(.0625em * 2) + .0625em);
  padding: calc(var(--select-padding) - var(--select-border-width-hover) + var(--select-border-width));
}
.oui-Select--select select[aria-invalid=true] {
  border-color: var(--select-error-border-colour);
}

.oui-Select--select.oui-Select--underline select {
  border-top: none;
  border-left: none;
  border-right: none;
  padding: calc(.5em / 2) 0;
  padding: var(--select-underline-padding);
}
.oui-Select--select.oui-Select--underline:hover select,
.oui-Select--select.oui-Select--underline select:focus {
  padding: calc(.5em / 2 - (calc(.0625em * 2) - .0625em) / 2) 0;
  padding: calc(var(--select-padding) / 2 - (var(--select-border-width-hover) - var(--select-border-width)) / 2) 0;
}

.oui-Select--label-container {
  margin: .5em 0;
  margin: var(--select-label-margin);
}
.oui-Select--label {
  color: var(--select-label-colour);
  display: block;
  line-height: 1.25;
  line-height: var(--select-label-line-height);
}
.oui-Select--hint {
  display: block;
  color: var(--select-hint-colour);
  font-size: .8em;
  font-size: var(--select-hint-font-size);
  line-height: 1.25;
  line-height: var(--select-hint-line-height);
  margin: .5em 0;
  margin: var(--select-hint-margin);
}

.oui-Select--small {
  font-size: .8em;
  font-size: var(--select-font-size-small);
}
.oui-Select--medium {
  font-size: 1em;
  font-size: var(--select-font-size-medium);
}
.oui-Select--large {
  font-size: 1.25em;
  font-size: var(--select-font-size-large);
}
.oui-Select--full-width {
  width: 100%;
}
.oui-Select--full-width select {
  width: 100%;
}

.oui-Sidebar--root {
  background: var(--background-colour);
  box-shadow: 0 .5em 1.5em var(--box-shadow-colour), 0 .125em .5em var(--box-shadow-colour);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  font-size: 1rem;
  min-height: 100%;
  padding: 1em;
  position: absolute;
  transition: width 250ms ease;
  top: 0;
  left: 0;
  width: 15em;
  z-index: 1;
}

.oui-Sidebar--root.oui-Sidebar--collapsed {
    box-shadow: none;
    box-shadow: initial;
    height: auto;
    min-height: 0;
    min-height: initial;
  }

.oui-Sidebar--root.oui-Sidebar--collapsed > :not(:first-child) {
      display: none;
    }

@media (768px <= width) {

.oui-Sidebar--root {
    position: static;
}
    .oui-Sidebar--root.oui-Sidebar--collapsed > :not(:first-child) {
      display: block;
    }
  }
.oui-Sidebar--burger-icon {
  display: block;
}
.oui-Sidebar--collapsed {
  padding: 0;
  width: 4em;
}
.oui-Sidebar--collapsed .oui-LinkGroup--root ul {
    margin: 0;
  }
.oui-Sidebar--collapsed .oui-LinkItem--root a {
    border-radius: 0;
    padding: 1em;
    height: 2em;
  }
.oui-Sidebar--collapsed .oui-LinkItem--icon {
    flex-basis: 2em;
  }
.oui-Sidebar--collapsed .oui-LinkItem--label,.oui-Sidebar--collapsed .oui-LinkGroup--title {
    display: none;
  }
.oui-Sidebar--collapsed .oui-Button--button.oui-Sidebar--collapse-toggle {
    align-self: stretch;
    justify-content: center;
    height: 4em;
  }
.oui-Button--button.oui-Sidebar--collapse-toggle {
  align-self: end;
  background: transparent;
  border-color: transparent;
}
.oui-Button--button.oui-Sidebar--collapse-toggle:hover:not([disabled]) {
    background: transparent;
    border-color: transparent;
  }

.oui-Col--root {
  box-sizing: border-box;
  flex: 1;
}

.oui-Col--col-1 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 1);
  }

.oui-Col--col-2 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 2);
  }

.oui-Col--col-3 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 3);
  }

.oui-Col--col-4 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 4);
  }

.oui-Col--col-5 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 5);
  }

.oui-Col--col-6 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 6);
  }

.oui-Col--col-7 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 7);
  }

.oui-Col--col-8 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 8);
  }

.oui-Col--col-9 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 9);
  }

.oui-Col--col-10 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 10);
  }

.oui-Col--col-11 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 11);
  }

.oui-Col--col-12 {
    flex: 0 0 auto;
    width: calc((100% / 12) * 12);
  }
@media (576px <= width) {
    .oui-Col--col-sm-1 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 1);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-2 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 2);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-3 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 3);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-4 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 4);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-5 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 5);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-6 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 6);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-7 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 7);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-8 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 8);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-9 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 9);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-10 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 10);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-11 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 11);
    }
  }
@media (576px <= width) {
    .oui-Col--col-sm-12 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 12);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-1 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 1);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-2 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 2);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-3 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 3);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-4 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 4);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-5 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 5);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-6 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 6);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-7 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 7);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-8 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 8);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-9 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 9);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-10 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 10);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-11 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 11);
    }
  }
@media (768px <= width) {
    .oui-Col--col-md-12 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 12);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-1 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 1);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-2 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 2);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-3 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 3);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-4 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 4);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-5 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 5);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-6 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 6);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-7 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 7);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-8 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 8);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-9 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 9);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-10 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 10);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-11 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 11);
    }
  }
@media (992px <= width) {
    .oui-Col--col-lg-12 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 12);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-1 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 1);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-2 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 2);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-3 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 3);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-4 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 4);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-5 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 5);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-6 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 6);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-7 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 7);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-8 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 8);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-9 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 9);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-10 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 10);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-11 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 11);
    }
  }
@media (1200px <= width) {
    .oui-Col--col-xl-12 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 12);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-1 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 1);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-2 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 2);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-3 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 3);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-4 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 4);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-5 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 5);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-6 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 6);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-7 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 7);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-8 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 8);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-9 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 9);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-10 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 10);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-11 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 11);
    }
  }
@media (1400px <= width) {
    .oui-Col--col-xl-12 {
      flex: 0 0 auto;
      width: calc((100% / 12) * 12);
    }
  }

.otd--app-Page--oui-page {
  min-height: calc(100 * var(--vh));
}
.otd--app-Page--root {
  background: hsl(0, 0%, 95%);
  display: flex;
  flex: 1 0 auto;
  justify-content: stretch;
  max-width: calc(21 / 9 * 100 * var(--vh));
  padding: 0;
  width: 100%;
  @mesia (768px <= width) {
    min-height: calc(100% - 3em);
  }
}
.otd--app-Page--root > article {
    flex: 1 1 auto;
    height: auto;
  }
.otd--app-Page--root > article > header {
      padding: 1.25em;
      line-height: 1.5;
    }
.otd--app-Page--root > article > header h1 {
        font-size: 3em;
        font-weight: 600;
        letter-spacing: -.02em;
        margin: 0;
      }
.otd--app-Page--root main {
    padding: 1.25em;
  }
.otd--app-Page--root main h1 {
      font-size: 1.5em;
    }
.otd--app-Page--root main h1:first-child {
        margin-top: 0;
      }
.otd--app-Page--root .oui-Col--root {
    padding: 1em;
  }
.otd--app-Page--root .oui-LinkItem--icon path {
    fill: var(--colour-foreground);
  }
.otd--app-Page--root .oui-LinkItem--root {
    font-weight: 600;
    margin: .25em 0;
  }
.otd--app-Page--root .oui-LinkItem--root a[aria-current='page'] {
      background: var(--colour-background-alt);
      border-radius: .5em;
      color: var(--colour-accent);
    }
.otd--app-Page--root .oui-LinkItem--root a[aria-current='page'] .oui-LinkItem--icon path {
        fill: var(--colour-accent);
      }
.otd--app-Page--sidebar nav {
  flex-grow: 1;
}
.otd--app-Page--sidebar nav:last-child {
    flex-grow: 0;
  }
.otd--app-Page--topbar {
  align-items: center;
  background-color: var(--colour-background);
  box-shadow: 0 .5em 1.5em var(--colour-box-shadow), 0 .125em .5em var(--colour-box-shadow);
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  height: 3em;
  width: 100%;
  padding: .5em 0 .5em 0;
}
@media (768px <= width) {
.otd--app-Page--topbar {
    display: none;
}
  }
.otd--app-Page--card {
  box-sizing: border-box;
  background-color: var(--background-colour);
  box-shadow: 0 .0625em .25em 0 rgba(0, 0, 0, .05);
  border-radius: .25em;
  color: var(--foreground-colour);
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 1em;
}
@media (768px <= width) {
.otd--app-Page--card {
    padding: 1.5em;
}
  }
.otd--app-Page--title {
  color: var(--colour-foreground-alt);
  border-bottom: 1px solid var(--colour-foreground-alt);
  font-size: 1.5em;
  font-weight: 600;
  margin: 1em 0 1em 0;
}
.otd--app-Page--title:first-child {
    margin-top: 0;
  }
.otd--app-Page--title.otd--app-Page--danger {
    color: var(--colour-foreground-error);
    border-bottom-color: var(--colour-foreground-error);
  }
.otd--app-Page--logo {
  margin: 0 0 1em 0;
}
.otd--app-Page--avatar-link a {
    height: 4em;
    align-items: center;
  }
.otd--app-Page--avatar-link a:hover .otd--app-Page--avatar {
      border: .125em solid var(--colour-border);
    }
.otd--app-Page--avatar-link .otd--app-Page--avatar {
    box-sizing: border-box;
    background-color: hsla(218, 100%, 90%, 1);
    background-size: 5.2em;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: block;
    height: 3.75em;
    width: 3.75em;
  }
.oui-Sidebar--collapsed .otd--app-Page--avatar-link a {
      padding: .75em;
      height: 2.5em;
    }
.oui-Sidebar--collapsed .otd--app-Page--avatar-link .otd--app-Page--avatar {
      background-size: 2.75em;
      height: 2.5em;
      width: 2.5em;
    }
.oui-Sidebar--collapsed > .otd--app-Page--org-selector:not(:first-child) { /* need to be specific to override the default styles */
    display: none;
  }
.oui-Sidebar--collapsed > .otd--app-Page--logo:not(:first-child) { /* need to be specific to override the default styles */
    display: none;
  }

.otd--app-DocsList--root {
  box-sizing: border-box;
}

.otd--app-DocsList--root > footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1em 0 0 0;
  }

.otd--app-DocsList--root > footer > :first-child {
      margin-left: .75em;
    }
.otd--app-DocsList--table {
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.otd--app-DocsList--table > caption {
    font-weight: 500;
    padding: .75em 0;
    text-align: left;
  }
.otd--app-DocsList--table > thead > tr > th {
        background: var(--colour-background-header);
        border-bottom: 1px solid var(--colour-border-table);
        cursor: default;
        font-weight: 600;
        padding: .75em;
        text-align: left;
      }
.otd--app-DocsList--table > tbody > tr > td {
        border-bottom: 1px solid var(--colour-border-table);
        font-size: .875em;
        padding: 1.25em .75em;
        text-align: left;
      }
.otd--app-DocsList--table > tbody > tr > td.otd--app-DocsList--actions {
          text-align: center;
          white-space: nowrap;
          width: 0;
        }
.otd--app-DocsList--table > tbody > tr > td.otd--app-DocsList--actions > button {
            background: transparent;
            border: 0;
          }
.otd--app-DocsList--table > tbody > tr > td.otd--app-DocsList--actions > button path {
              fill: var(--colour-foreground);
            }
.otd--app-DocsList--table > tbody > tr > td.otd--app-DocsList--actions > button {
            cursor: pointer;
          }
@media (pointer: fine) {
.otd--app-DocsList--table > tbody > tr > td.otd--app-DocsList--actions > button {
              visibility: hidden;
          }
            }
.otd--app-DocsList--table > tbody > tr > td.otd--app-DocsList--actions > svg {
            height: 1.5em;
          }
@media (pointer: fine) {
.otd--app-DocsList--table > tbody > tr > td.otd--app-DocsList--actions > svg {
              visibility: hidden;
          }
            }
.otd--app-DocsList--table > tbody > tr:hover > td {
          border-bottom: 2px solid var(--colour-border-table);
          border-top: 1px solid var(--colour-border-table);
          padding: calc(1.25em - 1px) .75em;
        }
@media (pointer: fine) {
              .otd--app-DocsList--table > tbody > tr:hover > td.otd--app-DocsList--actions > button {
                visibility: visible;
              }
              .otd--app-DocsList--table > tbody > tr:hover > td.otd--app-DocsList--actions > svg {
                visibility: visible;
              }
          }
.otd--app-DocsList--table button.oui-Button--solid.oui-Button--secondary:hover {
    background: none;
    border: none;
  }
.otd--app-DocsList--page-controls {
  align-items: strech;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: .5em;
  height: 2em;
  justify-content: flex-end;
  margin: .75em 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.otd--app-DocsList--page-control {
  display: block;
  flex: 0 0 auto;
  text-align: center;
  position: relative;
}
.otd--app-DocsList--page-control .otd--app-DocsList--label:first-of-type {
      margin-left: 0;
    }
.otd--app-DocsList--page-control .otd--app-DocsList--label {
    border-radius: .5em;
    box-sizing: border-box;
    display: block;
    height: 2em;
    line-height: 2em;
    position: relative;
    text-align: center;
    width: 2em;
  }
.otd--app-DocsList--page-control input[type=radio] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    visibility: hidden;
  }
.otd--app-DocsList--page-control input[type=radio] ~ .otd--app-DocsList--label {
      background: var(--colour-background);
      color: var(--colour-foreground);
    }
.otd--app-DocsList--page-control input[type=radio]:checked ~ .otd--app-DocsList--label {
      background: var(--colour-background-dark);
      color: var(--colour-foreground-dark);
    }
.otd--app-DocsList--dots {
  display: block;
  font-size: 20px;
  font-weight: 900;
  height: 25px;
  line-height: 27px;
  margin-left: 5px;
  text-align: center;
  width: 25px;
}
.otd--app-DocsList--check-true {
  color: good;
  font-size: 1.25em;
  line-height: calc(1 / 1.25);
}
.otd--app-DocsList--check-false {
  color: bad;
  font-size: 1.25em;
  line-height: calc(1 / 1.25);
}
.otd--app-DocsList--icon {
  display: inline-block;
  box-sizing: border-box;
  height: 32px;
  padding: 4px;
  width: 32px;
}

.otd--app-DocsList--sort-icon {
  vertical-align: text-top;
  height: 18px;
}

.otd--app-DocsList--sort-icon path {
    fill: -var(--colour-foreground);
  }
.otd--app-DocsList--placeholder {
  text-align: center;
}
.otd--app-DocsList--placeholder > div {
    font-size: 1.25em;
    text-align: center;
  }

.otd--app-Page--card.otd--app-SkuList--number {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

.otd--app-Page--card.otd--app-SkuList--button {
    padding: 0;
  }
.otd--app-SkuList--value {
  display: block;
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.5;
  text-align: center;
}
.otd--app-SkuList--unit {
  display: block;
  font-size: .875em;
  line-height: 1.5;
  text-align: center;
}
.otd--app-SkuList--action-button {
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: 1.5em 1em;
}
.otd--app-SkuList--action-button .oui-Button--icon {
    margin: 0 .25em;
    width: 40px;
    height: 40px;
  }
.otd--app-SkuList--action-button .oui-Button--label {
    flex: 1 1 auto;
    margin: 0 .25em;
    text-align: left;
    text-transform: none;
  }
.otd--app-SkuList--action-button .otd--app-SkuList--label {
    display: block;
    font-size: 1.4em;
    line-height: 1.2;
  }
.otd--app-SkuList--action-button .otd--app-SkuList--hint {
    display: block;
    font-size: .875em;
    margin-top: .5em;
  }

.otd--app-Dashboard--card {
  box-sizing: border-box;
  background-color: var(--background-colour);
  box-shadow: 0 .0625em .25em 0 rgba(0, 0, 0, .05);
  border-radius: .25em;
  color: var(--foreground-colour);
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 1em 1.5em;
}
.otd--app-Dashboard--card.otd--app-Dashboard--number {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
.otd--app-Dashboard--value {
  display: block;
  font-size: 3em;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.5;
  text-align: center;
}
.otd--app-Dashboard--unit {
  display: block;
  font-size: 1.25em;
  line-height: 1.5;
  text-align: center;
}

.oui-ButtonRow--button-row {
  display: flex;
  flex-direction: column;
  margin: 2em 0 0 0;
  gap: .5em;
}

@media (576px <= width) {

.oui-ButtonRow--button-row {
    flex-direction: row-reverse;
}
  }

:root {
  --textinput-background: var(--background-colour);

  --textinput-border-colour: var(--foreground-colour);
  --textinput-border-width: .0625em;
  --textinput-border-width-hover: calc(var(--textinput-border-width) * 2);
  --textinput-border: var(--textinput-border-width) solid var(--textinput-border-colour);
  --textinput-border-hover: var(--textinput-border-width-hover) solid var(--textinput-border-colour);
  --textinput-border-radius: 0;

  --textinput-colour: var(--foreground-colour);
  --textinput-colour-hover: var(--textinput-colour);

  --textinput-error-border-colour: var(--error-foreground-colour);

  --textinput-font-size-small: .8em;
  --textinput-font-size-medium: 1em;
  --textinput-font-size-large: 1.25em;
  --textinput-font-weight: 400;

  --textinput-hint-line-height: 1.25;
  --textinput-hint-margin: .5em 0;
  --textinput-hint-font-size: .8em;
  --textinput-hint-colour: hsl(
    var(--foreground-hue)
    calc(var(--foreground-saturation) * .75)
    calc(var(--foreground-lightness) * 1.75)
  );

  --textinput-label-line-height: 1.25;
  --textinput-label-margin: .5em 0;
  --textinput-label-colour: var(--foreground-colour);

  --textinput-line-height: 1.5em;

  --textinput-margin: 1em 0;
  --textinput-padding: .5em;
  --textinput-underline-padding: .5em;

  --textinput-outline: none;
}
.oui-TextInput--textinput {
  box-sizing: border-box;
  margin: 1em 0;
  margin: var(--textinput-margin);
}
.oui-TextInput--textinput input {
  background: var(--textinput-background);
  box-sizing: border-box;
  border-radius: 0;
  border-radius: var(--textinput-border-radius);
  color: var(--textinput-colour);
  display: block;
  font-size: 1em;
  font-size: var(--textinput-font-size-medium);
  font-weight: 400;
  font-weight: var(--textinput-font-weight);
  line-height: 1.5em;
  line-height: var(--textinput-line-height);
  outline: none;
  outline: var(--textinput-outline);
  padding: .5em;
  padding: var(--textinput-padding);
  transition-duration: .5s;
  transition-property: background-color, border-color, color;
  transition-timing-function: ease-out;
}
.oui-TextInput--textinput input::-moz-placeholder {
  -moz-transition: opacity .25s ease-out;
  transition: opacity .25s ease-out;
}
.oui-TextInput--textinput input::placeholder {
  transition: opacity .25s ease-out;
}
.oui-TextInput--textinput input:focus::-moz-placeholder {
  opacity: 0;
}
.oui-TextInput--textinput input:focus::placeholder {
  opacity: 0;
}
.oui-TextInput--textinput.oui-TextInput--outline input {
  border: var(--textinput-border);
}
.oui-TextInput--textinput.oui-TextInput--outline:hover input,
.oui-TextInput--textinput.oui-TextInput--outline input:focus {
  --border-width-diff: calc(var(--textinput-border-width-hover) - var(--textinput-border-width));
  border: var(--textinput-border-hover);
  padding: calc(.5em - round(nearest, 0.0625em, 1px));
  padding: calc(var(--textinput-padding) - round(nearest, var(--border-width-diff), 1px));
}
.oui-TextInput--textinput input[aria-invalid=true] {
  border-color: var(--textinput-error-border-colour);
}
.oui-TextInput--textinput.oui-TextInput--underline input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: var(--textinput-border);
  padding: .5em;
  padding: var(--textinput-underline-padding);
}
.oui-TextInput--textinput.oui-TextInput--underline:hover input,
.oui-TextInput--textinput.oui-TextInput--underline input:focus {
  --border-width-diff: calc(var(--textinput-border-width-hover) - var(--textinput-border-width));
  border-bottom: var(--textinput-border-hover);
  padding-bottom: calc(.5em - round(nearest, 0.0625em, 1px));
  padding-bottom: calc(var(--textinput-underline-padding) - round(nearest, var(--border-width-diff), 1px));
}

.oui-TextInput--label-container {
  margin: .5em 0;
  margin: var(--textinput-label-margin);
}
.oui-TextInput--label {
  color: var(--textinput-label-colour);
  display: block;
  line-height: 1.25;
  line-height: var(--textinput-label-line-height);
}
.oui-TextInput--hint {
  display: block;
  color: var(--textinput-hint-colour);
  font-size: .8em;
  font-size: var(--textinput-hint-font-size);
  line-height: 1.25;
  line-height: var(--textinput-hint-line-height);
  margin: .5em 0;
  margin: var(--textinput-hint-margin);
}

.oui-TextInput--small {
  font-size: .8em;
  font-size: var(--textinput-font-size-small);
}
.oui-TextInput--medium {
  font-size: 1em;
  font-size: var(--textinput-font-size-medium);
}
.oui-TextInput--large {
  font-size: 1.25em;
  font-size: var(--textinput-font-size-large);
}
.oui-TextInput--full-width {
  width: 100%;
}
.oui-TextInput--full-width input {
  width: 100%;
}

.oui-Form--error {
  color: var(--error-foreground-colour);
}

.otd--app-Orgs--drop-area {
  align-items: center;
  border: .125em dashed var(--colour-accent);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 2em;
  margin-top: .5em;
  width: 100%;
}

.otd--app-Orgs--drop-area input[type="file"] {
    display: none;
  }

.otd--app-Orgs--drop-area.otd--app-Orgs--dragging {
    background: var(--colour-background-highlight);
  }
.otd--app-Orgs--file-review {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-top: .5em;
}
.otd--app-Orgs--file-review .otd--app-Orgs--file-preview {
    max-width: 10em;
    max-height: 4em;
    padding: 1em;
  }
.otd--app-Orgs--file-review .otd--app-Orgs--file-details {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
.otd--app-Orgs--file-review .otd--app-Orgs--file-name {
    box-sizing: border-box;
    color: var(--colour-foreground-secondary);
    padding: 0 1.5em;
  }
.otd--app-Orgs--file-review .otd--app-Orgs--file-name > span {
      font-size: .875em;
    }
.otd--app-Orgs--file-review .otd--app-Orgs--file-size {
    box-sizing: border-box;
    color: var(--colour-foreground-secondary);
    padding: 0 1.5em;
  }
.otd--app-Orgs--file-review .otd--app-Orgs--file-size > span {
      font-size: .875em;
    }
.otd--app-Orgs--font-subheading {
  font-size: 1.25em;
}
.otd--app-Orgs--font-small {
  font-size: .875em;
}
.otd--app-Orgs--align-center {
  text-align: center;
}

.otd--app-PasswordRecovery--root {
  background: var(--colour-background);
  box-sizing: border-box;
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 100vw;
  height: calc(100 * var(--vh));
  min-height: calc(100 * var(--vh));
  max-width: calc(21/9 * 100 * var(--vh));
}

@media (max-aspect-ratio: 21/9) {

.otd--app-PasswordRecovery--root {
    max-width: 100%;
}
  }

.otd--app-PasswordRecovery--root .oui-TextInput--textinput {
    margin: 1.5em 0;
  }

.otd--app-PasswordRecovery--root .oui-Button--button {
    margin: 2em 0;
  }

.otd--app-PasswordRecovery--root h1 {
    font-family: var(--font-base-name);
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.8;
    margin-top: 0;
  }

.otd--app-PasswordRecovery--root > aside {
    align-items: center;
    background: url(/asset/signin-bg-b2c7f2dabc.png) no-repeat center center;
    background-size: cover;
    display: flex;
    flex: 1 1 34%;
    width: 100%;
    justify-content: center;
  }

.otd--app-PasswordRecovery--root > .otd--app-PasswordRecovery--content {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 66%;
    flex-direction: column;
    padding: 2em;
    width: 100%;
  }

.otd--app-PasswordRecovery--root > .otd--app-PasswordRecovery--content .otd--app-PasswordRecovery--form {
      display: block;
      width: 100%;
      max-width: 20em;
    }

.otd--app-PasswordRecovery--root > .otd--app-PasswordRecovery--content .otd--app-PasswordRecovery--link-block {
      display: block;
      text-align: center;
    }

.otd--app-PasswordRecovery--root > .otd--app-PasswordRecovery--content > footer {
      padding: 1em 1em 0 1em;
    }

.otd--app-PasswordRecovery--root > .otd--app-PasswordRecovery--content > footer path {
        fill: var(--colour-accent);
      }

@media (992px <= width) {

.otd--app-PasswordRecovery--root {
    flex-direction: row;
}
    .otd--app-PasswordRecovery--root > aside {
      height: calc(100 * var(--vh));
      flex: 1 1 60%;
      width: 60%;
    }
    .otd--app-PasswordRecovery--root > .otd--app-PasswordRecovery--content {
      flex: 1 1 40%;
      justify-content: center;
      height: 100%;
      width: 40%;
    }
  }
.otd--app-PasswordRecovery--logo {
  display: block;
  max-width: 75%;
  width: calc(1490px / 4.75);
}
:has(.otd--app-PasswordRecovery--root) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.otd--app-PasswordRecovery--error {
  margin: 1em 0;
}

.otd--app-ResetPassword--root {
  background: var(--colour-background);
  box-sizing: border-box;
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 100vw;
  height: calc(100 * var(--vh));
  min-height: calc(100 * var(--vh));
  max-width: calc(21/9 * 100 * var(--vh));
}

@media (max-aspect-ratio: 21/9) {

.otd--app-ResetPassword--root {
    max-width: 100%;
}
  }

.otd--app-ResetPassword--root .oui-TextInput--textinput {
    margin: 1.5em 0;
  }

.otd--app-ResetPassword--root .oui-Button--button {
    margin: 2em 0;
  }

.otd--app-ResetPassword--root h1 {
    font-family: var(--font-base-name);
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.8;
    margin-top: 0;
  }

.otd--app-ResetPassword--root > aside {
    align-items: center;
    background: url(/asset/signin-bg-b2c7f2dabc.png) no-repeat center center;
    background-size: cover;
    display: flex;
    flex: 1 1 34%;
    width: 100%;
    justify-content: center;
  }

.otd--app-ResetPassword--root > .otd--app-ResetPassword--content {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 66%;
    flex-direction: column;
    padding: 2em;
    width: 100%;
  }

.otd--app-ResetPassword--root > .otd--app-ResetPassword--content .otd--app-ResetPassword--form {
      display: block;
      width: 100%;
      max-width: 20em;
    }

.otd--app-ResetPassword--root > .otd--app-ResetPassword--content .otd--app-ResetPassword--link-block {
      display: block;
      text-align: center;
    }

.otd--app-ResetPassword--root > .otd--app-ResetPassword--content > footer {
      padding: 1em 1em 0 1em;
    }

.otd--app-ResetPassword--root > .otd--app-ResetPassword--content > footer path {
        fill: var(--colour-accent);
      }

@media (992px <= width) {

.otd--app-ResetPassword--root {
    flex-direction: row;
}
    .otd--app-ResetPassword--root > aside {
      height: calc(100 * var(--vh));
      flex: 1 1 60%;
      width: 60%;
    }
    .otd--app-ResetPassword--root > .otd--app-ResetPassword--content {
      flex: 1 1 40%;
      justify-content: center;
      height: 100%;
      width: 40%;
    }
  }
.otd--app-ResetPassword--logo {
  display: block;
  max-width: 75%;
  width: calc(1490px / 4.75);
}
:has(.otd--app-ResetPassword--root) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.otd--app-ResetPassword--error {
  margin: 1em 0;
}

.otd--app-SetPassword--root {
  background: var(--colour-background);
  box-sizing: border-box;
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 100vw;
  height: calc(100 * var(--vh));
  min-height: calc(100 * var(--vh));
  max-width: calc(21/9 * 100 * var(--vh));
}

@media (max-aspect-ratio: 21/9) {

.otd--app-SetPassword--root {
    max-width: 100%;
}
  }

.otd--app-SetPassword--root .oui-TextInput--textinput {
    margin: 1.5em 0;
  }

.otd--app-SetPassword--root .oui-Button--button {
    margin: 2em 0;
  }

.otd--app-SetPassword--root h1 {
    font-family: var(--font-base-name);
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.8;
    margin-top: 0;
  }

.otd--app-SetPassword--root > aside {
    align-items: center;
    background: url(/asset/signin-bg-b2c7f2dabc.png) no-repeat center center;
    background-size: cover;
    display: flex;
    flex: 1 1 34%;
    width: 100%;
    justify-content: center;
  }

.otd--app-SetPassword--root > .otd--app-SetPassword--content {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 66%;
    flex-direction: column;
    padding: 2em;
    width: 100%;
  }

.otd--app-SetPassword--root > .otd--app-SetPassword--content .otd--app-SetPassword--form {
      display: block;
      width: 100%;
      max-width: 20em;
    }

.otd--app-SetPassword--root > .otd--app-SetPassword--content .otd--app-SetPassword--link-block {
      display: block;
      text-align: center;
    }

.otd--app-SetPassword--root > .otd--app-SetPassword--content > footer {
      padding: 1em 1em 0 1em;
    }

.otd--app-SetPassword--root > .otd--app-SetPassword--content > footer path {
        fill: var(--colour-accent);
      }

@media (992px <= width) {

.otd--app-SetPassword--root {
    flex-direction: row;
}
    .otd--app-SetPassword--root > aside {
      height: calc(100 * var(--vh));
      flex: 1 1 60%;
      width: 60%;
    }
    .otd--app-SetPassword--root > .otd--app-SetPassword--content {
      flex: 1 1 40%;
      justify-content: center;
      height: 100%;
      width: 40%;
    }
  }
.otd--app-SetPassword--logo {
  display: block;
  max-width: 75%;
  width: calc(1490px / 4.75);
}
:has(.otd--app-SetPassword--root) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.otd--app-SetPassword--error {
  margin: 1em 0;
}

.otd--app-SignIn--root {
  background: var(--colour-background);
  box-sizing: border-box;
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 100vw;
  height: calc(100 * var(--vh));
  min-height: calc(100 * var(--vh));
  max-width: calc(21/9 * 100 * var(--vh));
}

@media (max-aspect-ratio: 21/9) {

.otd--app-SignIn--root {
    max-width: 100%;
}
  }

.otd--app-SignIn--root .oui-TextInput--textinput {
    margin: 1.5em 0;
  }

.otd--app-SignIn--root .oui-Button--button {
    margin: 2em 0;
  }

.otd--app-SignIn--root h1 {
    font-family: var(--font-base-name);
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.8;
    margin-top: 0;
  }

.otd--app-SignIn--root > aside {
    align-items: center;
    background: url(/asset/signin-bg-b2c7f2dabc.png) no-repeat center center;
    background-size: cover;
    display: flex;
    flex: 1 1 34%;
    width: 100%;
    justify-content: center;
  }

.otd--app-SignIn--root > .otd--app-SignIn--content {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 66%;
    flex-direction: column;
    padding: 2em;
    width: 100%;
  }

.otd--app-SignIn--root > .otd--app-SignIn--content .otd--app-SignIn--form {
      display: block;
      width: 100%;
      max-width: 20em;
    }

.otd--app-SignIn--root > .otd--app-SignIn--content .otd--app-SignIn--link-block {
      display: block;
      text-align: center;
    }

.otd--app-SignIn--root > .otd--app-SignIn--content > footer {
      padding: 1em 1em 0 1em;
    }

.otd--app-SignIn--root > .otd--app-SignIn--content > footer path {
        fill: var(--colour-accent);
      }

@media (992px <= width) {

.otd--app-SignIn--root {
    flex-direction: row;
}
    .otd--app-SignIn--root > aside {
      height: calc(100 * var(--vh));
      flex: 1 1 60%;
      width: 60%;
    }
    .otd--app-SignIn--root > .otd--app-SignIn--content {
      flex: 1 1 40%;
      justify-content: center;
      height: 100%;
      width: 40%;
    }
  }
.otd--app-SignIn--logo {
  display: block;
  max-width: 75%;
  width: calc(1490px / 4.75);
}
:has(.otd--app-SignIn--root) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.otd--app-SignIn--error {
  margin: 1em 0;
}

.otd--app-Uploader--card {
  align-items: center;
  box-sizing: border-box;
  background-color: var(--background-colour);
  box-shadow: 0 .0625em .25em 0 rgba(0, 0, 0, .05);
  border-radius: .25em;
  color: var(--foreground-colour);
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 1.5em;
}

.otd--app-Uploader--card h2 {
    font-size: 2em;
    font-weight: 600;
    margin: 0;
    text-align: center;
  }

.otd--app-Uploader--card .oui-Button--button {
    width: 12em;
    text-align: center;
  }
.otd--app-Uploader--drop-area {
  align-items: center;
  border: .125em dashed var(--colour-accent);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 2em;
  margin-top: .5em;
  width: 100%;
}
.otd--app-Uploader--drop-area input[type="file"] {
    display: none;
  }
.otd--app-Uploader--drop-area.otd--app-Uploader--dragging {
    background: var(--colour-background-highlight);
  }
.otd--app-Uploader--file-review {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: .5em;
}
.otd--app-Uploader--file-review .otd--app-Uploader--file-details {
    width: 100%;
  }
.otd--app-Uploader--file-review .otd--app-Uploader--file-name {
    box-sizing: border-box;
    background: var(--colour-background-highlight);
    border-radius: .5em;
    padding: 1em 1.5em;
    width: 100%;
  }
.otd--app-Uploader--file-review .otd--app-Uploader--file-size {
    box-sizing: border-box;
    color: var(--colour-foreground-secondary);
    padding: 0 1.5em;
    width: 100%;
  }
.otd--app-Uploader--file-review .otd--app-Uploader--file-size > span {
      font-size: .875em;
    }
.otd--app-Uploader--progress {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin: 2em 0;
}
.otd--app-Uploader--progress .otd--app-Uploader--icon {
    height: 5em;
    width: 5em;
    animation: otd--app-Uploader--spin 1.5s linear infinite;
  }
.otd--app-Uploader--progress .otd--app-Uploader--value {
    font-size: 3em;
    font-weight: 700;
  }
.otd--app-Uploader--result {
  align-items: center;
  display: flex;
  gap: 1em;
  flex-direction: column;
}
.otd--app-Uploader--result dl {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    text-align: center;
  }
.otd--app-Uploader--result dl dt {
      margin-top: 1em;
      font-size: 1.25em;
    }
.otd--app-Uploader--result dl dt:first-child {
        margin-top: 0;
      }
.otd--app-Uploader--result dl dd {
      font-size: 2em;
      font-weight: 700;
      margin: 0;
    }
.otd--app-Uploader--font-subheading {
  font-size: 1.25em;
}
.otd--app-Uploader--font-small {
  font-size: .875em;
}
.otd--app-Uploader--align-center {
  text-align: center;
}

@keyframes otd--app-Uploader--spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:root {
  --checkbox-border-colour: var(--accent-background-colour);

  --checkbox-border-width: .0625em;
  --checkbox-border-width-hover: calc(var(--checkbox-border-width) * 2);
  --checkbox-border: var(--checkbox-border-width) solid var(--checkbox-border-colour);
  --checkbox-border-hover: var(--checkbox-border-width-hover) solid var(--checkbox-border-colour);

  --checkbox-error-border-colour: var(--error-foreground-colour);

  --checkbox-label-line-height: 1.25;
  --checkbox-label-margin: .35em 0 0 0;
  --checkbox-label-colour: var(--foreground-colour);

  --checkbox-margin: 1em 0;
}
.oui-Checkbox--checkbox {
  display: block;
  color: var(--checkbox-label-colour);
  border: none;
  margin: 0;
  padding: 0;
}
.oui-Checkbox--checkbox label {
  box-sizing: border-box;
  cursor: default;
  display: block;
  line-height: 1.25;
  line-height: var(--checkbox-label-line-height);
  min-height: 1.875em;
  padding: 0 0 0 2.25em;
  position: relative;
}
.oui-Checkbox--checkbox .oui-Checkbox--label {
  display: inline-block;
  margin: .35em 0 0 0;
  margin: var(--checkbox-label-margin);
}
.oui-Checkbox--checkbox input {
  height: 1.625em;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: .125em;
  visibility: hidden;
  width: 1.625em;
}
.oui-Checkbox--checkbox input:hover ~ .oui-Checkbox--check {
  border: var(--checkbox-border-hover);
}
.oui-Checkbox--checkbox input:checked ~ .oui-Checkbox--check {
  border: var(--checkbox-border-hover);
}
.oui-Checkbox--checkbox input:checked ~ .oui-Checkbox--check::before {
  background-color: var(--checkbox-border-colour);
}
.oui-Checkbox--checkbox input[aria-invalid=true] ~ .oui-Checkbox--check {
  border-color: var(--checkbox-error-border-colour);
}
.oui-Checkbox--check {
  border: var(--checkbox-border);
  box-sizing: border-box;
  content: '';
  display: block;
  height: 1.625em;
  left: 0;
  padding: .25em;
  position: absolute;
  top: .125em;
  transition: border-color .25s ease .1s;
  width: 1.625em;
}
.oui-Checkbox--check::before {
  content: '';
  display: block;
  height: 100%;
  transition: background-color .25s ease;
  width: 100%;
}

:root {
  --checkbox-border-colour: var(--accent-background-colour);

  --checkbox-border-width: .0625em;
  --checkbox-border-width-hover: calc(var(--checkbox-border-width) * 2);
  --checkbox-border: var(--checkbox-border-width) solid var(--checkbox-border-colour);
  --checkbox-border-hover: var(--checkbox-border-width-hover) solid var(--checkbox-border-colour);

  --checkboxes-error-border-colour: var(--error-foreground-colour);

  --checkboxes-hint-line-height: 1.25;
  --checkboxes-hint-margin: .5em 0;
  --checkboxes-hint-font-size: .8em;
  --checkboxes-hint-colour: hsl(
    var(--foreground-hue)
    calc(var(--foreground-saturation) * .75)
    calc(var(--foreground-lightness) * 1.75)
  );

  --checkboxes-label-line-height: 1.25;
  --checkboxes-label-margin: .5em 0;
  --checkboxes-label-colour: var(--foreground-colour);

  --checkboxes-margin: 1em 0;
}
.oui-Checkboxes--checkboxes {
  display: block;
  border: none;
  margin: 0;
  padding: 0;
}
.oui-Checkboxes--label-container {
  margin: .5em 0;
  margin: var(--checkboxes-label-margin);
}
.oui-Checkboxes--legend {
  color: var(--checkboxes-label-colour);
  display: block;
  line-height: 1.25;
  line-height: var(--checkboxes-label-line-height);
  padding: 0;
}
.oui-Checkboxes--hint {
  display: block;
  color: var(--checkboxes-hint-colour);
  font-size: .8em;
  font-size: var(--checkboxes-hint-font-size);
  line-height: 1.25;
  line-height: var(--checkboxes-hint-line-height);
  margin: .5em 0;
  margin: var(--checkboxes-hint-margin);
}
.oui-Checkboxes--options {
  display: flex;
  flex-direction: column;
  gap: .5em;
  padding: .25em 0;
}
.oui-Checkboxes--options.oui-Checkboxes--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25em;
}
.oui-Checkboxes--option {
  box-sizing: border-box;
  cursor: default;
  display: block;
  line-height: 1.25;
  min-height: 1.875em;
  padding: 0 0 0 2.25em;
  position: relative;
}
.oui-Checkboxes--option .oui-Checkboxes--label {
  display: inline-block;
  padding-top: .3125em;
}
.oui-Checkboxes--check {
  border: var(--checkbox-border);
  box-sizing: border-box;
  content: '';
  display: block;
  height: 1.625em;
  left: 0;
  padding: .25em;
  position: absolute;
  top: .125em;
  transition: border-color .25s ease .1s;
  width: 1.625em;
}
.oui-Checkboxes--check::before {
  content: '';
  display: block;
  height: 100%;
  transition: background-color .25s ease;
  width: 100%;
}
.oui-Checkboxes--option input {
  height: 1.625em;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: .125em;
  visibility: hidden;
  width: 1.625em;
}
.oui-Checkboxes--option input:hover ~ .oui-Checkboxes--check {
  border: var(--checkbox-border-hover);
}
.oui-Checkboxes--option input:checked ~ .oui-Checkboxes--check {
  border: var(--checkbox-border-hover);
}
.oui-Checkboxes--option input:checked ~ .oui-Checkboxes--check::before {
  background-color: var(--checkbox-border-colour);
}
.oui-Checkboxes--option input[aria-invalid=true] ~ .oui-Checkboxes--check {
  border-color: var(--checkboxes-error-border-colour);
}

.otd--app-Users--avatar-selector {
  border: none;
  padding: 0;
  margin: 1.5em 0 1em 0;
}

.otd--app-Users--avatar-selector > legend {
    display: block;
    padding: 0;
    margin: 0;
    font-weight: 600;
  }
.otd--app-Users--avatars {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1em 0;
}
.otd--app-Users--avatars > label {
    flex: 0 0 auto;
    position: relative;
  }
.otd--app-Users--avatars > label input {
      left: 0;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      visibility: hidden;
    }
.otd--app-Users--avatar {
  box-sizing: border-box;
  background-color: hsla(218, 100%, 90%, 1);
  background-size: 5.2em;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  display: block;
  height: 4.5em;
  width: 4.5em;
}
.otd--app-Users--avatar:hover {
    border: .125em solid var(--colour-accent);
  }
input:checked ~ .otd--app-Users--avatar {
  border: .125em solid var(--colour-accent);
}



:root {
  --accent-background-hue: 210;
  --accent-background-saturation: 90%;
  --accent-background-lightness: 40%;
  --accent-background-colour: hsl(
    var(--accent-background-hue)
    var(--accent-background-saturation)
    var(--accent-background-lightness)
  );
  --accent-foreground-hue: 0;
  --accent-foreground-saturation: 0%;
  --accent-foreground-lightness: 100%;
  --accent-foreground-colour: hsl(
    var(--accent-foreground-hue)
    var(--accent-foreground-saturation)
    var(--accent-foreground-lightness)
  );
  --accent-alt-background-hue: 0;
  --accent-alt-background-saturation: 0%;
  --accent-alt-background-lightness: 33%;
  --accent-alt-background-colour: hsl(
    var(--accent-alt-background-hue)
    var(--accent-alt-background-saturation)
    var(--accent-alt-background-lightness)
  );
  --accent-alt-foreground-hue: 0;
  --accent-alt-foreground-saturation: 0%;
  --accent-alt-foreground-lightness: 100%;
  --accent-alt-foreground-colour: hsl(
    var(--accent-alt-foreground-hue)
    var(--accent-alt-foreground-saturation)
    var(--accent-alt-foreground-lightness)
  );
  --background-hue: 0;
  --background-saturation: 0%;
  --background-lightness: 100%;
  --background-colour: hsl(
    var(--background-hue)
    var(--background-saturation)
    var(--background-lightness)
  );
  --caution-background-hue: 45;
  --caution-background-saturation: 80%;
  --caution-background-lightness: 50%;
  --caution-background-colour: hsl(
    var(--caution-background-hue)
    var(--caution-background-saturation)
    var(--caution-background-lightness)
  );
  --caution-foreground-hue: 0;
  --caution-foreground-saturation: 0%;
  --caution-foreground-lightness: 0%;
  --caution-foreground-colour: hsl(
    var(--caution-foreground-hue)
    var(--caution-foreground-saturation)
    var(--caution-foreground-lightness)
  );
  --danger-background-hue: 5;
  --danger-background-saturation: 70%;
  --danger-background-lightness: 45%;
  --danger-background-colour: hsl(
    var(--danger-background-hue)
    var(--danger-background-saturation)
    var(--danger-background-lightness)
  );
  --danger-foreground-hue: 0;
  --danger-foreground-saturation: 0%;
  --danger-foreground-lightness: 100%;
  --danger-foreground-colour: hsl(
    var(--danger-foreground-hue)
    var(--danger-foreground-saturation)
    var(--danger-foreground-lightness)
  );
  --error-foreground-colour: hsl(5, 70%, 45%);
  --foreground-hue: 0;
  --foreground-saturation: 0%;
  --foreground-lightness: 20%;
  --foreground-colour: hsl(
    var(--foreground-hue)
    var(--foreground-saturation)
    var(--foreground-lightness)
  );
  --success-background-hue: 150;
  --success-background-saturation: 100%;
  --success-background-lightness: 30%;
  --success-background-colour: hsl(
    var(--success-background-hue)
    var(--success-background-saturation)
    var(--success-background-lightness)
  );
  --success-foreground-hue: 0;
  --success-foreground-saturation: 0%;
  --success-foreground-lightness: 100%;
  --success-foreground-colour: hsl(
    var(--success-foreground-hue)
    var(--success-foreground-saturation)
    var(--success-foreground-lightness)
  );

  --box-shadow-hue: 220;
  --box-shadow-saturation: 30%;
  --box-shadow-lightness: 5%;
  --box-shadow-alpha: 10%;
  --box-shadow-colour: hsl(
    var(--box-shadow-hue)
    var(--box-shadow-saturation)
    var(--box-shadow-lightness)
    / var(--box-shadow-alpha)
  )
}

:root {
  --spacing-unit: 4px;
  --spacing-2: calc(var(--spacing-unit) * 2);
  --spacing-3: calc(var(--spacing-unit) * 3);
  --spacing-4: calc(var(--spacing-unit) * 4);
}

:root {
  --colour-accent-hue: 222;
  --colour-accent-saturation: 100%;
  --colour-accent-lightness: 59%;
  --colour-accent: hsl(
    var(--colour-accent-hue)
    var(--colour-accent-saturation)
    var(--colour-accent-lightness)
  );
  --colour-background: #ffffff;
  --colour-background-alt: #f5f5f5;
  --colour-background-dark: hsl(222, 100%, 59%);
  --colour-background-dark-alt: #0b0b0b;
  --colour-border: hsl(0, 0%, 46%);
  --colour-border-table: hsl(0, 0%, 70%);
  --colour-foreground: #0b0b0b;
  --colour-foreground-secondary: hsl(0, 0%, 46%);
  --colour-foreground-alt: hsl(222, 100%, 59%);
  --colour-foreground-dark: #ffffff;
  --colour-foreground-error: hsl(5, 70%, 45%);
  --colour-background-highlight: hsl(0, 0%, 96%);
  --colour-background-header:hsl(0, 0%, 96%);
  --colour-box-shadow: hsl(
    var(--box-shadow-hue)
    var(--box-shadow-saturation)
    var(--box-shadow-lightness)
    / var(--box-shadow-alpha)
  )
}

@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('SourceSans3 ExtraLight'), local('SourceSans3-ExtraLight'), url(/asset/SourceSans3-ExtraLight.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local('SourceSans3 ExtraLight'), local('SourceSans3-ExtraLight'), url(/asset/SourceSans3-ExtraLight.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('SourceSans3 Light'), local('SourceSans3-Light'), url(/asset/SourceSans3-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('SourceSans3 Regular'), local('SourceSans3-Regular'), url(/asset/SourceSans3-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('SourceSans3 Medium'), local('SourceSans3-Medium'), url(/asset/SourceSans3-Medium.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('SourceSans3 SemiBold'), local('SourceSans3-SemiBold'), url(/asset/SourceSans3-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('SourceSans3 Bold'), local('SourceSans3-Bold'), url(/asset/SourceSans3-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('SourceSans3 ExtraBold'), local('SourceSans3-ExtraBold'), url(/asset/SourceSans3-ExtraBold.ttf) format('truetype');
}
@font-face {
  font-family: 'SourceSans3';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('SourceSans3 Black'), local('SourceSans3-Black'), url(/asset/SourceSans3-Black.ttf) format('truetype');
}


:root {
  --font-accent-name: SourceSans3;
  --font-base-name: SourceSans3;
  --font-button-name: SourceSans3;
}

html,body {
    background: #e4e4e4;
    box-sizing: border-box;
    font-family: var(--font-base-name);
    font-size: 1rem;
    margin: 0;
    padding: 0;
  }

select,input,textarea {
    font-family: var(--font-base-name);
    font-size: 1rem;
  }

main {
    display: block;
  }

a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--colour-foreground);
  }

a:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

/* Overrides Start */
:root {
  --accent-background-hue: var(--colour-accent-hue);
  --accent-background-saturation: var(--colour-accent-saturation);
  --accent-background-lightness: var(--colour-accent-lightness);

  --button-secondary-solid-background: hsl(0, 0%, 96%);
  --button-secondary-solid-background-hover: hsl(0, 0%, 90%);
  --button-secondary-solid-colour: hsl(0, 0%, 12%);
  --button-secondary-solid-colour-hover: hsl(0, 0%, 12%);

  --select-border-colour: #d9d9d9;

  --textinput-border-colour: #d9d9d9;
  --textinput-background: #ffffff;
}
.oui-Button--button {
  border-radius: .5em;
  font-family: var(--font-button-name);
  font-weight: 400;
}
/* Overrides End */