:root {
  --primary-hue: 200;
  --primary-saturation: 97%;
  --primary-100: hsl(var(--primary-hue), var(--primary-saturation), 9%);
  --primary-200: hsl(var(--primary-hue), var(--primary-saturation), 19%);
  --primary-300: hsl(var(--primary-hue), var(--primary-saturation), 29%);
  --primary-400: hsl(var(--primary-hue), var(--primary-saturation), 39%);
  --primary-500: hsl(var(--primary-hue), var(--primary-saturation), 49%);
  --primary-600: hsl(var(--primary-hue), var(--primary-saturation), 59%);
  --primary-700: hsl(var(--primary-hue), var(--primary-saturation), 69%);
  --primary-800: hsl(var(--primary-hue), var(--primary-saturation), 79%);
  --primary-900: hsl(var(--primary-hue), var(--primary-saturation), 89%);
  --secondary-hue: 205;
  --secondary-saturation: 85%;
  --secondary-100: hsl(var(--secondary-hue), var(--secondary-saturation), 9%);
  --secondary-200: hsl(var(--secondary-hue), var(--secondary-saturation), 19%);
  --secondary-300: hsl(var(--secondary-hue), var(--secondary-saturation), 29%);
  --secondary-400: hsl(var(--secondary-hue), var(--secondary-saturation), 39%);
  --secondary-500: hsl(var(--secondary-hue), var(--secondary-saturation), 49%);
  --secondary-600: hsl(var(--secondary-hue), var(--secondary-saturation), 59%);
  --secondary-700: hsl(var(--secondary-hue), var(--secondary-saturation), 69%);
  --secondary-800: hsl(var(--secondary-hue), var(--secondary-saturation), 79%);
  --secondary-900: hsl(var(--secondary-hue), var(--secondary-saturation), 89%);
  --neutral-000: hsl(0, 0%, 0%);
  --neutral-100: hsl(0, 0%, 10%);
  --neutral-200: hsl(0, 0%, 25%);
  --neutral-300: hsl(0, 0%, 35%);
  --neutral-400: hsl(0, 0%, 50%);
  --neutral-500: hsl(0, 0%, 62%);
  --neutral-600: hsl(0, 0%, 75%);
  --neutral-700: hsl(0, 0%, 85%);
  --neutral-800: hsl(0, 0%, 95%);
  --neutral-900: hsl(0, 0%, 100%);
  --neutral-variant-hue: 200;
  --neutral-variant-saturation: 60%;
  --neutral-variant-100: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 10%);
  --neutral-variant-200: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 20.625%);
  --neutral-variant-300: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 31.25%);
  --neutral-variant-400: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 41.875%);
  --neutral-variant-500: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 52.5%);
  --neutral-variant-600: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 63.125%);
  --neutral-variant-700: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 73.75%);
  --neutral-variant-800: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 84.375%);
  --neutral-variant-900: hsl(var(--neutral-variant-hue), var(--neutral-variant-saturation), 95%);
  --info-hue: 220;
  --info-saturation: 97%;
  --info-100: hsl(var(--info-hue), var(--info-saturation), 9%);
  --info-200: hsl(var(--info-hue), var(--info-saturation), 19%);
  --info-300: hsl(var(--info-hue), var(--info-saturation), 29%);
  --info-400: hsl(var(--info-hue), var(--info-saturation), 39%);
  --info-500: hsl(var(--info-hue), var(--info-saturation), 49%);
  --info-600: hsl(var(--info-hue), var(--info-saturation), 59%);
  --info-700: hsl(var(--info-hue), var(--info-saturation), 69%);
  --info-800: hsl(var(--info-hue), var(--info-saturation), 79%);
  --info-900: hsl(var(--info-hue), var(--info-saturation), 89%);
  --error-hue: 0;
  --error-saturation: 97%;
  --error-100: hsl(var(--error-hue), var(--error-saturation), 9%);
  --error-200: hsl(var(--error-hue), var(--error-saturation), 19%);
  --error-300: hsl(var(--error-hue), var(--error-saturation), 29%);
  --error-400: hsl(var(--error-hue), var(--error-saturation), 39%);
  --error-500: hsl(var(--error-hue), var(--error-saturation), 49%);
  --error-600: hsl(var(--error-hue), var(--error-saturation), 59%);
  --error-700: hsl(var(--error-hue), var(--error-saturation), 69%);
  --error-800: hsl(var(--error-hue), var(--error-saturation), 79%);
  --error-900: hsl(var(--error-hue), var(--error-saturation), 89%);
  --warning-hue: 50;
  --warning-saturation: 97%;
  --warning-100: hsl(var(--warning-hue), var(--warning-saturation), 14%);
  --warning-200: hsl(var(--warning-hue), var(--warning-saturation), 23.375%);
  --warning-300: hsl(var(--warning-hue), var(--warning-saturation), 32.75%);
  --warning-400: hsl(var(--warning-hue), var(--warning-saturation), 42.125%);
  --warning-500: hsl(var(--warning-hue), var(--warning-saturation), 51.5%);
  --warning-600: hsl(var(--warning-hue), var(--warning-saturation), 60.875%);
  --warning-700: hsl(var(--warning-hue), var(--warning-saturation), 70.25%);
  --warning-800: hsl(var(--warning-hue), var(--warning-saturation), 79.625%);
  --warning-900: hsl(var(--warning-hue), var(--warning-saturation), 89%);
  --accept-hue: 100;
  --accept-saturation: 90%;
  --accept-100: hsl(var(--accept-hue), var(--accept-saturation), 5%);
  --accept-200: hsl(var(--accept-hue), var(--accept-saturation), 14.375%);
  --accept-300: hsl(var(--accept-hue), var(--accept-saturation), 23.75%);
  --accept-400: hsl(var(--accept-hue), var(--accept-saturation), 33.125%);
  --accept-500: hsl(var(--accept-hue), var(--accept-saturation), 42.5%);
  --accept-600: hsl(var(--accept-hue), var(--accept-saturation), 51.875%);
  --accept-700: hsl(var(--accept-hue), var(--accept-saturation), 61.25%);
  --accept-800: hsl(var(--accept-hue), var(--accept-saturation), 70.625%);
  --accept-900: hsl(var(--accept-hue), var(--accept-saturation), 80%);
  --header-colour: var(--primary-500);
  --on-header-colour: var(--neutral-900);
  --menu-colour: var(--neutral-900);
  --on-menu-colour: var(--neutral-000);
  --breadcrumbs-colour: var(--primary-300);
  --background-colour: var(--neutral-800);
  --on-background-colour: var(--neutral-000);
  --surface-colour: var(--neutral-900);
  --on-surface-colour: var(--neutral-000);
  --surface-variant-colour: var(--neutral-variant-900);
  --on-surface-variant-colour: var(--neutral-variant-100);
  --surface-header-colour: var(--neutral-variant-800);
  --on-surface-header-colour: var(--neutral-variant-100);
  --primary-colour: var(--primary-500);
  --primary-active-colour: var(--primary-400);
  --on-primary-colour: var(--neutral-900);
  --secondary-colour: var(--secondary-500);
  --secondary-active-colour: var(--secondary-400);
  --on-secondary-colour: var(--neutral-900);
  --error-colour: var(--error-500);
  --error-active-colour: var(--error-400);
  --on-error-colour: var(--neutral-900);
  --warning-colour: var(--warning-400);
  --warning-active-colour: var(--warning-300);
  --on-warning-colour: var(--neutral-900);
  --info-colour: var(--info-500);
  --on-info-colour: var(--neutral-900);
  --accept-colour: var(--accept-500);
  --accept-active-colour: var(--accept-400);
  --on-accept-colour: var(--neutral-900);
  --disabled-colour: var(--neutral-600);
  --on-disabled-colour: var(--neutral-900);
  --dialog-colour: var(--neutral-800);
  --on-dialog-colour: var(--neutral-000);
  --divider-colour: var(--neutral-500);
  background-color: var(--background-colour);
  color: var(--on-background-colour);
}

:root[data-theme=dark] {
  --header-colour: var(--primary-300);
  --on-header-colour: var(--neutral-900);
  --menu-colour: var(--neutral-700);
  --on-menu-colour: var(--neutral-000);
  --breadcrumbs-colour: var(--primary-300);
  --background-colour: var(--neutral-100);
  --on-background-colour: var(--neutral-900);
  --surface-colour: var(--neutral-200);
  --on-surface-colour: var(--neutral-900);
  --surface-variant-colour: var(--neutral-variant-900);
  --on-surface-variant-colour: var(--neutral-variant-100);
  --surface-header-colour: var(--neutral-300);
  --on-surface-header-colour: var(--neutral-variant-900);
  --primary-colour: var(--primary-500);
  --primary-active-colour: var(--primary-400);
  --on-primary-colour: var(--neutral-900);
  --secondary-colour: var(--secondary-400);
  --secondary-active-colour: var(--secondary-500);
  --on-secondary-colour: var(--neutral-900);
  --error-colour: var(--error-400);
  --error-active-colour: var(--error-500);
  --on-error-colour: var(--neutral-900);
  --warning-colour: var(--warning-400);
  --warning-active-colour: var(--warning-500);
  --on-warning-colour: var(--neutral-900);
  --info-colour: var(--info-600);
  --on-info-colour: var(--neutral-900);
  --accept-colour: var(--accept-400);
  --accept-active-colour: var(--accept-500);
  --on-accept-colour: var(--neutral-900);
  --disabled-colour: var(--neutral-600);
  --on-disabled-colour: var(--neutral-900);
  --dialog-colour: var(--neutral-100);
  --on-dialog-colour: var(--neutral-900);
  --divider-colour: var(--neutral-500);
}

@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Thin.woff2") format("woff2");
  font-weight: 100;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Light.woff2") format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
}
:root {
  --font-size-100: 9pt;
  --font-size-200: 11pt;
  --font-size-300: 12pt;
  --font-size-400: 14pt;
  --font-size-500: 16pt;
  --font-size-600: 20pt;
  --font-size-700: 24pt;
  --font-size-800: 32pt;
  --font-size-900: 42pt;
  font-family: "Roboto", sans-serif;
}

code {
  font-family: "Fira Code", monospace;
}

:root {
  --content-width: min(100%, 75rem);
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next {
  isolation: isolate;
}

:where(ul, ol)[role=list] {
  list-style: none;
}

@media (prefers-reduced-motion) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
}

.content {
  height: 100%;
  margin-inline: auto;
  max-width: var(--content-width);
  padding: 2rem;
}

.content-wrapper {
  flex: 1;
}

.footer-wrapper {
  background-color: var(--surface-colour);
  color: var(--on-surface-colour);
}

.footer {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: 1rem 2rem;
}

.header-wrapper {
  background-color: var(--header-colour);
  color: var(--on-header-colour);
}

.header {
  align-items: stretch;
  display: flex;
  padding: 1rem 2rem;
  margin-inline: auto;
  max-width: var(--content-width);
}
@media (max-width: 48em) {
  .header {
    flex-direction: column;
    gap: 1rem;
  }
}

.header__title {
  color: var(--on-header-colour);
  font-size: var(--font-size-600);
  text-decoration: none;
}

.header__links {
  display: flex;
  margin-left: 3rem;
}
.header__links ul {
  align-items: stretch;
  display: flex;
  gap: 2rem;
}
.header__links li {
  align-items: stretch;
  display: flex;
}
.header__links a {
  align-items: center;
  color: var(--on-header-colour);
  cursor: pointer;
  display: flex;
  height: 100%;
  text-decoration: none;
}
.header__links a:hover, .header__links a:focus-visible {
  text-decoration: underline;
}
@media (max-width: 48em) {
  .header__links {
    margin-left: 0;
  }
  .header__links ul {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

.header__user {
  margin-left: auto;
}
.header__user a {
  align-items: center;
  color: var(--on-header-colour);
  cursor: pointer;
  display: flex;
  height: 100%;
  text-decoration: none;
}
.header__user a:hover, .header__user a:focus-visible {
  text-decoration: underline;
}
@media (max-width: 48em) {
  .header__user {
    margin-left: 0;
  }
}

.header > .user-menu {
  display: flex;
  margin-left: auto;
}
.header > .user-menu [aria-controls] {
  align-items: center;
  background: none;
  border: none;
  color: var(--on-header-colour);
  display: flex;
  gap: 0.5rem;
}
.header > .user-menu .menu {
  left: initial;
  right: 0;
  top: 2.5rem;
}
@media (max-width: 48em) {
  .header > .user-menu {
    margin-left: 0;
  }
  .header > .user-menu .menu {
    left: 0;
    right: initial;
    top: 1.75rem;
  }
}

.content {
  position: relative;
}

.sidebar {
  align-self: stretch;
  background-color: var(--surface-colour);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  min-width: 15rem;
  padding-block: 1rem;
  position: absolute;
  top: 0;
  z-index: 100;
}
.sidebar[aria-expanded=false] {
  transform: scaleX(0);
}
.sidebar > * {
  padding: 0.5rem 1rem;
}
.sidebar > a {
  color: var(--primary-colour);
  cursor: pointer;
  text-decoration: none;
}
.sidebar > a:hover, .sidebar > a:focus-visible {
  background-color: var(--primary-colour);
  color: var(--on-primary-colour);
}
.sidebar .sidebar__control {
  align-items: center;
  border: none;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  background-color: var(--surface-variant-colour);
  color: var(--on-surface-variant-colour);
}
.sidebar .sidebar__control:hover, .sidebar .sidebar__control:focus-visible {
  background-color: var(--primary-colour);
  color: var(--on-primary-colour);
}
@media (min-width: 48em) {
  .sidebar {
    background: none;
    box-shadow: none;
    padding: 0;
    position: initial;
  }
  .sidebar[aria-expanded] {
    transform: scaleX(1);
  }
}

@media (min-width: 48em) {
  .sidebar__control {
    display: none !important;
  }
}

.accordion__header {
  cursor: pointer;
  font-size: var(--font-size-400);
  position: relative;
}
.accordion__header [aria-controls] {
  background: none;
  border: none;
  color: var(--primary-colour);
  cursor: pointer;
  transition: transform 100ms ease-in;
}
.accordion__header [aria-controls]:hover, .accordion__header [aria-controls]:focus-visible {
  color: var(--primary-active-colour);
}
.accordion__header [aria-controls][aria-expanded=true] {
  transform: rotate(180deg);
}

.accordion__content:not([hidden]):not(.hidden) ~ .accordion__header::before {
  background-color: var(--divider-colour);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.accordion__content {
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
}
.accordion__content[aria-expanded=true] {
  position: initial;
  transform: scaleY(1);
  transition: transform 100ms ease-in;
}

table.accordion .accordion__header:not(:first-child) td {
  padding-top: 0.5rem;
}
table.accordion td {
  padding-inline: 0.5rem;
}

.article h1 {
  font-size: var(--font-size-800);
  margin-bottom: 0.75rem;
}
.article h2 {
  font-size: var(--font-size-700);
  margin-bottom: 0.5rem;
}
.article h3 {
  font-size: var(--font-size-600);
  margin-bottom: 0.25rem;
}
.article h4 {
  font-size: var(--font-size-500);
  margin-bottom: 0.25rem;
}
.article h5 {
  font-size: var(--font-size-400);
  margin-bottom: 0.125rem;
}
.article ul, .article ol {
  margin-left: 1.5rem;
}
.article em {
  font-style: italic;
}
.article strong, .article b {
  font-weight: 500;
}
.article :where(p, ul, ol) + h1 {
  margin-top: 1.5rem;
}
.article :where(p, ul, ol) + h2 {
  margin-top: 1rem;
}
.article :where(p, ul, ol) + h3 {
  margin-top: 0.5rem;
}
.article :where(p, ul, ol) + h4 {
  margin-top: 0.5rem;
}
.article :where(p, ul, ol) + h5 {
  margin-top: 0.25rem;
}
.article :where(p, ul, ol) + p {
  margin-top: 0.5rem;
}

.banner {
  --color: var(--primary-colour);
  align-items: center;
  border: 1px solid var(--color);
  color: var(--on-background-colour);
  display: flex;
  gap: 1rem;
  isolation: isolate;
  padding: 1rem;
  position: relative;
}
.banner::after {
  background-color: var(--color);
  content: "";
  inset: 0;
  position: absolute;
  opacity: 0.25;
  z-index: -1;
}
.banner__icon {
  color: var(--color);
}
.banner[data-type=info] {
  --color: var(--info-colour);
}
.banner[data-type=error] {
  --color: var(--error-colour);
}
.banner[data-type=warning] {
  --color: var(--warning-colour);
}
.banner[data-type=accept] {
  --color: var(--accept-colour);
}

.breadcrumbs {
  display: flex;
  gap: 0.5em;
}
.breadcrumbs span {
  color: var(--divider-colour);
}
.breadcrumbs a {
  color: var(--secondary-colour);
  cursor: pointer;
  text-decoration: none;
}
.breadcrumbs a:hover, .breadcrumbs a:focus-visible {
  color: var(--secondary-active-colour);
}

button {
  font: inherit;
}

.button {
  --inactive-colour: var(--primary-colour);
  --active-colour: var(--primary-active-colour);
  --inactive-text-colour: var(--on-primary-colour);
  --active-text-colour: var(--on-primary-colour);
  --inactive-border-colour: rgba(0, 0, 0, 0);
  --active-border-colour: var(--primary-colour);
  background-color: var(--inactive-colour);
  border: 1px solid var(--inactive-border-colour);
  border-radius: 4px;
  color: var(--inactive-text-colour);
  cursor: pointer;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.button:hover, .button:focus-visible {
  background-color: var(--active-colour);
  border: 1px solid var(--active-border-colour);
  color: var(--active-text-colour);
}

.button.p-less {
  padding: 0.25rem 0.75rem;
}

.button.p-min {
  padding: 0.1rem 0.5rem;
}

.button[data-style=outlined] {
  --inactive-colour: rgba(0, 0, 0, 0);
  --active-colour: var(--primary-colour);
  --inactive-border-colour: var(--primary-colour);
  --active-border-colour: var(--primary-colour);
  --inactive-text-colour: var(--primary-colour);
  --active-text-colour: var(--on-primary-colour);
}

.button[data-type=error] {
  --inactive-colour: var(--error-colour);
  --active-colour: var(--error-active-colour);
  --inactive-text-colour: var(--on-error-colour);
  --active-text-colour: var(--on-error-colour);
  --active-border-colour: var(--error-colour);
}

.button[data-style=outlined][data-type=error] {
  --inactive-colour: rgba(0, 0, 0, 0);
  --active-colour: var(--error-colour);
  --inactive-border-colour: var(--error-colour);
  --active-border-colour: var(--error-colour);
  --inactive-text-colour: var(--error-colour);
  --active-text-colour: var(--on-error-colour);
}

.button[data-type=accept] {
  --inactive-colour: var(--accept-colour);
  --active-colour: var(--accept-active-colour);
  --inactive-text-colour: var(--on-accept-colour);
  --active-text-colour: var(--on-accept-colour);
  --active-border-colour: var(--accept-colour);
}

.button[data-style=outlined][data-type=accept] {
  --inactive-colour: rgba(0, 0, 0, 0);
  --active-colour: var(--accept-colour);
  --inactive-border-colour: var(--accept-colour);
  --active-border-colour: var(--accept-colour);
  --inactive-text-colour: var(--accept-colour);
  --active-text-colour: var(--on-accept-colour);
}

.button[data-type=warning] {
  --inactive-colour: var(--warning-colour);
  --active-colour: var(--warning-active-colour);
  --inactive-text-colour: var(--on-warning-colour);
  --active-text-colour: var(--on-warning-colour);
  --active-border-colour: var(--warning-colour);
}

.button[data-style=outlined][data-type=warning] {
  --inactive-colour: rgba(0, 0, 0, 0);
  --active-colour: var(--warning-colour);
  --inactive-border-colour: var(--warning-colour);
  --active-border-colour: var(--warning-colour);
  --inactive-text-colour: var(--warning-colour);
  --active-text-colour: var(--on-warning-colour);
}

.button:disabled {
  background-color: var(--disabled-colour);
  border: 1px solid var(--disabled-colour);
  color: var(--on-disabled-colour);
  cursor: default;
}
.button:disabled[data-style=outlined] {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid var(--disabled-colour);
  color: var(--disabled-colour);
}

.chip {
  font-size: 0.9rem;
  padding: 0.1rem 0.4rem;
  border-radius: 100vw;
  border: 1px solid var(--primary-colour);
  color: var(--primary-colour);
}
.chip[data-type=info] {
  border: 1px solid var(--info-colour);
  color: var(--info-colour);
}
.chip[data-type=error] {
  border: 1px solid var(--error-colour);
  color: var(--error-colour);
}
.chip[data-type=warning] {
  border: 1px solid var(--warning-colour);
  color: var(--warning-colour);
}
.chip[data-type=accept] {
  border: 1px solid var(--accept-colour);
  color: var(--accept-colour);
}

.dialog {
  background-color: var(--dialog-colour);
  border: none;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.25);
  color: var(--on-dialog-colour);
  left: 50%;
  max-width: 100vw;
  overflow: visible;
  top: 50%;
  transform: translate(-50%, -50%);
  --width: 30rem;
}
.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
.dialog > * {
  min-width: min(100vw, var(--width));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.hint {
  font-style: italic;
  font-size: var(--font-size-200);
}

.link:where([href], [role=link]) {
  color: var(--primary-colour);
  cursor: pointer;
  text-decoration: none;
}
.link:where([href], [role=link]):hover, .link:where([href], [role=link]):focus-visible {
  color: var(--primary-active-colour);
}

.list.divided > :where(li, [role=listitem]) + :where(li, [role=listitem]) {
  position: relative;
}
.list.divided > :where(li, [role=listitem]) + :where(li, [role=listitem])::before {
  background-color: var(--divider-colour);
  top: 0;
  content: "";
  left: 0;
  height: 1px;
  position: absolute;
  width: 100%;
}

.list:where(ol, ul):not([role=list]) {
  margin-left: 1.5rem;
}

.menu-wrapper {
  position: relative;
}
.menu-wrapper [aria-controls] {
  cursor: pointer;
}
.menu-wrapper:focus-within .menu {
  transform: scaleY(1);
}

.menu {
  background-color: var(--menu-colour);
  border-radius: 2px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  color: var(--on-menu-colour);
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 80ms ease-in;
  z-index: 100;
}
.menu li :where(a, button) {
  background: none;
  border: none;
  color: var(--primary-colour);
  display: flex;
  padding: 0.5rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.menu li :where(a, button):hover, .menu li :where(a, button):focus-visible {
  background-color: var(--primary-colour);
  color: var(--on-primary-colour);
  cursor: pointer;
}
.menu li :where(a, button):first-child {
  border-radius: 2px 2px 0 0;
}
.menu li :where(a, button):last-child {
  border-radius: 0 0 2px 2px;
}

ul[role=menu] {
  list-style: none;
}

.pagination [role=list] {
  display: flex;
}
.pagination a, .pagination button {
  aspect-ratio: 1/1;
  background-color: var(--surface-colour);
  display: grid;
  border: none;
  min-width: 2em;
  place-items: center;
  text-decoration: none;
}
.pagination a[href], .pagination button:not(:disabled) {
  color: var(--primary-colour);
  cursor: pointer;
}
.pagination a[href]:hover, .pagination a[href]:focus-visible, .pagination a[href][aria-current=page], .pagination button:not(:disabled):hover, .pagination button:not(:disabled):focus-visible, .pagination button:not(:disabled)[aria-current=page] {
  background-color: var(--primary-colour);
  color: var(--on-primary-colour);
}
.pagination a:not([href]), .pagination button:disabled {
  color: var(--disabled-colour);
}

@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Thin.woff2") format("woff2");
  font-weight: 100;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Light.woff2") format("woff2");
  font-weight: 300;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
}
@font-face {
  font-family: "Roboto";
  src: url("./font/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
}
:root {
  --font-size-100: 9pt;
  --font-size-200: 11pt;
  --font-size-300: 12pt;
  --font-size-400: 14pt;
  --font-size-500: 16pt;
  --font-size-600: 20pt;
  --font-size-700: 24pt;
  --font-size-800: 32pt;
  --font-size-900: 42pt;
  font-family: "Roboto", sans-serif;
}

code {
  font-family: "Fira Code", monospace;
}

.tabs {
  --tab-width: 10rem;
  border-bottom: 1px solid var(--divider-colour);
  display: flex;
  overflow-x: auto;
  overflow-y: clip;
}
.tabs [role=tab] {
  background: none;
  border: none;
  color: var(--on-background-colour);
  cursor: pointer;
  font-size: var(--font-size-400);
  min-width: var(--tab-width);
  padding: 0.5rem 1rem;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.tabs [role=tab]:where([aria-selected=true], :focus-visible, :hover)::after {
  background-color: var(--primary-colour);
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

.select {
  --height: 16rem;
  --width: 20rem;
  display: inline-block;
  max-width: 100%;
  position: relative;
}
.select[data-style=variant] {
  background-color: var(--surface-variant-colour);
  color: var(--on-surface-variant-colour);
}
.select[data-style=variant] ~ .select[role=listbox] .select__button {
  background-color: var(--surface-variant-colour);
  color: var(--on-surface-variant-colour);
}
.select [role=group] {
  position: relative;
}
.select [role=group] .select__label {
  background-color: var(--menu-colour);
  border: none;
  color: var(--divider-colour);
  display: flex;
  max-width: 20rem;
  padding: 0.5rem 1rem 0.25rem 1rem;
  pointer-events: none;
  white-space: nowrap;
}
.select [role=group] .select__label > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.select [role=group][aria-hidden=true] {
  display: none;
}
.select [role=group][aria-hidden=true]::before {
  display: none;
}
.select [role=group] [role=option] {
  padding-left: 1.5rem;
}
.select [role=group][aria-disabled=true] [role=option] {
  color: var(--disabled-colour);
  pointer-events: none;
}
.select__button {
  align-items: center;
  background-color: var(--surface-colour);
  border: none;
  border-radius: 4px;
  color: var(--on-surface-colour);
  cursor: pointer;
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
}
.select__button > span:first-child {
  flex-grow: 1;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.select__button > span:first-child:empty::before {
  content: attr(data-placeholder);
  color: var(--disabled-colour);
}
.select__button > span:last-child {
  color: var(--primary-colour);
  transition: transform 100ms ease-in;
}
.select[aria-disabled=true] .select__button {
  color: var(--disabled-colour);
  cursor: initial;
  opacity: 0.9;
  pointer-events: none;
}
.select[aria-disabled=true] .select__button > span:last-child {
  color: var(--disabled-colour);
}
.select__dropdown {
  background-color: var(--surface-colour);
  border-radius: 2px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  left: 0;
  position: absolute;
  top: 2.75rem;
  transform: scaleY(0);
  transition: transform 100ms ease-in;
  transform-origin: top left;
  z-index: 20;
}
.select__dropdown .select__options:first-child > :first-child {
  border-radius: 2px 2px 0 0;
}
.select__dropdown .select__options:last-child > :last-child {
  border-radius: 0 0 2px 2px;
}
.select__options {
  display: flex;
  flex-direction: column;
  max-height: var(--height);
  overflow-y: auto;
}
.select__options [role=option] {
  align-items: center;
  background-color: var(--menu-colour);
  border: none;
  color: var(--on-menu-colour);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: 20rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}
.select__options [role=option] span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.select__options [role=option] > .fa-check {
  transform: scale(0);
  transition: transform 150ms ease-in-out;
}
.select__options [role=option][aria-selected=true] > .fa-check {
  transform: scale(1);
}
.select__options [role=option][aria-disabled=true] {
  color: var(--disabled-colour);
  pointer-events: none;
}
.select__options [role=option]:where([aria-hidden=true], [data-excluded=true]) {
  display: none;
}
.select__options [role=option]:where(:hover, :focus) {
  background-color: var(--primary-colour);
  color: var(--on-primary-colour);
}
.select[aria-expanded=true] .select__dropdown {
  transform: scaleY(1);
}
.select[aria-expanded=true] .fa-chevron-down {
  transform: scaleY(-1);
}
.select__controls {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.select__search {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  position: relative;
}
.select__search input {
  border: 1px solid var(--divider-colour);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
}
.select__search .fa-search {
  position: absolute;
  opacity: 50%;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.select__search + .select__controls {
  padding-top: 0;
}

select[data-select] {
  display: none;
}

.search {
  display: flex;
}
.search input[type=search] {
  background-color: var(--surface-colour);
  border: none;
  color: var(--on-surface-colour);
  flex: 1;
  padding: 0.5rem 1rem;
}
.search button {
  aspect-ratio: 1/1;
  background-color: var(--primary-colour);
  border: none;
  color: var(--on-primary-colour);
  cursor: pointer;
  padding: 1rem;
}
.search button:hover, .search button:focus-visible {
  background-color: var(--on-primary-colour);
  color: var(--primary-colour);
}

.surface {
  background-color: var(--surface-colour);
  color: var(--on-surface-colour);
  padding: 1rem;
  border-radius: 2px;
}
.surface__header {
  background-color: var(--surface-header-colour);
  color: var(--on-surface-header-colour);
  padding: 0.5rem 1rem;
  border-radius: 2px 2px 0 0;
}
.surface__content {
  padding: 0.5rem 1rem;
}

.table {
  border-collapse: collapse;
  text-align: left;
}
.table__header :where(th, td) {
  border-bottom: 1px solid var(--divider-colour);
}
.table td {
  padding: 0.25rem 1rem;
}
.table th {
  padding: 0.5rem 1rem;
}

.table.p-less td, .table.p-less th {
  padding: 0.25rem 0.5rem;
}

.table[data-style=surface] {
  background: var(--surface-colour);
  color: var(--on-surface-colour);
}
.table[data-style=surface] .table__header {
  background-color: var(--surface-header-colour);
  color: var(--on-surface-header-colour);
}
.table[data-style=surface] .table__header :where(th, td) {
  border: none;
}

.textfield {
  background-color: var(--surface-colour);
  border: none;
  border-radius: 2px;
  color: var(--on-surface-colour);
  padding: 0.5rem 1rem;
  resize: none;
}
.textfield[data-style=outlined] {
  border: 1px solid var(--divider-colour);
}
.textfield[data-style=variant] {
  background-color: var(--surface-variant-colour);
  color: var(--on-surface-variant-colour);
}
.textfield:disabled {
  color: var(--disabled-colour);
  opacity: 0.9;
}

.textfield.resizable {
  resize: initial;
}

.toast {
  --color: var(--primary-colour);
  --y: 0;
  --y-pos: calc(var(--y) * 100% + var(--y) * .5rem);
  align-items: center;
  animation: 500ms ease-in-out toast-up;
  border: 1px solid var(--color);
  bottom: 1rem;
  color: var(--on-background-colour);
  display: flex;
  font-size: var(--font-size-400);
  gap: 1rem;
  padding: 1.5rem 2rem;
  position: fixed;
  right: 1rem;
  transform: translateY(var(--y-pos));
}
.toast::after {
  background-color: var(--color);
  content: "";
  inset: 0;
  position: absolute;
  opacity: 0.25;
  z-index: -1;
}
.toast__icon {
  color: var(--color);
  font-size: var(--font-size-500);
}
.toast[data-type=info] {
  --color: var(--info-colour);
}
.toast[data-type=error] {
  --color: var(--error-colour);
}
.toast[data-type=warning] {
  --color: var(--warning-colour);
}
.toast[data-type=accept] {
  --color: var(--accept-colour);
}

@keyframes toast-up {
  0% {
    transform: translateY(var(--y-pos)) translateY(100%);
  }
  100% {
    transform: translateY(var(--y-pos));
  }
}
@keyframes toast-out {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 200% 0;
  }
}
.toggle {
  border: none;
  background-color: var(--disabled-colour);
  width: 2rem;
  height: 1rem;
  border-radius: 100vw;
  cursor: pointer;
  position: relative;
}
.toggle::after {
  border-radius: 100%;
  position: absolute;
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  background-color: var(--on-disabled-colour);
  top: 0.1rem;
  left: 0.1rem;
  transition: transform 100ms ease-in;
}

.toggle[aria-checked=true] {
  background-color: var(--primary-colour);
}
.toggle[aria-checked=true]::after {
  background-color: var(--on-primary-colour);
  transform: translateX(1rem);
}

.tooltip {
  display: inline;
  position: relative;
}
.tooltip__control {
  aspect-ratio: 1/1;
  background-color: var(--primary-colour);
  border: none;
  border-radius: 100%;
  color: var(--on-primary-colour);
  display: inline-block;
  font-size: 0.75rem;
  min-width: 1.1rem;
  padding: 0.1rem 0.25rem;
  text-align: center;
  transform: translateY(-0.1rem);
}
.tooltip__control:focus, .tooltip__control:hover {
  background-color: var(--primary-active-colour);
}
.tooltip > [role=tooltip] {
  background-color: var(--surface-colour);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  left: 0;
  padding: 1rem;
  position: absolute;
  top: 1.2rem;
  transform: scale(0);
  transform-origin: top left;
  transition: transform 100ms ease-in-out;
  white-space: nowrap;
  z-index: 100;
}
.tooltip > .tooltip__control:where(:focus, :hover) + [role=tooltip] {
  transform: scale(1);
}

.mb-0 {
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0;
}

.ml-0 {
  margin-left: 0;
}

.mr-0 {
  margin-right: 0;
}

.mil-0 {
  margin-inline: 0;
}

.mbl-0 {
  margin-block: 0;
}

.m-0 {
  margin: 0;
}

.mb-1 {
  margin-bottom: 0.125rem;
}

.mt-1 {
  margin-top: 0.125rem;
}

.ml-1 {
  margin-left: 0.125rem;
}

.mr-1 {
  margin-right: 0.125rem;
}

.mil-1 {
  margin-inline: 0.125rem;
}

.mbl-1 {
  margin-block: 0.125rem;
}

.m-1 {
  margin: 0.125rem;
}

.mb-2 {
  margin-bottom: 0.25rem;
}

.mt-2 {
  margin-top: 0.25rem;
}

.ml-2 {
  margin-left: 0.25rem;
}

.mr-2 {
  margin-right: 0.25rem;
}

.mil-2 {
  margin-inline: 0.25rem;
}

.mbl-2 {
  margin-block: 0.25rem;
}

.m-2 {
  margin: 0.25rem;
}

.mb-3 {
  margin-bottom: 0.5rem;
}

.mt-3 {
  margin-top: 0.5rem;
}

.ml-3 {
  margin-left: 0.5rem;
}

.mr-3 {
  margin-right: 0.5rem;
}

.mil-3 {
  margin-inline: 0.5rem;
}

.mbl-3 {
  margin-block: 0.5rem;
}

.m-3 {
  margin: 0.5rem;
}

.mb-4 {
  margin-bottom: 0.75rem;
}

.mt-4 {
  margin-top: 0.75rem;
}

.ml-4 {
  margin-left: 0.75rem;
}

.mr-4 {
  margin-right: 0.75rem;
}

.mil-4 {
  margin-inline: 0.75rem;
}

.mbl-4 {
  margin-block: 0.75rem;
}

.m-4 {
  margin: 0.75rem;
}

.mb-5 {
  margin-bottom: 1rem;
}

.mt-5 {
  margin-top: 1rem;
}

.ml-5 {
  margin-left: 1rem;
}

.mr-5 {
  margin-right: 1rem;
}

.mil-5 {
  margin-inline: 1rem;
}

.mbl-5 {
  margin-block: 1rem;
}

.m-5 {
  margin: 1rem;
}

.mb-6 {
  margin-bottom: 1.25rem;
}

.mt-6 {
  margin-top: 1.25rem;
}

.ml-6 {
  margin-left: 1.25rem;
}

.mr-6 {
  margin-right: 1.25rem;
}

.mil-6 {
  margin-inline: 1.25rem;
}

.mbl-6 {
  margin-block: 1.25rem;
}

.m-6 {
  margin: 1.25rem;
}

.mb-7 {
  margin-bottom: 1.5rem;
}

.mt-7 {
  margin-top: 1.5rem;
}

.ml-7 {
  margin-left: 1.5rem;
}

.mr-7 {
  margin-right: 1.5rem;
}

.mil-7 {
  margin-inline: 1.5rem;
}

.mbl-7 {
  margin-block: 1.5rem;
}

.m-7 {
  margin: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mil-8 {
  margin-inline: 2rem;
}

.mbl-8 {
  margin-block: 2rem;
}

.m-8 {
  margin: 2rem;
}

.mb-9 {
  margin-bottom: 2.5rem;
}

.mt-9 {
  margin-top: 2.5rem;
}

.ml-9 {
  margin-left: 2.5rem;
}

.mr-9 {
  margin-right: 2.5rem;
}

.mil-9 {
  margin-inline: 2.5rem;
}

.mbl-9 {
  margin-block: 2.5rem;
}

.m-9 {
  margin: 2.5rem;
}

.mb-10 {
  margin-bottom: 3rem;
}

.mt-10 {
  margin-top: 3rem;
}

.ml-10 {
  margin-left: 3rem;
}

.mr-10 {
  margin-right: 3rem;
}

.mil-10 {
  margin-inline: 3rem;
}

.mbl-10 {
  margin-block: 3rem;
}

.m-10 {
  margin: 3rem;
}

.pb-0 {
  padding-bottom: 0;
}

.pt-0 {
  padding-top: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.pil-0 {
  padding-inline: 0;
}

.pbl-0 {
  padding-block: 0;
}

.p-0 {
  padding: 0;
}

.pb-1 {
  padding-bottom: 0.125rem;
}

.pt-1 {
  padding-top: 0.125rem;
}

.pl-1 {
  padding-left: 0.125rem;
}

.pr-1 {
  padding-right: 0.125rem;
}

.pil-1 {
  padding-inline: 0.125rem;
}

.pbl-1 {
  padding-block: 0.125rem;
}

.p-1 {
  padding: 0.125rem;
}

.pb-2 {
  padding-bottom: 0.25rem;
}

.pt-2 {
  padding-top: 0.25rem;
}

.pl-2 {
  padding-left: 0.25rem;
}

.pr-2 {
  padding-right: 0.25rem;
}

.pil-2 {
  padding-inline: 0.25rem;
}

.pbl-2 {
  padding-block: 0.25rem;
}

.p-2 {
  padding: 0.25rem;
}

.pb-3 {
  padding-bottom: 0.5rem;
}

.pt-3 {
  padding-top: 0.5rem;
}

.pl-3 {
  padding-left: 0.5rem;
}

.pr-3 {
  padding-right: 0.5rem;
}

.pil-3 {
  padding-inline: 0.5rem;
}

.pbl-3 {
  padding-block: 0.5rem;
}

.p-3 {
  padding: 0.5rem;
}

.pb-4 {
  padding-bottom: 0.75rem;
}

.pt-4 {
  padding-top: 0.75rem;
}

.pl-4 {
  padding-left: 0.75rem;
}

.pr-4 {
  padding-right: 0.75rem;
}

.pil-4 {
  padding-inline: 0.75rem;
}

.pbl-4 {
  padding-block: 0.75rem;
}

.p-4 {
  padding: 0.75rem;
}

.pb-5 {
  padding-bottom: 1rem;
}

.pt-5 {
  padding-top: 1rem;
}

.pl-5 {
  padding-left: 1rem;
}

.pr-5 {
  padding-right: 1rem;
}

.pil-5 {
  padding-inline: 1rem;
}

.pbl-5 {
  padding-block: 1rem;
}

.p-5 {
  padding: 1rem;
}

.pb-6 {
  padding-bottom: 1.25rem;
}

.pt-6 {
  padding-top: 1.25rem;
}

.pl-6 {
  padding-left: 1.25rem;
}

.pr-6 {
  padding-right: 1.25rem;
}

.pil-6 {
  padding-inline: 1.25rem;
}

.pbl-6 {
  padding-block: 1.25rem;
}

.p-6 {
  padding: 1.25rem;
}

.pb-7 {
  padding-bottom: 1.5rem;
}

.pt-7 {
  padding-top: 1.5rem;
}

.pl-7 {
  padding-left: 1.5rem;
}

.pr-7 {
  padding-right: 1.5rem;
}

.pil-7 {
  padding-inline: 1.5rem;
}

.pbl-7 {
  padding-block: 1.5rem;
}

.p-7 {
  padding: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pil-8 {
  padding-inline: 2rem;
}

.pbl-8 {
  padding-block: 2rem;
}

.p-8 {
  padding: 2rem;
}

.pb-9 {
  padding-bottom: 2.5rem;
}

.pt-9 {
  padding-top: 2.5rem;
}

.pl-9 {
  padding-left: 2.5rem;
}

.pr-9 {
  padding-right: 2.5rem;
}

.pil-9 {
  padding-inline: 2.5rem;
}

.pbl-9 {
  padding-block: 2.5rem;
}

.p-9 {
  padding: 2.5rem;
}

.pb-10 {
  padding-bottom: 3rem;
}

.pt-10 {
  padding-top: 3rem;
}

.pl-10 {
  padding-left: 3rem;
}

.pr-10 {
  padding-right: 3rem;
}

.pil-10 {
  padding-inline: 3rem;
}

.pbl-10 {
  padding-block: 3rem;
}

.p-10 {
  padding: 3rem;
}

.flex {
  display: flex;
  gap: var(--gap, 1rem);
}

@media (max-width: 30em) {
  .sm\:flex {
    display: flex;
    gap: var(--gap, 1rem);
  }
}

@media (max-width: 48em) {
  .md\:flex {
    display: flex;
    gap: var(--gap, 1rem);
  }
}

@media (max-width: 64em) {
  .lg\:flex {
    display: flex;
    gap: var(--gap, 1rem);
  }
}

@media (max-width: 75em) {
  .xl\:flex {
    display: flex;
    gap: var(--gap, 1rem);
  }
}

.vertical {
  flex-direction: column;
}

@media (max-width: 30em) {
  .sm\:vertical.flex {
    flex-direction: column;
  }
}

@media (max-width: 48em) {
  .md\:vertical.flex {
    flex-direction: column;
  }
}

@media (max-width: 64em) {
  .lg\:vertical.flex {
    flex-direction: column;
  }
}

@media (max-width: 75em) {
  .xl\:vertical.flex {
    flex-direction: column;
  }
}

.flex.align-start {
  align-items: flex-start;
}

.flex.align-center {
  align-items: center;
}

.flex.align-end {
  align-items: flex-end;
}

.flex.align-stretch {
  align-items: stretch;
}

@media (max-width: 30em) {
  .sm\:align-start.flex {
    align-items: flex-start;
  }
}

@media (max-width: 48em) {
  .md\:align-start.flex {
    align-items: flex-start;
  }
}

@media (max-width: 64em) {
  .lg\:align-start.flex {
    align-items: flex-start;
  }
}

@media (max-width: 75em) {
  .xl\:align-start.flex {
    align-items: flex-start;
  }
}

@media (max-width: 30em) {
  .sm\:align-center.flex {
    align-items: center;
  }
}

@media (max-width: 48em) {
  .md\:align-center.flex {
    align-items: center;
  }
}

@media (max-width: 64em) {
  .lg\:align-center.flex {
    align-items: center;
  }
}

@media (max-width: 75em) {
  .xl\:align-center.flex {
    align-items: center;
  }
}

@media (max-width: 30em) {
  .sm\:align-end.flex {
    align-items: flex-end;
  }
}

@media (max-width: 48em) {
  .md\:align-end.flex {
    align-items: flex-end;
  }
}

@media (max-width: 64em) {
  .lg\:align-end.flex {
    align-items: flex-end;
  }
}

@media (max-width: 75em) {
  .xl\:align-end.flex {
    align-items: flex-end;
  }
}

@media (max-width: 30em) {
  .sm\:align-stretch.flex {
    align-items: stretch;
  }
}

@media (max-width: 48em) {
  .md\:align-stretch.flex {
    align-items: stretch;
  }
}

@media (max-width: 64em) {
  .lg\:align-stretch.flex {
    align-items: stretch;
  }
}

@media (max-width: 75em) {
  .xl\:align-stretch.flex {
    align-items: stretch;
  }
}

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

.flex.justify-center {
  justify-content: center;
}

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

.flex.space-between {
  justify-content: space-between;
}

.flex.space-around {
  justify-content: space-around;
}

@media (max-width: 30em) {
  .sm\:justify-start.flex {
    justify-content: flex-start;
  }
}

@media (max-width: 48em) {
  .md\:justify-start.flex {
    justify-content: flex-start;
  }
}

@media (max-width: 64em) {
  .lg\:justify-start.flex {
    justify-content: flex-start;
  }
}

@media (max-width: 75em) {
  .xl\:justify-start.flex {
    justify-content: flex-start;
  }
}

@media (max-width: 30em) {
  .sm\:justify-center.flex {
    justify-content: center;
  }
}

@media (max-width: 48em) {
  .md\:justify-center.flex {
    justify-content: center;
  }
}

@media (max-width: 64em) {
  .lg\:justify-center.flex {
    justify-content: center;
  }
}

@media (max-width: 75em) {
  .xl\:justify-center.flex {
    justify-content: center;
  }
}

@media (max-width: 30em) {
  .sm\:justify-end.flex {
    justify-content: end;
  }
}

@media (max-width: 48em) {
  .md\:justify-end.flex {
    justify-content: end;
  }
}

@media (max-width: 64em) {
  .lg\:justify-end.flex {
    justify-content: end;
  }
}

@media (max-width: 75em) {
  .xl\:justify-end.flex {
    justify-content: end;
  }
}

@media (max-width: 30em) {
  .sm\:space-between.flex {
    justify-content: space-between;
  }
}

@media (max-width: 48em) {
  .md\:space-between.flex {
    justify-content: space-between;
  }
}

@media (max-width: 64em) {
  .lg\:space-between.flex {
    justify-content: space-between;
  }
}

@media (max-width: 75em) {
  .xl\:space-between.flex {
    justify-content: space-between;
  }
}

@media (max-width: 30em) {
  .sm\:space-around.flex {
    justify-content: space-around;
  }
}

@media (max-width: 48em) {
  .md\:space-around.flex {
    justify-content: space-around;
  }
}

@media (max-width: 64em) {
  .lg\:space-around.flex {
    justify-content: space-around;
  }
}

@media (max-width: 75em) {
  .xl\:space-around.flex {
    justify-content: space-around;
  }
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex > .grow {
  flex-grow: 1;
}

.flex.gap-0 {
  --gap: 0;
}

.flex.gap-1 {
  --gap: 0.125rem;
}

.flex.gap-2 {
  --gap: 0.25rem;
}

.flex.gap-3 {
  --gap: 0.5rem;
}

.flex.gap-4 {
  --gap: 0.75rem;
}

.flex.gap-5 {
  --gap: 1rem;
}

.flex.gap-6 {
  --gap: 1.25rem;
}

.flex.gap-7 {
  --gap: 1.5rem;
}

.flex.gap-8 {
  --gap: 2rem;
}

.flex.gap-9 {
  --gap: 2.5rem;
}

.flex.gap-10 {
  --gap: 3rem;
}

@media (max-width: 30em) {
  .sm\:gap-0.flex {
    --gap: 0;
  }
}

@media (max-width: 48em) {
  .md\:gap-0.flex {
    --gap: 0;
  }
}

@media (max-width: 64em) {
  .lg\:gap-0.flex {
    --gap: 0;
  }
}

@media (max-width: 75em) {
  .xl\:gap-0.flex {
    --gap: 0;
  }
}

@media (max-width: 30em) {
  .sm\:gap-1.flex {
    --gap: 0.125rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-1.flex {
    --gap: 0.125rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-1.flex {
    --gap: 0.125rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-1.flex {
    --gap: 0.125rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-2.flex {
    --gap: 0.25rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-2.flex {
    --gap: 0.25rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-2.flex {
    --gap: 0.25rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-2.flex {
    --gap: 0.25rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-3.flex {
    --gap: 0.5rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-3.flex {
    --gap: 0.5rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-3.flex {
    --gap: 0.5rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-3.flex {
    --gap: 0.5rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-4.flex {
    --gap: 0.75rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-4.flex {
    --gap: 0.75rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-4.flex {
    --gap: 0.75rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-4.flex {
    --gap: 0.75rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-5.flex {
    --gap: 1rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-5.flex {
    --gap: 1rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-5.flex {
    --gap: 1rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-5.flex {
    --gap: 1rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-6.flex {
    --gap: 1.25rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-6.flex {
    --gap: 1.25rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-6.flex {
    --gap: 1.25rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-6.flex {
    --gap: 1.25rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-7.flex {
    --gap: 1.5rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-7.flex {
    --gap: 1.5rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-7.flex {
    --gap: 1.5rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-7.flex {
    --gap: 1.5rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-8.flex {
    --gap: 2rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-8.flex {
    --gap: 2rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-8.flex {
    --gap: 2rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-8.flex {
    --gap: 2rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-9.flex {
    --gap: 2.5rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-9.flex {
    --gap: 2.5rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-9.flex {
    --gap: 2.5rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-9.flex {
    --gap: 2.5rem;
  }
}

@media (max-width: 30em) {
  .sm\:gap-10.flex {
    --gap: 3rem;
  }
}

@media (max-width: 48em) {
  .md\:gap-10.flex {
    --gap: 3rem;
  }
}

@media (max-width: 64em) {
  .lg\:gap-10.flex {
    --gap: 3rem;
  }
}

@media (max-width: 75em) {
  .xl\:gap-10.flex {
    --gap: 3rem;
  }
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

@media (max-width: 30em) {
  .sm\:grid {
    display: grid;
    gap: var(--gap, 1rem);
  }
}

@media (max-width: 48em) {
  .md\:grid {
    display: grid;
    gap: var(--gap, 1rem);
  }
}

@media (max-width: 64em) {
  .lg\:grid {
    display: grid;
    gap: var(--gap, 1rem);
  }
}

@media (max-width: 75em) {
  .xl\:grid {
    display: grid;
    gap: var(--gap, 1rem);
  }
}

.col-1 {
  grid-template-columns: 1fr;
}

.col-2 {
  --col-1: 1fr;
  --col-2: 1fr;
  grid-template-columns: var(--col-1) var(--col-2);
}

.col-3 {
  --col-1: 1fr;
  --col-2: 1fr;
  --col-3: 1fr;
  grid-template-columns: var(--col-1) var(--col-2) var(--col-3);
}

.col-4 {
  --col-1: 1fr;
  --col-2: 1fr;
  --col-3: 1fr;
  --col-4: 1fr;
  grid-template-columns: var(--col-1) var(--col-2) var(--col-3) var(--col-4);
}

@media (max-width: 30em) {
  .sm\:col-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48em) {
  .md\:col-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 64em) {
  .lg\:col-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 75em) {
  .xl\:col-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 30em) {
  .sm\:col-2 {
    --col-1: 1fr;
    --col-2: 1fr;
    grid-template-columns: var(--col-1) var(--col-2);
  }
}

@media (max-width: 48em) {
  .md\:col-2 {
    --col-1: 1fr;
    --col-2: 1fr;
    grid-template-columns: var(--col-1) var(--col-2);
  }
}

@media (max-width: 64em) {
  .lg\:col-2 {
    --col-1: 1fr;
    --col-2: 1fr;
    grid-template-columns: var(--col-1) var(--col-2);
  }
}

@media (max-width: 75em) {
  .xl\:col-2 {
    --col-1: 1fr;
    --col-2: 1fr;
    grid-template-columns: var(--col-1) var(--col-2);
  }
}

@media (max-width: 30em) {
  .sm\:col-3 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3);
  }
}

@media (max-width: 48em) {
  .md\:col-3 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3);
  }
}

@media (max-width: 64em) {
  .lg\:col-3 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3);
  }
}

@media (max-width: 75em) {
  .xl\:col-3 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3);
  }
}

@media (max-width: 30em) {
  .sm\:col-4 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    --col-4: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3) var(--col-4);
  }
}

@media (max-width: 48em) {
  .md\:col-4 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    --col-4: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3) var(--col-4);
  }
}

@media (max-width: 64em) {
  .lg\:col-4 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    --col-4: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3) var(--col-4);
  }
}

@media (max-width: 75em) {
  .xl\:col-4 {
    --col-1: 1fr;
    --col-2: 1fr;
    --col-3: 1fr;
    --col-4: 1fr;
    grid-template-columns: var(--col-1) var(--col-2) var(--col-3) var(--col-4);
  }
}

.grid.auto-fill {
  --col-width: 15rem;
  grid-template-columns: repeat(auto-fill, minmax(var(--col-width), 1fr));
}

.grid.auto-fit {
  --col-width: 15rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-width), 1fr));
}

.grid.align-start {
  align-items: flex-start;
}

.grid.align-center {
  align-items: center;
}

.grid.align-end {
  align-items: flex-end;
}

.grid.justify-start {
  justify-content: flex-start;
}

.grid.justify-center {
  justify-content: center;
}

.grid.justify-end {
  justify-content: end;
}

.grid.space-between {
  justify-content: space-between;
}

.grid.space-around {
  justify-content: space-around;
}

.grid.gap-0 {
  --gap: 0;
}

.grid.gap-1 {
  --gap: 0.125rem;
}

.grid.gap-2 {
  --gap: 0.25rem;
}

.grid.gap-3 {
  --gap: 0.5rem;
}

.grid.gap-4 {
  --gap: 0.75rem;
}

.grid.gap-5 {
  --gap: 1rem;
}

.grid.gap-6 {
  --gap: 1.25rem;
}

.grid.gap-7 {
  --gap: 1.5rem;
}

.grid.gap-8 {
  --gap: 2rem;
}

.grid.gap-9 {
  --gap: 2.5rem;
}

.grid.gap-10 {
  --gap: 3rem;
}

.font-100 {
  font-size: var(--font-size-100);
}

.font-200 {
  font-size: var(--font-size-200);
}

.font-300 {
  font-size: var(--font-size-300);
}

.font-400 {
  font-size: var(--font-size-400);
}

.font-500 {
  font-size: var(--font-size-500);
}

.font-600 {
  font-size: var(--font-size-600);
}

.font-700 {
  font-size: var(--font-size-700);
}

.font-800 {
  font-size: var(--font-size-800);
}

.font-900 {
  font-size: var(--font-size-900);
}

.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

.fs-normal {
  font-style: normal;
}

.fs-italic {
  font-style: italic;
}

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

.colour-warning {
  color: var(--warning-colour);
}

.colour-accept {
  color: var(--accept-colour);
}

.colour-info {
  color: var(--info-colour);
}

.pos-relative {
  position: relative;
}

:where(td, th).fit-content {
  width: 1%;
}

.underlined {
  position: relative;
}
.underlined::after {
  background-color: var(--divider-colour);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}

.single-line {
  white-space: nowrap;
}

.center-text {
  text-align: center;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

/*# sourceMappingURL=main.css.map */