: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 {
  --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.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%;
}

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

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

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

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

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

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

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

  --textarea-line-height: 1.5em;

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

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

.oui-TextArea--textarea.oui-TextArea--underline textarea {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: var(--textarea-border);
  padding: calc(.5em / 2) 0;
  padding: var(--textarea-underline-padding);
}
.oui-TextArea--textarea.oui-TextArea--underline:hover textarea,
.oui-TextArea--textarea.oui-TextArea--underline textarea:focus {
  --border-width-diff: calc(var(--textarea-border-width-hover) - var(--textarea-border-width));
  border-bottom: var(--textarea-border-hover);
  padding-bottom: calc(0.25em 0 - round(nearest, 0.0625em, 1px));
  padding-bottom: calc(var(--textarea-underline-padding) - round(nearest, var(--border-width-diff), 1px));
}

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

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

: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(--accent-background-hue)
    calc(var(--accent-background-saturation) * 1.1)
    calc(var(--accent-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 {
  -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%;
}

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

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

: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;
}

.pws--app-Page--page {
  background: var(--colour-background);
  color: var(--colour-foreground);
  box-shadow: 0 0 .5em .125em #aaaaaa;
  margin: auto;
  max-width: 100%;
  width: 1200px;
}

.pws--app-Page--page h1 {
    font-size: 2em;
  }

.pws--app-Page--page main {
    background: #ffffff;
    color: #333333;
  }

.pws--app-Page--panel {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 25px;
  line-height: 1.6;
}

@media (576px <= width) {

.pws--app-Page--panel {
    font-size: 1.2em;
    margin: 50px;
}
  }

@media (768px <= width) {

.pws--app-Page--panel {
    flex-direction: row;
    font-size: 1.25em;
    gap: 1em;
}

    .pws--app-Page--panel > header,.pws--app-Page--panel > section {
      flex: 0 0 auto;
      width: calc(50% - 1em);
    }
      .pws--app-Page--panel > header:nth-child(2) {
        margin-top: 2em;
      }
      .pws--app-Page--panel > section:nth-child(2) {
        margin-top: 2em;
      }
    .pws--app-Page--panel > footer {
      width: 100%;
    }
  }

.pws--app-Page--panel h1 {
    display: block;
    font-family: var(--font-accent-name);
    font-weight: 700;
    font-size: 2em;
    text-transform: uppercase;
    position: relative;
    padding-top: .5em;
  }

.pws--app-Page--panel h1::before {
      background: var(--colour-accent);
      content: '';
      display: block;
      height: .1em;
      left: 0;
      position: absolute;
      top: 0;
      width: 2em;
    }

.pws--app-Page--catchphrase {
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.2;
}
.pws--app-Page--buzzword {
  color: var(--colour-accent);
  font-family: var(--font-accent-name);
  font-weight: 700;
  letter-spacing: -1px;
}

.pws--app-ContactForm--contact-info {
  align-items: center;
  display: grid;
  grid-column-gap: 8px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  grid-template-columns: 54px 1fr;
  margin: 20px 0;
  grid-row-gap: 20px;
  row-gap: 20px;
}

.pws--app-ContactForm--contact-info .pws--app-ContactForm--icon {
    box-sizing: border-box;
    background: var(--colour-background-dark);
    border-radius: 50%;
    height: 54px;
    grid-column-start: 1;
    padding: 12px;
    width: 54px;
  }

.pws--app-ContactForm--contact-info .pws--app-ContactForm--icon > svg {
      fill: var(--colour-foreground-dark);
    }

.pws--app-ContactForm--contact-info a {
    display: block;
    height: 24px;
  }

.pws--app-ContactForm--contact-info a:hover svg g {
      fill: var(--colour-accent);
    }
.pws--app-ContactForm--error {
  color: var(--colour-foreground-error);
}

@keyframes pws--app-animation--fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pws--app-animation--fade-in-1s {
    opacity: 0;
    animation: pws--app-animation--fadeIn 1s ease-in-out forwards;
  }

.pws--app-animation--fade-in-2s {
    opacity: 0;
    animation: pws--app-animation--fadeIn 2s ease-in-out forwards;
  }

.pws--app-animation--fade-in-3s {
    opacity: 0;
    animation: pws--app-animation--fadeIn 3s ease-in-out forwards;
  }

.pws--app-animation--fade-in-4s {
    opacity: 0;
    animation: pws--app-animation--fadeIn 4s ease-in-out forwards;
  }

.pws--app-animation--fade-in-5s {
    opacity: 0;
    animation: pws--app-animation--fadeIn 5s ease-in-out forwards;
  }
.pws--app-animation--anim-delay-1s {
    animation-delay: 1s;
  }
.pws--app-animation--anim-delay-2s {
    animation-delay: 2s;
  }
.pws--app-animation--anim-delay-3s {
    animation-delay: 3s;
  }
.pws--app-animation--anim-delay-4s {
    animation-delay: 4s;
  }
.pws--app-animation--anim-delay-5s {
    animation-delay: 5s;
  }
.pws--app-animation--anim-delay-6s {
    animation-delay: 6s;
  }
.pws--app-animation--anim-delay-7s {
    animation-delay: 7s;
  }
.pws--app-animation--anim-delay-8s {
    animation-delay: 8s;
  }
.pws--app-animation--anim-delay-9s {
    animation-delay: 9s;
  }
.pws--app-animation--anim-delay-10s {
    animation-delay: 10s;
  }

.pws--app-Hero--hero {
  align-items: center;
  background: var(--colour-background-dark);
  color: var(--colour-foreground-dark);
  display: flex;
  flex-direction: column;
  gap: 37.5px;
  padding: 25px;
}

@media (576px <= width) {

.pws--app-Hero--hero {
    gap: 75px;
    padding: 50px;
}
  }

.pws--app-Hero--hero .pws--app-Hero--catchphrase {
    font-weight: 100;
    font-size: 1.4em;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    text-align: center;
  }

@media (576px <= width) {

.pws--app-Hero--hero .pws--app-Hero--catchphrase {
      font-size: 2em;
  }
    }

@media (768px <= width) {

.pws--app-Hero--hero .pws--app-Hero--catchphrase {
      font-size: 2.5em;
  }
    }

.pws--app-Hero--hero .pws--app-Hero--catchphrase > span {
      display: block;
      padding: .25em 0;
    }

.pws--app-Hero--hero .pws--app-Hero--catchphrase > span.pws--app-Hero--highlight {
        font-size: 2em;
      }

.pws--app-Hero--hero .pws--app-Hero--catchphrase > span.pws--app-Hero--semi-highlight {
        font-size: 1.4em;
      }

.pws--app-Hero--hero .oui-Button--primary.oui-Button--solid {
    background: var(--colour-background-dark-alt);
    border-color: var(--colour-background-dark-alt);
  }

.pws--app-Hero--hero .oui-Button--primary.oui-Button--solid:hover {
      color: var(--colour-foreground);
      background: var(--colour-background);
      border-color: var(--colour-background);
      font-weight: 700;
    }

.pws--app-Header--header {
  align-items: center;
  color: var(--colour-foreground-dark);
  display: flex;
  background: var(--colour-background-dark);
  box-sizing: border-box;
  justify-content: center;
}

@media (576px <= width) {

.pws--app-Header--header {
    justify-content: space-between;
}
  }

.pws--app-Header--header {
  width: 100%;
}

.pws--app-Header--header svg {
    display: block;
    width: 240px;
    height: 100%;
  }

@media (576px <= width) {

.pws--app-Header--header svg {
      width: 300px;
  }
    }

.pws--app-Header--header svg.pws--app-Header--white > g {
      fill: var(--colour-foreground-dark);
    }

.pws--app-Footer--footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colour-background-dark-alt);
  color: var(--colour-foreground-dim-dark);
  height: 100px;
}

.pws--app-Home--logos {
  align-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: space-around;
  margin-top: 1em;
}

.pws--app-Home--logos:hover {
    filter: grayscale(0%);
  }

.pws--app-Home--logos > div {
    align-items: center;
    display: flex;
    filter: grayscale(100%);
    justify-content: center;
    height: 2.5em;
    width: 6.25em;
    transition: filter 250ms;
  }

.pws--app-Home--logos > div:hover {
      filter: grayscale(0%);
    }

.pws--app-Home--logos > div > svg,.pws--app-Home--logos > div > img {
      flex: 0 0 auto;
      max-height: 100%;
      max-width: 100%;
    }

: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: 8px;
}

:root {
  --colour-accent: #2353e6;
  --colour-background: #ffffff;
  --colour-background-alt: #e8e5e2;
  --colour-background-dark: #2353e6;
  --colour-background-dark-alt: #0b0b0b;
  --colour-foreground: #0b0b0b;
  --colour-foreground-alt: #2353e6;
  --colour-foreground-dark: #ffffff;
  --colour-foreground-dim-dark: #808080;
  --colour-foreground-error: hsl(5, 70%, 45%);
}

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

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

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Lato Light'), local('Lato-Light'), url(/asset/Lato-Light.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lato Regular'), local('Lato-Regular'), url(/asset/Lato-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Lato Bold'), local('Lato-Bold'), url(/asset/Lato-Bold.ttf) format('truetype');
}

:root {
  --font-accent-name: Comfortaa;
  --font-base-name: Archivo;
  --font-button-name: Lato;
}

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

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

/* Overrides Start */
:root {
  --accent-background-hue: 225;
  --accent-background-saturation: 90%;
  --accent-background-lightness: 55%;
  --button-padding: 1em 2.5em;
}
.oui-Button--button {
  border-radius: 2em;
  font-family: var(--font-button-name);
  font-weight: 400;
  letter-spacing: .125em;
  text-transform: uppercase;
}
.oui-Button--label {
  margin: -1px 0 0 0;
}
/* Overrides End */