*,
:after,
:before {
    background-repeat: no-repeat;
    box-sizing: inherit
}

:after,
:before {
    text-decoration: inherit;
    vertical-align: inherit
}

* {
    margin: 0;
    padding: 0
}

hr {
    color: var(--outline-colour);
    transition: color .2s;
    height: 0;
    overflow: visible;
    margin: .75rem 0;
    opacity: 1;
}

details,
main,
chip-input,
chip-card,
chip-infogroup,
chip-infogroupvalue,
chip-dropdown,
chip-dropdowndivider,
chip-dropdowngroup,
chip-callout,
chip-sortablelist,
chip-sortablelistitem,
chip-tree,
chip-treeitem,
chip-contextmenu,
chip-menuitem,
chip-menudivider,
chip-accordion,
chip-accordionitem,
chip-tab,
chip-form,
chip-emptyprompt,
chip-iconpicker,
chip-buttongroup,
chip-colourpicker,
chip-badge,
chip-label,
chip-codeblock,
chip-header,
chip-breadcrumb,
chip-range,
chip-progress,
chip-progressitem {
    display: block;
}

chip-tab {
    display: flex;
    position: relative;
}

chip-textarea,
chip-tabgroup {
    display: flex;
    flex-direction: column;
}

chip-tabgroup[orientation="vertical"]:not([direction="right"]) {
    flex-direction: row;
}

chip-tabgroup[orientation="vertical"][direction="right"] {
    flex-direction: row-reverse;
}

chip-button,
chip-dropdownbutton,
chip-splitbutton {
    display: inline-flex;
}

chip-dropdownitem,
chip-dropdownheader,
chip-breadcrumbitem {
    display: flex;
    align-items: center;
}

chip-infogroup+chip-infogroup {
    margin-top: var(--block-size-xl);
}

chip-dropdown,
chip-dropdown>.input-field {
    position: relative;
}

chip-dropdownitem>i:first-child {
    text-align: center;
    width: 1.25em;
}

chip-tabgroup {
    --tab-colour: var(--theme-colour);
    --tab-colour-foreground: var(--theme-colour-foreground);
    gap: var(--block-size-lg);
}

chip-dropdownitem>i:first-child,
chip-dropdown>div>button>span>i,
chip-badge:not([size], [badge-style="icon"])>i:first-child,
chip-badge:not([badge-style="icon"])[size="lg"]>i:first-child {
    margin-right: var(--block-size-sm);
}

chip-badge:not([badge-style="icon"])[size="sm"]>i:first-child,
chip-badge:not([badge-style="icon"])[size="xs"]>i:first-child {
    margin-right: var(--block-size-xs);
}

chip-badge[badge-style="icon"]>i:first-child {
    width: 1.25em;
}

chip-badge[badge-style="pill"] {
    border-radius: 1000px;
}

chip-badge[badge-style="icon"] {
    border-radius: 1000px;
    aspect-ratio: 1;
}

chip-buttongroup:not([spacing]) li:not(:first-child) button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

chip-buttongroup:not([spacing]) li:not(:last-child) button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

chip-buttongroup[spacing="xxs"] ul {
    gap: var(--block-size-xxs);
}

chip-buttongroup[spacing="xs"] ul {
    gap: var(--block-size-xs);
}

chip-buttongroup[spacing="sm"] ul {
    gap: var(--block-size-sm);
}

chip-buttongroup[spacing="md"] ul {
    gap: var(--block-size-md);
}

chip-buttongroup[spacing="base"] ul {
    gap: var(--block-size-base);
}

chip-buttongroup[spacing="standard"] ul {
    gap: var(--block-size-standard);
}

chip-buttongroup[spacing="lg"] ul {
    gap: var(--block-size-lg);
}

chip-buttongroup[spacing="xl"] ul {
    gap: var(--block-size-xl);
}

chip-buttongroup[spacing="xxl"] ul {
    gap: var(--block-size-xxl);
}

chip-buttongroup[spacing="xxxl"] ul {
    gap: var(--block-size-xxxl);
}

chip-dropdown:not(chip-splitbutton chip-dropdown),
chip-input {
    width: 100%;
}

chip-buttongroup ul {
    display: flex;
}

chip-button>button,
chip-button>a {
    width: 100%;
}

chip-buttongroup button,
chip-buttongroup chip-button {
    block-size: 100% !important;
}

chip-codeblock {
    background-color: var(--code-block-background-colour);
    position: relative;
    padding: var(--block-size-lg);
    transition: background-color .2s, border-color .2s;
}

[suffix-icon] .btn--base:not(.btn--icon, .btn--vertical)>i:last-child {
    margin-left: var(--block-size-sm);
}

.btn--base:not(.btn--icon, .btn--vertical, .mega-menu-item, [suffix-icon] .btn--base, .tab__close-button .btn--base)>i:first-child,
chip-breadcrumbitem i:first-child {
    margin-right: var(--block-size-sm);
}

chip-breadcrumbitem i:not(chip-breadcrumbitem:hover i) {
    color: var(--thumb-colour);
}

.btn--base:not(.btn--icon, .btn--vertical)>.beacon:first-child {
    margin-right: var(--block-size-md);
}

.btn--vertical:not(.btn--icon)>i:first-child {
    margin-bottom: var(--block-size-sm);
}

chip-colourpicker:not([presets]) .dropdown__list {
    padding: var(--block-size-standard) var(--block-size-sm);
}

chip-colourpicker:not([presets]) .dropdown__list>li:first-child {
    padding: 0 var(--block-size-md);
}

chip-colourpicker canvas {
    height: 200px;
    width: 200px;
    border-radius: var(--standard-border-radius);
}

chip-infovalue[max-height] .information__value {
    overflow: auto;
}

chip-infovalue[max-height="xs"] .information__value {
    max-height: calc(var(--block-size-xs) * 5);
}

chip-infovalue[max-height="sm"] .information__value {
    max-height: calc(var(--block-size-sm) * 6);
}

chip-infovalue[max-height="md"] .information__value {
    max-height: calc(var(--block-size-md) * 6);
}

chip-infovalue[max-height="lg"] .information__value {
    max-height: calc(var(--block-size-lg) * 5);
}

chip-infovalue[max-height="xl"] .information__value {
    max-height: calc(var(--block-size-xl) * 5);
}

chip-colourpicker[value][presets] chip-dropdown>.input-field>button>i {
    color: var(--theme-colour);
}

.colour-picker__preset[data-colour=""] {
    --theme-colour: rgba(0, 0, 0, 0);
    --theme-colour-foreground: var(--body-colour);
    font-size: 25px;
}

chip-colourpicker[presets] li>button {
    padding: 0;
    transition: scale .2s;
}

chip-colourpicker[presets] li>button:hover {
    scale: 1.1;
}

chip-colourpicker[presets] .dropdown__list {
    padding: var(--block-size-base);
    overflow: hidden;
    gap: var(--block-size-sm);
    min-width: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.spectrum-cursor,
.hue-cursor {
    width: 30px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid #ffffff;
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: var(--default-box-shadow);
    pointer-events: none;
}

.hue-cursor {
    z-index: 1;
    left: 50%;
    width: 20px;
}

.hue-canvas {
    width: 10px;
}

.colour-picker__canvas-container {
    position: relative;
}

.hue-container {
    margin: 0 var(--block-size-base) 0 var(--block-size-lg);
}

.colour-picker__value-section+.colour-picker__value-section {
    margin-left: var(--block-size-md);
}

.colour-picker__value-section .input-field__label {
    width: var(--block-size-sm);
}

.colour-picker__value-section chip-input+chip-input {
    margin-top: var(--block-size-xs);
}

summary {
    display: list-item
}

small {
    font-size: 80%
}

[hidden] {
    display: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

a:not(.context-menu-item-btn, .card-frame, .list-view-item):active,
a:not(.context-menu-item-btn, .card-frame, .list-view-item):hover,
.btn-hyperlink:not(.context-menu-item-btn, .card-frame, .list-view-item):active,
.btn-hyperlink:not(.context-menu-item-btn, .card-frame, .list-view-item):hover {
    text-decoration: var(--link-hover-decoration);
}

code,
kbd,
pre,
samp,
.ff-code {
    font-family: monospace, var(--body-font-family);
}

code:not(chip-codeblock code) {
    background-color: var(--outline-colour);
    color: var(--body-colour);
    padding: 2px 5px;
    border-radius: .1875rem;
    transition: color .2s, background-color .2s;
}

chip-codeblock pre {
    margin: 0;
}

chip-codeblock code {
    padding: 0 !important;
    display: inline-block !important;
    background-color: rgba(0, 0, 0, 0) !important;
}

pre {
    font-size: 1em
}

b,
strong {
    font-weight: bolder
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

iframe {
    border-style: none
}

input {
    border-radius: 0
}

input[type="text"] {
    cursor: text;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    appearance: textfield;
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    resize: vertical;
    padding: .5rem .75rem;
}

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

input,
textarea {
    line-height: 1.14286;
}

optgroup {
    font-weight: var(--font-weight-bold)
}

button {
    overflow: visible;
    --btn-colour: var(--body-colour);
}

button,
select {
    text-transform: none
}

[role=button],
[type=button],
[type=reset],
[type=submit],
button {
    cursor: pointer
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button;
    appearance: button;
}

button,
input,
select,
textarea {
    background-color: transparent;
    border-style: none
}

input:focus,
select:focus,
textarea:focus {
    outline-width: 0;
}

a,
button,
.switch {
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.switch:focus-visible {
    outline: 2px solid var(--focus-outline-colour);
}

chip-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--focus-outline-colour);
}

chip-range input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--focus-outline-colour);
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none
}

select::-ms-value {
    color: currentColor
}

legend {
    border: 0;
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    color: inherit;
    font: inherit
}

[disabled]:not(.list-view-item>a),
input[type="checkbox"]:not(.btn-check)[disabled]+label[for] {
    cursor: default;
    opacity: .5;
}

[disabled] {
    pointer-events: none;
}

img {
    border-style: none
}

progress {
    vertical-align: baseline
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled=true] {
    cursor: default
}


:root {
    --body-line-height-sm: 1.1429rem;
    --body-line-height: 1.4286rem;
    --body-colour: #343741;

    --thumb-colour: rgb(105, 112, 125);

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --body-font-family: "Inter", -apple-system,
        BlinkMacSystemFont, "Segoe UI",
        Roboto,
        Oxygen-Sans,
        Ubuntu,
        Cantarell,
        "Helvetica Neue",
        sans-serif;

    --chevron-colour: var(--body-colour);

    --code-block-background-colour: rgb(241, 244, 250);
    --header-height: 0;
    --body-colour-faded: #646a77;
    --body-font-size: 14px;
    --body-font-size-xxl: 2.4286rem;
    --body-font-size-xl: 1.9286rem;
    --body-font-size-lg: 1.5714rem;
    --body-font-size-m: 1.1429rem;
    --body-font-size-sm: .8571rem;
    --body-font-size-xs: .7857rem;
    --body-font-size-xxs: .6429rem;
    --background-colour: #ffffff;
    --card-background-colour: #ffffff;
    --dropdown-background-colour: #ffffff;
    --card-box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 10px;
    --default-box-shadow: rgba(0, 0, 0, 0.08) 0px 0.9px 4px,
        rgba(0, 0, 0, 0.06) 0px 2.6px 8px,
        rgba(0, 0, 0, 0.05) 0px 5.7px 12px,
        rgba(0, 0, 0, 0.04) 0px 15px 15px;
    --subtle-box-shadow: rgba(0, 0, 0, 0.08) 0px 0.45px 2px,
        rgba(0, 0, 0, 0.06) 0px 1.3px 4px,
        rgba(0, 0, 0, 0.05) 0px 2.85px 3px,
        rgba(0, 0, 0, 0.04) 0px 7.5px 7.5px;
    --control-background-colour: #fbfcfd;
    --control-colour: var(--body-colour);
    --link-colour: #006bb8;
    --focus-outline-colour: var(--body-colour);
    --header-background-colour: #f7f8fc;
    --sidebar-background-colour: #f7f8fc;

    --tooltip-colour: #ffffff;
    --tooltip-background-colour: rgb(64, 64, 64);

    --control-border-colour: var(--outline-colour);

    /* Secondary */
    --secondary-colour-r: 100;
    --secondary-colour-g: 106;
    --secondary-colour-b: 119;
    --secondary-colour-foreground: #FFFFFF;

    --secondary-colour-rgb: var(--secondary-colour-r), var(--secondary-colour-g), var(--secondary-colour-b);

    --secondary-colour: rgb(var(--secondary-colour-rgb));
    --secondary-colour-dark: rgb(calc(var(--secondary-colour-r) - (var(--secondary-colour-r) * 0.1)), calc(var(--secondary-colour-g) - (var(--secondary-colour-g) * 0.1)), calc(var(--secondary-colour-b) - (var(--secondary-colour-b) * 0.1)));

    /* Outline */
    --outline-colour-r: 211;
    --outline-colour-g: 218;
    --outline-colour-b: 230;
    --outline-colour-foreground: #000000;

    --outline-colour-rgb: var(--outline-colour-r), var(--outline-colour-g), var(--outline-colour-b);

    --outline-colour: rgb(var(--outline-colour-rgb));
    --outline-colour-dark: rgb(calc(var(--outline-colour-r) - (var(--outline-colour-r) * 0.1)), calc(var(--outline-colour-g) - (var(--outline-colour-g) * 0.1)), calc(var(--outline-colour-b) - (var(--outline-colour-b) * 0.1)));

    /* Danger */
    --danger-colour-r: 189;
    --danger-colour-g: 39;
    --danger-colour-b: 30;
    --danger-colour-foreground: #ffffff;

    --danger-colour-rgb: var(--danger-colour-r), var(--danger-colour-g), var(--danger-colour-b);

    --danger-colour: rgb(var(--danger-colour-rgb));
    --danger-colour-dark: rgb(calc(var(--danger-colour-r) - (var(--danger-colour-r) * 0.1)), calc(var(--danger-colour-g) - (var(--danger-colour-g) * 0.1)), calc(var(--danger-colour-b) - (var(--danger-colour-b) * 0.1)));

    /* Warning */
    --warning-colour-r: 185;
    --warning-colour-g: 94;
    --warning-colour-b: 6;

    --warning-colour-foreground: #FFFFFF;

    --warning-colour-rgb: var(--warning-colour-r), var(--warning-colour-g), var(--warning-colour-b);

    --warning-colour: rgb(var(--warning-colour-rgb));
    --warning-colour-dark: rgb(calc(var(--warning-colour-r) - (var(--warning-colour-r) * 0.1)), calc(var(--warning-colour-g) - (var(--warning-colour-g) * 0.1)), calc(var(--warning-colour-b) - (var(--warning-colour-b) * 0.1)));

    /* Success */
    --success-colour-r: 24;
    --success-colour-g: 131;
    --success-colour-b: 50;
    --success-colour-foreground: #ffffff;

    --success-colour-rgb: var(--success-colour-r), var(--success-colour-g), var(--success-colour-b);

    --success-colour: rgb(var(--success-colour-rgb));
    --success-colour-dark: rgb(calc(var(--success-colour-r) - (var(--success-colour-r) * 0.1)), calc(var(--success-colour-g) - (var(--success-colour-g) * 0.1)), calc(var(--success-colour-b) - (var(--success-colour-b) * 0.1)));

    /* Info */
    --info-colour-r: 0;
    --info-colour-g: 107;
    --info-colour-b: 184;
    --info-colour-foreground: #ffffff;

    --info-colour-rgb: var(--info-colour-r), var(--info-colour-g), var(--info-colour-b);

    --info-colour: rgb(var(--info-colour-rgb));
    --info-colour-dark: rgb(calc(var(--info-colour-r) - (var(--info-colour-r) * 0.1)), calc(var(--info-colour-g) - (var(--info-colour-g) * 0.1)), calc(var(--info-colour-b) - (var(--info-colour-b) * 0.1)));

    --theme-colour-r: 77;
    --theme-colour-g: 77;
    --theme-colour-b: 255;
    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 69;
    --theme-colour-complementary-g: 212;
    --theme-colour-complementary-b: 129;
    --theme-colour-complementary-foreground: #000000;

    --block-size-xxs: .1428rem;
    --block-size-xs: .2857rem;
    --block-size-sm: .5714rem;
    --block-size-md: .8571rem;
    --block-size-base: 1.1428rem;
    --block-size-standard: 1.4286rem;
    --block-size-lg: 1.7142rem;
    --block-size-xl: 2.2857rem;
    --block-size-xxl: 2.8571rem;
    --block-size-xxxl: 3.4285rem;
    --block-size-xxxxl: 4.5714rem;

    --breakpoint-s: 576px;
    --breakpoint-m: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    --standard-border-radius: .4285rem;
}

/* Dark mode */

:root[data-theme="dark"] {
    --body-colour: #dfe5ef;
    --body-colour-faded: #878b95;
    --background-colour: #1d1e24;
    --thumb-colour: rgb(152, 162, 179);

    --outline-colour: #343741;
    --card-background-colour: #1d1e24;
    --dropdown-background-colour: #232429;
    --control-background-colour: #16171c;
    --card-box-shadow: rgba(0, 0, 0, 0.28) 0px 4px 10px;
    --default-box-shadow: rgba(0, 0, 0, 0.28) 0px 0.9px 4px,
        rgba(0, 0, 0, 0.21) 0px 2.6px 8px,
        rgba(0, 0, 0, 0.176) 0px 5.7px 12px,
        rgba(0, 0, 0, 0.14) 0px 15px 15px;
    --link-colour: #36a2ef;
    --header-background-colour: #131317;
    --sidebar-background-colour: #141519;
    --code-block-background-colour: rgb(37, 38, 46);

    --tooltip-colour: #ffffff;
    --tooltip-background-colour: rgb(0, 0, 0);

    /* Secondary */
    --secondary-colour-r: 129;
    --secondary-colour-g: 133;
    --secondary-colour-b: 143;
    --secondary-colour-foreground: #000000;

    /* Outline */
    --outline-colour-r: 52;
    --outline-colour-g: 55;
    --outline-colour-b: 65;
    --outline-colour-foreground: #ffffff;

    /* Danger */
    --danger-colour-r: 248;
    --danger-colour-g: 107;
    --danger-colour-b: 99;
    --danger-colour-foreground: #000000;

    /* Warning */
    --warning-colour-r: 219;
    --warning-colour-g: 129;
    --warning-colour-b: 29;
    --warning-colour-foreground: #000000;

    /* Success */
    --success-colour-r: 56;
    --success-colour-g: 172;
    --success-colour-b: 107;
    --success-colour-foreground: #000000;

    /* Info */
    --info-colour-r: 54;
    --info-colour-g: 162;
    --info-colour-b: 239;
    --info-colour-foreground: #000000;

    --theme-colour-r: 0;
    --theme-colour-g: 149;
    --theme-colour-b: 252;
    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 255;
    --theme-colour-complementary-g: 243;
    --theme-colour-complementary-b: 41;
    --theme-colour-complementary-foreground: #000000;

    color-scheme: dark;
}

:root,
[data-colour] {
    --theme-colour-rgb: var(--theme-colour-r), var(--theme-colour-g), var(--theme-colour-b);
    --theme-colour: rgb(var(--theme-colour-rgb));

    --theme-colour-dark: rgb(calc(var(--theme-colour-r) - (var(--theme-colour-r) * 0.1)), calc(var(--theme-colour-g) - (var(--theme-colour-g) * 0.1)), calc(var(--theme-colour-b) - (var(--theme-colour-b) * 0.1)));

    --theme-colour-complementary-rgb: var(--theme-colour-complementary-r), var(--theme-colour-complementary-g), var(--theme-colour-complementary-b);
    --theme-colour-complementary: rgb(var(--theme-colour-complementary-rgb));

    --theme-colour-complementary-dark: rgb(calc(var(--theme-colour-complementary-r) - (var(--theme-colour-complementary-r) * 0.1)), calc(var(--theme-colour-complementary-g) - (var(--theme-colour-complementary-g) * 0.1)), calc(var(--theme-colour-complementary-b) - (var(--theme-colour-complementary-b) * 0.1)));
}

ul.row,
ol.row,
.list-none,
.checkbox-group,
.tree,
chip-progress>ol,
.list-flush,
.dropdown__list,
chip-buttongroup ul {
    list-style-type: none;
    padding-inline-start: 0;
    padding-left: 0;
    margin-bottom: 0;
}

/* Everything else */

::placeholder {
    color: var(--body-colour-faded);
    opacity: 1;
    font-weight: inherit;
}

.list-flush>li {
    text-decoration: none;
    position: relative;
    display: block;
    padding: var(--block-size-sm) var(--block-size-base) 0 var(--block-size-base);
    padding-bottom: var(--block-size-sm);
}

.list-flush>li:not(.card-frame) {
    transition: border-color .2s;
}

.list-flush>li:not(:last-child) {
    border-bottom: 1px solid var(--outline-colour);
}

.search-bar::placeholder {
    font-weight: var(--font-weight-medium);
}

.text-secondary,
chip-infovalue[variation="secondary"] {
    color: var(--secondary-colour) !important;
}

.text-link {
    color: var(--link-colour);
}

.text-info,
chip-infovalue[variation="info"] {
    color: var(--info-colour) !important;
}

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

.text-danger,
chip-infovalue[variation="danger"] {
    color: var(--danger-colour) !important;
}

.text-danger-dark {
    color: var(--danger-colour-dark);
}

.text-success,
chip-infovalue[variation="success"] {
    color: var(--success-colour) !important;
}

.text-success-dark {
    color: var(--success-colour-dark);
}

.text-warning,
chip-infovalue[variation="warning"] {
    color: var(--warning-colour) !important;
}

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

.page-link {
    padding: 0 .5rem;
    border-width: 0;
}

.page-link[disabled] {
    --btn-disabled-colour: var(--body-colour-faded);
}

.cursor-default {
    cursor: default !important;
}

.disable-animations,
.disable-animations * {
    transition: none !important;
}

.code-preview {
    font-family:
        Consolas,
        "Source Code Pro",
        source-code-pro,
        monospace, var(--body-font-family);
    font-size: var(--body-font-size-sm);
    text-rendering: optimizeLegibility;
}

a,
button,
.btn--base {
    --btn-disabled-colour: var(--btn-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-disabled-background-colour: var(--btn-background-colour);
    --btn-border-colour: var(--btn-background-colour);
    --btn-disabled-border-colour: var(--btn-border-colour);
    --btn-box-shadow: none;
    --btn-hover-colour: var(--btn-colour);
    --btn-hover-background-colour: var(--btn-background-colour);
    --btn-hover-border-colour: var(--btn-hover-background-colour);
    --btn-hover-box-shadow: var(--btn-box-shadow);
    --btn-active-colour: var(--btn-hover-colour);
    --btn-active-background-colour: var(--btn-hover-background-colour);
    --btn-active-border-colour: var(--btn-hover-border-colour);
    --btn-active-box-shadow: var(--btn-hover-box-shadow);
    --btn-font-size: var(--body-font-size);
    --btn-line-height: 1.4286rem;
    --btn-padding-y: 0;
    --btn-padding-x: var(--block-size-md);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    color: var(--btn-colour);
    outline: 0;
    cursor: pointer;
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    border-style: solid;
    border-color: var(--btn-border-colour);
    background: var(--btn-background-colour);
    box-shadow: var(--btn-box-shadow);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color .2s ease-in-out,
        background .2s ease-in-out,
        border .2s ease-in-out,
        box-shadow .2s ease-in-out;
}

chip-tab>.btn--base {
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-active-colour: var(--body-colour);
    --btn-colour: var(--body-colour-faded);
    position: relative;
    border-radius: 0;
    height: 2.5rem;
    font-weight: var(--font-weight-medium);
}

chip-tabgroup:not([orientation="vertical"])>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base {
    border-bottom: var(--nav-border-width) solid var(--outline-colour);
}

chip-tabgroup[orientation="vertical"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base {
    border-right: var(--nav-border-width) solid var(--outline-colour);
    justify-content: start;
}

chip-tabgroup[orientation="vertical"][direction="right"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base {
    justify-content: end;
}

chip-tab>span {
    cursor: initial !important;
}

.btn--base {
    padding-block: 0;
    padding-inline: var(--btn-padding-x);
    padding-top: var(--btn-padding-y);
    padding-bottom: var(--btn-padding-y);
    min-block-size: var(--block-size-xl);
    block-size: var(--block-size-xl);
}

a,
.btn-hyperlink {
    --link-hover-decoration: underline;
    --btn-padding-x: 0;
    --btn-padding-y: 0;
    --btn-colour: var(--link-colour);
    border-width: 0;
    text-decoration: none;
}

chip-splitbutton>.btn--dropdown.btn-theme {
    border-left: 1px solid var(--theme-colour-dark);
}

chip-splitbutton>.btn--dropdown.btn-theme-secondary {
    border-left: 1px solid rgba(var(--theme-colour-rgb), .375);
}

.hint-container {
    display: flex;
    white-space: normal;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 75%;
    width: fit-content;
    margin: 0 auto;
    font-weight: var(--font-weight-medium);
    text-align: center;
    position: relative;
    max-width: 100%;
}

.fade-item:not(.show) {
    opacity: 0;
}

.fade-item {
    transition: opacity .2s;
}

.fade-container:hover .fade-item {
    opacity: 1;
}

.hint-description {
    width: 75%;
    color: var(--body-colour-faded);
    font-weight: var(--font-weight-regular);
}

.hint-icon {
    width: 50%;
    margin-bottom: 1.5rem;
    color: var(--theme-colour);
}

.layout-frame__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 1000;
    grid-row: 1/ 2;
    grid-column: 1 / 4;
    height: var(--header-height);
    background-color: var(--header-background-colour);
    transition: background-color .2s;
}

footer,
.layout-frame__sidebar {
    z-index: 200;
}

.layout-frame__sidebar {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
    height: calc(100vh - var(--header-height));
    position: sticky;
    top: var(--header-height);
    background-color: var(--sidebar-background-colour);
    transition: background-color .2s;
}

.layout-frame__sidebar:last-child {
    grid-column: 3/4;
    z-index: 90;
    background-color: rgba(0, 0, 0, 0);
}

main {
    display: flex;
    z-index: 100;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

footer {
    grid-row: 3/4;
    grid-column: 1/4;
}

.layout-frame {
    display: grid;
    flex-grow: 1;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
}

.layout-frame.restrict-height,
.layout-frame.restrict-height main {
    min-height: 0;
}

.wrap {
    white-space: initial !important;
}

a:not(.active, .card-frame):hover,
button:not(.active, .btn--tab):hover,
.btn--base:not(.active, .btn--tab):hover {
    color: var(--btn-hover-colour);
    background: var(--btn-hover-background-colour);
    border-color: var(--btn-hover-border-colour);
    box-shadow: var(--btn-hover-box-shadow);
}

a:active,
button:active,
a.active,
button.active,
.btn--base.active {
    color: var(--btn-active-colour);
    background: var(--btn-active-background-colour);
    box-shadow: var(--btn-active-box-shadow);
    border-color: var(--btn-active-border-colour);
}

chip-splitbutton>a:not(:last-child):not(.dropdown-toggle),
chip-splitbutton>button:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

chip-splitbutton>chip-dropdown:last-child>.dropdown__static>button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    --btn-padding-x: var(--block-size-sm);
    font-size: var(--body-font-size-xs);
}

.dropdown__list {
    color: var(--body-colour);
    top: 100%;
    background-color: var(--dropdown-background-colour);
    border: 1px solid var(--outline-colour);
    box-shadow: var(--default-box-shadow);
    font-size: var(--body-font-size);
    position: absolute;
    z-index: 1000;
    left: 0;
    border-radius: var(--standard-border-radius);
    padding: var(--block-size-sm) 0;
    margin-top: var(--block-size-sm) !important;
    min-width: 100%;
    width: max-content;
}

.dropdown__list,
chip-dropdownitem,
chip-dropdownheader,
chip-dropdowndivider,
chip-dropdowngroup {
    display: none;
}

.dropdown--searchable__wrapper .pv-loading-container {
    height: var(--block-size-xl);
}

.dropdown--searchable__wrapper {
    margin: var(--block-size-sm) var(--block-size-base);
}

.dropdown--searchable__wrapper>chip-emptyprompt {
    margin: var(--block-size-xxl) 0 var(--block-size-xl);
}

.dropdown--open:not([disabled])>div>.dropdown__list,
.dropdown--open:not([disabled])>div>.dropdown__list>li>chip-dropdowndivider,
.dropdown--open:not([disabled])>div>.dropdown__list>li>chip-dropdownheader,
.dropdown--open:not([disabled])>div>.dropdown__list>li>chip-dropdowngroup {
    display: block;
}

.dropdown--open:not([disabled])>div>.dropdown__list>li>*>chip-dropdownitem {
    display: flex;
}

.dropdown__divider {
    height: 0;
    margin: var(--block-size-sm) 0;
    overflow: hidden;
    border-top: 1px solid var(--outline-colour);
    opacity: 1;
}

chip-dropdown[variation="searchable"] ul li:first-child:not(:last-child) {
    margin-bottom: var(--block-size-base);
}

chip-dropdown:not(chip-colourpicker[presets] chip-dropdown) .dropdown__list li>* {
    border-radius: 0;
    --link-hover-decoration: inherit;
}

.dropdown__list li>*>i {
    margin-right: var(--block-size-sm);
    width: 1.25em;
    text-align: center;
}

.popover {
    font-family: var(--body-font-family);
    box-shadow: var(--default-box-shadow);
    --bs-popover-border-color: var(--outline-colour);
    --bs-popover-max-width: none;
    --bs-popover-bg: var(--dropdown-background-colour);
    --bs-popover-body-color: var(--body-colour);
    --bs-popover-body-padding-y: .75rem;
    --bs-popover-body-padding-x: .75rem;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    text-size-adjust: 100%;
    font-kerning: normal;
    scrollbar-width: auto;
    -moz-tab-size: 4;
    block-size: 100%;
    tab-size: 4;
    word-break: normal;
    font-size: var(--body-font-size);
    scrollbar-color: rgba(105, 112, 125, 0.5) rgb(240, 241, 244);
}

html::-webkit-scrollbar {
    inline-size: 16px;
    block-size: 16px;
}

html::-webkit-scrollbar-corner,
html::-webkit-scrollbar-track {
    background-color: rgb(240, 241, 244);
}

html::-webkit-scrollbar-thumb {
    background-color: rgba(105, 112, 125, 0.5);
    background-clip: content-box;
    border-radius: 16px;
    border: 4px solid rgb(240, 241, 244);
}

html[data-theme="dark"]::-webkit-scrollbar-corner,
html[data-theme="dark"]::-webkit-scrollbar-track {
    background-color: rgb(36, 37, 41);
}

html[data-theme="dark"]::-webkit-scrollbar-thumb {
    background-color: rgba(152, 162, 179, 0.5);
    background-clip: content-box;
    border-radius: 16px;
    border: 4px solid rgb(36, 37, 41);
}

body {
    margin: 0px;
    display: flex;
    height: 100%;
    font-weight: var(--font-weight-regular);
    font-size: 1rem;
    overflow-x: hidden;
    flex-direction: column;
    padding: 0px;
    line-height: var(--body-line-height);
    min-width: 320px;
    font-family: var(--body-font-family);
    color: var(--body-colour);
    background: var(--background-colour);
    transition: background-color .2s, color .2s;
}

.hover-theme-fg:hover {
    color: var(--theme-colour);
}

button,
.btn--base {
    --link-hover-decoration: inherit;
    --btn-padding-x: var(--block-size-md);
    --btn-padding-y: var(--block-size-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-width: 1px;
    border-radius: .4rem;
    vertical-align: middle;
}

button,
.btn--base:not(.btn--inline) {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.modal-dialog .card-footer .btn--base {
    min-inline-size: 112px;
}

.header__cookie-warning {
    display: flex;
    align-items: center;
    padding: .375rem;
    justify-content: center;
    background-color: #1d1e24;
    color: #dfe5ef;
}

.header__cookie-warning a,
.header__cookie-warning .btn-hyperlink {
    --btn-colour: inherit;
    text-decoration: underline;
}

[data-theme="dark"] .header__cookie-warning {
    background-color: #ffffff;
    color: #343741;
}

[data-theme="dark"] {
    scrollbar-color: rgba(152, 162, 179, 0.5) rgb(36, 37, 41);
}

.button-icon {
    --link-hover-decoration: inherit;
    --btn-font-size: var(--body-font-size-sm);
    aspect-ratio: 1;
    border-width: 0;
    width: 2.125rem;
    --btn-padding-x: 0;
    --btn-padding-y: 0;
}

.button-icon.button-sm {
    width: 1.5rem;
    --btn-font-size: var(--body-font-size-xs);
}

.range--track {
    block-size: 100%;
    position: relative;
    align-self: flex-start;
}

chip-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    cursor: pointer;
    border-radius: 16px;
    block-size: 16px;
    height: 6px;
    flex-grow: 1;
    background: var(--outline-colour);
}

chip-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    outline-offset: 2px;
    padding: 0px;
    block-size: 14px;
    inline-size: 14px;
    background-color: var(--thumb-colour);
    box-shadow: 0 0 0 var(--block-size-xs) var(--background-colour);
    border-radius: 50%;
    border: none;
}

chip-range input[type="range"]::-moz-range-thumb {
    padding: 0px;
    block-size: 14px;
    inline-size: 14px;
    outline-offset: 2px;
    background-color: var(--thumb-colour);
    box-shadow: 0 0 0 var(--block-size-xs) var(--background-colour);
    border-radius: 50%;
    border: none;
}

chip-dropdown>.input-field:not(.btn--base)>button {
    --btn-colour: var(--control-colour);
    --btn-padding-x: var(--block-size-md);
    --btn-padding-y: 0;
    --btn-font-size: inherit;
    --btn-line-height: var(--body-line-height-sm);
    border-width: 0;
    justify-content: start;
    text-align: left;
    transition: color .5s;
    font-weight: inherit;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

chip-dropdown>.input-field:not(.btn--base)>button>span {
    display: flex;
    align-items: center;
    width: 100%;
}

chip-dropdown>.input-field:not(.btn--base)>button>i {
    margin-right: var(--block-size-sm);
}

chip-colourpicker:not([value])>chip-dropdown>.input-field>button {
    color: var(--body-colour-faded);
}

.colour-picker__value-section input {
    width: var(--block-size-xxxxl);
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}

.colour-picker__value-section input::-webkit-outer-spin-button,
.colour-picker__value-section input::-webkit-inner-spin-button {
    display: none;
}

chip-dropdown>.input-field:not(.ignore-arrow)>button {
    padding-right: var(--block-size-xxl);
}

chip-dropdown[dropdown-style="minimal"]>div>button {
    padding-left: 0;
}

a[disabled],
button[disabled] {
    color: var(--btn-disabled-colour);
    background: var(--btn-disabled-background-colour);
    border-color: var(--btn-disabled-border-colour);
}

.resize-none,
chip-textarea[responsive] textarea {
    resize: none !important;
}

.mark,
mark {
    background-color: #f7e433;
    color: #48420F;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-y-hidden {
    overflow-y: hidden !important;
}

.muted {
    opacity: .75;
}

.text-faded {
    color: var(--body-colour-faded) !important;
}

.text-body {
    color: var(--body-colour) !important;
}

.pill,
.circle {
    border-radius: 1000px !important;
}

.br-sm {
    border-radius: .4rem !important;
}

.br-0 {
    border-radius: 0 !important;
}

.mh-50 {
    max-height: 50%;
}

.mh-75 {
    max-height: 75%;
}

.minh-fit {
    min-height: fit-content !important;
}

.minh-25 {
    min-height: 25%;
}

.minh-50 {
    min-height: 50%;
}

.minh-75 {
    min-height: 75%;
}

.minh-100 {
    min-height: 100% !important;
}

.aspect-ratio {
    aspect-ratio: 1;
}

.input-label {
    margin-bottom: .25rem;
}

label[for] {
    cursor: pointer;
}

label[for]:not(.input-field--checkbox+label, .tree-item label),
.input-field__label:not(label) {
    font-weight: var(--font-weight-semibold);
}

input[type="color"] {
    cursor: pointer;
    padding: 0;
}

.input__bound {
    display: flex;
    align-items: start;
    font-size: var(--body-font-size);
    border-width: 1px;
    border-style: solid;
    font-weight: var(--font-weight-regular);
    text-align: center;
    white-space: nowrap;
}

.input__bound:not(.input-field__invalid) {
    border-color: var(--control-border-colour);
}

.input__bound:focus-within {
    border-color: var(--theme-colour);
}

.input__bound>i {
    width: 1.25em;
    text-align: center;
    translate: 0 50%;
}

.input__bound:not(chip-button, chip-dropdownbutton),
.input__bound>button,
.input__bound .dropdown__static>button {
    padding: var(--block-size-xs) var(--block-size-sm);
}

.input__wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input__wrapper>input:not(.colour-picker__value-section input),
.input__wrapper>textarea {
    flex: 1 1 auto;
    flex-basis: fit-content;
}

chip-input:focus-within>.input__wrapper>.input__bound:not(input+.input__bound),
chip-textarea:focus-within>.input__wrapper>.input__bound:not(textarea+.input__bound) {
    border-color: var(--theme-colour);
}

input[type="password"] {
    font-family: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen-Sans,
        Ubuntu,
        Cantarell,
        "Helvetica Neue",
        sans-serif;
}

.input__wrapper>input:not([readonly]):focus+.input__bound,
.input__wrapper>textarea:not([readonly]):focus+.input__bound {
    border-color: var(--theme-colour);
}

input+.input__bound,
input+.input__bound>button,
input+.input__bound .dropdown__static>button,
textarea+.input__bound,
textarea+.input__bound>button,
textarea+.input__bound .dropdown__static>button {
    border-top-right-radius: var(--standard-border-radius) !important;
    border-bottom-right-radius: var(--standard-border-radius) !important;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
}

chip-input .input__bound:not(input+.input__bound),
chip-input .input__bound:not(input+.input__bound)>button,
chip-textarea .input__bound:not(textarea+.input__bound),
chip-textarea .input__bound:not(textarea+.input__bound)>button {
    border-top-left-radius: var(--standard-border-radius) !important;
    border-bottom-left-radius: var(--standard-border-radius) !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

.input__bound>button,
.input__bound .dropdown__static>button {
    height: calc(2.75rem - 2px);
    min-height: 0;
    width: 100%;
}

chip-input[size="sm"] .input__bound>button,
chip-input[size="sm"] .input__bound .dropdown__static>button {
    height: calc(var(--block-size-xl) - 2px);
    --btn-font-size: var(--body-font-size-sm);
}

.input__wrapper>.input__bound {
    background: var(--control-background-colour);
    color: var(--control-colour);
    transition: border-color .2s, background-color .2s;
    font-size: var(--body-font-size);
}

.breadcrumb-list {
    color: var(--body-colour-faded);
    padding-inline: 0;
    margin-bottom: 0;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
}

.breadcrumb-list>li span {
    text-overflow: ellipsis;
    overflow: hidden;
}

.breadcrumb-list,
.breadcrumb-list>li {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
}

.breadcrumb-list a,
.breadcrumb-list .btn-hyperlink {
    --btn-colour: var(--body-colour-faded);
    transition: color .2s;
    display: flex;
    align-items: center;
}

.breadcrumb-list>li a:hover {
    color: var(--theme-colour);
}

.breadcrumb-list>li:not(:first-child)::before {
    float: left;
    content: "/";
    margin: auto .375rem;
}

chip-progressitem {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-item__icon {
    display: flex;
    height: var(--block-size-lg);
    width: var(--block-size-lg);
    background-color: var(--theme-colour);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--block-size-xs);
    z-index: 2;
}

.progress-item__icon::before {
    content: "\f00c";
    color: var(--theme-colour-foreground);
    font-family: "Font Awesome 5 Pro", var(--body-font-family);
    font-size: var(--body-font-size-xxs);
    font-weight: var(--font-weight-bold);
}

chip-progress>ol {
    display: flex;
    overflow: hidden;
    justify-content: space-between;
}

chip-progress>ol>li {
    display: inline-block;
    position: relative;
    font-weight: var(--font-weight-regular);
}

chip-progress>ol>li:after {
    content: '';
    height: 4px;
    width: 100vw;
    top: calc(var(--block-size-lg) / 2 - 2px);
    left: 50%;
    background-color: var(--theme-colour);
    position: absolute;
    z-index: 1;
}

chip-progress>ol>li:last-child:after {
    background-color: var(--background-colour) !important;
}


.progress-item--active~li .progress-item__icon,
.progress-item--active~li:after,
.progress-item--active:after {
    background-color: var(--thumb-colour) !important;
}

.progress-item--active~li .progress-item__icon {
    border: 4px solid var(--body-colour);
}

.progress-item--active~li .progress-item__icon::before {
    content: "";
}

.progress-item--active {
    font-weight: var(--font-weight-bold);
}

.input-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--control-colour);
    appearance: none;
    padding: .25rem .5rem;
    transition: background .2s, border-color .2s;
    font-weight: inherit;
    outline: 0;
    background: var(--control-background-colour);
    border: none;
    border-style: solid;
    border-width: 1px;
    border-color: var(--outline-colour);
    display: block;
}

.input-field {
    color: var(--control-colour);
    padding: var(--block-size-md);
    height: 2.75rem;
    transition: background .2s, border-color .2s;
    font-weight: inherit;
    outline: 0;
    background: var(--control-background-colour);
    border: none;
    border-style: solid;
    border-width: 1px;
    border-color: var(--control-border-colour);
    border-radius: var(--standard-border-radius);
    display: block;
}

.input-field__label--secondary {
    color: var(--body-colour-faded);
    font-style: italic;
    font-weight: var(--font-weight-regular);
}

[label] .input-field__label--secondary {
    margin-left: var(--block-size-sm);
}

.switch {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(var(--block-size-standard) * 1.75);
    height: var(--block-size-standard);
    padding: 0;
    background: linear-gradient(to right, var(--control-background-colour) 50%, var(--success-colour) 50%) no-repeat;
    background-size: 205%;
    background-position: 0;
    transition: 0.4s;
    border-radius: 99em;
    position: relative;
    cursor: pointer;
}

.switch::before {
    content: "";
    height: calc(var(--block-size-sm) * 1.25);
    width: calc(var(--block-size-sm) * 1.25);
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    left: var(--block-size-xs);
    background: linear-gradient(to right, var(--success-colour-foreground) 50%, var(--control-colour) 50%) no-repeat;
    background-size: 205%;
    background-position: 100%;
    border-radius: 50%;
    transition: 0.4s;
}

.switch:checked::before {
    left: calc(100% - (var(--block-size-sm) * 1.25) - var(--block-size-xs));
    background-position: 0;
}

.switch:checked {
    background-position: 100%;
}

.input-field:not(.colour-picker__value-section input, .switch) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
}

chip-dropdown[size="sm"] .input-field,
chip-input[size="sm"] .input-field {
    height: var(--block-size-xl);
    padding: var(--block-size-sm);
}

chip-input[size="sm"] .input__bound:not(chip-button, chip-dropdownbuton),
chip-input[size="xs"] .input__bound:not(chip-button, chip-dropdownbuton) {
    padding: var(--block-size-xxs) var(--block-size-xs) var(--block-size-xxs) var(--block-size-sm);
}

chip-dropdown[size="xs"] .input-field,
chip-input[size="xs"] .input-field {
    height: calc(var(--block-size-lg) + var(--block-size-xxs));
    padding: var(--block-size-sm);
}

chip-input>chip-dropdown .input-field {
    height: 0 !important;
    border: none !important;
}

.btn--inline {
    vertical-align: baseline;
    --btn-padding-x: 0;
    min-block-size: 0;
    block-size: 0;
    font-size: inherit;
}

.btn--icon {
    inline-size: var(--block-size-xl);
}

chip-dropdown ul>li>button {
    outline-offset: -2px;
    border-radius: var(--standard-border-radius);
}

chip-button[button-style="icon"] {
    line-height: 0;
}

.btn--vertical {
    flex-direction: column;
    min-block-size: var(--block-size-xxxxl);
    block-size: var(--block-size-xxxxl);
    --btn-padding-y: var(--btn-padding-x);
}

.btn--vertical>i:first-child {
    margin-block-end: var(--block-size-xs);
}

.btn--aspect {
    aspect-ratio: 1;
}

.btn--file-picker {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-width: 2px;
    height: 128px;
    border-style: dashed;
    --btn-border-colour: var(--body-colour-faded);
    --btn-hover-border-colour: var(--body-colour-faded);
}

.btn--file-picker:hover {
    text-decoration: underline;
}

.input__wrapper>input:not(:last-child, .input-field__invalid),
.input__wrapper>textarea:not(:last-child, .input-field__invalid) {
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 0;
}

.input__wrapper>.input__bound+input,
.input__wrapper>.input__bound+textarea {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
    padding-left: 0;
}

.btn--xs {
    padding-inline: var(--block-size-sm);
    min-block-size: var(--block-size-standard);
    block-size: var(--block-size-standard);
    --btn-font-size: var(--body-font-size-xs);
}

.btn--sm {
    padding-inline: var(--block-size-sm);
    min-block-size: var(--block-size-lg);
    block-size: var(--block-size-lg);
    --btn-font-size: var(--body-font-size-sm);
}

.btn--lg {
    min-block-size: var(--block-size-xxl);
    block-size: var(--block-size-xxl);
    --btn-padding-x: var(--block-size-standard);
    font-size: var(--block-size-base);
}

.btn--icon.btn--lg {
    inline-size: var(--block-size-xxl);
}

.btn--icon.btn--sm {
    inline-size: var(--block-size-lg);
    font-size: var(--body-font-size-sm);
}

.btn--icon.btn--xs {
    inline-size: var(--block-size-standard);
    font-size: var(--body-font-size-xs);
}

.btn-theme {
    --btn-colour: var(--theme-colour-foreground);
    --btn-background-colour: var(--theme-colour);
    --btn-hover-background-colour: var(--theme-colour-dark);
}

.btn-theme-outline {
    --btn-colour: var(--theme-colour);
    --btn-border-colour: var(--theme-colour);
    --btn-hover-colour: var(--theme-colour-dark);
    --btn-hover-border-colour: var(--theme-colour-dark);
    --btn-active-colour: var(--theme-colour-foreground);
    --btn-active-background-colour: var(--theme-colour);
}

.btn-complementary-outline {
    --btn-colour: var(--theme-colour-complementary);
    --btn-border-colour: var(--theme-colour-complementary);
    --btn-hover-colour: var(--theme-colour-complementary-dark);
    --btn-hover-border-colour: var(--theme-colour-complementary-dark);
    --btn-active-colour: var(--theme-colour-complementary-foreground);
    --btn-active-background-colour: var(--theme-colour-complementary);
}

.btn-info-outline {
    --btn-colour: var(--info-colour);
    --btn-border-colour: var(--info-colour);
    --btn-hover-colour: var(--info-colour-dark);
    --btn-hover-border-colour: var(--info-colour-dark);
    --btn-active-colour: var(--info-colour-foreground);
    --btn-active-background-colour: var(--info-colour);
}

.btn-success-outline {
    --btn-colour: var(--success-colour);
    --btn-border-colour: var(--success-colour);
    --btn-hover-colour: var(--success-colour-dark);
    --btn-hover-border-colour: var(--success-colour-dark);
    --btn-active-colour: var(--success-colour-foreground);
    --btn-active-background-colour: var(--success-colour);
}

.btn-secondary-outline {
    --btn-colour: var(--secondary-colour);
    --btn-border-colour: var(--secondary-colour);
    --btn-hover-colour: var(--secondary-colour);
    --btn-hover-border-colour: var(--secondary-colour);
    --btn-active-colour: var(--secondary-colour);
    --btn-active-background-colour: var(--secondary-colour);
}

.btn-warning-outline {
    --btn-colour: var(--warning-colour);
    --btn-border-colour: var(--warning-colour);
    --btn-hover-colour: var(--warning-colour-dark);
    --btn-hover-border-colour: var(--warning-colour-dark);
    --btn-active-colour: var(--warning-colour-foreground);
    --btn-active-background-colour: var(--warning-colour);
}

.btn-danger-outline {
    --btn-colour: var(--danger-colour);
    --btn-border-colour: var(--danger-colour);
    --btn-hover-colour: var(--danger-colour-dark);
    --btn-hover-border-colour: var(--danger-colour-dark);
    --btn-active-colour: var(--danger-colour-foreground);
    --btn-active-background-colour: var(--danger-colour);
}

.btn-complementary {
    --btn-colour: var(--theme-colour-complementary-foreground);
    --btn-background-colour: var(--theme-colour-complementary);
    --btn-hover-background-colour: var(--theme-colour-complementary-dark);
}

.btn-info {
    --btn-colour: var(--info-colour-foreground);
    --btn-background-colour: var(--info-colour);
    --btn-hover-background-colour: var(--info-colour-dark);
}

.btn-danger-action {
    --btn-colour: var(--danger-colour-foreground);
    --btn-background-colour: var(--danger-colour);
    --btn-hover-background-colour: var(--danger-colour-dark);
}

.btn-warning-action {
    --btn-colour: var(--warning-colour-foreground);
    --btn-background-colour: var(--warning-colour);
    --btn-hover-background-colour: var(--warning-colour-dark);
}

.btn-success-action,
.cookie-warning__button--accept {
    --btn-colour: var(--success-colour-foreground);
    --btn-background-colour: var(--success-colour);
    --btn-hover-background-colour: var(--success-colour-dark);
}

.btn-theme-secondary {
    --btn-colour: var(--theme-colour);
    --btn-background-colour: rgba(var(--theme-colour-rgb), .125);
    --btn-hover-background-colour: rgba(var(--theme-colour-rgb), .2);
    --btn-border-colour: rgba(0, 0, 0, 0);
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
    --btn-active-background-colour: var(--theme-colour);
    --btn-active-colour: var(--theme-colour-foreground);
}

.btn-secondary-secondary {
    --btn-colour: var(--secondary-colour);
    --btn-background-colour: rgba(var(--secondary-colour-rgb), .125);
    --btn-hover-background-colour: rgba(var(--secondary-colour-rgb), .2);
    --btn-border-colour: rgba(0, 0, 0, 0);
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
    --btn-active-background-colour: var(--secondary-colour);
    --btn-active-colour: var(--secondary-colour-foreground);
}

.btn-complementary-secondary {
    --btn-colour: var(--theme-colour-complementary);
    --btn-background-colour: rgba(var(--theme-colour-complementary-rgb), .125);
    --btn-hover-background-colour: rgba(var(--theme-colour-complementary-rgb), .2);
    --btn-border-colour: rgba(0, 0, 0, 0);
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
    --btn-active-colour: var(--theme-colour-complementary-dark);
}

.btn-info-secondary {
    --btn-colour: var(--info-colour);
    --btn-background-colour: rgba(var(--info-colour-rgb), .125);
    --btn-hover-background-colour: rgba(var(--info-colour-rgb), .2);
    --btn-border-colour: rgba(0, 0, 0, 0);
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
    --btn-active-colour: var(--info-colour-dark);
}

.btn-danger-secondary {
    --btn-colour: var(--danger-colour);
    --btn-background-colour: rgba(var(--danger-colour-rgb), .125);
    --btn-hover-background-colour: rgba(var(--danger-colour-rgb), .2);
    --btn-border-colour: rgba(0, 0, 0, 0);
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
    --btn-active-colour: var(--danger-colour-dark);
}

.btn-danger-card {
    --btn-colour: var(--danger-colour-foreground);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-border-colour: var(--danger-colour-foreground);
    --btn-hover-border-colour: var(--danger-colour-foreground);
    --btn-active-colour: var(--danger-colour-foreground);
}

.btn-warning-secondary {
    --btn-colour: var(--warning-colour);
    --btn-background-colour: rgba(var(--warning-colour-rgb), .125);
    --btn-hover-background-colour: rgba(var(--warning-colour-rgb), .2);
    --btn-border-colour: rgba(0, 0, 0, 0);
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
    --btn-active-colour: var(--warning-colour-dark);
}

.btn-success-secondary {
    --btn-colour: var(--success-colour);
    --btn-background-colour: rgba(var(--success-colour-rgb), .125);
    --btn-hover-background-colour: rgba(var(--success-colour-rgb), .2);
    --btn-border-colour: rgba(0, 0, 0, 0);
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
    --btn-active-colour: var(--success-colour-dark);
}

.btn-collapse {
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-colour: var(--body-colour-faded);
    --btn-hover-colour: var(--theme-colour);
    --btn-active-colour: var(--theme-colour-dark);
    display: flex;
    align-items: center;
}

.btn-inline {
    padding: 0 !important;
    border: 0;
    display: contents;
    font-size: inherit;
}

.theme-glow {
    box-shadow: 0 1px 2.5px var(--theme-colour);
}

.btn-secondary {
    --btn-colour: var(--secondary-colour-foreground);
    --btn-background-colour: var(--secondary-colour);
    --btn-hover-background-colour: var(--secondary-colour-dark);
    --btn-active-background-colour: var(--secondary-colour-dark);
}

.btn-theme-tertiary {
    --btn-colour: var(--theme-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--theme-colour-dark);
}

.btn-secondary-tertiary {
    --btn-colour: var(--secondary-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--secondary-colour-dark);
}

.btn-complementary-tertiary {
    --btn-colour: var(--theme-colour-complementary);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--theme-colour-complementary-dark);
}

.btn-info-tertiary {
    --btn-colour: var(--info-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--info-colour-dark);
}

.btn-danger-tertiary {
    --btn-colour: var(--danger-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--danger-colour-dark);
}

.btn-warning-tertiary {
    --btn-colour: var(--warning-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--warning-colour-dark);
}

.btn-success-tertiary {
    --btn-colour: var(--success-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--success-colour-dark);
}

.btn-body {
    --btn-colour: var(--body-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-background-colour: var(--outline-colour);
}

.btn-none {
    --btn-colour: var(--body-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-background-colour: rgba(0, 0, 0, 0);
}

.btn-pagination {
    --btn-colour: var(--body-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-background-colour: rgba(0, 0, 0, 0);
    --btn-active-colour: var(--theme-colour);
    --btn-hover-colour: var(--theme-colour);
    padding-inline: var(--block-size-sm);
}

.btn-tertiary {
    font-weight: var(--font-weight-regular);
    --btn-colour: var(--body-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-background-colour: var(--outline-colour);
}

.btn-body-secondary {
    --btn-colour: var(--body-colour);
    --btn-background-colour: rgba(0, 0, 0, 0);
    --btn-border-colour: var(--body-colour);
    --btn-hover-border-colour: var(--body-colour);
    --btn-hover-box-shadow: 0 1.5px 2.5px var(--body-colour);
    --btn-active-colour: var(--body-colour-faded);
    --btn-active-box-shadow: none;
}

.button-sm {
    --btn-font-size: var(--body-font-size-sm);
}

.button-xs,
.cookie-warning__button--accept {
    --btn-font-size: var(--body-font-size-xs);
}

.input-field__textarea {
    padding: var(--block-size-sm) var(--block-size-md);
    line-height: 1.5;
    height: auto;
}

chip-textarea.h-100 .input__wrapper {
    flex-grow: 1;
    resize: none;
}

.input-control,
a:focus-visible {
    border-radius: var(--standard-border-radius);
}

chip-dropdown>div:first-child {
    position: relative;
}

.dropdown__static {
    width: fit-content;
}

chip-dropdown>.input-field:not(.btn--base) {
    padding: 0;
    display: flex;
}

chip-dropdown:not([readonly], chip-input > chip-dropdown)>.input-field:after {
    content: '';
    width: .75em;
    height: .75em;
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 0.75rem;
    -webkit-mask-size: 0.75rem;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--chevron-colour);
    transition: background-color .2s;
}

chip-dropdown[dropdown-style="minimal"] .input-field {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    --chevron-colour: var(--body-colour);
}

chip-splitbutton>chip-dropdown>.dropdown__static::after {
    --chevron-colour: var(--btn-colour) !important;
}

.underlined-control {
    border-width: 0px 0px 2px 0px;
    border-radius: 0px;
    --control-background-colour: rgba(0, 0, 0, 0);
    transition: border-color .2s;
    outline: 0;
    padding-left: 2px;
}

chip-dropdown[readonly] {
    cursor: text;
}

chip-dropdown[readonly]>div>button {
    pointer-events: none;
}

chip-dropdown[readonly] .dropdown__list ul {
    pointer-events: none;
    visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

chip-splitbutton>chip-dropdown>.dropdown__static,
chip-splitbutton>chip-dropdown>.dropdown__static>button {
    width: fit-content;
    height: 100%;
}

.dropdown__list li chip-header {
    padding: var(--block-size-xs) var(--block-size-base);
    margin-bottom: 0;
}

.dropdown__group-header:not(:first-child) {
    margin-top: var(--block-size-md);
}

.dropdown__group-header {
    border-bottom: 1px solid var(--outline-colour);
    margin-bottom: var(--block-size-xs);
}

.dropdown__list li:not(.dropdown__group-header) h6 {
    font-weight: var(--font-weight-bold);
}

.dropdown__list li>button,
.dropdown__list li>a {
    text-decoration: none;
    background: transparent;
    display: block;
    width: 100%;
    clear: both;
    text-align: start;
    justify-content: start;
    white-space: nowrap;
    color: var(--body-colour);
    border: 0;
    padding: var(--block-size-xs) var(--block-size-base);
    font-weight: var(--font-weight-regular);
}

chip-dropdown[size="sm"] .dropdown__list li>button,
chip-dropdown[size="sm"] .dropdown__list li>a {
    padding: var(--block-size-xs) var(--block-size-md);
}

chip-dropdown[size="xs"] .dropdown__list li>button,
chip-dropdown[size="xs"] .dropdown__list li>a {
    padding: var(--block-size-xxs) var(--block-size-md);
}

chip-dropdown:not(chip-colourpicker chip-dropdown, chip-input > chip-dropdown) .dropdown__list li>button.active,
chip-dropdown:not(chip-colourpicker chip-dropdown, chip-input > chip-dropdown) .dropdown__list li>a.active,
chip-dropdown:not(chip-colourpicker chip-dropdown, chip-input > chip-dropdown) .dropdown__list li>button:active,
chip-dropdown:not(chip-colourpicker chip-dropdown, chip-input > chip-dropdown) .dropdown__list li>a:active {
    background: var(--theme-colour);
    color: var(--theme-colour-foreground);
}

.dropdown__list li>button:not(.active, :active):hover,
.dropdown__list li>a:not(.active, :active):hover,
.context-menu-item:not(.context-menu-item-container):hover {
    background: var(--outline-colour);
    color: var(--body-colour);
}

.dropdown__list.limit-height,
chip-dropdown>.input-field .dropdown__list,
chip-iconpicker .dropdown__list {
    max-height: 404.5932px;
    overflow: auto;
}

chip-iconpicker .dropdown--open .dropdown__list,
chip-colourpicker[presets] .dropdown--open .dropdown__list {
    display: grid !important;
}

chip-iconpicker .dropdown__list {
    min-width: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

chip-iconpicker .dropdown__list>li:first-child {
    grid-column: 1/5;
}

chip-iconpicker .dropdown__list>li:not(:first-child) i {
    font-size: var(--block-size-lg);
    margin: auto 0 var(--block-size-sm);
}

chip-iconpicker .dropdown__list>li>button {
    padding: var(--block-size-base);
}

chip-iconpicker chip-dropdownitem {
    max-width: 100px;
    height: 100%;
    flex-direction: column;
    white-space: wrap;
    text-align: center;
}

.colour-picker__preset {
    background-color: var(--theme-colour);
    color: var(--theme-colour-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.colour-picker__preset,
chip-colourpicker[presets] li>button {
    border-radius: 50%;
}

.colour-picker__preset,
chip-colourpicker[presets] chip-dropdownitem {
    height: 25px;
}

chip-iconpicker chip-dropdownitem,
chip-colourpicker chip-dropdownitem {
    display: block;
}

.colour-picker--canvas-wrapper {
    display: flex;
}

.colour-picker__values-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.colour-picker__hex-wrapper {
    margin-top: auto;
    flex-basis: 100%;
}

.colour-picker__hex-wrapper chip-input {
    width: max-content;
}

chip-iconpicker chip-dropdownitem>div:first-child {
    display: flex;
    height: 50%;
    justify-content: center;
}

chip-dropdownitem>.beacon,
chip-dropdown>div>button>span>.beacon,
.btn--base>span>.beacon {
    margin-right: var(--block-size-md);
}

.input-control:not([readonly], .switch):focus,
.input-field:not([readonly], .switch):focus,
chip-input:focus-within>.input__wrapper>.input-field,
chip-textarea:focus-within>.input__wrapper>.input-field,
.search-bar:focus-within,
input[type="text"]:not([readonly]):focus-within {
    border-color: var(--theme-colour);
}

.search-bar {
    width: 100%;
    position: relative;
    display: flex;
    transition: background-color .2s, border-color .2s;
    background: var(--control-background-colour);
    color: var(--control-colour);
    border: 1px solid var(--outline-colour);
    justify-content: space-between;
    align-items: center;
    border-radius: var(--standard-border-radius);
    height: 2.75rem;
}

.input-control:not(.switch, input[type="checkbox"]:not(.switch, .btn-check), textarea, [type="color"]) {
    min-height: 2.75rem;
}

.search-bar__button {
    font-size: var(--body-font-size-sm);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    --btn-padding-x: .7rem;
    --btn-padding-y: 0;
}

.search-bar>input {
    width: 100%;
    background: rgba(0, 0, 0, 0);
    padding-top: 0;
    padding-bottom: 0;
    border: none !important;
    border-radius: 0px;
    outline: 0;
}

.card-frame {
    --card-spacing: var(--block-size-standard);
    --card-radius: .4rem;
    --card-title-size: 1.375rem;
    display: flex;
    position: relative;
    min-height: 0;
    border: 1px solid rgba(0, 0, 0, 0);
    flex-direction: column;
    justify-content: stretch;
    border-radius: var(--card-radius);
    background: var(--card-background-colour);
    transition: background-color .2s, box-shadow .2s, border-color .2s;
}

.card-plain {
    transition: background-color .2s, box-shadow .2s;
}

.card--xs {
    --card-spacing: var(--block-size-sm) !important;
}

.card--sm {
    --card-spacing: var(--block-size-md) !important;
}

.card--body {
    --card-spacing: var(--block-size-md) !important;
    --card-title-size: var(--body-font-size) !important;
}

.card--md {
    --card-spacing: var(--block-size-lg) !important;
}

.card--lg {
    --card-spacing: var(--block-size-xl) !important;
}

.card-secondary {
    background-color: rgba(var(--outline-colour-rgb), .375);
    border-color: var(--outline-colour);
}

.card-secondary .card-frame {
    background-color: rgba(0, 0, 0, 0);
}

.bordered-header .card-header {
    border-bottom: 1px solid var(--outline-colour);
}

.bordered-header .card-body {
    padding-top: var(--card-spacing);
}

.card-frame:not(.card-plain, .card-bordered, .card-secondary) {
    box-shadow: var(--card-box-shadow);
}

.card-keep-header>.card-header {
    position: sticky;
    top: var(--header-height);
    z-index: 2000;
    background-color: var(--card-background-colour);
    transition: background-color .2s;
}

[is-dynamic] .tab-group__tabs {
    overflow-x: auto;
    overflow-y: hidden;
}

.tab-group__tabs {
    position: relative;
    align-items: end;
    display: flex;
    --nav-border-width: 2px;
}

chip-tabgroup[variation="steps"] .tab-group__tabs {
    justify-content: space-between;
}

chip-tabgroup:not([variation]) .tab-group__tabs {
    white-space: nowrap;
}

chip-tabgroup[variation="steps"] chip-tab:first-child>.btn--base {
    padding-left: 0;
}

chip-tabgroup[variation="steps"] chip-tab:last-child>.btn--base {
    padding-right: 0;
}

.nav__actions {
    z-index: 100;
    margin: var(--block-size-xs) 0 var(--block-size-xs) auto;
}

.tab__wrapper {
    display: flex;
}

chip-tabgroup:not([orientation="vertical"])>.tab-group__tabs>.tab-group__wrapper {
    margin-right: var(--block-size-sm);
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper {
    width: 100%;
    overflow: hidden;
    justify-content: space-between;
}

chip-tabgroup[orientation="vertical"]>.tab-group__tabs {
    flex-direction: column-reverse;
}

chip-tabgroup[orientation="vertical"]>.tab-group__tabs>.tab__wrapper {
    flex-direction: column;
    height: 100%;
    overflow: auto;
    margin-top: var(--block-size-sm);
}

.tab-group__tabs:not(chip-tabgroup[variation] > .tab-group__tabs, chip-tabgroup[orientation="vertical"] > .tab-group__tabs):after {
    content: "";
    z-index: 1;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border-bottom: var(--nav-border-width) solid var(--outline-colour);
    border-left: 2px solid rgba(0, 0, 0, 0);
    transition: border-bottom-color .2s;
}

.tab-group__content {
    flex-grow: 1;
}

.restrict-height .tab-group__content {
    overflow: hidden;
}

.tab__close-button {
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
}

chip-tab[allow-close]>.btn--base {
    padding-right: var(--block-size-lg);
}

chip-tabgroup:not([variation]) chip-tab>.btn--base:after {
    content: "";
    left: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(var(--tab-colour), var(--tab-colour));
    background-repeat: no-repeat;
    transition-property: background-size;
    transition-duration: 0.5s, 0.5s;
    z-index: 2;
}

chip-tabgroup:not([variation], [orientation="vertical"]) chip-tab>.btn--base:after {
    top: var(--nav-border-width);
    width: 100%;
    height: 100%;
    border-bottom: var(--nav-border-width) solid rgba(0, 0, 0, 0);
    background-position: 50% calc(100% - (var(--nav-border-width) * -1));
    background-size: 0% var(--nav-border-width);
}

chip-tabgroup[orientation="vertical"]:not([variation]) chip-tab>.btn--base:after {
    top: calc(var(--nav-border-width) * -1);
    height: calc(100% + var(--nav-border-width));
    width: calc(100% + var(--nav-border-width));
    background-position: 100%;
    background-size: var(--nav-border-width) 0%;
}

chip-tabgroup:not([variation]) chip-tab>.btn--base {
    --btn-hover-border-colour: rgba(0, 0, 0, 0);
}

chip-tab>.btn--base>.fa-times {
    z-index: 100;
}

.btn--tab {
    width: 100%;
}

chip-tabgroup:not([variation], [orientation="vertical"]) chip-tab[selected]>.btn--base:after {
    background-size: 100% var(--nav-border-width);
}

chip-tabgroup[orientation="vertical"]:not([variation]) chip-tab[selected]>.btn--base:after {
    background-size: var(--nav-border-width) 100%;
}

.card-bordered {
    border-color: var(--outline-colour);
}

chip-card[hoverable] {
    cursor: pointer;
}

chip-card[variation][hoverable]:hover {
    box-shadow: var(--default-box-shadow);
}

chip-card:not([variation])[hoverable]:hover {
    border-color: var(--outline-colour);
}

button.card-bordered,
a.card-bordered {
    --btn-border-colour: var(--outline-colour);
    --btn-hover-border-colour: var(--outline-colour);
}

.danger-card {
    background: var(--danger-colour);
    color: var(--danger-colour-foreground);
    border: 1px solid var(--danger-colour);
}

.mt-card {
    margin-top: var(--card-spacing);
}

.card-header {
    padding: var(--card-spacing);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.card-title {
    font-size: var(--card-title-size);
    font-weight: var(--font-weight-bold);
}

.card-title>i:first-child {
    margin-right: var(--block-size-md);
    color: var(--theme-colour);
}

a.card-frame {
    --link-colour: var(--body-colour);
}

.card-subtitle:not(.danger-card .card-subtitle, .modal-dialog .card-subtitle) {
    color: var(--body-colour-faded);
}

.modal-dialog {
    height: calc(100% - var(--block-size-lg) * 2);
}

.spacer--xs {
    flex-shrink: 0;
    block-size: .2857rem;
}

.card-body {
    height: 100%;
    flex: inherit;
}

.card-body:not(.card-auto .card-body) {
    overflow-y: auto;
}

.card-stretch .card-body {
    display: flex;
    flex-direction: column;
}

.card-body,
.card-footer {
    padding-left: var(--card-spacing);
    padding-right: var(--card-spacing);
    padding-bottom: var(--card-spacing);
}

.card-body:first-child {
    padding: var(--card-spacing);
}

.card--flush>.card-body {
    padding: 0;
}

.card--flush>.card-header {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

input[type="radio"]:not(.btn-check) {
    width: 1.1429rem;
    height: 1.1429rem;
    cursor: pointer;
    margin: 0;
    padding: 0;
    background-color: var(--control-background-colour);
    border-radius: 50%;
    position: relative;
    display: grid;
    place-content: center;
}

input[type="radio"]:not(.btn-check)::before {
    content: "";
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    scale: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-width: 0;
    box-shadow: inset .5rem .5rem var(--theme-colour-foreground);
}

input[type="radio"]:not(.btn-check):checked::before {
    scale: 1;
}

input[type="radio"]:not(.btn-check):checked {
    background-color: var(--theme-colour);
}

input[type="checkbox"]:not(.switch, .btn-check) {
    appearance: none;
    font-family: "Font Awesome 5 Pro", var(--body-font-family);
    cursor: pointer;
    justify-content: center;
    display: flex;
    transition: background-color .2s, border-color .2s, color .2s;
    border-radius: 4px;
    height: 1.1429rem;
    width: 1.1429rem;
    padding: 0;
    position: relative;
}

input[type="checkbox"]:not(.switch, .btn-check):checked {
    background: var(--theme-colour) !important;
    border-color: var(--theme-colour);
}

input[type="checkbox"]:not(.switch, .btn-check):checked:before {
    content: '\f00c';
    color: var(--theme-colour-foreground);
    font-size: .6rem;
    font-weight: var(--font-weight-bold);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.chipside-table input[type="checkbox"]:not(.switch, .btn-check) {
    margin: 0;
}

.pagination {
    width: fit-content;
    gap: 10px;
    padding: .125rem;
    margin: 0 auto;
    --bs-pagination-font-size: var(--body-font-size);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-color: var(--body-colour);
    --bs-pagination-bg: rgba(0, 0, 0, 0);
    --bs-pagination-active-bg: rgba(0, 0, 0, 0);
    --bs-pagination-active-color: var(--theme-colour);
    --bs-pagination-focus-color: var(--theme-colour);
    --bs-pagination-border-color: rgba(0, 0, 0, 0);
    --bs-pagination-hover-border-color: rgba(0, 0, 0, 0);
    --bs-pagination-hover-bg: rgba(0, 0, 0, 0);
    --bs-pagination-focus-bg: rgba(0, 0, 0, 0);
    --bs-pagination-active-border-color: rgba(0, 0, 0, 0);
    --bs-pagination-hover-color: var(--theme-colour);
    --bs-pagination-disabled-bg: rgba(0, 0, 0, 0);
    --bs-pagination-disabled-color: var(--body-colour-faded);
    --bs-pagination-disabled-border-color: rgba(0, 0, 0, 0);
}

.pagination .page-link {
    margin: 0;
}

.pagination .page-item.active {
    --bs-pagination-color: var(--theme-colour-dark);
}

.pagination .page-item {
    border-radius: var(--standard-border-radius);
}

.chipside-table {
    --table-background-colour: var(--background-colour);
    --row-separator-colour: var(--outline-colour);
    --table-header-background-colour: var(--table-background-colour);
    --header-colour: var(--body-colour);
    --row-hover-background-colour: rgba(var(--outline-colour-rgb), .75);
    --selected-row-background-colour: var(--outline-colour);
    --selected-row-colour: var(--body-colour);
    --row-separator-height: 1px;
    --table-font-size: var(--body-font-size);
    --header-font-size: var(--body-font-size-sm);
    --row-background-colour: var(--table-background-colour);
    background: var(--table-background-colour);
    line-height: 1.7142857143rem;
    margin: 0;
    color: var(--body-colour);
    border-spacing: 0 0;
    border-collapse: collapse;
    width: 100%;
    word-break: break-word;
    vertical-align: top;
    caption-side: bottom;
    font-size: var(--table-font-size);
    border-color: inherit;
    text-indent: 0;
    transition: background-color .2s;
}

.table-striped tbody>tr:not(.active, :hover):nth-child(odd of tr:not(.table-body-label)) {
    background-color: rgba(var(--outline-colour-rgb), .25);
}

chip-emptyprompt {
    --prompt-icon-size: var(--block-size-xl);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

chip-emptyprompt:not([size="sm"]) {
    width: 75%;
}

.prompt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prompt-icon i {
    font-size: var(--prompt-icon-size);
}

chip-emptyprompt[size="sm"] {
    --prompt-icon-size: var(--block-size-lg);
}

chip-emptyprompt[size="sm"] .prompt__description {
    margin-top: var(--block-size-xs);
    font-size: var(--body-font-size);
}

.prompt-description {
    color: var(--body-colour-faded);
    line-height: var(--body-line-height-sm);
}

.entry-caption>span,
.table-refresh-time>span {
    font-weight: var(--font-weight-bold);
}

.table-caption {
    font-size: var(--body-font-size);
    margin-top: var(--block-size-base);
}

.chipside-table td,
.chipside-table th {
    vertical-align: middle;
    padding: var(--block-size-sm);
}

.chipside-table td:empty {
    padding: 0 !important;
}

.chipside-table th>div {
    opacity: .8;
    position: relative;
    padding-right: 1.25rem;
    width: fit-content;
}

.chipside-table th>div>i {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.chipside-table tbody tr:not(.table-body-label) {
    cursor: pointer;
    outline: 0;
}

.flex-grow {
    flex-grow: 1 !important;
}

.chipside-table tr:not(.table-body-label) td {
    border-top-color: var(--row-separator-colour);
    border-right-color: var(--row-separator-colour);
    border-bottom-color: var(--row-separator-colour);
    border-left-color: var(--row-separator-colour);
    border-top-width: var(--row-separator-height);
    border-bottom-width: var(--row-separator-height);
    white-space: nowrap;
    transition: border-bottom-color .2s;
}

.chipside-table tr:not(.table-body-label) td>div {
    text-overflow: ellipsis;
    overflow: hidden;
}

.chipside-table tbody.collapsed tr:not(.table-body-label) {
    display: none;
}

.chipside-table tbody.collapsed .table-body-label i {
    transform: rotate(-90deg);
}

.chipside-table tbody tr.active {
    background: var(--selected-row-background-colour);
    color: var(--selected-row-colour);
}

.chipside-table thead th:first-child,
.chipside-table td:first-child,
.chipside-table .table-body-label {
    padding-left: 1.5rem !important;
}

.table-sortable th {
    cursor: pointer;
}

.chipside-table> :not(caption)>*>* {
    background: rgba(0, 0, 0, 0);
}

.chipside-table>thead {
    vertical-align: bottom;
}

.chipside-table thead th {
    position: sticky;
    font-weight: var(--font-weight-medium);
    font-size: var(--header-font-size);
    top: 0;
    z-index: 1;
    background-color: var(--table-header-background-colour);
    color: var(--header-colour);
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}

.chipside-table td i {
    z-index: 0;
}

.chipside-table>tbody {
    vertical-align: inherit;
}

.chipside-table tbody td:empty {
    padding: 0 !important;
}

.chipside-table tbody tr:not(.table-body-label, .active) {
    background-color: var(--row-background-colour);
}

.chipside-table tbody tr:not(.table-body-label, .active):hover {
    background-color: var(--row-hover-background-colour);
}

.table-body-label {
    background-color: rgba(0, 0, 0, 0) !important;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    color: var(--body-colour-faded);
    transition: color .2s;
}

.table-body-label:hover {
    color: var(--body-colour);
}

.table-body-label>td {
    padding: 1rem 0 .25rem .25rem !important;
}

.table-body-label>td>i {
    margin-left: .75rem;
    font-size: var(--body-font-size-xs);
}

.chipside-table tbody:first-of-type .table-body-label>td {
    padding-top: .25rem !important;
}

.table-body-label i {
    transition: transform .2s;
}

.popover-title {
    font-weight: var(--font-weight-medium);
    margin-bottom: .5rem;
}

.autocomplete-search-term {
    display: flex;
    font-weight: var(--font-weight-medium);
    justify-content: center;
}

.search-dropdown {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    padding: .5rem;
    max-height: 50vh;
    background: var(--card-background-colour);
    z-index: -1;
    margin-top: .5rem;
    top: 100%;
    opacity: 0;
    transition: opacity .2s;
    left: 0;
    border-radius: var(--standard-border-radius);
    box-shadow: var(--default-box-shadow);
}

.search-dropdown.show {
    opacity: 1;
    z-index: 2000;
    pointer-events: all;
}

.autocomplete-wrapper {
    width: 100%;
    border-radius: var(--standard-border-radius);
    margin-bottom: .25rem;
    justify-content: start;
    cursor: pointer;
    padding: .15rem .5rem;
    padding-right: 0;
    display: flex;
    align-items: center;
}

.autocomplete-wrapper>button {
    display: flex;
    transition: opacity .2s;
    opacity: 0;
    align-items: center;
}

.autocomplete-wrapper:hover>button {
    opacity: 1;
}

.autocomplete-wrapper>button:focus {
    opacity: 1;
}

.btn-filter-exclude {
    margin-left: auto;
}

.autocomplete-row {
    height: 100%;
    overflow: auto;
    max-height: 75vh;
}

.autocomplete-section {
    padding: 0;
}

.autocomplete-wrapper>span {
    margin-top: .25rem;
    margin-bottom: .25rem;
    margin-left: .75rem;
}

.autocomplete-wrapper>div:first-child {
    border-radius: 5px 0px 0px 5px;
    width: 30.5px;
}

.ellipsize {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[badge]:not([badge=""]) {
    position: relative;
}

[badge]:not([badge=""])::after {
    content: attr(badge);
    border-radius: 50%;
    background: var(--danger-colour);
    color: var(--danger-colour-foreground);
    font-size: var(--body-font-size-xxs);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--block-size-base);
    min-width: var(--block-size-base);
    padding: 0 var(--block-size-xs);
    position: absolute;
    top: 0;
    right: 0;
    translate: 50% -50%;
    transition: background-color .2s, color .2s;
}

[button-style="icon"][variation="body"][badge]:not([badge=""])::after {
    translate: var(--block-size-xs) calc(var(--block-size-xs) * -1) !important;
}

.bg-faded {
    background-color: rgba(var(--outline-colour-rgb), .375);
}

.bg-background {
    background: var(--background-colour) !important;
}

.bg-card {
    background: var(--card-background-colour) !important;
}

.bg-header {
    background: var(--header-background-colour) !important;
}

.bg-sidebar {
    background: var(--sidebar-background-colour) !important;
}

.bg-code {
    background: var(--code-block-background-colour) !important;
}

.bg-theme {
    background: var(--theme-colour) !important;
    color: var(--theme-colour-foreground) !important;
}

.bg-secondary {
    background: var(--secondary-colour) !important;
    color: var(--secondary-colour-foreground) !important;
}

.bg-success {
    background: var(--success-colour) !important;
    color: var(--success-colour-foreground) !important;
}

.bg-thumb {
    background: var(--thumb-colour) !important;
}

.bg-success-dark {
    background: var(--success-colour-dark) !important;
    color: var(--success-colour-foreground) !important;
}

.dropdown__group-header * {
    font-weight: var(--font-weight-bold);
}

.bg-theme-dark {
    background: var(--theme-colour-dark);
    color: var(--theme-colour-foreground);
}

.bg-complementary {
    background: var(--theme-colour-complementary);
    color: var(--theme-colour-complementary-foreground);
}

.bg-complementary-dark {
    background: var(--theme-colour-complementary-dark);
    color: var(--theme-colour-complementary-foreground);
}

.bg-danger {
    background: var(--danger-colour) !important;
    color: var(--danger-colour-foreground) !important;
}

.bg-danger-dark {
    background: var(--danger-colour-dark) !important;
    color: var(--danger-colour-foreground) !important;
}

.bg-warning {
    background: var(--warning-colour) !important;
    color: var(--warning-colour-foreground) !important;
}

.bg-warning-dark {
    background: var(--warning-colour-dark) !important;
    color: var(--warning-colour-foreground) !important;
}

.bg-info {
    background: var(--info-colour) !important;
    color: var(--info-colour-foreground) !important;
}

.bg-info-dark {
    background: var(--info-colour-dark) !important;
    color: var(--info-colour-foreground) !important;
}

.text-theme {
    color: var(--theme-colour) !important;
    --btn-colour: var(--theme-colour) !important;
}

.text-theme-fg {
    color: var(--theme-colour-foreground) !important;
    --btn-colour: var(--theme-colour-foreground) !important;
    --link-colour: var(--theme-colour-foreground);
}

.text-theme-dark {
    color: var(--theme-colour-dark);
    --btn-colour: var(--theme-colour-dark);
}

.text-complementary {
    color: var(--theme-colour-complementary);
    --btn-color: var(--theme-colour-complementary);
}

.text-complementary-dark {
    color: var(--theme-colour-complementary-dark);
    --btn-color: var(--theme-colour-complementary-dark);
}

.themed-link {
    cursor: pointer;
    color: var(--theme-colour);
    text-decoration: none;
}

.themed-link:hover {
    color: var(--theme-colour-dark);
}

.container-fluid {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    flex-grow: 1;
}

/* Prevents the rows from exceeding the height of the container */
.flex-container>.row {
    min-height: 0;
}

.google-map {
    height: 100%;
    width: 100%;
    border-radius: var(--standard-border-radius);
    box-shadow: 0 2px 5px rgb(0 0 0 / 25%);
}

.gmnoprint div[draggable='false'],
.gm-button,
.gm-svpc,
.gm-fullscreen-control {
    border-radius: var(--standard-border-radius) !important;
}

.gm-title {
    color: #333;
}

.gm-style-iw-chr .gm-ui-hover-effect>span {
    height: 16px !important;
    mask-repeat: no-repeat;
    margin: 0 0 0 30px !important;
}

.yNHHyP-marker-view {
    outline: none !important;
}

.gmnoprint button {
    height: 29px;
}

.gmnoprint[role="menubar"] {
    margin: 10px !important;
}

.gm-fullscreen-control img,
.gmnoprint div[draggable='false'] img {
    width: var(--body-font-size-sm) !important;
    height: var(--body-font-size-sm) !important;
}

.poi-info-window .title {
    margin-bottom: var(--block-size-sm);
}

.gm-style-iw button[title="Close"] {
    top: 0 !important;
    right: 0 !important;
}

.gm-svpc,
.gm-fullscreen-control,
.gm-bundled-control-on-bottom .gmnoprint>div>*:not(div) {
    width: 29px !important;
    height: 29px !important;
}

.gm-style-cc a,
.gm-style-cc button {
    --btn-line-height: 14px;
    height: auto;
    vertical-align: baseline;
    font-weight: var(--font-weight-regular);
}

.gm-bundled-control-on-bottom .gmnoprint>div {
    width: 29px !important;
    height: fit-content !important;
}

.gm-svpc img {
    width: var(--block-size-base) !important;
    height: var(--block-size-base) !important;
}

.gm-svpc+div {
    top: 43.5px !important;
}

.gm-fullscreen-control+div {
    top: 43.5px !important;
}

.gm-bundled-control-on-bottom {
    right: 29px !important;
    bottom: 121.5px !important;
}

.gm-bundled-control-on-bottom .gmnoprint {
    width: 29px !important;
}

.gm-style-mtc button,
.gm-button {
    height: 29px !important;
}

.gm-style-mtc button,
.gm-style-mtc ul li label,
.gm-button {
    font-size: var(--body-font-size-sm) !important;
    font-weight: var(--font-weight-medium);
    color: rgb(86, 86, 86);
}

.gm-style-mtc ul li label:not(:first-child) {
    margin-left: var(--block-size-sm);
}

.gm-button {
    --btn-background-colour: white;
    --btn-hover-background-colour: rgb(235, 235, 235);
    --btn-padding-x: 17px;
    --btn-padding-y: 0;
    --btn-box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    border-width: 0;
    width: fit-content;
    margin: 10px;
}

.gm-button:hover {
    color: black;
}

.gm-button-sm {
    width: 29px;
    padding: 0px;
}

.gmnoprint[role='menubar'] div:first-child button {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.gmnoprint[role='menubar'] div:last-child button {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.dot-spin {
    height: 10px;
    width: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: .4rem;
    background: transparent;
    color: transparent;
    box-shadow: 0 -18px 0 0 var(--theme-colour), 12.727926px -12.727926px 0 0 var(--theme-colour), 18px 0 0 0 var(--theme-colour), 12.727926px 12.727926px 0 0 rgba(0, 0, 0, 0), 0 18px 0 0 rgba(0, 0, 0, 0), -12.727926px 12.727926px 0 0 rgba(0, 0, 0, 0), -18px 0 0 0 rgba(0, 0, 0, 0), -12.727926px -12.727926px 0 0 rgba(0, 0, 0, 0);
    animation: dot-spin 1.5s infinite linear;
}

.ignore-arrow::after {
    display: none;
}

.blur>*:not(.ignore-blur, .cubes, .cube, .ajax-throbber, .blurred-menu) {
    animation: blur-animation .5s forwards;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.force-blur>*:not(.ignore-blur) {
    animation: blur-animation 0s forwards;
    animation-delay: 1s;
    pointer-events: none;
    user-select: none;
}

.remove-blur>*:not(.ignore-blur) {
    animation: blur-animation-reverse .5s forwards;
}

.blurred-menu {
    padding: var(--block-size-xxl) 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    translate: -50% 0;
}

.blurred-menu>.row {
    max-width: 800px;
    margin: 0 auto;
}

.blurred-menu-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.blurred-menu-body {
    margin-top: 1.5rem;
    overflow: auto;
    height: 100%;
}

.blurred-menu-title {
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: .75rem;
}

.blurred-menu-caption {
    font-size: 1rem;
}

.blur .blurred-menu {
    opacity: 1;
    pointer-events: all;
}

.ajax-throbber {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cubes {
    width: 100px;
    transform: rotate(-45deg);
}

.cubes .cube {
    height: 20px;
    width: 20px;
    margin: 15px;
    background: var(--theme-colour);
    float: right;
    opacity: 0;
    outline: 1px solid transparent;
}

.cubes .cube:nth-child(1) {
    background: var(--theme-colour-complementary);
    -webkit-animation: purpleAnim 2s infinite 0.55s;
    animation: purpleAnim 2s infinite 0.55s;
    position: fixed;
    border-radius: 100%;
}

.cubes .cube:nth-child(2) {
    -webkit-animation: cubeAnim1 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.26s;
    animation: cubeAnim1 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.26s;
}

.cubes .cube:nth-child(3) {
    -webkit-animation: cubeAnim4 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.755s;
    animation: cubeAnim4 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.755s;
}

.cubes .cube:nth-child(4) {
    -webkit-animation: cubeAnim2 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.741s;
    animation: cubeAnim2 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.741s;
}

.cubes .cube:nth-child(5) {
    -webkit-animation: cubeAnim3 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.235s;
    animation: cubeAnim3 2s infinite cubic-bezier(0.4, 0, 0.2, 1) 1.235s;
}

.tooltip-container {
    position: absolute;
    opacity: 0;
    z-index: 2000;
    transition: opacity .2s;
    max-width: 200px;
}

.tooltip--shown {
    opacity: 1;
}

.tooltip-container[placement="top"] {
    translate: -50% calc(-100% - 8px - var(--block-size-xs));
}

.tooltip-container[placement="right"] {
    translate: calc(8px + var(--block-size-xs)) -50%;
}

.tooltip-container[placement="left"] {
    translate: calc(-100% - 8px - var(--block-size-xs)) -50%;
}

.tooltip-container[placement="bottom"] {
    translate: -50% calc(8px + var(--block-size-xs));
}

.tooltip-container[placement="bottom"] .tooltip-arrow {
    top: 0;
}

.tooltip-container[placement="right"] .tooltip-arrow {
    top: 50%;
    left: 0;
}

.tooltip-container[placement="left"] .tooltip-arrow {
    top: 50%;
    left: 100%;
}

.tooltip-content {
    display: block;
    background-color: var(--tooltip-background-colour);
    font-size: var(--body-font-size);
    font-family: var(--body-font-family);
    text-align: center;
    font-weight: var(--font-weight-regular);
    color: var(--tooltip-colour);
    line-height: var(--body-line-height);
    padding: var(--block-size-xs) var(--block-size-sm);
    border-radius: var(--standard-border-radius);
    height: fit-content;
    pointer-events: none;
    width: max-content;
    max-width: 200px;
}

.tooltip-arrow {
    position: absolute;
    transform-origin: center center;
    border-radius: 2px;
    left: 50%;
    pointer-events: none;
    top: 100%;
    border-width: 0;
    z-index: 9999;
    background-color: var(--tooltip-background-colour);
    inline-size: 12px;
    block-size: 12px;
    rotate: z 45deg;
    translate: -50% -50%;
}

.toggle-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    transition: color .2s ease, box-shadow .2s ease, border-color .2s ease;
    grid-column: 3/4;
    grid-row: 4/5;
    position: relative;
    border-color: transparent;
    width: 4rem;
    height: 4rem;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.toggle-icon+label {
    font-size: 0.875rem;
    text-align: center;
    margin-top: .5rem;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--body-colour);
    transition: color .2s;
    font-weight: var(--font-weight-medium);
}

.btn-check:checked+.toggle-icon {
    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
    color: var(--theme-colour);
    border-color: var(--theme-colour);
}

.pv-loading-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-loading-icon {
    margin: 0 auto;
    height: 100%;
    aspect-ratio: 1;
    max-height: 50px;
    min-height: 25px;
    border-top: 5px solid var(--theme-colour);
    border-right: 5px solid transparent;
    border-radius: 50%;
    animation: 1.2s pv-spin linear infinite;
}

.context-menu-items,
.context-menu-toolbar-container {
    position: fixed;
    min-width: 200px;
    list-style-type: none;
    padding-inline-start: 0px;
    width: max-content;
    font-family: var(--body-font-family);
    margin: 0;
    padding: var(--block-size-sm) 0;
    background: var(--dropdown-background-colour);
    border-radius: var(--standard-border-radius);
    box-shadow: var(--default-box-shadow);
    opacity: 0;
    transform: translate(0, 15px);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.context-menu-items button {
    outline: 0 !important;
}

.context-menu-toolbar-container {
    max-width: max-content;
}

.context-menu-toolbar {
    position: absolute;
    top: -45px;
    left: 0;
    margin: 0;
    display: block;
    height: auto;
    background: var(--card-background-colour);
}

.context-menu-toolbar-btn {
    padding: 4px;
    display: inline-block;
    border-radius: 3px;
    background: transparent;
    border: 1px solid transparent;
    min-width: 31px;
}

.context-menu-toolbar-btn:not(.format-button-active):hover {
    background: var(--theme-colour);
}

.context-menu-toolbar-btn.format-button-active {
    cursor: pointer !important;
}

.context-menu-item,
.context-menu-toolbar-item,
.context-menu-header {
    display: block;
    position: relative;
    margin: 0;
    color: var(--body-colour);
    white-space: nowrap;
}

.context-menu-header {
    margin-bottom: .5rem;
    font-weight: var(--font-weight-medium);
}

.context-menu-header .menu-header-title {
    color: var(--theme-colour-dark);
    margin-left: .25rem;
}

.context-menu-header .menu-header-caption {
    opacity: .75;
}

.context-menu-secondary-icon {
    right: -4px;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.context-menu-toolbar-item {
    display: inline;
}

.context-menu-item-btn {
    --btn-colour: var(--body-colour);
    justify-content: start;
    text-align: left;
    display: block;
    width: 100%;
    white-space: nowrap;
    font-weight: inherit;
    padding: .375rem 1rem;
}

.context-menu-item-btn i,
.context-menu-item-btn .fa-stack {
    text-align: center;
    width: 1.25em;
    margin-right: var(--block-size-sm);
}

.context-menu-items .context-menu-items {
    top: calc(var(--block-size-sm) * -1);
    left: 99%;
    position: absolute;
}

.context-sub-menu-item {
    z-index: 1001;
}

.context-sub-menu-item::after {
    content: "";
    right: 6px;
    top: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--body-colour);
}

.context-menu-shown,
.context-menu-item.show>chip-menuitem>chip-contextmenu>.context-menu-items,
.context-menu-shown .context-menu-toolbar-container {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
}

.context-menu-separator {
    display: block;
    height: 1px;
    background: var(--outline-colour);
}

.context-menu-toolbar-separator {
    width: 1px;
    opacity: 0.5;
    height: 75%;
    margin-left: -3px;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--outline-colour);
}

chip-menudivider hr {
    margin: .5rem 0;
}

.sortable-list {
    position: relative;
    overflow: hidden;
}

.sortable-handle {
    cursor: grab;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.toast__wrapper {
    right: 0;
    position: fixed;
    padding: var(--block-size-base);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: end;
    width: max-content;
    max-width: 100%;
    pointer-events: none;
}

.chip-toast {
    --toast-background-colour: var(--basckground-colour);
    --toast-colour: var(--body-colour);
    max-width: 100%;
    width: fit-content;
    pointer-events: auto;
    padding: var(--block-size-sm);
    background-color: var(--toast-background-colour);
    color: var(--toast-colour);
    box-shadow: var(--default-box-shadow);
    border-radius: var(--standard-border-radius);
    transition: translate .2s ease-out, background-color .2s, color .2s;
    translate: 100% 0;
}

.chip-toast.show {
    translate: 0 0;
}

.chip-toast button {
    --btn-colour: var(--toast-colour);
    --btn-hover-background-colour: rgba(0, 0, 0, 0);
    margin-left: var(--block-size-md);
}

.toast__wrapper>.chip-toast:not(:last-child) {
    margin-bottom: var(--block-size-base);
}

.toast-success {
    --toast-background-colour: var(--success-colour);
    --toast-colour: var(--success-colour-foreground);
}

.toast-warning {
    --toast-background-colour: var(--warning-colour);
    --toast-colour: var(--warning-colour-foreground);
}

.toast-error {
    --toast-background-colour: var(--danger-colour);
    --toast-colour: var(--danger-colour-foreground);
}

.toast-container {
    right: 0;
    position: fixed;
    padding: 1rem;
}

.list-view {
    height: 100%;
    overflow: auto;
    margin-right: 0;
}

.list-view>.btn-collapse:not(:first-child) {
    margin-top: 1.5rem;
}

.list-view-item img:not(.profile-picture) {
    border-radius: var(--standard-border-radius);
}

.profile-picture {
    height: var(--block-size-lg);
    width: var(--block-size-lg);
    position: relative;
}

.list-view-item {
    text-decoration: none;
    display: block;
    --link-colour: var(--body-colour);
    cursor: pointer;
    z-index: 0;
    transition: box-shadow .2s;
}

.list-view-item:not(:last-child),
.spaced-list>*:not(:last-child) {
    margin-bottom: var(--block-size-md);
}

.spaced-list--xs>*:not(:last-child) {
    margin-bottom: var(--block-size-xs);
}

.spaced-list--s>*:not(:last-child) {
    margin-bottom: var(--block-size-sm);
}

.spaced-list--base>*:not(:last-child) {
    margin-bottom: var(--block-size-base);
}

.spaced-list--lg>*:not(:last-child) {
    margin-bottom: var(--block-size-lg);
}

.spaced-list--xl>*:not(:last-child) {
    margin-bottom: var(--block-size-xl);
}

.spaced-list--xxl>*:not(:last-child) {
    margin-bottom: var(--block-size-xxl);
}

.spaced-list--xxxl>*:not(:last-child) {
    margin-bottom: var(--block-size-xxxl);
}

.spaced-list--xxxxl>*:not(:last-child) {
    margin-bottom: var(--block-size-xxxxl);
}

.list-view>.btn-collapse {
    display: block;
}

.list-view-item-icon {
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(var(--card-spacing) / 2);
}

.upper-spaced {
    text-transform: uppercase;
    letter-spacing: .125rem;
}

.list-view-item-image {
    margin: auto;
}

.list-view-item .card-header:not(:last-child) {
    padding-bottom: 0;
}

.list-view-item .card-body {
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.list-view-item:focus-visible {
    outline: 2px solid var(--theme-colour);
}

/* This makes sure that dropdowns don't go behind other items in a grid */
.list-view-item:focus-within {
    z-index: 1;
}

.list-view-item-actions {
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(var(--card-spacing) / 2);
}

.list-view-item-footer {
    display: none;
}

.list-view-item-footer .btn {
    width: 100%;
    font-weight: var(--font-weight-medium);
    padding-bottom: calc(var(--card-spacing) * .75);
}

.list-view-item-footer>.row {
    margin: 0;
}

.list-view-item-footer>.row>.col {
    padding: 0;
}

.mega-menu {
    display: flex;
    flex-wrap: wrap;
    max-width: 525px;
    margin: 0 auto;
    margin-top: var(--block-size-base);
}

.mega-menu-item {
    --btn-hover-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-box-shadow: var(--default-box-shadow);
    --btn-border-colour: var(--outline-colour);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 175px;
    width: 175px;
    border-radius: 0px;
    border-style: solid;
    border-width: 0px;
}

.mega-menu-item i {
    font-size: var(--block-size-lg);
    margin-bottom: var(--block-size-base);
}

.btn-collapse>i:last-child {
    transition: transform .2s;
    font-size: var(--body-font-size-xs);
}

.btn-collapse:not(.collapsed)>i:last-child {
    transform: rotate(-180deg);
}

.btn-collapse:not(.collapsed)>.fa-folder:before {
    content: "\f07c";
}

.beacon {
    --beacon-colour: var(--theme-colour);
    --beacon-size: .65rem;
    width: var(--beacon-size);
    display: inline-block;
    aspect-ratio: 1;
    background-color: var(--beacon-colour);
    border-radius: 50%;
    position: relative;
}

.beacon--success {
    --beacon-colour: var(--success-colour);
}

.beacon--danger {
    --beacon-colour: var(--danger-colour);
}

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

.beacon--secondary {
    --beacon-colour: var(--secondary-colour);
}

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

.beacon::before {
    box-shadow: var(--beacon-colour) 0px 0px 1px 1px;
    transform: scale(1.6);
    opacity: .4;
}

.beacon:not(.beacon--off)::after {
    animation: 2.5s ease-out 0s infinite normal none running beacon-animation;
}

.beacon--sm {
    --beacon-size: var(--block-size-sm);
}

.beacon--sm::before {
    box-shadow: var(--beacon-colour) 0px 0px 1px 1.75px;
}

.beacon--md {
    --beacon-size: var(--block-size-md);
}

.beacon::before,
.beacon::after {
    position: absolute;
    content: "";
    inline-size: 100%;
    block-size: 100%;
    inset-inline-start: 0px;
    inset-block-start: 0px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
}

.beacon:after {
    box-shadow: var(--beacon-colour) 0px 0px 1px 1px;
    opacity: 0;
}

.beacon:not(.beacon--off)::before {
    animation: 2.5s ease-out 0.25s infinite normal none running beacon-animation;
}

.tab-group__tab {
    display: none;
    height: 100%;
}

.tab-group__tab.selected {
    display: block;
    animation: fadeIn .5s;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes beacon-animation {
    0% {
        transform: scale(.1);
        opacity: 1;
    }

    70% {
        transform: scale(3);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pv-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blur-animation {
    0% {
        filter: blur(0px);
    }

    100% {
        filter: blur(5rem);
    }
}

@keyframes blur-animation-reverse {
    0% {
        filter: blur(5rem);
    }

    100% {
        filter: blur(0px);
    }
}

@keyframes dot-spin {

    0%,
    100% {
        box-shadow: 0 -18px 0 0 var(--theme-colour), 12.727926px -12.727926px 0 0 var(--theme-colour), 18px 0 0 0 var(--theme-colour), 12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), 0 18px 0 -5px rgba(0, 0, 0, 0), -12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), -18px 0 0 -5px rgba(0, 0, 0, 0), -12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0);
    }

    12.5% {
        box-shadow: 0 -18px 0 -5px rgba(0, 0, 0, 0), 12.727926px -12.727926px 0 0 var(--theme-colour), 18px 0 0 0 var(--theme-colour), 12.727926px 12.727926px 0 0 var(--theme-colour), 0 18px 0 -5px rgba(0, 0, 0, 0), -12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), -18px 0 0 -5px rgba(0, 0, 0, 0), -12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0);
    }

    25% {
        box-shadow: 0 -18px 0 -5px rgba(0, 0, 0, 0), 12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0), 18px 0 0 0 var(--theme-colour), 12.727926px 12.727926px 0 0 var(--theme-colour), 0 18px 0 0 var(--theme-colour), -12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), -18px 0 0 -5px rgba(0, 0, 0, 0), -12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0);
    }

    37.5% {
        box-shadow: 0 -18px 0 -5px rgba(0, 0, 0, 0), 12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0), 18px 0 0 -5px rgba(0, 0, 0, 0), 12.727926px 12.727926px 0 0 var(--theme-colour), 0 18px 0 0 var(--theme-colour), -12.727926px 12.727926px 0 0 var(--theme-colour), -18px 0 0 -5px rgba(0, 0, 0, 0), -12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0);
    }

    50% {
        box-shadow: 0 -18px 0 -5px rgba(0, 0, 0, 0), 12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0), 18px 0 0 -5px rgba(0, 0, 0, 0), 12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), 0 18px 0 0 var(--theme-colour), -12.727926px 12.727926px 0 0 var(--theme-colour), -18px 0 0 0 var(--theme-colour), -12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0);
    }

    62.5% {
        box-shadow: 0 -18px 0 -5px rgba(0, 0, 0, 0), 12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0), 18px 0 0 -5px rgba(0, 0, 0, 0), 12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), 0 18px 0 -5px rgba(0, 0, 0, 0), -12.727926px 12.727926px 0 0 var(--theme-colour), -18px 0 0 0 var(--theme-colour), -12.727926px -12.727926px 0 0 var(--theme-colour);
    }

    75% {
        box-shadow: 0 -18px 0 0 var(--theme-colour), 12.727926px -12.727926px 0 -5px rgba(0, 0, 0, 0), 18px 0 0 -5px rgba(0, 0, 0, 0), 12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), 0 18px 0 -5px rgba(0, 0, 0, 0), -12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), -18px 0 0 0 var(--theme-colour), -12.727926px -12.727926px 0 0 var(--theme-colour);
    }

    87.5% {
        box-shadow: 0 -18px 0 0 var(--theme-colour), 12.727926px -12.727926px 0 0 var(--theme-colour), 18px 0 0 -5px rgba(0, 0, 0, 0), 12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), 0 18px 0 -5px rgba(0, 0, 0, 0), -12.727926px 12.727926px 0 -5px rgba(0, 0, 0, 0), -18px 0 0 -5px rgba(0, 0, 0, 0), -12.727926px -12.727926px 0 0 var(--theme-colour);
    }
}

@keyframes rotateBefore {
    from {
        transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
    }
}

@keyframes rotateAfter {
    from {
        transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
    }
}

@-webkit-keyframes cubeAnim1 {
    0% {
        opacity: 0;
        transform: translate(0, -50px);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes cubeAnim1 {
    0% {
        opacity: 0;
        transform: translate(0, -50px);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes cubeAnim2 {
    0% {
        opacity: 0;
        transform: translate(50px, 0);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes cubeAnim2 {
    0% {
        opacity: 0;
        transform: translate(50px, 0);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes cubeAnim3 {
    0% {
        opacity: 0;
        transform: translate(0, 50px);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes cubeAnim3 {
    0% {
        opacity: 0;
        transform: translate(0, 50px);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes cubeAnim4 {
    0% {
        opacity: 0;
        transform: translate(-50px, 0);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes cubeAnim4 {
    0% {
        opacity: 0;
        transform: translate(-50px, 0);
    }

    40% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes purpleAnim {
    0% {
        transform: translate(50px, 0px);
        opacity: 1;
    }

    25% {
        transform: translate(50px, 50px);
    }

    50% {
        transform: translate(0px, 50px);
    }

    75% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(50px, 0px);
        opacity: 1;
    }
}

@keyframes purpleAnim {
    0% {
        transform: translate(50px, 0px);
        opacity: 1;
    }

    25% {
        transform: translate(50px, 50px);
    }

    50% {
        transform: translate(0px, 50px);
    }

    75% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(50px, 0px);
        opacity: 1;
    }
}

/* Dialogs */

.dialog .icon-box {
    color: var(--dialog-theme);
    font-size: 4.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.dialog svg {
    height: 10rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.dialog .dialog-title {
    color: var(--dialog-theme);
    fill: var(--dialog-theme);
}

.btn-dialog-themed {
    font-weight: var(--font-weight-medium);
    --btn-border-colour: rgba(0, 0, 0, 0);
    margin: 0 auto;
    width: 50%;
}

.dialog-box-warning .btn-dialog-themed {
    --btn-colour: var(--warning-colour-foreground);
    --btn-background-colour: var(--warning-colour);
    --btn-hover-background-colour: var(--warning-colour-dark);
}

.dialog-box-error .btn-dialog-themed {
    --btn-colour: var(--danger-colour-foreground);
    --btn-background-colour: var(--danger-colour);
    --btn-hover-background-colour: var(--danger-colour-dark);
}

.dialog-box-success .btn-dialog-themed {
    --btn-colour: var(--success-colour-foreground);
    --btn-background-colour: var(--success-colour);
    --btn-hover-background-colour: var(--success-colour-dark);
}

.dialog {
    --dialog-theme: var(--theme-colour);
    --bs-modal-border-radius: 10px;
    overflow: hidden;
}

.modal-content>.card-header {
    text-align: center;
}

.modal-dialog:not(.modal-lg) .card-subtitle {
    margin-top: .25rem;
}

.modal-dialog .card-subtitle {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dialog-box-error {
    --dialog-theme: var(--danger-colour);
}

.dialog-box-warning {
    --dialog-theme: var(--warning-colour);
}

.dialog-box-success {
    --dialog-theme: var(--success-colour);
}

.dialog-icon {
    color: var(--dialog-theme);
    font-size: calc(var(--card-title-size) * 1.375);
    margin-bottom: var(--block-size-md);
}

.modal-content.card-frame {
    --card-spacing: var(--block-size-lg);
}

.modal-content>.card-body:empty {
    padding: 0;
}

.dialog .modal-content>.card-header>.card-title {
    color: var(--dialog-theme);
}

.dialog .modal-dialog.modal-xl .modal-content {
    height: 100%;
}

.dialog .modal-footer button {
    width: 75%;
    font-weight: var(--font-weight-medium);
    box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
}

.dialog .modal-content {
    min-width: 300px;
    margin: 0 auto;
    max-height: 100%;
    box-shadow: 0 5px 20px rgb(0 0 0 / 25%);
}

.dialog .modal-content>*:not(.dialog-custom) {
    z-index: 100;
}

.dialog .modal-header {
    display: block;
}

.dialog-input-container {
    width: 100%;
    font-weight: var(--font-weight-regular);
}

.dialog-input {
    width: 100%;
}

.dialog:not(.dialog-centre-header) .modal-content>.card-header {
    text-align: start;
}

.dialog-centre-header .modal-content>.card-header>.card-subtitle {
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
}

.dialog-box-image .modal-content {
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    flex-direction: row;
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.dialog-box-image .modal-dialog {
    max-width: calc(100% - var(--bs-modal-margin) * 2);
}

.dialog-box-image.fade:not(.show) .modal-dialog {
    transform: scale(.8);
}

.dialog-box-image img {
    object-fit: contain;
}

.dialog-box-selection .card-auto .card-body {
    display: flex;
    flex-direction: column;
}

.dialog-custom {
    display: flex;
    flex-direction: column;
    z-index: 200;
}

.dialog-custom:not(.dialog-box-selection .dialog-custom) {
    overflow: initial;
}

.dialog-scrollable .modal-content>.card-body {
    overflow: auto;
}

.align-centre {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.v-align {
    display: flex;
    justify-content: center;
}

.minw-max {
    min-width: max-content;
}

.w-fit-cells {
    width: 0;
}

.fs-inherit {
    font-size: inherit !important;
}

.fs-standard {
    font-size: var(--block-size-standard) !important;
}

.fs-xxl {
    font-size: var(--body-font-size-xxl) !important;
    line-height: 2.8571rem;
}

.fs-xl {
    font-size: var(--body-font-size-xl) !important;
    line-height: 2.2857rem;
}

.fs-lg {
    font-size: var(--body-font-size-lg) !important;
    line-height: 1.7143rem;
}

.fs-md {
    font-size: var(--body-font-size-m) !important;
    line-height: 1.7143rem;
}

.fs-body {
    font-size: var(--body-font-size) !important;
}

.fs-sm {
    font-size: var(--body-font-size-sm);
    line-height: var(--body-line-height-sm);
}

.fs-xs {
    font-size: var(--body-font-size-xs);
    line-height: var(--body-line-height-sm);
}

.fs-xxs {
    font-size: var(--body-font-size-xxs);
    line-height: .8571rem;
}

.text-inherit {
    color: inherit !important;
}

.vh-100 {
    height: 100vh;
}

.vw-100 {
    width: 100vw;
}

.w-none {
    width: 1px;
}

.box-shadow {
    box-shadow: var(--default-box-shadow) !important;
}

.box-shadow-none {
    box-shadow: none !important;
}

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

.w-90 {
    width: 90% !important;
}

.mw-90 {
    max-width: 90%;
}

.mw-auto {
    max-width: none !important;
}

.mw-50 {
    max-width: 50% !important;
}

.smart-wrap {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

.half-faded {
    opacity: .5;
}

.faded {
    opacity: 0;
    pointer-events: none;
}

.minh-auto {
    min-height: auto !important;
}

.minh-0 {
    min-height: 0 !important;
}

.cursor-pointer {
    cursor: pointer;
}

.w-fit {
    width: fit-content !important;
}

.ff-body {
    font-family: var(--body-font-family) !important;
}

.w-max {
    width: max-content !important;
}

.w-min {
    width: min-content !important;
}

.w-xxxl {
    width: var(--block-size-xxxl) !important;
}

.h-fit {
    height: fit-content !important;
}

.fw-500,
.fw-medium {
    font-weight: var(--font-weight-medium) !important;
}

.fw-600,
.fw-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

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

.fw-400,
.fw-regular {
    font-weight: var(--font-weight-regular) !important;
}

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

.justify-content-stretch {
    justify-content: stretch !important;
}

.border-left {
    border-left: 1px solid var(--outline-colour) !important;
}

.border-top {
    border-top: 1px solid var(--outline-colour) !important;
}

.border-right {
    border-right: 1px solid var(--outline-colour) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--outline-colour) !important;
}

.border-all {
    border: 1px solid var(--outline-colour) !important;
}

.section-row {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
}

.section-row>*>.card-frame {
    --card-spacing: var(--block-size-lg);
}

.section-row>*:first-child>.card-frame {
    --card-title-size: var(--block-size-standard);
}

.restrict-height .section-row,
.restrict-height .section-row>*,
.restrict-height .section-row>*>.card-frame {
    height: 100%;
}

.p-card {
    padding: var(--card-spacing);
}

.mb-card {
    margin-bottom: var(--card-spacing);
}

.me-card {
    margin-right: var(--card-spacing);
}

.pe-card {
    padding-right: var(--card-spacing);
}

.py-sm {
    padding-bottom: var(--block-size-sm) !important;
    padding-top: var(--block-size-sm) !important;
}

.py-card {
    padding-bottom: var(--card-spacing);
    padding-top: var(--card-spacing);
}

.py-md {
    padding-bottom: var(--block-size-md) !important;
    padding-top: var(--block-size-md) !important;
}

.py-base {
    padding-bottom: var(--block-size-base) !important;
    padding-top: var(--block-size-base) !important;
}

.py-standard {
    padding-bottom: var(--block-size-standard) !important;
    padding-top: var(--block-size-standard) !important;
}

.py-lg {
    padding-bottom: var(--block-size-lg) !important;
    padding-top: var(--block-size-lg) !important;
}

.py-xl {
    padding-bottom: var(--block-size-xl) !important;
    padding-top: var(--block-size-xl) !important;
}

.pt-xs {
    padding-top: var(--block-size-xs);
}

.pt-sm {
    padding-top: var(--block-size-sm);
}

.pt-md {
    padding-top: var(--block-size-md);
}

.pt-xxl {
    padding-top: var(--block-size-xxl);
}

.pt-xxxl {
    padding-top: var(--block-size-xxxl);
}

.pt-xxxxl {
    padding-top: var(--block-size-xxxxl);
}

.pt-card {
    padding-top: var(--card-spacing);
}

.centre {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar__section-header {
    line-height: 1.7142857143rem;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
}

.lh-inherit {
    line-height: inherit;
}

.lh-body {
    line-height: var(--body-line-height);
}

.profile-picture,
.dropdown__list>li img,
chip-dropdown>div>button>span>img {
    border-radius: 50%;
}

.dropdown__list>li img,
chip-dropdown>div>button>span>img {
    height: var(--block-size-standard);
    width: var(--block-size-standard);
    margin-right: var(--block-size-sm);
}

.ms-xxs {
    margin-left: var(--block-size-xxs) !important;
}

.ms-xs {
    margin-left: var(--block-size-xs) !important;
}

.ms-sm {
    margin-left: var(--block-size-sm) !important;
}

.ms-base {
    margin-left: var(--block-size-base) !important;
}

.ms-standard {
    margin-left: var(--block-size-standard) !important;
}

.ms-lg {
    margin-left: var(--block-size-lg) !important;
}

.ms-xl {
    margin-left: var(--block-size-xl) !important;
}

.ms-xxl {
    margin-left: var(--block-size-xxl) !important;
}

.ms-xxxl {
    margin-left: var(--block-size-xxxl) !important;
}

.ms-md {
    margin-left: var(--block-size-md) !important;
}

.me-xs {
    margin-right: var(--block-size-xs) !important;
}

.me-xxs {
    margin-right: var(--block-size-xxs) !important;
}

.me-sm {
    margin-right: var(--block-size-sm) !important;
}

.me-md {
    margin-right: var(--block-size-md) !important;
}

.me-base {
    margin-right: var(--block-size-base) !important;
}

.me-lg {
    margin-right: var(--block-size-lg) !important;
}

.me-xl {
    margin-right: var(--block-size-xl) !important;
}

.mt-xxs {
    margin-top: var(--block-size-xxs) !important;
}

.mt-xs {
    margin-top: var(--block-size-xs) !important;
}

.mt-sm {
    margin-top: var(--block-size-sm) !important;
}

.mt-md {
    margin-top: var(--block-size-md) !important;
}

.mt-base {
    margin-top: var(--block-size-base) !important;
}

.mt-standard {
    margin-top: var(--block-size-standard) !important;
}

.mt-lg {
    margin-top: var(--block-size-lg) !important;
}

.mt-xl {
    margin-top: var(--block-size-xl) !important;
}

.mt-xxl {
    margin-top: var(--block-size-xxl) !important;
}

.mt-xxxl {
    margin-top: var(--block-size-xxxl) !important;
}

.mt-xxxxl {
    margin-top: var(--block-size-xxxxl) !important;
}

.mt-form[class^="g-"],
.mt-form[class*=" g-"],
.mt-form[class^="gy-"],
.mt-form[class*=" gy-"] {
    margin-top: calc(var(--block-size-base) - var(--bs-gutter-y)) !important;
}

.mt-form {
    margin-top: var(--block-size-base) !important;
}

.mt-form--lg[class^="g-"],
.mt-form--lg[class*=" g-"],
.mt-form--lg[class^="gy-"],
.mt-form--lg[class*=" gy-"] {
    margin-top: calc(var(--block-size-xxl) - var(--bs-gutter-y)) !important;
}

.mt-form--lg {
    margin-top: var(--block-size-xxl) !important;
}

.pt-form--lg[class^="g-"],
.pt-form--lg[class*=" g-"],
.pt-form--lg[class^="gy-"],
.pt-form--lg[class*=" gy-"] {
    padding-top: calc(var(--block-size-xxl) - var(--bs-gutter-y)) !important;
}

.pt-form--lg {
    padding-top: var(--block-size-xxl) !important;
}

.mb-form {
    margin-bottom: var(--block-size-base) !important;
}

.mb-form--lg {
    margin-bottom: var(--block-size-xxl) !important;
}

.mt-form--buttons {
    margin-top: var(--block-size-base) !important;
}

.mb-xxs {
    margin-bottom: var(--block-size-xxs) !important;
}

.mb-xs {
    margin-bottom: var(--block-size-xs) !important;
}

.mb-sm {
    margin-bottom: var(--block-size-sm) !important;
}

.mb-md {
    margin-bottom: var(--block-size-md) !important;
}

.mb-base {
    margin-bottom: var(--block-size-base) !important;
}

.mb-standard {
    margin-bottom: var(--block-size-standard) !important;
}

.mb-lg {
    margin-bottom: var(--block-size-lg) !important;
}

.mb-xl {
    margin-bottom: var(--block-size-xl) !important;
}

.mb-xxl {
    margin-bottom: var(--block-size-xxl) !important;
}

.mb-xxxl {
    margin-bottom: var(--block-size-xxxl) !important;
}

.mb-xxxxl {
    margin-bottom: var(--block-size-xxxxl) !important;
}

.mx-xxs {
    margin-left: var(--block-size-xxs) !important;
    margin-right: var(--block-size-xxs) !important;
}

.mx-xs {
    margin-left: var(--block-size-xs) !important;
    margin-right: var(--block-size-xs) !important;
}

.mx-sm {
    margin-left: var(--block-size-sm) !important;
    margin-right: var(--block-size-sm) !important;
}

.mx-md {
    margin-left: var(--block-size-md) !important;
    margin-right: var(--block-size-md) !important;
}

.mx-base {
    margin-left: var(--block-size-base) !important;
    margin-right: var(--block-size-base) !important;
}

.mx-lg {
    margin-left: var(--block-size-lg) !important;
    margin-right: var(--block-size-lg) !important;
}

.mx-xl {
    margin-left: var(--block-size-xl) !important;
    margin-right: var(--block-size-xl) !important;
}

.mx-xxl {
    margin-left: var(--block-size-xxl) !important;
    margin-right: var(--block-size-xxl) !important;
}

.my-xxs {
    margin-top: var(--block-size-xxs) !important;
    margin-bottom: var(--block-size-xxs) !important;
}

.my-xs {
    margin-top: var(--block-size-xs) !important;
    margin-bottom: var(--block-size-xs) !important;
}

.my-sm {
    margin-top: var(--block-size-md) !important;
    margin-bottom: var(--block-size-md) !important;
}

.my-md {
    margin-top: var(--block-size-md) !important;
    margin-bottom: var(--block-size-md) !important;
}

.my-base {
    margin-top: var(--block-size-base) !important;
    margin-bottom: var(--block-size-base) !important;
}

.my-standard {
    margin-top: var(--block-size-standard) !important;
    margin-bottom: var(--block-size-standard) !important;
}

.my-lg {
    margin-top: var(--block-size-lg) !important;
    margin-bottom: var(--block-size-lg) !important;
}

.my-xl {
    margin-top: var(--block-size-xl) !important;
    margin-bottom: var(--block-size-xl) !important;
}

.my-xxl {
    margin-top: var(--block-size-xxl) !important;
    margin-bottom: var(--block-size-xxl) !important;
}

.my-xxxl {
    margin-top: var(--block-size-xxxl) !important;
    margin-bottom: var(--block-size-xxxl) !important;
}

.m-sm {
    margin: var(--block-size-sm) !important;
}

.m-md {
    margin: var(--block-size-md) !important;
}

.m-base {
    margin: var(--block-size-base) !important;
}

.m-standard {
    margin: var(--block-size-standard) !important;
}

.m-lg {
    margin: var(--block-size-lg) !important;
}

.m-xl {
    margin: var(--block-size-xl) !important;
}

.m-xxl {
    margin: var(--block-size-xxl) !important;
}

.m-xxxl {
    margin: var(--block-size-xxxl) !important;
}

.m-xxxxl {
    margin: var(--block-size-xxxxl) !important;
}

.p-base {
    padding: var(--block-size-base) !important;
}

.p-sm {
    padding: var(--block-size-sm) !important;
}

.p-md {
    padding: var(--block-size-md) !important;
}

.p-lg {
    padding: var(--block-size-lg) !important;
}

.p-xl {
    padding: var(--block-size-xl) !important;
}

.pb-xs {
    padding-bottom: var(--block-size-xs) !important;
}

.pb-sm {
    padding-bottom: var(--block-size-sm) !important;
}

.pb-md {
    padding-bottom: var(--block-size-md) !important;
}

.pb-base {
    padding-bottom: var(--block-size-base) !important;
}

.pe-sm {
    padding-right: var(--block-size-sm) !important;
}

.pe-md {
    padding-right: var(--block-size-md) !important;
}

.pe-base {
    padding-right: var(--block-size-base) !important;
}

.ps-sm {
    padding-left: var(--block-size-sm) !important;
}

.ps-md {
    padding-left: var(--block-size-md) !important;
}

.ps-base {
    padding-left: var(--block-size-base) !important;
}

.ps-standard {
    padding-left: var(--block-size-standard) !important;
}

.ps-lg {
    padding-left: var(--block-size-lg) !important;
}

.px-xs {
    padding-left: var(--block-size-xs) !important;
    padding-right: var(--block-size-xs) !important;
}

.px-sm {
    padding-left: var(--block-size-sm) !important;
    padding-right: var(--block-size-sm) !important;
}

.px-md {
    padding-left: var(--block-size-md) !important;
    padding-right: var(--block-size-md) !important;
}

.px-base {
    padding-left: var(--block-size-base) !important;
    padding-right: var(--block-size-base) !important;
}

.px-lg {
    padding-left: var(--block-size-lg) !important;
    padding-right: var(--block-size-lg) !important;
}

.px-xl {
    padding-left: var(--block-size-xl) !important;
    padding-right: var(--block-size-xl) !important;
}

.information__value {
    word-break: break-word;
}

.stat__value {
    font-size: var(--block-size-xl);
    line-height: var(--block-size-xl);
    font-weight: var(--font-weight-bold);
    word-break: break-word;
    overflow-wrap: break-word;
}

.input-field__label {
    font-size: var(--body-font-size-sm);
    line-height: 1.1428571429rem;
    display: block;
    width: fit-content;
    transition: color .2s;
}

.input-field__label>i {
    margin-left: var(--block-size-sm);
    color: var(--body-colour-faded);
}

.input-field__label:not(.input-field--checkbox+.input-field__label, [orientation="horizontal"] .input-field__label, chip-range .input-field__label) {
    margin-bottom: var(--block-size-xs);
}

[orientation="horizontal"] .input-field__label {
    margin: auto var(--block-size-sm) auto 0;
}

.prompt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    flex-grow: 0;
    margin: auto;
}

.prompt__icon {
    font-size: var(--prompt-icon-size);
    margin: auto auto 0 auto;
    max-inline-size: 360px;
}

.prompt__description {
    font-size: var(--body-font-size-m);
    line-height: 1.7143rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--body-colour-faded);
    clear: both;
}

.prompt__icon+.prompt__title {
    margin-top: var(--block-size-base);
}

.prompt__title+.prompt__description,
.prompt__icon+.prompt__description {
    margin-top: var(--block-size-sm);
}

chip-emptyprompt[size="sm"] .prompt__icon+.prompt__title {
    margin-top: var(--block-size-sm);
}

.prompt__description .btn--base {
    --btn-line-height: 1.7143rem;
    --btn-font-size: var(--body-font-size-m);
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter.ttf");
}

.form-group__section-description {
    color: var(--body-colour-faded);
    margin-top: var(--block-size-xxs);
}

.heading--size3,
.prompt__title {
    font-size: var(--body-font-size-lg);
    line-height: 1.7143rem;
    overflow-wrap: break-word;
    font-weight: var(--font-weight-bold);
    word-break: break-word;
}

.heading--size4,
.information-header,
.mobile-header__subtitle,
chip-emptyprompt[size="sm"] .prompt__title {
    font-size: var(--body-font-size-m);
    line-height: 1.7143rem;
    overflow-wrap: break-word;
    font-weight: var(--font-weight-bold);
    word-break: break-word;
}

.heading--size5,
.mobile-header__title {
    font-size: 1rem;
    line-height: 1.4286rem;
    overflow-wrap: break-word;
    font-weight: var(--font-weight-bold);
    word-break: break-word;
}

.heading--size404 {
    font-size: var(--block-size-xxxxl);
    line-height: calc(var(--block-size-xxxxl) + var(--block-size-sm));
    overflow-wrap: break-word;
    font-weight: var(--font-weight-bold);
    word-break: break-word;
}

.heading--size1 {
    font-size: var(--body-font-size-xxl);
    line-height: 2.8571rem;
    overflow-wrap: break-word;
    font-weight: var(--font-weight-bold);
    word-break: break-word;
}

.heading--size2 {
    font-size: var(--body-font-size-xl);
    line-height: 2.2857rem;
    overflow-wrap: break-word;
    font-weight: var(--font-weight-bold);
    word-break: break-word;
}

.heading--size6 {
    font-size: var(--body-font-size-sm);
    line-height: 1.1429rem;
    overflow-wrap: break-word;
    font-weight: var(--font-weight-bold);
    word-break: break-word;
}

.prompt__icon i,
.icon__theme-based {
    font-family: "Font Awesome 5 Pro", var(--body-font-family);
    font-weight: var(--font-weight-light);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

[data-theme="dark"] .prompt__icon i,
[data-theme="dark"] .icon__theme-based {
    font-weight: 900;
}

.text--prefer-legibility,
p {
    font-size: var(--body-font-size-m);
    line-height: 1.7143rem;
}

p a {
    --btn-font-size: var(--body-font-size-m);
    --btn-line-height: 1.7143rem;
}

.described-form-group,
chip-formsection {
    max-width: 800px;
}

.form-group__row,
.information-row,
chip-formsection {
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: baseline;
}

chip-formsection {
    flex-direction: column;
    max-width: 400px;
}

.form-group__row,
chip-formsection {
    gap: 24px;
}

chip-formsection+chip-formsection {
    margin-top: var(--block-size-xxl);
}

.form-group__column-description {
    min-width: min(20rem, 50%);
}

.form-group__column-fields {
    min-width: 0;
}

.form-group__column-description,
.form-group__column-fields {
    display: flex;
    flex-direction: column;
    flex-basis: 0%;
    flex-grow: 1;
}

.form-group__row:not(:last-child),
.chip-formsection:not(:last-child) {
    margin-bottom: var(--block-size-xxl);
}

.information-column {
    flex-basis: calc(100% / var(--column-count) - var(--gap) / var(--column-count) * (var(--column-count) - 1));
    max-width: calc(100% / var(--column-count) - var(--gap) / var(--column-count) * (var(--column-count) - 1));
    flex-grow: 1;
    display: inline-flex;
    flex-direction: column;
}

.information-row:not(:last-child) {
    margin-bottom: var(--block-size-base);
}

.information__description {
    font-size: var(--body-font-size-sm);
    line-height: 1.1428571429rem;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
}

.information-header {
    margin-bottom: var(--block-size-md);
    border-bottom: 1px solid var(--outline-colour);
    padding-bottom: var(--block-size-xxs);
    display: flex;
    align-items: end;
}

.information__value--empty {
    color: var(--body-colour-faded);
}

.information__value>.profile-picture {
    height: var(--block-size-base);
    width: var(--block-size-base);
    margin-right: var(--block-size-sm);
}

.information__edit {
    margin-left: var(--block-size-sm);
}

.header__tabs {
    padding-inline-start: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    width: 100%;
    height: 100%;
}

.header-tab+.header-tab {
    margin-left: var(--block-size-base);
}

.layout-frame__header>nav {
    height: 100%;
    width: 100%;
}

.header__tabs>li.header-tab .btn--base {
    --btn-colour: var(--body-colour);
    --btn-hover-background-colour: rgba(0, 0, 0, 0);
    --btn-hover-colour: var(--theme-colour);
    --btn-font-size: var(--body-font-size-m);
    --btn-line-height: 1.7143rem;
    font-weight: var(--font-weight-semibold);
}

.header__tabs>li.header-tab__current .btn--base {
    --btn-colour: var(--theme-colour);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
}

h1:not(chip-header h1),
h2:not(chip-header h2),
h3:not(chip-header h3),
h4:not(chip-header h4),
h5:not(chip-header h5),
h6:not(chip-header h6) {
    margin-bottom: var(--block-size-sm);
}

.input-field__validation-error {
    font-size: var(--block-size-md);
    line-height: var(--block-size-base);
    padding-top: var(--block-size-xs);
    color: var(--danger-colour);
    width: 100%;
}

.input-field__helper-text {
    font-size: var(--block-size-md);
    line-height: var(--block-size-base);
    padding-top: var(--block-size-xs);
    color: var(--body-colour-faded);
}

chip-dropdown[orientation="horizontal"] {
    display: flex;
    align-items: center;
}

chip-dropdown[orientation="horizontal"] .input-field {
    width: auto;
    flex-grow: 1;
}

chip-dropdown {
    white-space: initial;
}

.input-field__helper-text>a,
.input-field__helper-text>button {
    --btn-font-size: var(--block-size-md);
    --btn-line-height: var(--block-size-base);
}

chip-checkbox,
chip-radio {
    width: fit-content;
    transition: opacity .2s;
}

chip-checkbox .input-field,
chip-radio .input-field {
    border-color: #939496;
}

[data-theme="dark"] chip-checkbox .input-field,
[data-theme="dark"] chip-radio .input-field {
    border-color: #69696f;
}

chip-checkbox .input-field__helper-text,
chip-radio .input-field__helper-text {
    flex-basis: 100%;
}

chip-range .input-field__helper-text {
    padding-top: 0;
}

.input-field__invalid {
    border-color: var(--danger-colour);
}

.input__wrapper>.input-field__invalid+.input__bound {
    border: 1px solid var(--danger-colour);
}

chip-input[icon-style="integrated"] .input__bound,
chip-input[icon-style="integrated"] .input__bound>button,
chip-input[icon-style="integrated"] .input__bound .dropdown__static>button {
    color: var(--body-colour-faded);
}

chip-input[icon-style="integrated"] input+.input__bound {
    padding-left: 0;
}

chip-input[icon-style="integrated"] .input__bound+input {
    border-left-width: 0;
}

chip-input[icon-style="integrated"] .input__bound+.input__bound {
    border-right-width: 0;
}

chip-input[type="date"] input,
chip-input[type="time"] input {
    padding-top: 0;
    padding-bottom: 0;
}

chip-input[variation="danger"] .input-field__label,
chip-dropdown[variation="danger"] .input-field__label {
    color: var(--danger-colour);
}

chip-input[variation="danger"] input,
chip-dropdown[variation="danger"]>.input-field {
    border-color: var(--danger-colour);
}

chip-input[variation="warning"] .input-field__label,
chip-dropdown[variation="warning"] .input-field__label {
    color: var(--warning-colour);
}

chip-input[variation="warning"] input,
chip-dropdown[variation="warning"]>.input-field {
    border-color: var(--warning-colour);
}

chip-input[variation="success"] .input-field__label,
chip-dropdown[variation="success"] .input-field__label {
    color: var(--success-colour);
}

chip-input[variation="success"] input,
chip-dropdown[variation="success"]>.input-field {
    border-color: var(--success-colour);
}

chip-input[variation="info"] .input-field__label,
chip-dropdown[variation="info"] .input-field__label {
    color: var(--info-colour);
}

chip-input[variation="info"] input,
chip-dropdown[variation="info"]>.input-field {
    border-color: var(--info-colour);
}

chip-input[variation="secondary"] .input-field__label,
chip-dropdown[variation="secondary"] .input-field__label {
    color: var(--secondary-colour);
}

chip-input[variation="secondary"] input,
chip-dropdown[variation="secondary"]>.input-field {
    border-color: var(--secondary-colour);
}

.text__description {
    font-size: 1rem;
    line-height: var(--body-line-height-sm);
    color: var(--body-colour-faded);
    font-weight: var(--font-weight-regular);
}

.list__tick-cross {
    list-style-type: none;
    padding-inline-start: var(--block-size-md);
}

.list__tick-cross>li {
    padding-left: var(--block-size-sm);
}

.list__tick-cross>li::marker {
    padding-left: var(--block-size-sm);
    font-family: "Font Awesome 5 Pro", var(--body-font-family);
    font-weight: 900;
    font-size: var(--body-font-size-sm);
}

.list-item__tick::marker {
    content: "\f00c";
    color: var(--success-colour);
}

.list-item__cross::marker {
    content: "\f00d";
    color: var(--danger-colour);
}

.object-selection-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: stretch;
    min-height: 0;
    max-height: 100%;
}

.object-selection-column {
    overflow: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: var(--block-size-base);
}

.object-selection-search {
    width: 100%;
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base {
    flex-direction: column;
    position: relative;
    font-size: var(--body-font-size-m);
    margin-top: auto;
    flex-grow: 1;
    line-height: 1.7143rem;
    font-weight: var(--font-weight-bold);
    height: fit-content;
    border-bottom: 0;
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base:after {
    content: "";
    position: absolute;
    top: 16px;
    right: -16px;
    border-top: 2px solid var(--outline-colour);
    transition: border-color .2s;
    width: 50%;
}

chip-tabgroup[variation="steps"] chip-tab:last-child>.btn--base::after {
    border-color: var(--background-colour) !important;
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base span {
    margin-top: var(--block-size-sm);
    transition: color .2s;
    display: none;
}

.tab__mobile-header {
    display: block;
    margin-bottom: var(--block-size-md);
}

@media (min-width: 992px) {
    chip-formsection {
        flex-direction: row;
        max-width: 800px;
    }

    chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base span {
        display: block;
    }

    .tab__mobile-header {
        display: none;
        margin: 0;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .information-row {
        --column-count: 3;
    }

    [columns="1"] {
        --column-count: 1;
    }

    [columns="2"] {
        --column-count: 2;
    }
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>button:hover span {
    text-decoration: underline;
}

chip-tabgroup[variation="steps"] chip-tab>.btn--base::after {
    width: 100vw !important;
    left: 50%;
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base:not([disabled], .active, chip-tab[selected]~chip-tab>.btn--base):after {
    border-color: var(--tab-colour);
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base.active:not(.step__invalid) .steps__icon {
    border-color: var(--tab-colour);
    color: var(--body-colour);
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>.btn--base.active:not(.step__invalid) span {
    color: var(--tab-colour);
}

chip-tabgroup[variation="steps"]>.tab-group__tabs>.tab__wrapper>chip-tab>chip-tab[selected]~chip-tab>.btn--base:not(.step__invalid) .steps__icon {
    color: var(--body-colour);
    border-color: var(--outline-colour);
}

.steps__icon {
    background-color: var(--background-colour);
    display: inline-flex;
    z-index: 1;
    line-height: 32px;
    border-radius: 50%;
    border: 2px solid var(--outline-colour);
    inline-size: 32px;
    position: relative;
    min-block-size: 32px;
    block-size: 32px;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    transition: background-color .2s, border-color .2s;
}

.steps__icon:not([disabled] .steps__icon, .active .steps__icon, chip-tab[selected]~chip-tab>.btn--base .steps__icon, .step__invalid .steps__icon) {
    background-color: var(--tab-colour);
    border-color: var(--tab-colour);
    color: rgba(0, 0, 0, 0);
}

.steps__icon:not([disabled] .steps__icon, .active .steps__icon, chip-tab[selected]~chip-tab>.btn--base .steps__icon, .step__invalid .steps__icon)::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro", var(--body-font-family);
    font-weight: var(--font-weight-regular);
    color: var(--tab-colour-foreground);
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.step__invalid .steps__icon {
    background-color: var(--danger-colour);
    border-color: var(--danger-colour);
    color: rgba(0, 0, 0, 0);
}

.step__invalid .steps__icon::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Pro", var(--body-font-family);
    font-weight: var(--font-weight-regular);
    color: var(--danger-colour-foreground);
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.checkbox-group__item {
    width: fit-content;
}

.checkbox-group__item:not(:first-child) {
    margin-top: var(--block-size-xs);
}

.form-field,
chip-form chip-input,
chip-form chip-textarea,
chip-form chip-dropdown:not([static]),
chip-form chip-checkbox,
chip-form chip-radio,
chip-form chip-buttongroup {
    max-width: 400px;
}

.button-group__container {
    display: flex;
    flex-direction: column;
}

chip-buttongroup[orientation="horizontal"] .button-group__container {
    flex-direction: row;
}

.split-button-primary {
    width: 100%;
}

chip-buttongroup li:not(:last-child) .btn--base:not(.split-button-primary) {
    border-right-width: 0;
}

chip-form .row {
    max-width: calc(400px + var(--bs-gutter-x));
}

chip-splitbutton[variation="theme"] .split-button-primary,
chip-splitbutton:not([variation]) .split-button-primary {
    border-right: 1px solid rgba(calc(var(--theme-colour-r) - (var(--theme-colour-r) * 0.1)), calc(var(--theme-colour-g) - (var(--theme-colour-g) * 0.1)), calc(var(--theme-colour-b) - (var(--theme-colour-b) * 0.1)), .75) !important;
}

chip-splitbutton[variation="theme-secondary"] .split-button-primary {
    border-right: 1px solid rgba(calc(var(--theme-colour-r) - (var(--theme-colour-r) * 0.1)), calc(var(--theme-colour-g) - (var(--theme-colour-g) * 0.1)), calc(var(--theme-colour-b) - (var(--theme-colour-b) * 0.1)), .15);
}

chip-callout[variation="danger"] {
    background-color: rgba(calc(var(--danger-colour-r) - (var(--danger-colour-r) * 0.1)), calc(var(--danger-colour-g) - (var(--danger-colour-g) * 0.1)), calc(var(--danger-colour-b) - (var(--danger-colour-b) * 0.1)), .125);
    border-left: 4px solid var(--danger-colour);
}

chip-callout[variation="warning"] {
    background-color: rgba(calc(var(--warning-colour-r) - (var(--warning-colour-r) * 0.1)), calc(var(--warning-colour-g) - (var(--warning-colour-g) * 0.1)), calc(var(--warning-colour-b) - (var(--warning-colour-b) * 0.1)), .1);
    border-left: 4px solid var(--warning-colour);
}

chip-callout[variation="success"] {
    background-color: rgba(calc(var(--success-colour-r) - (var(--success-colour-r) * 0.1)), calc(var(--success-colour-g) - (var(--success-colour-g) * 0.1)), calc(var(--success-colour-b) - (var(--success-colour-b) * 0.1)), .125);
    border-left: 4px solid var(--success-colour);
}

chip-callout[variation="info"] {
    background-color: rgba(calc(var(--info-colour-r) - (var(--info-colour-r) * 0.1)), calc(var(--info-colour-g) - (var(--info-colour-g) * 0.1)), calc(var(--info-colour-b) - (var(--info-colour-b) * 0.1)), .125);
    border-left: 4px solid var(--info-colour);
}

:root[data-theme="dark"] chip-callout[variation="danger"] {
    background-color: rgba(calc(var(--danger-colour-r) - (var(--danger-colour-r) * 0.1)), calc(var(--danger-colour-g) - (var(--danger-colour-g) * 0.1)), calc(var(--danger-colour-b) - (var(--danger-colour-b) * 0.1)), .175);
}

:root[data-theme="dark"] chip-callout[variation="warning"] {
    background-color: rgba(calc(var(--warning-colour-r) - (var(--warning-colour-r) * 0.1)), calc(var(--warning-colour-g) - (var(--warning-colour-g) * 0.1)), calc(var(--warning-colour-b) - (var(--warning-colour-b) * 0.1)), .175);
}

:root[data-theme="dark"] chip-callout[variation="success"] {
    background-color: rgba(calc(var(--success-colour-r) - (var(--success-colour-r) * 0.1)), calc(var(--success-colour-g) - (var(--success-colour-g) * 0.1)), calc(var(--success-colour-b) - (var(--success-colour-b) * 0.1)), .175);
}

:root[data-theme="dark"] chip-callout[variation="info"] {
    background-color: rgba(calc(var(--info-colour-r) - (var(--info-colour-r) * 0.1)), calc(var(--info-colour-g) - (var(--info-colour-g) * 0.1)), calc(var(--info-colour-b) - (var(--info-colour-b) * 0.1)), .175);
}

chip-callout[variation="danger"]>.callout__header {
    color: var(--danger-colour);
}

chip-callout[variation="warning"]>.callout__header {
    color: var(--warning-colour-dark);
}

chip-callout[variation="success"]>.callout__header {
    color: var(--success-colour-dark);
}

chip-callout[variation="info"]>.callout__header {
    color: var(--info-colour);
}

.callout__header {
    font-size: var(--body-font-size-m);
    line-height: 1.7143rem;
    font-weight: var(--font-weight-medium);
    padding: var(--callout-padding) var(--callout-padding) 0 0;
}

.callout__header:first-child:last-child {
    padding-bottom: var(--callout-padding);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
}

.callout__header+.callout-body {
    padding: var(--block-size-xs) var(--callout-padding) var(--callout-padding) 0;
}

chip-callout:not([heading]) .callout-body {
    padding: var(--callout-padding);
    padding-left: 0;
}

.callout__header>i {
    margin-right: var(--block-size-xs);
}

chip-callout::before {
    position: absolute;
    top: 50%;
    left: 0;
    translate: -50% -50%;
    width: var(--block-size-lg);
    height: var(--block-size-lg);
    font-family: 'Font Awesome 5 Pro', var(--body-font-family);
    font-weight: 900;
    font-size: var(--body-font-size-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .2s, background-color .2s;
}

.callout--header-only::before {
    width: var(--block-size-standard);
    height: var(--block-size-standard);
    font-size: var(--body-font-size-xxs);
}

chip-callout[variation="danger"]:not([hide-icon])::before {
    content: "\f12a";
    background-color: var(--danger-colour);
    color: var(--danger-colour-foreground);
}

chip-callout[variation="warning"]:not([hide-icon])::before {
    content: "\f12a";
    background-color: var(--warning-colour);
    color: var(--warning-colour-foreground);
}

chip-callout[variation="success"]:not([hide-icon])::before {
    content: "\f00c";
    background-color: var(--success-colour);
    color: var(--success-colour-foreground);
}

chip-callout[variation="info"]:not([hide-icon])::before {
    content: "\f129";
    background-color: var(--info-colour);
    color: var(--info-colour-foreground);
}

chip-callout {
    --callout-padding: var(--block-size-base);
    position: relative;
    border-radius: var(--standard-border-radius);
    transition: background-color .2s,
        border-color .2s;
}

chip-callout:not([hide-icon]) {
    padding-left: var(--block-size-standard);
}

chip-callout[hide-icon] {
    padding-left: var(--callout-padding);
}

.callout--header-only,
chip-callout:not([heading]) {
    --callout-padding: var(--block-size-sm);
}

.dark-mode-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.dark-mode-toggle__icon {
    height: var(--block-size-standard);
    width: auto;
    transition: color .2s linear;
}

html:not([data-theme="dark"]) .dark-mode-toggle__icon {
    transition: opacity .2s linear, color .2s linear;
}

.dark-mode-toggle__rays {
    transition: opacity .2s linear .2s;
}

html:not([data-theme="dark"]) .dark-mode-toggle__icon .dark-mode-toggle__rays {
    transition: opacity .2s linear;
    opacity: 0;
}

.dark-mode-toggle__cut-out {
    transition: transform .5s cubic-bezier(0.54, -0.42, 0.29, 1.3);
}

html:not([data-theme="dark"]) .dark-mode-toggle__icon .dark-mode-toggle__cut-out {
    transform: translateX(-30%);
    transition: transform .5s cubic-bezier(0.21, 0.17, 0.43, 1.43);
}

.sidebar-brand {
    --link-hover-decoration: none;
    color: inherit !important;
    display: flex;
    align-items: center;
    transition: margin-left .5s;
    padding-right: var(--block-size-lg);
}

.sidebar-list {
    margin-top: var(--block-size-xxl);
}

.sidebar-list>li {
    display: flex;
}

.sidebar-list__section-title {
    font-size: var(--body-font-size-sm);
    line-height: 1.1428571429rem;
    margin-bottom: var(--block-size-xs);
    transition: margin-left .5s;
}

.sidebar-list__section-title:not(li:first-child>.sidebar-list__section-title) {
    margin-top: var(--block-size-lg);
}

.sidebar-button {
    --link-hover-decoration: none;
    --btn-padding-x: var(--block-size-sm);
    --btn-padding-y: var(--block-size-sm);
    --btn-colour: var(--body-colour);
    --btn-hover-background-colour: rgba(var(--theme-colour-r), var(--theme-colour-g), var(--theme-colour-b), .2);
    width: 100%;
    height: 100%;
    position: relative;
    min-width: calc(1.25em + (var(--btn-padding-x) * 2));
    border-radius: var(--standard-border-radius);
    justify-content: start;
    text-align: start;
}

.sidebar-button>i {
    text-align: center;
    transition: margin-right .75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    width: 1.25em;
}

.sidebar-button--active {
    color: var(--theme-colour);
    --btn-hover-colour: var(--theme-colour-dark);
}

.sidebar-button--active::after {
    content: "";
    position: absolute;
    top: 50%;
    z-index: 9999;
    right: 0;
    box-shadow: 0 1px 1px var(--theme-colour);
    height: 65%;
    width: var(--block-size-xs);
    border-radius: 1000px;
    background-color: var(--theme-colour);
    transform: translateY(-50%);
}

.sidebar--collapsed .sidebar-button>i:first-child {
    margin-right: 0 !important;
}

.sidebar-button span {
    transition: margin-left .5s;
}

.sidebar--collapsed .sidebar-button span,
.sidebar--collapsed .sidebar-brand,
.sidebar--collapsed .sidebar-list__section-title {
    margin-left: -300px;
    transition: margin-left .75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sidebar--collapsed .sidebar-brand {
    pointer-events: none;
}

.btn--keypad {
    --btn-font-size: var(--body-font-size-m);
    --btn-colour: var(--body-colour);
    --btn-hover-colour: var(--body-colour);
    --btn-line-height: 1.7143rem;
    --link-hover-decoration: none;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
    box-shadow: none;
    transition: box-shadow .2s;
    aspect-ratio: 1;
    border-radius: var(--standard-border-radius);
}

.btn--keypad>i {
    --fa-secondary-color: var(--theme-colour);
    font-size: var(--body-font-size-xl);
    line-height: 2.2857rem;
    position: relative;
    margin-bottom: var(--block-size-md);
    transition: transform .2s;
}

.btn--keypad>i::after {
    transition: opacity .2s;
}

.btn--keypad:hover {
    box-shadow: var(--default-box-shadow);
}

.btn--keypad:hover>i {
    --fa-secondary-opacity: 1;
    transform: translateY(calc(var(--block-size-xs) * -1));
}

.table-cell__complementary {
    background-color: var(--theme-colour-complementary);
    color: var(--theme-colour-complementary-foreground);
    border-radius: 1000px;
    padding: 0 var(--block-size-md);
    font-size: var(--body-font-size-sm);
    font-weight: var(--font-weight-medium);
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.badge {
    --badge-background-colour: rgba(0, 0, 0, 0);
    --badge-colour: var(--body-colour);
    border-radius: .2142rem;
    background-color: var(--badge-background-colour);
    color: var(--badge-colour);
    font-size: var(--body-font-size-sm);
    line-height: 1.2857rem;
    font-weight: var(--font-weight-medium);
    padding-inline: var(--block-size-sm);
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    max-inline-size: 100%;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    text-align: center;
    transition: background-color .2s, color .2s;
}

.badge--sm {
    padding-inline: var(--block-size-xs);
    font-size: var(--body-font-size-xs);
}

.badge--xs {
    padding-inline: var(--block-size-xxs);
    line-height: var(--body-line-height-sm);
    font-size: var(--body-font-size-xxs);
}

.badge--lg {
    padding-block: var(--block-size-xxs);
    font-size: var(--block-size-base);
}

.badge--success {
    --badge-background-colour: var(--success-colour);
    --badge-colour: var(--success-colour-foreground);
}

.badge--success-secondary {
    --badge-background-colour: rgba(var(--success-colour-rgb), .125);
    --badge-colour: var(--success-colour);
}

.badge--danger {
    --badge-background-colour: var(--danger-colour);
    --badge-colour: var(--danger-colour-foreground);
}

.badge--danger-secondary {
    --badge-background-colour: rgba(var(--danger-colour-rgb), .125);
    --badge-colour: var(--danger-colour);
}

.badge--secondary {
    --badge-background-colour: var(--secondary-colour);
    --badge-colour: var(--secondary-colour-foreground);
}

.badge--secondary-secondary {
    --badge-background-colour: rgba(var(--secondary-colour-rgb), .125);
    --badge-colour: var(--secondary-colour);
}

.badge--warning {
    --badge-background-colour: var(--warning-colour);
    --badge-colour: var(--warning-colour-foreground);
}

.badge--warning-secondary {
    --badge-background-colour: rgba(var(--warning-colour-rgb), .125);
    --badge-colour: var(--warning-colour);
}

.badge--theme {
    --badge-background-colour: var(--theme-colour);
    --badge-colour: var(--theme-colour-foreground);
}

.badge--theme-secondary {
    --badge-background-colour: rgba(var(--theme-colour-rgb), .125);
    --badge-colour: var(--theme-colour);
}

.badge--complementary-secondary {
    --badge-background-colour: rgba(var(--theme-colour-complementary-rgb), .125);
    --badge-colour: var(--theme-colour-complementary);
}

.badge--info {
    --badge-background-colour: var(--info-colour);
    --badge-colour: var(--info-colour-foreground);
}

.badge--info-secondary {
    --badge-background-colour: rgba(var(--info-colour-rgb), .125);
    --badge-colour: var(--info-colour);
}

.badge--complementary {
    --badge-background-colour: var(--theme-colour-complementary);
    --badge-colour: var(--theme-colour-complementary-foreground);
}

.border-success {
    border-color: var(--success-colour) !important;
}

.border-danger {
    border-color: var(--danger-colour) !important;
}

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

.border-secondary {
    border-color: var(--body-colour-faded) !important;
}

.information-row {
    --column-count: 1;
    --gap: var(--block-size-base);
    flex-wrap: wrap;
    gap: var(--gap);
}

@media (min-width: 768px) {
    chip-emptyprompt:not([size="sm"]) {
        width: 50%;
    }

    .information-row {
        --column-count: 2;
    }

    [columns="1"] {
        --column-count: 1;
    }
}

@media (min-width: 1200px) {
    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .information-row {
        --column-count: 4;
    }

    [columns="1"] {
        --column-count: 1;
    }

    [columns="2"] {
        --column-count: 2;
    }

    [columns="3"] {
        --column-count: 3;
    }

    [columns="4"] {
        --column-count: 4;
    }
}

@media(min-width:1400px) {
    .row-cols-xxl-7>* {
        flex: 0 0 auto;
        width: 14.2857143%;
    }
}

.checkbox__wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.checkbox__wrapper>label {
    margin-left: var(--block-size-sm);
}

.tree {
    text-align: left;
    display: inline-block;
    width: 100%;
}

.tree .tree {
    width: auto;
    display: block;
    padding-left: calc(1.25em + var(--block-size-xs));
}

.tree .tree li {
    overflow: hidden;
    height: 0;
    display: block;
}

.tree-item {
    padding: var(--block-size-xs);
}

.tree label {
    display: inline-block;
    padding-left: 0;
    cursor: pointer;
    transition: color .2s;
}

.tree label:before {
    width: 1.25em;
    text-align: center;
    transition: transform .2s;
    display: inline-block;
    font-family: 'Font Awesome 5 Pro', var(--body-font-family);
    font-weight: 900;
    content: "\f054";
    margin-right: var(--block-size-xs);
}

.tree input[type="checkbox"]:checked~label:before {
    transform: rotate(90deg);
}

.tree label:hover {
    color: var(--body-colour-faded);
}

.tree [type="checkbox"] {
    display: none !important;
}

.tree [type="checkbox"]:checked~chip-tree>ul>li {
    height: auto;
}

chip-treeitem>label>.fa-folder:first-child::before {
    width: 1.25em;
    text-align: center;
    display: inline-block;
    font-family: 'Font Awesome 5 Pro', sans-serif;
    content: "\f07b";
    font-style: normal;
    transition: transform .2s;
    font-weight: 900;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

chip-treeitem>label>i:first-child {
    margin-right: var(--block-size-xs);
}

chip-treeitem>i:first-child {
    margin-right: var(--block-size-sm);
}

.tree [type="checkbox"]:checked+label>.fa-folder::before {
    content: "\f07c";
}

.tree [type="checkbox"]:not(:checked)~chip-tree>ul>li {
    padding: 0;
}

.accordion__container .btn-accordion-toggle[aria-expanded=true] {
    border-bottom: 1px solid var(--outline-colour);
}

.accordion__container .btn-accordion-toggle {
    --btn-padding-x: var(--block-size-base);
}

.btn-accordion-toggle[aria-expanded=true]+.accordion__content {
    opacity: 1;
    max-height: initial;
    transition: all .2s linear;
}

.accordion__container .btn-accordion-toggle[aria-expanded=true]+.accordion__content {
    padding-top: var(--block-size-sm);
    padding-bottom: var(--block-size-sm);
}

.btn-accordion-toggle>.fa-chevron-down {
    transition: rotate .2s;
}

.btn-accordion-toggle[aria-expanded=true]>.fa-chevron-down {
    rotate: 180deg;
}

.btn-accordion-toggle+.accordion__content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .2s linear, padding-top .2s linear, padding-bottom .2s linear;
}

.accordion__container {
    border: 1px solid var(--outline-colour);
    border-radius: var(--standard-border-radius);
    transition: border-color .2s;
}

.accordion__container .accordion__content {
    padding-left: var(--block-size-base);
    padding-right: var(--block-size-base);
}

.btn-accordion-toggle {
    --btn-padding-x: 0;
    --btn-padding-y: var(--block-size-xs);
    width: 100%;
    border-radius: 0;
    text-align: left;
    justify-content: start;
    height: fit-content;
}

.accordion__icon {
    margin-right: var(--block-size-sm);
    font-size: var(--body-font-size-sm);
}

.accordion__container .accordion__icon {
    margin-left: auto;
    font-size: inherit;
}

.accordion__container .btn-accordion-toggle:not(chip-accordionitem:first-child .btn-accordion-toggle) {
    border-top-color: var(--outline-colour);
}

chip-accordionitem:not([open], [heading])>* {
    pointer-events: none;
}

.border-right-none {
    border-right: none;
}

.br-right-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mobile-header__title {
    font-weight: var(--font-weight-medium);
}

.icon-picker__display {
    display: flex;
    align-items: center;
}

.icon-picker__display>i:last-child {
    margin-left: var(--block-size-sm);
}

/* For colour pickers */
[data-colour="blue"] {
    --theme-colour-r: 77;
    --theme-colour-g: 77;
    --theme-colour-b: 255;
}

[data-secondary-colour="blue"] {
    --fa-secondary-color: rgb(77, 77, 255);
}

[data-colour=""] {
    --theme-colour: var(--body-colour);
    --theme-colour-foreground: var(--background-colour);
}

[data-theme="dark"] [data-colour="blue"],
[data-colour="blue"][data-theme="dark"] {
    --theme-colour-r: 0;
    --theme-colour-g: 149;
    --theme-colour-b: 252;
}

[data-theme="dark"] [data-secondary-colour="blue"],
[data-secondary-colour="blue"][data-theme="dark"] {
    --fa-secondary-color: rgb(0, 149, 252);
}

[data-theme="dark"] [data-colour="yellow"],
[data-colour="yellow"][data-theme="dark"] {
    --theme-colour-r: 249;
    --theme-colour-g: 210;
    --theme-colour-b: 80;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 146;
    --theme-colour-complementary-g: 169;
    --theme-colour-complementary-b: 247;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="yellow"],
[data-secondary-colour="yellow"][data-theme="dark"] {
    --fa-secondary-color: rgb(249, 210, 80);
}

[data-colour="yellow"] {
    --theme-colour-r: 185;
    --theme-colour-g: 94;
    --theme-colour-b: 6;

    --theme-colour-foreground: #FFFFFF;

    --theme-colour-complementary-r: 13;
    --theme-colour-complementary-g: 93;
    --theme-colour-complementary-b: 170;
    --theme-colour-complementary-foreground: #FFFFFF;
}

[data-secondary-colour="yellow"] {
    --fa-secondary-color: rgb(185, 94, 6);
}

[data-colour="amber"] {
    --theme-colour-r: 203;
    --theme-colour-g: 134;
    --theme-colour-b: 33;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 39;
    --theme-colour-complementary-g: 99;
    --theme-colour-complementary-b: 188;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="amber"] {
    --fa-secondary-color: rgb(203, 134, 33);
}

[data-colour="brown"] {
    --theme-colour-r: 126;
    --theme-colour-g: 89;
    --theme-colour-b: 71;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 67;
    --theme-colour-complementary-g: 97;
    --theme-colour-complementary-b: 111;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="brown"] {
    --fa-secondary-colour: rgb(126, 89, 71);
}

[data-colour="crimson"] {
    --theme-colour-r: 161;
    --theme-colour-g: 0;
    --theme-colour-b: 40;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 0;
    --theme-colour-complementary-g: 122;
    --theme-colour-complementary-b: 109;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="crimson"] {
    --fa-secondary-color: rgb(161, 0, 40);
}

[data-colour="cyan"] {
    --theme-colour-r: 10;
    --theme-colour-g: 130;
    --theme-colour-b: 153;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 201;
    --theme-colour-complementary-g: 75;
    --theme-colour-complementary-b: 64;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="cyan"] {
    --fa-secondary-color: rgb(10, 130, 153);
}

[data-colour="gold"] {
    --theme-colour-r: 178;
    --theme-colour-g: 144;
    --theme-colour-b: 80;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 80;
    --theme-colour-complementary-g: 109;
    --theme-colour-complementary-b: 163;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="gold"] {
    --fa-secondary-color: rgb(178, 144, 80);
}

[data-colour="green"] {
    --theme-colour-r: 63;
    --theme-colour-g: 132;
    --theme-colour-b: 92;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 150;
    --theme-colour-complementary-g: 76;
    --theme-colour-complementary-b: 157;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="green"] {
    --fa-secondary-color: rgb(63, 132, 92);
}

[data-colour="chipside"] {
    --theme-colour-r: 72;
    --theme-colour-g: 119;
    --theme-colour-b: 191;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 206;
    --theme-colour-complementary-g: 152;
    --theme-colour-complementary-b: 69;
    --theme-colour-complementary-foreground: #000000;
}

[data-secondary-colour="chipside"] {
    --fa-secondary-color: rgb(72, 119, 191);
}

[data-colour="indigo"] {
    --theme-colour-r: 51;
    --theme-colour-g: 0;
    --theme-colour-b: 151;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 61;
    --theme-colour-complementary-g: 120;
    --theme-colour-complementary-b: 0;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="indigo"] {
    --fa-secondary-color: rgb(51, 0, 151);
}

[data-colour="magenta"] {
    --theme-colour-r: 152;
    --theme-colour-g: 0;
    --theme-colour-b: 87;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 0;
    --theme-colour-complementary-g: 113;
    --theme-colour-complementary-b: 56;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="magenta"] {
    --fa-secondary-color: rgb(152, 0, 87);
}

[data-colour="mauve"] {
    --theme-colour-r: 170;
    --theme-colour-g: 94;
    --theme-colour-b: 136;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 38;
    --theme-colour-complementary-g: 131;
    --theme-colour-complementary-b: 95;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="mauve"] {
    --fa-secondary-color: rgb(170, 94, 136);
}

[data-colour="olive"] {
    --theme-colour-r: 74;
    --theme-colour-g: 89;
    --theme-colour-b: 64;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 114;
    --theme-colour-complementary-g: 107;
    --theme-colour-complementary-b: 120;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="olive"] {
    --fa-secondary-color: rgb(74, 89, 64);
}

[data-colour="oppidatim"] {
    --theme-colour-r: 155;
    --theme-colour-g: 108;
    --theme-colour-b: 184;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 92;
    --theme-colour-complementary-g: 159;
    --theme-colour-complementary-b: 100;

    --theme-colour-complementary-foreground: #000000;
}

[data-colour="orange"] {
    --theme-colour-r: 209;
    --theme-colour-g: 73;
    --theme-colour-b: 5;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 0;
    --theme-colour-complementary-g: 113;
    --theme-colour-complementary-b: 161;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="orange"] {
    --fa-secondary-color: rgb(209, 73, 5);
}

[data-colour="pink"] {
    --theme-colour-r: 197;
    --theme-colour-g: 71;
    --theme-colour-b: 142;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 16;
    --theme-colour-complementary-g: 158;
    --theme-colour-complementary-b: 101;
    --theme-colour-complementary-foreground: #000000;
}

[data-secondary-colour="pink"] {
    --fa-secondary-color: rgb(197, 71, 142);
}

[data-colour="purple"] {
    --theme-colour-r: 152;
    --theme-colour-g: 84;
    --theme-colour-b: 200;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 72;
    --theme-colour-complementary-g: 175;
    --theme-colour-complementary-b: 81;
    --theme-colour-complementary-foreground: #000000;
}

[data-secondary-colour="purple"] {
    --fa-secondary-color: rgb(152, 84, 200);
}

[data-colour="red"] {
    --theme-colour-r: 223;
    --theme-colour-g: 41;
    --theme-colour-b: 37;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 0;
    --theme-colour-complementary-g: 156;
    --theme-colour-complementary-b: 175;
    --theme-colour-complementary-foreground: #000000;
}

[data-secondary-colour="red"] {
    --fa-secondary-color: rgb(223, 41, 37);
}

[data-colour="steel"] {
    --theme-colour-r: 113;
    --theme-colour-g: 118;
    --theme-colour-b: 139;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 141;
    --theme-colour-complementary-g: 128;
    --theme-colour-complementary-b: 77;
    --theme-colour-complementary-foreground: #000000;
}

[data-secondary-colour="steel"] {
    --fa-secondary-color: rgb(113, 118, 139);
}

[data-colour="taupe"] {
    --theme-colour-r: 128;
    --theme-colour-g: 117;
    --theme-colour-b: 105;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 98;
    --theme-colour-complementary-g: 105;
    --theme-colour-complementary-b: 113;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-secondary-colour="taupe"] {
    --fa-secondary-color: rgb(128, 117, 105);
}

[data-colour="teal"] {
    --theme-colour-r: 36;
    --theme-colour-g: 131;
    --theme-colour-b: 134;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 182;
    --theme-colour-complementary-g: 95;
    --theme-colour-complementary-b: 100;
    --theme-colour-complementary-foreground: #000000;
}

[data-secondary-colour="teal"] {
    --fa-secondary-color: rgb(36, 131, 134);
}

[data-colour="violet"] {
    --theme-colour-r: 155;
    --theme-colour-g: 58;
    --theme-colour-b: 238;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 69;
    --theme-colour-complementary-g: 196;
    --theme-colour-complementary-b: 78;
    --theme-colour-complementary-foreground: #000000;
}

[data-secondary-colour="violet"] {
    --fa-secondary-color: rgb(155, 58, 238);
}

/* Dark mode variants */
[data-theme="dark"] [data-colour="oppidatim"],
[data-colour="oppidatim"][data-theme="dark"] {
    --theme-colour-r: 159;
    --theme-colour-g: 117;
    --theme-colour-b: 181;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 99;
    --theme-colour-complementary-g: 156;
    --theme-colour-complementary-b: 109;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-colour="amber"],
[data-colour="amber"][data-theme="dark"] {
    --theme-colour-r: 239;
    --theme-colour-g: 163;
    --theme-colour-b: 43;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 50;
    --theme-colour-complementary-g: 117;
    --theme-colour-complementary-b: 224;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="amber"],
[data-secondary-colour="amber"][data-theme="dark"] {
    --fa-secondary-color: rgb(239, 163, 43);
}

[data-theme="dark"] [data-colour="brown"],
[data-colour="brown"][data-theme="dark"] {
    --theme-colour-r: 163;
    --theme-colour-g: 125;
    --theme-colour-b: 103;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 100;
    --theme-colour-complementary-g: 131;
    --theme-colour-complementary-b: 148;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="brown"],
[data-secondary-colour="brown"][data-theme="dark"] {
    --fa-secondary-color: rgb(163, 125, 103);
}

[data-theme="dark"] [data-colour="crimson"],
[data-colour="crimson"][data-theme="dark"] {
    --theme-colour-r: 251;
    --theme-colour-g: 50;
    --theme-colour-b: 84;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 0;
    --theme-colour-complementary-g: 212;
    --theme-colour-complementary-b: 211;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="crimson"],
[data-secondary-colour="crimson"][data-theme="dark"] {
    --fa-secondary-color: rgb(251, 50, 84);
}

[data-theme="dark"] [data-colour="cyan"],
[data-colour="cyan"][data-theme="dark"] {
    --theme-colour-r: 43;
    --theme-colour-g: 203;
    --theme-colour-b: 221;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 255;
    --theme-colour-complementary-g: 124;
    --theme-colour-complementary-b: 121;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="cyan"],
[data-secondary-colour="cyan"][data-theme="dark"] {
    --fa-secondary-color: rgb(43, 203, 221);
}

[data-theme="dark"] [data-colour="gold"],
[data-colour="gold"][data-theme="dark"] {
    --theme-colour-r: 215;
    --theme-colour-g: 177;
    --theme-colour-b: 91;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 147;
    --theme-colour-complementary-g: 167;
    --theme-colour-complementary-b: 213;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="gold"],
[data-secondary-colour="gold"][data-theme="dark"] {
    --fa-secondary-color: rgb(215, 177, 91);
}

[data-theme="dark"] [data-colour="green"],
[data-colour="green"][data-theme="dark"] {
    --theme-colour-r: 37;
    --theme-colour-g: 157;
    --theme-colour-b: 90;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 173;
    --theme-colour-complementary-g: 45;
    --theme-colour-complementary-b: 182;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-theme="dark"] [data-secondary-colour="green"],
[data-secondary-colour="green"][data-theme="dark"] {
    --fa-secondary-color: rgb(37, 157, 90);
}

[data-theme="dark"] [data-colour="chipside"],
[data-colour="chipside"][data-theme="dark"] {
    --theme-colour-r: 84;
    --theme-colour-g: 137;
    --theme-colour-b: 197;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 212;
    --theme-colour-complementary-g: 151;
    --theme-colour-complementary-b: 81;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="chipside"],
[data-secondary-colour="chipside"][data-theme="dark"] {
    --fa-secondary-color: rgb(84, 137, 197);
}

[data-theme="dark"] [data-colour="indigo"],
[data-colour="indigo"][data-theme="dark"] {
    --theme-colour-r: 116;
    --theme-colour-g: 80;
    --theme-colour-b: 207;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 125;
    --theme-colour-complementary-g: 176;
    --theme-colour-complementary-b: 38;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="indigo"],
[data-secondary-colour="indigo"][data-theme="dark"] {
    --fa-secondary-color: rgb(116, 80, 207);
}

[data-theme="dark"] [data-colour="magenta"],
[data-colour="magenta"][data-theme="dark"] {
    --theme-colour-r: 240;
    --theme-colour-g: 56;
    --theme-colour-b: 146;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 0;
    --theme-colour-complementary-g: 201;
    --theme-colour-complementary-b: 134;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="magenta"],
[data-secondary-colour="magenta"][data-theme="dark"] {
    --fa-secondary-color: rgb(240, 56, 146);
}

[data-theme="dark"] [data-colour="mauve"],
[data-colour="mauve"][data-theme="dark"] {
    --theme-colour-r: 184;
    --theme-colour-g: 119;
    --theme-colour-b: 159;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 56;
    --theme-colour-complementary-g: 145;
    --theme-colour-complementary-b: 105;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="mauve"],
[data-secondary-colour="mauve"][data-theme="dark"] {
    --fa-secondary-color: rgb(184, 119, 159);
}

[data-theme="dark"] [data-colour="olive"],
[data-colour="olive"][data-theme="dark"] {
    --theme-colour-r: 64;
    --theme-colour-g: 117;
    --theme-colour-b: 38;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 117;
    --theme-colour-complementary-g: 74;
    --theme-colour-complementary-b: 148;
    --theme-colour-complementary-foreground: #ffffff;
}

[data-theme="dark"] [data-secondary-colour="olive"],
[data-secondary-colour="olive"][data-theme="dark"] {
    --fa-secondary-color: rgb(64, 117, 38);
}

[data-theme="dark"] [data-colour="orange"],
[data-colour="orange"][data-theme="dark"] {
    --theme-colour-r: 249;
    --theme-colour-g: 104;
    --theme-colour-b: 54;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 61;
    --theme-colour-complementary-g: 190;
    --theme-colour-complementary-b: 234;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="orange"],
[data-secondary-colour="orange"][data-theme="dark"] {
    --fa-secondary-color: rgb(249, 104, 54);
}

[data-theme="dark"] [data-colour="pink"],
[data-colour="pink"][data-theme="dark"] {
    --theme-colour-r: 227;
    --theme-colour-g: 103;
    --theme-colour-b: 165;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 36;
    --theme-colour-complementary-g: 188;
    --theme-colour-complementary-b: 137;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="pink"],
[data-secondary-colour="pink"][data-theme="dark"] {
    --fa-secondary-color: rgb(227, 103, 165);
}

[data-theme="dark"] [data-colour="purple"],
[data-colour="purple"][data-theme="dark"] {
    --theme-colour-r: 152;
    --theme-colour-g: 84;
    --theme-colour-b: 200;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 72;
    --theme-colour-complementary-g: 175;
    --theme-colour-complementary-b: 81;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="purple"],
[data-secondary-colour="purple"][data-theme="dark"] {
    --fa-secondary-color: rgb(152, 84, 200);
}

[data-theme="dark"] [data-colour="red"],
[data-colour="red"][data-theme="dark"] {
    --theme-colour-r: 249;
    --theme-colour-g: 59;
    --theme-colour-b: 41;

    --theme-colour-foreground: #ffffff;

    --theme-colour-complementary-r: 0;
    --theme-colour-complementary-g: 164;
    --theme-colour-complementary-b: 201;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="red"],
[data-secondary-colour="red"][data-theme="dark"] {
    --fa-secondary-color: rgb(249, 59, 41);
}

[data-theme="dark"] [data-colour="steel"],
[data-colour="steel"][data-theme="dark"] {
    --theme-colour-r: 169;
    --theme-colour-g: 171;
    --theme-colour-b: 180;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 182;
    --theme-colour-complementary-g: 171;
    --theme-colour-complementary-b: 122;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="steel"],
[data-secondary-colour="steel"][data-theme="dark"] {
    --fa-secondary-color: rgb(169, 171, 180);
}

[data-theme="dark"] [data-colour="taupe"],
[data-colour="taupe"][data-theme="dark"] {
    --theme-colour-r: 184;
    --theme-colour-g: 169;
    --theme-colour-b: 152;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 147;
    --theme-colour-complementary-g: 157;
    --theme-colour-complementary-b: 169;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="taupe"],
[data-secondary-colour="taupe"][data-theme="dark"] {
    --fa-secondary-color: rgb(184, 169, 152);
}

[data-theme="dark"] [data-colour="teal"],
[data-colour="teal"][data-theme="dark"] {
    --theme-colour-r: 60;
    --theme-colour-g: 175;
    --theme-colour-b: 169;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 223;
    --theme-colour-complementary-g: 133;
    --theme-colour-complementary-b: 145;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="teal"],
[data-secondary-colour="teal"][data-theme="dark"] {
    --fa-secondary-color: rgb(60, 175, 169);
}

[data-theme="dark"] [data-colour="violet"],
[data-colour="violet"][data-theme="dark"] {
    --theme-colour-r: 206;
    --theme-colour-g: 67;
    --theme-colour-b: 240;

    --theme-colour-foreground: #000000;

    --theme-colour-complementary-r: 88;
    --theme-colour-complementary-g: 214;
    --theme-colour-complementary-b: 97;
    --theme-colour-complementary-foreground: #000000;
}

[data-theme="dark"] [data-secondary-colour="violet"],
[data-secondary-colour="violet"][data-theme="dark"] {
    --fa-secondary-color: rgb(206, 67, 240);
}

.information__actions {
    margin-left: auto;
    margin-bottom: var(--block-size-xs);
}

.illustration-svg {
    width: 300px;
}