@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'ABC Otto';
    src: url('../fonts/ABCOtto-Medium.otf') format('truetype');
}

/* --------- */
/* Variables */
/* --------- */
:root {
    --colour-blue-0: #ffffff;
    --colour-blue-100: #d2effb;
    --colour-blue-200: #aee1f7;
    --colour-blue-300: #76c8f1;
    --colour-blue-400: #42aeea;
    --colour-blue-500: #1e84d2;
    --colour-blue-600: #005dba;
    --colour-blue-700: #003894;
    --colour-blue-800: #001d6e;
    --colour-blue-900: #000a52;
    --colour-blue-1000: #000039;
    --colour-green-0: #ffffff;
    --colour-green-100: #dff6eb;
    --colour-green-200: #caeedd;
    --colour-green-300: #7fce9f;
    --colour-green-400: #43af6e;
    --colour-green-500: #1a8952;
    --colour-green-600: #00633d;
    --colour-green-700: #014a39;
    --colour-green-800: #01312e;
    --colour-green-900: #012425;
    --colour-green-1000: #011b1f;
    --colour-red-0: #ffffff;
    --colour-red-100: #ffd5d2;
    --colour-red-200: #ffc2bd;
    --colour-red-300: #ff7e7e;
    --colour-red-400: #ff3e51;
    --colour-red-500: #e2223e;
    --colour-red-600: #c50b30;
    --colour-red-700: #ad092a;
    --colour-red-800: #940824;
    --colour-red-900: #6e061b;
    --colour-red-1000: #480411;
    --colour-yellow-0: #ffffff;
    --colour-yellow-100: #fffbdc;
    --colour-yellow-200: #fff9c7;
    --colour-yellow-300: #fff298;
    --colour-yellow-400: #ffe969;
    --colour-yellow-500: #ffd335;
    --colour-yellow-600: #ffb600;
    --colour-yellow-700: #e48616;
    --colour-yellow-800: #c86426;
    --colour-yellow-900: #904029;
    --colour-yellow-1000: #572722;
    --colour-greyscale-0: #ffffff;
    --colour-greyscale-100: #f4f4f4;
    --colour-greyscale-200: #d3d3d3;
    --colour-greyscale-300: #bcbdbd;
    --colour-greyscale-400: #a6a7a7;
    --colour-greyscale-500: #858686;
    --colour-greyscale-600: #7a7b7b;
    --colour-greyscale-700: #4d4f4f;
    --colour-greyscale-800: #343634;
    --colour-greyscale-900: #1d1d1b;
    --colour-greyscale-1000: #000000;
    --space-xxxs: 0.25rem;
    --space-xxs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 2.5rem;
    --space-xxl: 3rem;
    --space-xxxl: 4.5rem;
    --content-width: 89rem;
    --content-width-narrow: 40rem;
    --border-radius-sm: 0.125rem;
    --border-radius-lg: 0.25rem;
    --font-family-productive: 'Nunito Sans', arial, sans-serif;
    --font-family-expressive: 'ABC Otto', serif;
    --letter-spacing-normal-productive: 0.01250rem;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-700: 700;
    --font-size-0-6: 0.75rem;
    --font-size-0-8: 0.875rem;
    --font-size-1: 1rem;
    --font-size-2: 1.25rem;
    --font-size-3: 1.5rem;
    --font-size-4: 2rem;
    --font-size-5: 2.5rem;
    --font-size-6: 3rem;
    --line-height-0-6: 0.875rem;
    --line-height-0-8: 1.0625rem;
    --line-height-1: 1.375rem;
    --line-height-2: 1.725rem;
    --line-height-3: 2.0625rem;
    --line-height-4: 2.625rem;
    --line-height-5: 3.45rem;
    --line-height-6: 3.625rem;
    --animation-duration: 0.25s;
    --animation-fn: ease-out;
    --form-field-vertical-padding: 0.5625rem;
    --focus-box-shadow: 0 0 0 0.125rem var(--colour-greyscale-1000), 0 0 0 0.375rem var(--colour-yellow-500);
}


/* ---- */
/* Page */
/* ---- */
body {
    font-family: var(--font-family-productive);
    font-size: var(--font-size-1);
    font-style: normal;
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-1);
    color: var(--colour-greyscale-800);
    background-color: var(--colour-greyscale-100);
}

* {
    box-sizing: border-box !important;
}

*:not(dialog) {
    margin: 0;
}

*:focus,
*:focus-visible {
    outline: none !important;
}

*:focus-visible {
    box-shadow: var(--focus-box-shadow);
}

[x-cloak] {
    display: none !important;
}

.lg-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    max-width: var(--content-width);
}

.lg-container--narrow {
    max-width: var(--content-width-narrow);
}

.lg-footer-links {
    flex: 1 1 0;
    font-size: var(--font-size-0-6);
    line-height: var(--line-height-0-6);

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        list-style: none;
    }

    li {
        padding-right: var(--space-xs);
    }

    li:not(:first-child) {
        padding-left: var(--space-xs);
        border-left: 1px solid var(--colour-greyscale-200);
    }

    a {
        color: var(--colour-greyscale-800);
        text-decoration: none;

        &:hover {
            border-bottom: 1px solid var(--colour-greyscale-800);
        }
    }
}

.lg-footer-logo {
    flex: 0 0 max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-size-0-6);
    line-height: var(--line-height-0-6);

    img {
        width: 7.25rem;
        height: 7.25rem;
    }
}


/* ---------- */
/* Typography */
/* ---------- */
h1 {
    font-family: var(--font-family-expressive);
    font-weight: var(--font-weight-500);
    font-size: var(--font-size-6);
    line-height: var(--line-height-6);
}

h2 {
    font-family: var(--font-family-expressive);
    font-weight: var(--font-weight-500);
    font-size: var(--font-size-4);
    line-height: var(--line-height-4);
}

h3 {
    font-family: var(--font-family-productive);
    font-weight: var(--font-weight-300);
    font-size: var(--font-size-4);
    line-height: var(--line-height-4);
}

.text-subtle {
    font-family: var(--font-family-productive);
    font-weight: var(--font-weight-400);
    font-size: var(--font-size-0-8);
    line-height: var(--line-height-0-8);
}


/* ------- */
/* Buttons */
/* ------- */
.lg-btn {
    padding: var(--form-field-vertical-padding) 1.1875rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-spacing-normal-productive);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--animation-duration) var(--animation-fn);
}

.lg-btn--primary {
    color: var(--colour-greyscale-0);
    background-color: var(--colour-blue-600);
    border-color: var(--colour-blue-600);
}

.lg-btn--primary:not([disabled]):hover {
    color: var(--colour-greyscale-0);
    background-color: var(--colour-blue-800);
    border-color: var(--colour-blue-800);
}

.lg-btn--primary:not([disabled]):active {
    color: var(--colour-greyscale-0);
    background-color: var(--colour-blue-1000);
    border-color: var(--colour-blue-1000);
}

.lg-btn--secondary {
    color: var(--colour-greyscale-800);
    background-color: transparent;
    border-color: var(--colour-greyscale-800);
}

.lg-btn--secondary:not([disabled]):hover {
    color: var(--colour-greyscale-800);
    background-color: var(--colour-greyscale-200);
    border-color: var(--colour-greyscale-800);
}

.lg-btn--secondary:not([disabled]):active {
    color: var(--colour-greyscale-0);
    background-color: var(--colour-greyscale-800);
    border-color: var(--colour-greyscale-800);
}

.lg-btn[disabled] {
    color: var(--colour-greyscale-500);
    background-color: var(--colour-greyscale-200);
    border-color: var(--colour-greyscale-200);
    cursor: not-allowed;
}

/* Children of the button must be in another container for this to work (e.g. text should be in a span). */
.lg-btn--loading {
    position: relative;
    pointer-events: none;
}

.lg-btn--loading > * {
    opacity: 0; /* hide elements, but keep them in DOM so that the button size doesn't change */
}

.lg-btn--loading::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    border: 0.1875em solid currentColor;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: lg-btn--loading--spin 800ms infinite linear;
}

@keyframes lg-btn--loading--spin {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

.lg-link {
    padding: 0;
    color: var(--link-color, var(--colour-blue-600));
    background: transparent;
    border: 0;
    border-bottom: 0.125rem solid var(--link-color, var(--colour-blue-600));
    font-family: var(--font-family-productive);
    font-size: var(--font-size-1);
    font-style: normal;
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-1);
    cursor: pointer;
    text-decoration: none;
}

.lg-link.lg-btn--loading {
    border-bottom-color: transparent;
    cursor: default;
}

.lg-link:hover {
    color: var(--link-color, var(--colour-blue-700));
    border-bottom-color: var(--link-color, var(--colour-blue-700));
    /* box-shadow: inset 0 -0.063rem 0 0 var(--link-color, var(--colour-blue-700)), 0 0.188rem 0 0 var(--link-color, var(--colour-blue-700)); */
}

.lg-btn-group {
    display: flex;
    gap: var(--space-sm);
}


/* ------ */
/* Inputs */
/* ------ */
.lg-input,
.lg-select,
.lg-input-group,
.lg-segment-group {
    padding: var(--form-field-vertical-padding) var(--space-sm);
    background: var(--colour-greyscale-0);
    border: 1px solid var(--colour-greyscale-600);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-productive);
    font-size: var(--font-size-1);
    font-style: normal;
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-spacing-normal-productive);
    min-width: 0;
}

.lg-input:disabled,
.lg-select:disabled {
    background-color: var(--colour-greyscale-100);
    border-color: var(--colour-greyscale-200);
    color: var(--colour-greyscale-500);
}

:is(.lg-input, .lg-select):is(:user-invalid, .is-invalid),
.lg-input-group:has(:is(.lg-input, .lg-select):is(:user-invalid, .is-invalid)) {
    border-color: var(--colour-red-500);
    color: var(--colour-red-700);
}

.lg-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: calc(var(--space-sm) + 18px + var(--space-xxs));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%237a7b7b' fill-rule='evenodd' d='m16 20.266 9.293-8.983a1.025 1.025 0 0 1 1.414 0c.39.378.39.99 0 1.367L16 23 5.293 12.65a.944.944 0 0 1 0-1.367 1.025 1.025 0 0 1 1.414 0z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 18px;
    background-position: right var(--space-sm) top 50%;
    background-repeat: no-repeat;
}

.lg-select:is(:user-invalid, .is-invalid) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23e2223e' fill-rule='evenodd' d='m16 20.266 9.293-8.983a1.025 1.025 0 0 1 1.414 0c.39.378.39.99 0 1.367L16 23 5.293 12.65a.944.944 0 0 1 0-1.367 1.025 1.025 0 0 1 1.414 0z'%3E%3C/path%3E%3C/svg%3E");
}

.lg-radio-button {
    position: relative;
    font-weight: var(--font-weight-400) !important;
    padding-left: calc(var(--space-xxs) + 1rem);
}

.lg-radio-button > input[type="radio"],
.lg-checkbox > input[type="checkbox"],
.lg-segment-button > label > input[type="radio"] {
    /* Do not use display: none or visibility: hidden as these remove the input from the tab stops */
    position: absolute;
    left: -9999px;
}

.lg-radio-button::before,
.lg-radio-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-sizing: border-box;
}

.lg-radio-button::before {
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--colour-greyscale-600);
    background-color: var(--colour-greyscale-0);
    margin: auto 0;
}

.lg-radio-button::after {
    width: 0.5rem;
    height: 0.5rem;
    margin: auto 0.25rem;
}

.lg-radio-button:has(input[type="radio"]:checked)::after {
    background-color: var(--colour-blue-600);
}

.lg-radio-button:has(input[type="radio"]:focus-visible)::before {
    box-shadow: var(--focus-box-shadow);
}

.lg-checkbox {
    --lg-checkbox-size: var(--space-md);
    position: relative;
    font-weight: var(--font-weight-400) !important;
    padding-left: calc(var(--space-xxs) + var(--lg-checkbox-size));
}

.lg-checkbox::before,
.lg-checkbox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--lg-checkbox-size);
    height: var(--lg-checkbox-size);
}

.lg-checkbox::before {
    border: 1px solid var(--colour-greyscale-600);
    background-color: var(--colour-greyscale-0);
    box-sizing: border-box;
}

.lg-checkbox:has(input[type="checkbox"]:checked)::after {
    background-color: var(--colour-blue-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M21.698 8.256 14.672 20.55l-4.611-4.612a1.5 1.5 0 0 0-2.122 2.122l7.389 7.388 8.974-15.705a1.5 1.5 0 1 0-2.604-1.488z'%3E%3C/path%3E%3C/svg%3E");
    background-size: calc(var(--lg-checkbox-size) * 0.775);
    background-position: center;
    background-repeat: no-repeat;
}

.lg-checkbox:has(input[type="checkbox"]:focus-visible)::before {
    box-shadow: var(--focus-box-shadow);
}

.lg-segment-group {
    display: flex;
    border: 1px solid var(--colour-greyscale-500);
    padding: 0;
}

.lg-segment-group > .lg-segment-button {
    flex: 1 1 0;
    margin: var(--space-xxxs) 0;
    padding: 0 var(--space-xxxs);
}

.lg-segment-group > .lg-segment-button:not(:first-child) {
    border-left: 1px solid var(--colour-greyscale-200);
}

.lg-segment-button > label {
    display: flex;
    justify-content: center;
    padding: var(--space-xxxs);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--animation-duration) var(--animation-fn), color var(--animation-duration) var(--animation-fn);
}

.lg-segment-button > label:has(input[type="radio"]:focus-visible) {
    box-shadow: var(--focus-box-shadow);
}

.lg-segment-button > label:has(input[type="radio"]:checked) {
    color: var(--colour-greyscale-0);
    background-color: var(--colour-blue-600);
}


/* ------------ */
/* Input groups */
/* ------------ */
.lg-input-group {
    display: flex;
    padding: 0;
    gap: var(--space-sm);
}

.lg-input-group > :is(.lg-input, .lg-select) {
    flex: 1 1 0;
    border: none;
}

.lg-input-group > span {
    flex: 0 0 max-content;
    padding: var(--form-field-vertical-padding) var(--space-sm);
    white-space: nowrap;
}

.lg-input-group > :not(.lg-btn):not(:first-child) {
    padding-left: 0;
}

.lg-input-group > :not(.lg-btn):not(:last-child) {
    padding-right: 0;
}

.lg-input-group > .lg-btn {
    margin: auto 0.3125rem;
    padding-top: calc(var(--form-field-vertical-padding) - 0.3125rem);
    padding-bottom: calc(var(--form-field-vertical-padding) - 0.3125rem);
    height: 2rem;
}

/* Redirect focus highlight to group instead of form control */
.lg-input-group > :is(.lg-input, .lg-select):focus-visible {
    box-shadow: none;
}

.lg-input-group:has(:is(.lg-input, .lg-select):focus-visible) {
    box-shadow: var(--focus-box-shadow);
}

.lg-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.lg-form-group > label:first-child {
    font-weight: var(--font-weight-700);
    margin-bottom: calc(-1 * var(--space-xxxs));
}

.lg-form-group > .lg-hint {
    display: block;
    color: var(--colour-greyscale-700);
}

.lg-label-mandatory::before {
    content: "*";
    color: var(--colour-red-600);
    margin-right: var(--space-xxxs);
}

.validation-summary-errors > ul {
    list-style: none;
    padding: 0;
}


/* ----- */
/* Modal */
/* ----- */
.lg-modal {
    flex-direction: column;
    max-width: calc(min(72rem, 100vw - var(--space-xxl)));
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-lg);
    background-color: var(--colour-greyscale-0);
    color: var(--colour-greyscale-800);

    &:open {
        display: flex;
    }
}

.lg-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

body:has(.lg-modal:open) {
    overflow: hidden;
}

.lg-modal-header {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--colour-greyscale-200);
}

.lg-modal-header > h2 {
    margin: 0;
    font-family: var(--font-family-productive);
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    font-weight: var(--font-weight-400);
}

.lg-modal-header > .lg-modal-header-close {
    margin-left: auto;
    background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path id="lg-icon-24" d="m17.414 16 5.657 5.657a1 1 0 0 1-1.414 1.414L16 17.414l-5.657 5.657a1 1 0 0 1-1.414-1.414L14.586 16l-5.657-5.657a1 1 0 0 1 1.414-1.414L16 14.586l5.657-5.657a1 1 0 0 1 1.414 1.414z"></path></svg>');
    width: 30px;
    height: 30px;
    border: 0;
    cursor: pointer;
}

.lg-modal-content {
    padding: var(--space-md);
    overflow-y: auto;
}

.lg-modal-footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--colour-greyscale-200);
}


/* ------ */
/* Header */
/* ------ */
.lg-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 5.5rem;
    padding: 0 var(--space-lg);
    background-color: var(--colour-greyscale-0);
    border-bottom: 1px solid var(--colour-greyscale-200);
}

.lg-header img {
    margin: var(--space-sm) 0;
}

.lg-header nav {
    display: flex;
    gap: var(--space-lg);
}

.lg-header nav:last-child {
    padding-left: var(--space-sm);
    border-left: 1px solid var(--colour-greyscale-200);
}

.lg-header nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lg-header nav > ul > li {
    margin: 0 var(--space-xxs);
}

.lg-header nav > ul > li :is(a, button) {
    position: relative;
    display: block;
    padding: var(--space-xxs) var(--space-sm);
    border: none;
    background: transparent;
    color: var(--colour-greyscale-800);
    text-decoration: none;
    cursor: pointer;
}

.lg-header nav > ul > li :is(a, button)::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0.188rem;
    right: 0.188rem;
    border-radius: 999px;
}

.lg-header nav > ul > li :is(a, button):hover::after {
    height: 0.125rem;
    background-color: var(--colour-blue-600);
}

.lg-header nav > ul > li :is(a, button).active {
    font-weight: var(--font-weight-700);
}

.lg-header nav > ul > li :is(a, button).active::after {
    height: 0.25rem;
    background-color: var(--colour-blue-600);
}


/* ------ */
/* Tables */
/* ------ */
.lg-table {
    width: 100%;
    border-collapse: collapse;
}

.lg-table thead tr:last-child th {
    background-color: var(--colour-greyscale-0);
    border-bottom: 0.125rem solid var(--colour-greyscale-800);
    text-align: left;
}

.lg-table tbody tr:nth-child(odd) {
    background-color: var(--colour-greyscale-100);
}

.lg-table tbody tr:nth-child(even) {
    background-color: var(--colour-greyscale-0);
}

.lg-table th,
.lg-table td {
    padding: var(--space-xs);
}


/* ------------------------ */
/* Alert / input validation */
/* ------------------------ */
.lg-alert {
    display: block;
    padding: var(--space-xs);
}

.lg-alert:empty {
    display: none;
}

.lg-alert--info {
    color: var(--colour-blue-700);
    background-color: var(--colour-blue-100);
    --link-color: var(--colour-blue-700);
}

.lg-alert--success {
    color: var(--colour-green-700);
    background-color: var(--colour-green-100);
    --link-color: var(--colour-green-700);
}

.lg-alert--warning {
    color: var(--colour-yellow-900);
    background-color: var(--colour-yellow-100);
    --link-color: var(--colour-yellow-900);
}

.lg-alert--error {
    color: var(--colour-red-700);
    background-color: var(--colour-red-100);
    --link-color: var(--colour-red-700);
}

.lg-alert--icon {
    padding-left: calc(var(--space-xs) + 20px + var(--space-xxs));
    background-size: 20px;
    background-position: var(--space-xs) var(--space-xs);
    background-repeat: no-repeat;
}

.lg-alert--icon.lg-alert--info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23003894' fill-rule='evenodd' d='M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4m0 10a1.5 1.5 0 0 0-1.493 1.356l-.007.144v6a1.5 1.5 0 0 0 2.993.144l.007-.144v-6A1.5 1.5 0 0 0 16 14m0-5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3'%3E%3C/path%3E%3C/svg%3E");
}

.lg-alert--icon.lg-alert--success {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23014a39' fill-rule='evenodd' d='M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4m4.143 6.486L14.8 19.387l-3.094-3.094a1 1 0 0 0-1.414 1.414l4.906 4.906 6.658-11.099a1 1 0 0 0-1.714-1.028z'%3E%3C/path%3E%3C/svg%3E");
}

.lg-alert--icon.lg-alert--warning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23904029' fill-rule='evenodd' d='M17.181 4.331c.31.189.571.449.76.759l10.727 19.46a2.267 2.267 0 0 1-1.94 3.45H5.271a2.27 2.27 0 0 1-1.94-3.449L14.058 5.09a2.274 2.274 0 0 1 3.122-.759zM16 21.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m0-11a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-6a1.5 1.5 0 0 0-1.5-1.5'%3E%3C/path%3E%3C/svg%3E");
}

.lg-alert--icon.lg-alert--error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ad092a' fill-rule='evenodd' d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12m-4.243-17.657L16 14.586l4.243-4.243a1 1 0 1 1 1.414 1.414L17.414 16l4.243 4.243a1 1 0 1 1-1.414 1.414L16 17.414l-4.243 4.243a1 1 0 1 1-1.414-1.414L14.586 16l-4.243-4.243a1 1 0 1 1 1.414-1.414'%3E%3C/path%3E%3C/svg%3E");
}


/* --------- */
/* Accordion */
/* --------- */
.lg-accordion-item {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--colour-greyscale-200);
    background: var(--colour-greyscale-0);
}

.lg-accordion-item > input {
    width: 0;
    height: 0;
}

.lg-accordion-header {
    --icon-size: 24px;
    position: relative;
    display: block;
    padding: var(--space-sm);
    padding-left: calc(var(--space-sm) + var(--icon-size) + var(--space-xs));
    font-weight: var(--font-weight-700);
}

.lg-accordion-header::before {
    display: block;
    position: absolute;
    left: var(--space-sm);
    top: 50%;
    width: var(--icon-size);
    height: var(--icon-size);
    background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path id="lg-icon-12" d="m16 20.266 9.293-8.983a1.025 1.025 0 0 1 1.414 0c.39.378.39.99 0 1.367L16 23 5.293 12.65a.944.944 0 0 1 0-1.367 1.025 1.025 0 0 1 1.414 0z"></path></svg>');
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform var(--animation-duration) var(--animation-fn);
}

.lg-accordion-item.open > .lg-accordion-header::before,
.lg-accordion-item:has(> input:checked) > .lg-accordion-header::before {
    transform: translateY(-50%) scaleY(-1);
}

.lg-accordion-content {
    padding: var(--space-sm);
}

.lg-accordion-item:not(.open):not(:has(> input:checked)) > .lg-accordion-content {
    display: none;
}


/*-------- */
/* Loading */
/* ------- */
.lg-loading {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 0.1875em solid currentColor;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: lg-loading--spin 800ms infinite linear;
}

@keyframes lg-loading--spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(1turn); }
}

.lg-skeleton {
    --skeleton-color: var(--colour-greyscale-200);
    --skeleton-shimmer-color: var(--colour-greyscale-0);
    position: relative;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(var(--skeleton-color) calc(100% - 0.063em), transparent 0);
    color: transparent;
}

.lg-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    animation: lg-skeleton--shimmer 2.5s infinite;
    background-image: linear-gradient(-75deg, transparent 30%, var(--skeleton-shimmer-color) 50%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 100vw 100%;
}

.lg-skeleton.lg-skeleton--blue {
    --skeleton-color: var(--colour-blue-200);
    --skeleton-shimmer-color: var(--colour-blue-0);
}

@keyframes lg-skeleton--shimmer {
    0% {
        background-position: -100vw 0;
    }
    100% {
        background-position: 100vw 0;
    }
}


/* ------- */
/* Utility */
/* ------- */
.w-100 { width: 100% !important; }
.w-min-content { width: min-content !important; }
.w-max-content { width: max-content !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-contents { display: contents !important; }
.position-relative { position: relative !important; }
.align-items-start { align-items: start !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.align-items-end { align-items: end !important; }
.align-self-start { align-self: start !important; }
.align-self-center { align-self: center !important; }
.align-self-stretch { align-self: stretch !important; }
.align-self-end { align-self: end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-stretch { justify-content: stretch !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-0 { flex: 0 0 0 !important; }
.flex-1 { flex: 1 1 0 !important; }
.flex-2 { flex: 2 2 0 !important; }
.flex-3 { flex: 3 3 0 !important; }
.d-grid { display: grid !important; }
.grid-cell-1 { grid-row: 1 !important; grid-column: 1 !important; }

.fw-bold { font-weight: var(--font-weight-700) !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-tabular-nums { font-variant-numeric: tabular-nums !important; }

.m-0 { margin: 0 !important; }
.m-xxxs { margin: var(--space-xxxs) !important; }
.m-xxs { margin: var(--space-xxs) !important; }
.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.m-lg { margin: var(--space-lg) !important; }
.m-xl { margin: var(--space-xl) !important; }
.m-xxl { margin: var(--space-xxl) !important; }
.m-xxxl { margin: var(--space-xxxl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-xxxs { margin-top: var(--space-xxxs) !important; }
.mt-xxs { margin-top: var(--space-xxs) !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-xxl { margin-top: var(--space-xxl) !important; }
.mt-xxxl { margin-top: var(--space-xxxl) !important; }

.me-0 { margin-right: 0 !important; }
.me-xxxs { margin-right: var(--space-xxxs) !important; }
.me-xxs { margin-right: var(--space-xxs) !important; }
.me-xs { margin-right: var(--space-xs) !important; }
.me-sm { margin-right: var(--space-sm) !important; }
.me-md { margin-right: var(--space-md) !important; }
.me-lg { margin-right: var(--space-lg) !important; }
.me-xl { margin-right: var(--space-xl) !important; }
.me-xxl { margin-right: var(--space-xxl) !important; }
.me-xxxl { margin-right: var(--space-xxxl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-xxxs { margin-bottom: var(--space-xxxs) !important; }
.mb-xxs { margin-bottom: var(--space-xxs) !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mb-xxl { margin-bottom: var(--space-xxl) !important; }
.mb-xxxl { margin-bottom: var(--space-xxxl) !important; }

.ms-0 { margin-left: 0 !important; }
.ms-xxxs { margin-left: var(--space-xxxs) !important; }
.ms-xxs { margin-left: var(--space-xxs) !important; }
.ms-xs { margin-left: var(--space-xs) !important; }
.ms-sm { margin-left: var(--space-sm) !important; }
.ms-md { margin-left: var(--space-md) !important; }
.ms-lg { margin-left: var(--space-lg) !important; }
.ms-xl { margin-left: var(--space-xl) !important; }
.ms-xxl { margin-left: var(--space-xxl) !important; }
.ms-xxxl { margin-left: var(--space-xxxl) !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xxxs { margin-left: var(--space-xxxs) !important; margin-right: var(--space-xxxs) !important; }
.mx-xxs { margin-left: var(--space-xxs) !important; margin-right: var(--space-xxs) !important; }
.mx-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.mx-sm { margin-left: var(--space-sm) !important; margin-right: var(--space-sm) !important; }
.mx-md { margin-left: var(--space-md) !important; margin-right: var(--space-md) !important; }
.mx-lg { margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; }
.mx-xl { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.mx-xxl { margin-left: var(--space-xxl) !important; margin-right: var(--space-xxl) !important; }
.mx-xxxl { margin-left: var(--space-xxxl) !important; margin-right: var(--space-xxxl) !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xxxs { margin-top: var(--space-xxxs) !important; margin-bottom: var(--space-xxxs) !important; }
.my-xxs { margin-top: var(--space-xxs) !important; margin-bottom: var(--space-xxs) !important; }
.my-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.my-sm { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }
.my-md { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-lg { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-xl { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
.my-xxl { margin-top: var(--space-xxl) !important; margin-bottom: var(--space-xxl) !important; }
.my-xxxl { margin-top: var(--space-xxxl) !important; margin-bottom: var(--space-xxxl) !important; }


.p-0 { padding: 0 !important; }
.p-xxxs { padding: var(--space-xxxs) !important; }
.p-xxs { padding: var(--space-xxs) !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }
.p-xxl { padding: var(--space-xxl) !important; }
.p-xxxl { padding: var(--space-xxxl) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-xxxs { padding-top: var(--space-xxxs) !important; }
.pt-xxs { padding-top: var(--space-xxs) !important; }
.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }
.pt-xxl { padding-top: var(--space-xxl) !important; }
.pt-xxxl { padding-top: var(--space-xxxl) !important; }

.pe-0 { padding-right: 0 !important; }
.pe-xxxs { padding-right: var(--space-xxxs) !important; }
.pe-xxs { padding-right: var(--space-xxs) !important; }
.pe-xs { padding-right: var(--space-xs) !important; }
.pe-sm { padding-right: var(--space-sm) !important; }
.pe-md { padding-right: var(--space-md) !important; }
.pe-lg { padding-right: var(--space-lg) !important; }
.pe-xl { padding-right: var(--space-xl) !important; }
.pe-xxl { padding-right: var(--space-xxl) !important; }
.pe-xxxl { padding-right: var(--space-xxxl) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-xxxs { padding-bottom: var(--space-xxxs) !important; }
.pb-xxs { padding-bottom: var(--space-xxs) !important; }
.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }
.pb-xxl { padding-bottom: var(--space-xxl) !important; }
.pb-xxxl { padding-bottom: var(--space-xxxl) !important; }

.ps-0 { padding-left: 0 !important; }
.ps-xxxs { padding-left: var(--space-xxxs) !important; }
.ps-xxs { padding-left: var(--space-xxs) !important; }
.ps-xs { padding-left: var(--space-xs) !important; }
.ps-sm { padding-left: var(--space-sm) !important; }
.ps-md { padding-left: var(--space-md) !important; }
.ps-lg { padding-left: var(--space-lg) !important; }
.ps-xl { padding-left: var(--space-xl) !important; }
.ps-xxl { padding-left: var(--space-xxl) !important; }
.ps-xxxl { padding-left: var(--space-xxxl) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xxxs { padding-left: var(--space-xxxs) !important; padding-right: var(--space-xxxs) !important; }
.px-xxs { padding-left: var(--space-xxs) !important; padding-right: var(--space-xxs) !important; }
.px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.px-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.px-xxl { padding-left: var(--space-xxl) !important; padding-right: var(--space-xxl) !important; }
.px-xxxl { padding-left: var(--space-xxxl) !important; padding-right: var(--space-xxxl) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xxxs { padding-top: var(--space-xxxs) !important; padding-bottom: var(--space-xxxs) !important; }
.py-xxs { padding-top: var(--space-xxs) !important; padding-bottom: var(--space-xxs) !important; }
.py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.py-xxl { padding-top: var(--space-xxl) !important; padding-bottom: var(--space-xxl) !important; }
.py-xxxl { padding-top: var(--space-xxxl) !important; padding-bottom: var(--space-xxxl) !important; }


.gap-0 { gap: 0 !important; }
.gap-xxxs { gap: var(--space-xxxs) !important; }
.gap-xxs { gap: var(--space-xxs) !important; }
.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }
.gap-xxl { gap: var(--space-xxl) !important; }
.gap-xxxl { gap: var(--space-xxxl) !important; }


.text-blue-0 { color: var(--colour-blue-0) !important; }
.text-blue-100 { color: var(--colour-blue-100) !important; }
.text-blue-200 { color: var(--colour-blue-200) !important; }
.text-blue-300 { color: var(--colour-blue-300) !important; }
.text-blue-400 { color: var(--colour-blue-400) !important; }
.text-blue-500 { color: var(--colour-blue-500) !important; }
.text-blue-600 { color: var(--colour-blue-600) !important; }
.text-blue-700 { color: var(--colour-blue-700) !important; }
.text-blue-800 { color: var(--colour-blue-800) !important; }
.text-blue-900 { color: var(--colour-blue-900) !important; }
.text-blue-1000 { color: var(--colour-blue-1000) !important; }
.text-green-0 { color: var(--colour-green-0) !important; }
.text-green-100 { color: var(--colour-green-100) !important; }
.text-green-200 { color: var(--colour-green-200) !important; }
.text-green-300 { color: var(--colour-green-300) !important; }
.text-green-400 { color: var(--colour-green-400) !important; }
.text-green-500 { color: var(--colour-green-500) !important; }
.text-green-600 { color: var(--colour-green-600) !important; }
.text-green-700 { color: var(--colour-green-700) !important; }
.text-green-800 { color: var(--colour-green-800) !important; }
.text-green-900 { color: var(--colour-green-900) !important; }
.text-green-1000 { color: var(--colour-green-1000) !important; }
.text-red-0 { color: var(--colour-red-0) !important; }
.text-red-100 { color: var(--colour-red-100) !important; }
.text-red-200 { color: var(--colour-red-200) !important; }
.text-red-300 { color: var(--colour-red-300) !important; }
.text-red-400 { color: var(--colour-red-400) !important; }
.text-red-500 { color: var(--colour-red-500) !important; }
.text-red-600 { color: var(--colour-red-600) !important; }
.text-red-700 { color: var(--colour-red-700) !important; }
.text-red-800 { color: var(--colour-red-800) !important; }
.text-red-900 { color: var(--colour-red-900) !important; }
.text-red-1000 { color: var(--colour-red-1000) !important; }
.text-yellow-0 { color: var(--colour-yellow-0) !important; }
.text-yellow-100 { color: var(--colour-yellow-100) !important; }
.text-yellow-200 { color: var(--colour-yellow-200) !important; }
.text-yellow-300 { color: var(--colour-yellow-300) !important; }
.text-yellow-400 { color: var(--colour-yellow-400) !important; }
.text-yellow-500 { color: var(--colour-yellow-500) !important; }
.text-yellow-600 { color: var(--colour-yellow-600) !important; }
.text-yellow-700 { color: var(--colour-yellow-700) !important; }
.text-yellow-800 { color: var(--colour-yellow-800) !important; }
.text-yellow-900 { color: var(--colour-yellow-900) !important; }
.text-yellow-1000 { color: var(--colour-yellow-1000) !important; }
.text-greyscale-0 { color: var(--colour-greyscale-0) !important; }
.text-greyscale-100 { color: var(--colour-greyscale-100) !important; }
.text-greyscale-200 { color: var(--colour-greyscale-200) !important; }
.text-greyscale-300 { color: var(--colour-greyscale-300) !important; }
.text-greyscale-400 { color: var(--colour-greyscale-400) !important; }
.text-greyscale-500 { color: var(--colour-greyscale-500) !important; }
.text-greyscale-600 { color: var(--colour-greyscale-600) !important; }
.text-greyscale-700 { color: var(--colour-greyscale-700) !important; }
.text-greyscale-800 { color: var(--colour-greyscale-800) !important; }
.text-greyscale-900 { color: var(--colour-greyscale-900) !important; }
.text-greyscale-1000 { color: var(--colour-greyscale-1000) !important; }


.bg-blue-0 { background-color: var(--colour-blue-0) !important; }
.bg-blue-100 { background-color: var(--colour-blue-100) !important; }
.bg-blue-200 { background-color: var(--colour-blue-200) !important; }
.bg-blue-300 { background-color: var(--colour-blue-300) !important; }
.bg-blue-400 { background-color: var(--colour-blue-400) !important; }
.bg-blue-500 { background-color: var(--colour-blue-500) !important; }
.bg-blue-600 { background-color: var(--colour-blue-600) !important; }
.bg-blue-700 { background-color: var(--colour-blue-700) !important; }
.bg-blue-800 { background-color: var(--colour-blue-800) !important; }
.bg-blue-900 { background-color: var(--colour-blue-900) !important; }
.bg-blue-1000 { background-color: var(--colour-blue-1000) !important; }
.bg-green-0 { background-color: var(--colour-green-0) !important; }
.bg-green-100 { background-color: var(--colour-green-100) !important; }
.bg-green-200 { background-color: var(--colour-green-200) !important; }
.bg-green-300 { background-color: var(--colour-green-300) !important; }
.bg-green-400 { background-color: var(--colour-green-400) !important; }
.bg-green-500 { background-color: var(--colour-green-500) !important; }
.bg-green-600 { background-color: var(--colour-green-600) !important; }
.bg-green-700 { background-color: var(--colour-green-700) !important; }
.bg-green-800 { background-color: var(--colour-green-800) !important; }
.bg-green-900 { background-color: var(--colour-green-900) !important; }
.bg-green-1000 { background-color: var(--colour-green-1000) !important; }
.bg-red-0 { background-color: var(--colour-red-0) !important; }
.bg-red-100 { background-color: var(--colour-red-100) !important; }
.bg-red-200 { background-color: var(--colour-red-200) !important; }
.bg-red-300 { background-color: var(--colour-red-300) !important; }
.bg-red-400 { background-color: var(--colour-red-400) !important; }
.bg-red-500 { background-color: var(--colour-red-500) !important; }
.bg-red-600 { background-color: var(--colour-red-600) !important; }
.bg-red-700 { background-color: var(--colour-red-700) !important; }
.bg-red-800 { background-color: var(--colour-red-800) !important; }
.bg-red-900 { background-color: var(--colour-red-900) !important; }
.bg-red-1000 { background-color: var(--colour-red-1000) !important; }
.bg-yellow-0 { background-color: var(--colour-yellow-0) !important; }
.bg-yellow-100 { background-color: var(--colour-yellow-100) !important; }
.bg-yellow-200 { background-color: var(--colour-yellow-200) !important; }
.bg-yellow-300 { background-color: var(--colour-yellow-300) !important; }
.bg-yellow-400 { background-color: var(--colour-yellow-400) !important; }
.bg-yellow-500 { background-color: var(--colour-yellow-500) !important; }
.bg-yellow-600 { background-color: var(--colour-yellow-600) !important; }
.bg-yellow-700 { background-color: var(--colour-yellow-700) !important; }
.bg-yellow-800 { background-color: var(--colour-yellow-800) !important; }
.bg-yellow-900 { background-color: var(--colour-yellow-900) !important; }
.bg-yellow-1000 { background-color: var(--colour-yellow-1000) !important; }
.bg-greyscale-0 { background-color: var(--colour-greyscale-0) !important; }
.bg-greyscale-100 { background-color: var(--colour-greyscale-100) !important; }
.bg-greyscale-200 { background-color: var(--colour-greyscale-200) !important; }
.bg-greyscale-300 { background-color: var(--colour-greyscale-300) !important; }
.bg-greyscale-400 { background-color: var(--colour-greyscale-400) !important; }
.bg-greyscale-500 { background-color: var(--colour-greyscale-500) !important; }
.bg-greyscale-600 { background-color: var(--colour-greyscale-600) !important; }
.bg-greyscale-700 { background-color: var(--colour-greyscale-700) !important; }
.bg-greyscale-800 { background-color: var(--colour-greyscale-800) !important; }
.bg-greyscale-900 { background-color: var(--colour-greyscale-900) !important; }
.bg-greyscale-1000 { background-color: var(--colour-greyscale-1000) !important; }


.border { border: var(--border-width, 1px) solid var(--border-color, var(--colour-greyscale-200)) !important; }
.border-top { border-top: var(--border-width, 1px) solid var(--border-color, var(--colour-greyscale-200)) !important; }
.border-right { border-right: var(--border-width, 1px) solid var(--border-color, var(--colour-greyscale-200)) !important; }
.border-bottom { border-bottom: var(--border-width, 1px) solid var(--border-color, var(--colour-greyscale-200)) !important; }
.border-left { border-left: var(--border-width, 1px) solid var(--border-color, var(--colour-greyscale-200)) !important; }
.border-0 { border: 0 !important; }
.border-1 { --border-width: 1px; }
.border-2 { --border-width: 2px; }
.border-blue-0 { border-color: var(--colour-blue-0) !important; }
.border-blue-100 { --border-color: var(--colour-blue-100); }
.border-blue-200 { --border-color: var(--colour-blue-200); }
.border-blue-300 { --border-color: var(--colour-blue-300); }
.border-blue-400 { --border-color: var(--colour-blue-400); }
.border-blue-500 { --border-color: var(--colour-blue-500); }
.border-blue-600 { --border-color: var(--colour-blue-600); }
.border-blue-700 { --border-color: var(--colour-blue-700); }
.border-blue-800 { --border-color: var(--colour-blue-800); }
.border-blue-900 { --border-color: var(--colour-blue-900); }
.border-blue-1000 { --border-color: var(--colour-blue-1000); }
.border-green-0 { --border-color: var(--colour-green-0); }
.border-green-100 { --border-color: var(--colour-green-100); }
.border-green-200 { --border-color: var(--colour-green-200); }
.border-green-300 { --border-color: var(--colour-green-300); }
.border-green-400 { --border-color: var(--colour-green-400); }
.border-green-500 { --border-color: var(--colour-green-500); }
.border-green-600 { --border-color: var(--colour-green-600); }
.border-green-700 { --border-color: var(--colour-green-700); }
.border-green-800 { --border-color: var(--colour-green-800); }
.border-green-900 { --border-color: var(--colour-green-900); }
.border-green-1000 { --border-color: var(--colour-green-1000); }
.border-red-0 { --border-color: var(--colour-red-0); }
.border-red-100 { --border-color: var(--colour-red-100); }
.border-red-200 { --border-color: var(--colour-red-200); }
.border-red-300 { --border-color: var(--colour-red-300); }
.border-red-400 { --border-color: var(--colour-red-400); }
.border-red-500 { --border-color: var(--colour-red-500); }
.border-red-600 { --border-color: var(--colour-red-600); }
.border-red-700 { --border-color: var(--colour-red-700); }
.border-red-800 { --border-color: var(--colour-red-800); }
.border-red-900 { --border-color: var(--colour-red-900); }
.border-red-1000 { --border-color: var(--colour-red-1000); }
.border-yellow-0 { --border-color: var(--colour-yellow-0); }
.border-yellow-100 { --border-color: var(--colour-yellow-100); }
.border-yellow-200 { --border-color: var(--colour-yellow-200); }
.border-yellow-300 { --border-color: var(--colour-yellow-300); }
.border-yellow-400 { --border-color: var(--colour-yellow-400); }
.border-yellow-500 { --border-color: var(--colour-yellow-500); }
.border-yellow-600 { --border-color: var(--colour-yellow-600); }
.border-yellow-700 { --border-color: var(--colour-yellow-700); }
.border-yellow-800 { --border-color: var(--colour-yellow-800); }
.border-yellow-900 { --border-color: var(--colour-yellow-900); }
.border-yellow-1000 { --border-color: var(--colour-yellow-1000); }
.border-greyscale-0 { --border-color: var(--colour-greyscale-0); }
.border-greyscale-100 { --border-color: var(--colour-greyscale-100); }
.border-greyscale-200 { --border-color: var(--colour-greyscale-200); }
.border-greyscale-300 { --border-color: var(--colour-greyscale-300); }
.border-greyscale-400 { --border-color: var(--colour-greyscale-400); }
.border-greyscale-500 { --border-color: var(--colour-greyscale-500); }
.border-greyscale-600 { --border-color: var(--colour-greyscale-600); }
.border-greyscale-700 { --border-color: var(--colour-greyscale-700); }
.border-greyscale-800 { --border-color: var(--colour-greyscale-800); }
.border-greyscale-900 { --border-color: var(--colour-greyscale-900); }
.border-greyscale-1000 { --border-color: var(--colour-greyscale-1000); }

.text-productive { font-family: var(--font-family-productive); }
.text-expressive { font-family: var(--font-family-expressive); }

.text-size-1 { font-size: var(--font-size-1); line-height: var(--line-height-1); }
.text-size-2 { font-size: var(--font-size-2); line-height: var(--line-height-2); }
.text-size-3 { font-size: var(--font-size-3); line-height: var(--line-height-3); }
.text-size-4 { font-size: var(--font-size-4); line-height: var(--line-height-4); }
.text-size-5 { font-size: var(--font-size-5); line-height: var(--line-height-5); }
.text-size-6 { font-size: var(--font-size-6); line-height: var(--line-height-6); }
.line-height-1u { line-height: 1; }

.no-wrap { white-space: nowrap; }

.rounded-lg { border-radius: var(--border-radius-lg) !important; }

.opacity-0 { opacity: 0 !important; }