@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");

@layer legacy, reset, elements, components, templates, overrides, utilities, debug;
/*  converts pixels to em (context sets the current size of the font) */
/* Empty */
/* Empty */
/* Empty */
@font-face {
  font-family: "Qanelas";
  src: url("/fonts/qanelas-medium-webfont.woff2") format("woff2"), url("/fonts/qanelas-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Qanelas";
  src: url("/fonts/qanelas-semibold-webfont.woff2") format("woff2"), url("/fonts/qanelas-semibold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Qanelas";
  src: url("/fonts/qanelas-bold-webfont.woff2") format("woff2"), url("/fonts/qanelas-bold-webfont.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
/*  Foundations */
@layer reset {
:root {
    color-scheme: light dark;
    --colour-black: #000000;
    --colour-white: #fcfcfc;
    /* #region Theme colours */
    --colour-primary-theme: #00313c;
    --colour-primary: light-dark(#00313c,#b3c1c5);
    --colour-secondary-theme: #b4e6a5;
    --colour-secondary: #b4e6a5;
    --colour-success-theme: #b4e6a5;
    --colour-success: #b4e6a5;
    --colour-complete: #0f9d58;
    --colour-complete-theme: #0f9d58;
    --colour-info-theme: #1ebee6;
    --colour-info: light-dark(#1ebee6,#35c5e9);
    --colour-warning-theme: #ffa500;
    --colour-warning: light-dark(#ffa500,#ffb733);
    --colour-danger-theme: #dc3545;
    --colour-danger: light-dark(#dc3545,#e7727d);
    --colour-light-theme: #eeeeee;
    --colour-light: #eeeeee;
    --colour-dark-theme: #46003c;
    --colour-dark: light-dark(#46003c,#b599b1);
    /* #endregion */
    /* #region functional colours */
    --colour-muted: #9d9d9d;
    --colour-canvas: light-dark(#fcfcfc,#262626);
    --colour-canvas-2: light-dark(#ffffff,#313131);
    --colour-body-default: light-dark(#595959,#bfbfbf);
    --colour-body: light-dark(#595959,#bfbfbf);
    --colour-heading: light-dark(#00313c,#b3c1c5);
    --colour-link: light-dark(#00313c,#fcfcfc);
    --colour-hover: light-dark(#00313c,#fcfcfc);
    --colour-focus: light-dark(#00313c,#fcfcfc);
    --colour-active: light-dark(#00313c,#fcfcfc);
    --colour-border: light-dark(#d8d8d8,#fcfcfc);
    --colour-brand: light-dark(#00313c,#fcfcfc);
    --colour-btn: var(--colour-primary-theme);
    --colour-btn-bg: light-dark(#ffa500,#fcfcfc);
    --colour-btn-border: light-dark(#ffa500,#fcfcfc);
    --colour-btn-bg-hover: transparent;
    --colour-btn-hover: light-dark(#00313c,#fcfcfc);
    --colour-btn-secondary: light-dark(#00313c,#fcfcfc);
    --colour-btn-secondary-border: light-dark(#00313c,#fcfcfc);
    --colour-btn-secondary-bg: transparent;
    --colour-btn-secondary-bg-hover: light-dark(#00313c,#fcfcfc);
    --colour-btn-secondary-hover: light-dark(#fcfcfc,#00313c);
    --colour-btn-action-hover-bg: light-dark(#eeeeee,#313131);
    --colour-activeLink: light-dark(#e8f9fd,#173c45);
    --colour-activeLinkBorder: light-dark(#1dbde6,#1dbde6);
    --colour-underline: light-dark(#b4e6a5, #fcfcfc);
    --colour-selected: var(--colour-info-theme);
    --colour-inverted: #fcfcfc;
    /* #endregion */
    /* #region Wider colours */
    --wider-colour-1: #EEEEEE;
    --wider-colour-2: #EBD7F6;
    --wider-colour-3: #BEE8F8;
    --wider-colour-4: #A6DCC7;
    --wider-colour-5: #FAD0DA;
    --wider-colour-6: #AFCCF2;
    --wider-colour-7: #FFD2B4;
    --wider-colour-8: #CDF0F2;
    --wider-colour-9: #FFABC2;
    --wider-colour-10: #DCEAF2;
    --wider-colour-11: #EEBCB3;
    --wider-colour-12: #F0BDFF;
    --wider-colour-13: #FFF8CF;
    --wider-colour-14: #92E3DF;
    --wider-colour-15: #FEEAE8;
    --wider-colour-16: #8BC3A6;
    --wider-colour-17: #FEF0A6;
    --wider-colour-18: #FFBDA0;
    --wider-colour-19: #CBEFE1;
    --wider-colour-20: #FFDD90;
    --wider-colour-21: #97DBF2;
    --wider-colour-22: #FFAF91;
    --wider-colour-23: #C2DCD9;
    /* #endregion */
    /* #region chart colours */
    --chart-colour-1: var(--wider-colour-3);
    --chart-colour-2: var(--wider-colour-4);
    --chart-colour-3: var(--wider-colour-5);
    --chart-colour-4: var(--wider-colour-6);
    --chart-colour-5: var(--wider-colour-7);
    --chart-colour-6: var(--wider-colour-8);
    --chart-colour-7: var(--wider-colour-9);
    --chart-colour-8: var(--wider-colour-10);
    --chart-colour-9: var(--wider-colour-11);
    --chart-colour-10: var(--wider-colour-12);
    --chart-colour-success: #d2f0c9 !important;
    --chart-colour-danger: #f5c2c7 !important;
    --chart-colour-warning: #ffd280 !important;
    /* #endregion */
    --hover-outline-colour: var(--colour, var(--colour-primary));
    /* #region Type vars */
    --font-body: 'Qanelas', arial, sans-serif;
    --font-heading: 'Qanelas', arial, sans-serif;
    --heading-weight: bold;
    --type-scale: 1.2;
    --body-fs: 1rem;
    /* #endregion */
    /* #region heading */
    --h1-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 6)), 0.25rem);
    --h2-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 5)), 0.25rem);
    --h3-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 3)), 0.25rem);
    --h4-fs: round(calc(var(--body-fs, 1rem) * pow(var(--type-scale), 2)), 0.25rem);
    --h1-lh: round(calc(1em * var(--type-scale)), 0.25rem);
    --h1-pb: round(calc(1em * var(--type-scale)), 0.25rem);
    --h2-lh: round(calc(1em * var(--type-scale)), 0.25rem);
    --h2-pb: round(calc(1em * var(--type-scale)), 0.25rem);
    --h3-lh: round(up, calc(1em * var(--type-scale)), 0.25rem);
    --h3-pb: round(up, calc(1em * var(--type-scale)), 0.25rem);
    --h4-lh: round(up, calc(1em * var(--type-scale)), 0.25rem);
    --h4-pb: round(up, calc(1em * var(--type-scale)), 0.25rem);
    /* #endregion */
    /* #region rounded borders */
    --border-radius-sm: 0.25rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius-2xl: 3rem;
    /* #endregion */
    /* #region Z-index */
    --index-below: -1;
    --index-base: 0;
    --index-focus: 2;
    --index-above: 10;
    --index-floating: 100;
    --index-menu: 200;
    --index-overlay: 1000;
    /* #endregion */
    /* #region card component */
    --card-fs: 1.125rem; /* 18/16 */
    --card-lh: 1.5rem;
    --card-icon-right: 1rem;
    --card-icon-bg: var(--colour-warning);
    --card-icon-colour: var(--colour-primary-theme);
    --card-head-top-padding: 2rem;
    --card-head-bottom-padding: 2rem;
    --card-body-top-padding: 2rem;
    --card-body-bottom-padding: 2rem;
    --card-head-height: 6rem;
    --card-top-padding: 2rem;
    --card-bottom-padding: 2rem;
    --card-right-padding: 1rem;
    --card-left-padding: 1rem;
    --card-border-radius: 0.5rem;
    --card-box-shadow: 2px 0.1875rem 0.375rem rgba(0, 0, 0, 0.2);
    /* #endregion */
    --nav-height: 6rem; /* 96 */
    --code-color: #d63384;
    /* #region Default borders */
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--colour-border);
    /* #endregion */
    /* #region layout */
    --gap: 1rem;
    --gutter: 1.5rem;
    --max-width: 80rem;
    --content-max-width: 50rem;
    --input-max-width: 50rem;
    --select-max-width: 50rem;
    --container-max-width: 80rem;
    --container-padding-top: 0;
    --container-padding-bottom: 1rem;
    --padding-inline: 1.5rem;
    --container-padding-x: 1.5rem;
    --container-padding: var(--container-padding-top) var(--container-padding-x) var(--container-padding-bottom) var(--container-padding-x);
    /* #endregion */
    /* #region icons */
    --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3e%3c/svg%3e");
    --icon-close: url("data:image/svg+xml,%3csvg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    --icon-new-tab: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M304 24c0 13.3 10.7 24 24 24H430.1L207 271c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l223-223V184c0 13.3 10.7 24 24 24s24-10.7 24-24V24c0-13.3-10.7-24-24-24H328c-13.3 0-24 10.7-24 24zM72 32C32.2 32 0 64.2 0 104V440c0 39.8 32.2 72 72 72H408c39.8 0 72-32.2 72-72V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V440c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V104c0-13.3 10.7-24 24-24H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H72z'/%3e%3c/svg%3e");
    --icon-light: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath d='M296 552L296 496C296 482.7 306.7 472 320 472C333.3 472 344 482.7 344 496L344 552C344 565.3 333.3 576 320 576C306.7 576 296 565.3 296 552zM296 144L296 88C296 74.7 306.7 64 320 64C333.3 64 344 74.7 344 88L344 144C344 157.3 333.3 168 320 168C306.7 168 296 157.3 296 144zM139 139C148.4 129.6 163.6 129.6 172.9 139L212.5 178.6C221.9 188 221.9 203.2 212.5 212.5C203.1 221.8 187.9 221.9 178.6 212.5L139 172.9C129.6 163.5 129.6 148.3 139 139zM427.5 427.5C436.9 418.1 452.1 418.1 461.4 427.5L501 467.1C510.4 476.5 510.4 491.7 501 501C491.6 510.3 476.4 510.4 467.1 501L427.5 461.4C418.1 452 418.1 436.8 427.5 427.5zM64 320C64 306.7 74.7 296 88 296L144 296C157.3 296 168 306.7 168 320C168 333.3 157.3 344 144 344L88 344C74.7 344 64 333.3 64 320zM472 320C472 306.7 482.7 296 496 296L552 296C565.3 296 576 306.7 576 320C576 333.3 565.3 344 552 344L496 344C482.7 344 472 333.3 472 320zM139 501C129.6 491.6 129.6 476.4 139 467.1L178.6 427.5C188 418.1 203.2 418.1 212.5 427.5C221.8 436.9 221.9 452.1 212.5 461.4L172.9 501C163.5 510.4 148.3 510.4 139 501zM427.5 212.5C418.1 203.1 418.1 187.9 427.5 178.6L467.1 139C476.5 129.6 491.7 129.6 501 139C510.3 148.4 510.4 163.6 501 172.9L461.4 212.5C452 221.9 436.8 221.9 427.5 212.5zM384 320C384 284.7 355.3 256 320 256C284.7 256 256 284.7 256 320C256 355.3 284.7 384 320 384C355.3 384 384 355.3 384 320zM208 320C208 258.1 258.1 208 320 208C381.9 208 432 258.1 432 320C432 381.9 381.9 432 320 432C258.1 432 208 381.9 208 320z'/%3e%3c/svg%3e");
    --icon-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3c!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2025 Fonticons, Inc.--%3e%3cpath d='M503.8 153.8C504.8 157.4 508.2 160 512 160C515.8 160 519.1 157.5 520.2 153.8L531.2 115.2L569.8 104.2C573.4 103.2 576 99.8 576 96C576 92.2 573.5 88.9 569.8 87.8L531.2 76.8L520.2 38.2C519.2 34.6 515.8 32 512 32C508.2 32 504.9 34.5 503.8 38.2L492.8 76.8L454.2 87.8C450.6 88.8 448 92.2 448 96C448 99.8 450.5 103.1 454.2 104.2L492.8 115.2L503.8 153.8zM288 128C164.3 128 64 228.3 64 352C64 475.7 164.3 576 288 576C348.2 576 402.9 552.2 443.1 513.6C449.5 507.5 451.3 497.9 447.7 489.8C444.1 481.7 435.7 476.8 426.9 477.5C422.6 477.8 418.3 478 414 478C325.1 478 253 405.9 253 317C253 253.9 289.3 199.2 342.3 172.8C350.2 168.8 354.9 160.3 353.8 151.5C352.7 142.7 346.2 135.5 337.6 133.5C321.6 129.9 305 128 288 128zM419.2 332.8L435.8 390.8C437.4 396.3 442.4 400 448 400C453.6 400 458.7 396.2 460.2 390.8L476.8 332.8L534.8 316.2C540.3 314.6 544 309.6 544 304C544 298.4 540.2 293.3 534.8 291.8L476.8 275.2L460.2 217.2C458.6 211.7 453.6 208 448 208C442.4 208 437.3 211.8 435.8 217.2L419.2 275.2L361.2 291.8C355.7 293.4 352 298.4 352 304C352 309.6 355.8 314.7 361.2 316.2L419.2 332.8z'/%3e%3c/svg%3e");
    --icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --icon-sort: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3e%3c!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3e%3cpath d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-96-96c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L128 370.7 128 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 306.7 41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-96 96zm352-333.3c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L448 141.3 448 448c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-306.7-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0l96 96z'/%3e%3c/svg%3e");
    --icon-sort-asc: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3e%3c!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2025 Fonticons, Inc.--%3e%3cpath d='M209.4 39.4C204.8 34.7 198.6 32 192 32s-12.8 2.7-17.4 7.4l-168 176c-9.2 9.6-8.8 24.8 .8 33.9s24.8 8.8 33.9-.8L168 115.9 168 456c0 13.3 10.7 24 24 24s24-10.7 24-24l0-340.1L342.6 248.6c9.2 9.6 24.3 9.9 33.9 .8s9.9-24.3 .8-33.9l-168-176z'/%3e%3c/svg%3e");
    --icon-sort-desc: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3e%3c!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2025 Fonticons, Inc.--%3e%3cpath d='M174.6 472.6c4.5 4.7 10.8 7.4 17.4 7.4s12.8-2.7 17.4-7.4l168-176c9.2-9.6 8.8-24.8-.8-33.9s-24.8-8.8-33.9 .8L216 396.1 216 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 340.1L41.4 263.4c-9.2-9.6-24.3-9.9-33.9-.8s-9.9 24.3-.8 33.9l168 176z'/%3e%3c/svg%3e");
    --icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2023 Fonticons, Inc. --%3e%3cpath d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='%23dc3545'/%3e%3c/svg%3e");
    --icon-tick: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license %28Commercial License%29 Copyright 2023 Fonticons, Inc. --%3e%3cpath d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='%230f9d58' /%3e%3c/svg%3e");
    --fa-secondary-opacity: 0.1;
    /* #endregion */
    /* #region spacing */
    --spacer: 1rem;
    --spacer-0: 0;
    --spacer-1: calc(var(--spacer) * 0.5);
    --spacer-2: var(--spacer);
    --spacer-3: calc(var(--spacer) * 1.5);
    --spacer-4: calc(var(--spacer) * 2);
    --spacer-5: calc(var(--spacer) * 3);
    /* #endregion */
    --max-height-sm: 12.5rem; /* 200px */
    --max-height-md: 25rem; /* 400px */
    --max-height-lg: 37.5rem; /* 600px */
    /* #region Dropdown */
    --dropdown-bg: var(--colour-canvas-2);
    --dropdown-margin-block: 0.25rem;
    --dropdown-padding: 0.5rem;
    --dropdown-border-radius: 0.5rem;
    --dropdown-box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
    --option-border-radius: 0.25rem;
    --option-color: var(--colour-primary);
    --option-bg-hover: var(--colour-light);
    --option-padding: 0.5rem;
    --option-color-hover: #595959; /* Magic number */
    --option-bg-active: hsl(from var(--colour-info) h s l / 10%);
    --option-border-left-active: 4px solid var(--colour-info);
    /* #endregion */
    /* #region Spinner */
    --spinner-size: 7rem; /* 112px */
    /* #endregion */
    /*  Add in media query based updates to the global vars like updating the heading 1 font size */
}
@media screen and (min-width: 36em) {
:root {
      --container-padding-x: 2.5rem;
      --padding-inline: 2.5rem;
      --gutter: 2.5rem;
      --scale: 1.25;
}
}
@media screen and (min-width: 62em) {
:root {
      --container-padding-x: 5.25rem;
      --padding-inline: 5.25rem;
      --gutter: 5.25rem;
      --scale: 1.414;
}
:root:has(.nav--large) {
      --container-max-width: 120rem !important;
      --max-width: 120rem !important;
      --padding-inline: 3.5rem !important;
      --container-padding-x: 3.5rem !important;
      --container-padding: var(--container-padding-top) var(--container-padding-x)
        var(--container-padding-bottom) var(--container-padding-x);
      --gutter: 3.5rem;
}
:root:has(iam-nav [slot=secondary]) {
      --nav-height: 8.5rem; /* 96 + 40 */
}
}
@media (prefers-reduced-motion: no-preference) {
:root {
      scroll-behavior: smooth;
}
}
}
@keyframes spin {
to {
    rotate: 1turn;
}
}
@layer reset {
.light-theme {
    color-scheme: light;
}
.dark-theme {
    color-scheme: dark;
}
  /*  On any background colour we change the default text colour to our primary colour to stand out more */
[class*=bg-]:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.invert-colours):not(iam-header):not(iam-notification):not(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) {
    --colour-heading: var(--colour-primary-theme);
    --colour-body: var(--colour-primary-theme);
    color: var(--colour-primary-theme);
}
[class*=bg-]:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.invert-colours):not(iam-header):not(iam-notification):not(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) > * {
    color-scheme: light;
}
@scope (:is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary)) to ([class*='bg-']) {
:scope {
      --colour-heading: var(--colour-white);
      --colour-body: var(--colour-white);
      color: var(--colour-white);
}
:scope > * {
      color-scheme: dark;
}
}
@supports not at-rule(@scope) {
:is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) {
      --colour-heading: var(--colour-white);
      --colour-body: var(--colour-white);
      color: var(--colour-white);
}
:is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) > * {
      color-scheme: dark;
}
}
  /* #region When the theme is set to dark via the dark mode component */
  /*  OR when the dark mode is set via the browser or device when no component is present */
.dark-theme :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
    --colour-heading: var(--colour-primary-theme);
    --colour-body: var(--colour-primary-theme);
    color: var(--colour-primary-theme);
    /*  Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten */
}
.dark-theme :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) > * {
    color-scheme: light;
}
.dark-theme .bg-light {
    color-scheme: light;
    --colour-body: #595959;
}
.dark-theme .bg-light p {
    color: var(--colour-body);
}
  /* #endregion */
.invert-colours > * {
    color-scheme: dark;
    color: var(--colour-white);
}
.reset-colours > * {
    color-scheme: light;
    --colour-body: #595959;
}
@media (forced-colors: active) {
:root {
      --contrast-outline-width: 1px;
}
}
}
@layer reset {
*,
  *::before,
  *::after {
    box-sizing: border-box;
}
  /* Reset & Defaults */
html {
    --root-fs-px: 375;
    -webkit-font-smoothing: antialiased; /*  Fix for Safari/iOS */
    height: 100%;
    width: 100svw;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: calc(16 / var(--root-fs-px) * 100vw);
    scroll-padding-top: 6.25rem; /* 100 */
    scrollbar-gutter: stable;
    container-type: inline-size;
}
@media screen and (min-width: 36em) {
html {
      --root-fs-px: 768;
}
}
@media screen and (min-width: 62em) {
html {
      --root-fs-px: 1280;
}
}
@media (min-width: 80em) {
html {
      /* font-size: 100%; */
      --root-fs-px: 1280;
}
html:has(.nav--large) {
      font-size: 100%;
}
}
@media (min-width: 90em) {
html {
      font-size: 112.5%;
}
html:has(.nav--large) {
      font-size: 100%;
}
}
@media (min-width: 105em) {
html {
      /* font-size: 131.25%; */
}
}
@media print {
html {
      font-size: 16px;
}
}
@media screen and (min-width: 120em) {
html {
      /*  1920 */
}
html:has(.nav--large) {
      --root-fs-px: 1920;
      font-size: calc(16 / var(--root-fs-px) * 100vw);
}
}
body {
    margin: 0; /*  1 */
    background: var(--colour-canvas);
    font-family: var(--font-body);
    width: 100%;
    line-height: 1.2;
    min-height: 100%;
    -webkit-text-size-adjust: 100%; /*  3 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*  4 */
    color: var(--colour-body);
}
  /* #region scrollbars */
:is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
:is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-top: 4px solid var(--colour-canvas-2);
    border-left: 4px solid var(--colour-canvas-2);
}
:is(div, form, fieldset, textarea, details, iam-menu)::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    width: 6px;
    border-top: 4px solid var(--colour-canvas-2);
    border-left: 4px solid var(--colour-canvas-2);
}
  /* #endregion */
body > footer,
  body > #app > footer {
    position: sticky;
    top: 100vh;
}
address {
    margin: 0;
}
button {
    font-size: inherit;
}
button:focus {
    border-radius: initial;
    outline: 2px auto -webkit-focus-ring-color;
}
[hidden] {
    display: none !important;
}
form {
    display: contents;
}
input[type=search i]::-webkit-search-cancel-button {
    appearance: none;
}
[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}
img {
    max-width: 100%;
}
  /*  Details reset */
summary {
    list-style: none;
}
summary::-webkit-details-marker {
    display: none;
}
details summary {
    cursor: pointer;
}
details summary > * {
    display: inline;
}
details {
    width: 100%;
}
  /* #region Main grid setup */
body {
    --excess-space: calc((100% - var(--max-width)) / 2);
    --col-size: calc(
      (
          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter) - var(--gutter) - (var(--gap) * (11))
        ) / 12
    );
    column-gap: var(--gap);
    display: grid;
    margin-inline: 0;
    width: 100svw;
    grid-template-rows: auto;
    align-content: start;
    justify-content: center;
    grid-template-columns: [full-width-start container-start] calc(var(--gutter) - var(--gap)) [content-start col-1-start] var(--col-size) [col-1-end col-2-start] var(--col-size) [col-2-end col-3-start] var(--col-size) [col-3-end col-4-start] var(--col-size) [col-4-end col-5-start] var(--col-size) [col-5-end col-6-start] var(--col-size) [col-6-end col-7-start] var(--col-size) [col-7-end col-8-start] var(--col-size) [col-8-end col-9-start] var(--col-size) [col-9-end col-10-start] var(--col-size) [col-10-end col-11-start] var(--col-size) [col-11-end col-12-start]  var(--col-size) [col-12-end content-end] calc(var(--gutter) - var(--gap)) [container-end full-width-end];
}
@media screen and (min-width: 90em) {
body {
      grid-template-columns: [full-width-start] calc(var(--excess-space) - var(--gap)) [container-start] calc(var(--gutter) - var(--gap)) [content-start col-1-start] var(--col-size) [col-1-end col-2-start] var(--col-size) [col-2-end col-3-start] var(--col-size) [col-3-end col-4-start] var(--col-size) [col-4-end col-5-start] var(--col-size) [col-5-end col-6-start] var(--col-size) [col-6-end col-7-start] var(--col-size) [col-7-end col-8-start] var(--col-size) [col-8-end col-9-start] var(--col-size) [col-9-end col-10-start] var(--col-size) [col-10-end col-11-start] var(--col-size) [col-11-end col-12-start]  var(--col-size) [col-12-end content-end] calc(var(--gutter) - var(--gap)) [container-end] calc(var(--excess-space) - var(--gap)) [full-width-end];
}
}
body * {
    grid-column: content;
}
body *:where(button):not(:has(.card)) {
    max-width: fit-content;
    place-self: start;
}
body *:is(div) {
    align-content: start;
}
div:has(main) {
    display: contents !important;
}
:is(nav, main, footer) {
    display: grid;
    grid-column: full-width !important;
    grid-template-columns: subgrid;
}
nav {
    anchor-name: --nav;
}
*:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
    padding-bottom: 1rem;
}
main > :is(.full-width, [class*=bg-]:has(.container), iam-header, iam-collapsible-side, iam-notification) {
    grid-column: full-width !important;
}
[class*=bg-]:not([class*=col-]):has(.container) {
    display: grid;
    grid-column: full-width;
    grid-template-columns: subgrid;
}
  /* #endregion */
}
#app {
  display: contents;
}
/* #region Nav tweaks for standalone pages */
nav:has(iam-std-nav-standalone) {
  min-height: 8rem !important;
}
nav:has(iam-std-nav-standalone) iam-nav {
  top: 2rem !important;
}
/* #endregion */
@layer debug {
.debug .row {
    outline: 2px solid red;
}
}
/*  Elements */
@layer elements {
:is(.brand, .logo) {
    --svg-width: 2.923076923076923em; /* 380/130 */
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding-right: 1rem;
    padding-bottom: 1rem;
    min-width: 100%;
    min-width: min(100%, var(--svg-width));
    font-size: 4rem;
    color: var(--colour-brand);
    /* Restrict the logo colours so that only text-secondary can be defined */
&[class*=text-]:not(.text-secondary) {
      color: inherit !important;
}
svg {
      fill: currentColor;
      height: 1em;
      width: 100%;
      max-width: var(--svg-width);
}
& span {
      white-space: nowrap;
      font-size: 1rem;
      padding-left: 1rem;
      line-height: 1;
      font-weight: bold;
      display: inline-block;
      text-decoration: none;
}
}
.brand--sold {
    --svg-width: 1.9em; /* 247/130 */
}
.brand--key {
    --svg-width: 1.753846153846154em; /* 228/130 */
}
:is(.brand--compliance, .brand--movebutler) {
    --svg-width: 5.692307692307692em; /* 740/130 */
}
.brand--medwaylaw {
    --svg-width: 3.576923076923077em; /* 465/130*/
}
.brand--openview {
    --svg-width: 5.337078651685393em; /* 475/89 */
}
.brand--crm {
    --svg-width: 2.808988764044944em; /* 250/89 */
}
.brand--one {
    --svg-width: 1.576923076923077em; /* 205/89 */
}
a.brand:not(:hover, :focus, :active) {
    color: var(--colour-brand);
}
a:not(:hover, :focus, :active) .brand {
    color: var(--colour-brand);
}
:is(a.brand:hover, a.brand:focus, a.brand:active) {
    color: currentColor !important;
}
:is(a:hover, a:focus, a:active) .brand {
    color: currentColor !important;
}
}
@layer elements {
.icon {
    font-size: 1rem;
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
    font-style: normal;
&:before {
      content: var(--fa);
}
}
.icon--xs {
    font-size: 1rem;
}
.icon--sm {
    font-size: 1.125rem; /* 18/16 */
}
.icon--compact {
    font-size: 1.25rem;
}
.icon--md {
    font-size: 1.75rem; /* 28/16 */
}
.icon--lg {
    font-size: 2.5rem;
}
[class*=fa-]:not(.fa-regular, .fa-light, .fa-solid, .btn) {
    font-weight: 400;
}
.icon[class*=fa-][class*=bg-] {
    aspect-ratio: 1/1;
    width: calc(1lh + 0.5em);
    min-width: calc(1lh + 0.5em);
    max-width: calc(1lh + 0.5em);
    text-align: center;
    padding: 0.25em;
    border-radius: 50% !important;
    display: inline-block;
}
.icon[class*=fa-][class*=colour-] {
    color: var(--colour, inherit);
}
  /* #endregion fixes */
.icon.fa-star:before {
    font-size: 0.9em;
    margin-left: -0.05em;
}
  /* #endregion icons */
}
@layer elements {
figure {
    margin: 0 0 1rem;
}
img,
  svg {
    vertical-align: middle;
}
img {
    max-width: 100%;
}
.ratio {
& > img:first-child:last-child {
      object-fit: cover;
}
}
}
@layer elements {
  /* #region Headings */
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .display-1, .display-2, .display-3, .display-4) {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: bold;
    color: var(--colour-heading);
    clear: both;
    display: block;
& [class*=fa-] {
      margin-right: 0.5rem;
}
}
:is(.h1, h1) {
    font-size: var(--h1-fs);
    line-height: var(--h1-lh);
    padding-bottom: var(--h1-pb);
    font-weight: 900;
}
:is(h2, .h2) {
    font-size: var(--h2-fs);
    line-height: var(--h2-lh);
    padding-bottom: var(--h2-pb);
    font-weight: 900;
}
:is(h3, .h3) {
    font-size: var(--h3-fs);
    line-height: var(--h3-lh);
    padding-bottom: var(--h3-pb);
    max-width: var(--content-max-width);
}
:is(h4, h5, h6) {
    font-size: var(--h4-fs);
    line-height: var(--h4-lh);
    padding-bottom: var(--h4-pb);
    max-width: var(--content-max-width);
}
.h1 {
    font-size: var(--h1-fs);
    line-height: var(--h1-lh);
    padding-bottom: var(--h1-pb);
    font-weight: 900;
}
.h2 {
    font-size: var(--h2-fs);
    line-height: var(--h2-lh);
    padding-bottom: var(--h2-pb);
    font-weight: 900;
}
.h3 {
    font-size: var(--h3-fs);
    line-height: var(--h3-lh);
    padding-bottom: var(--h3-pb);
    max-width: var(--content-max-width);
}
:is(.h4, .h5, .h6) {
    font-size: var(--h4-fs);
    line-height: var(--h4-lh);
    padding-bottom: var(--h4-pb);
    max-width: var(--content-max-width);
}
  /* #endregion */
p {
    margin-top: 0;
    font-size: var(--body-fs);
    line-height: 1.5rem;
    padding-bottom: 3rem;
    max-width: var(--content-max-width);
    margin-bottom: 0;
}
p:has(+ p) {
    padding-bottom: 1.5rem;
}
  /* #region CMS support */
p:empty {
    display: none;
}
p:has(a:first-child:last-child) {
    /* display: contents; */
}
  /* #endregion */
:is(.lead, .strapline) {
    font-size: 1.125rem; /* 18/16 */
    line-height: 1.75rem; /* 28/16 */
    padding-bottom: 3rem;
    max-width: var(--content-max-width);
    font-weight: 700;
}
small,
  .small {
    font-size: 0.875rem; /* 14/16 */
    line-height: 1.5rem;
    padding-bottom: 2rem;
    max-width: var(--content-max-width);
    font-weight: normal;
}
.x-small {
    font-size: 0.625rem; /* 10/16 */
    line-height: 1.5rem;
    padding-bottom: 1rem;
    max-width: var(--content-max-width);
    font-weight: normal;
}
sub,
  sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    text-decoration-skip-ink: none;
}
strong {
    font-weight: bolder;
    font-family: var(--font-heading);
    color: var(--colour-heading);
}
address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}
blockquote {
    margin: 0;
    quotes: "“" "”" "‘" "’";
    padding-bottom: 3rem;
    overflow: hidden;
& p {
      font-size: 1.5rem;
      line-height: 2rem;
      padding-bottom: 0;
}
& p:first-child:before {
      content: open-quote;
}
& p:last-of-type:after {
      content: close-quote;
}
& cite {
      font-size: 1.125rem; /* 18/16 */
      line-height: 2rem;
      padding-bottom: 0;
      font-weight: bold;
      font-style: normal;
}
}
mark {
    padding: 0.1875em;
    background-color: yellow;
}
.stat {
    font-size: 4rem;
    line-height: 4.5rem; /* 72/16 */
    font-weight: bold;
    color: var(--colour-heading);
    display: block;
    text-decoration: underline;
    text-underline-offset: 0.75rem;
    text-decoration-color: var(--colour-secondary);
    text-decoration-thickness: 0.25rem;
    margin-bottom: 4rem;
}
}
@layer elements {
hr {
    --border-style: solid;
    --border-color: var(--colour-border);
    border: 0;
    color: transparent;
    margin: 0;
    border-bottom: none;
    background-color: currentColor;
    opacity: 1;
    clear: both;
&:after {
      display: table;
      clear: both;
      content: "";
}
}
hr[class*=border-] {
    border: none;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}
.hr--vertical {
    height: calc(100% + 0.5rem);
    margin-left: 0.5rem;
    margin-right: 1rem;
    display: inline-block;
    vertical-align: top;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
    background-color: var(--colour-muted);
    width: 1px;
}
.btn-action + .hr--vertical {
    height: 2.5rem;
}
}
@layer elements {
:is(ol, ul) {
    padding-left: 2rem;
}
:is(ol, ul, dl) {
    margin-top: 0;
    margin-bottom: 1rem;
}
:is(ol, ul) :is(ol, ul) {
    margin-bottom: 0;
}
li {
    max-width: var(--content-max-width);
}
dt {
    font-weight: bold;
}
dd {
    margin-bottom: 0.5rem;
    margin-left: 0;
}
  /* #region basic list modifiers */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.list-inline {
    padding-left: 0;
    list-style: none;
}
.list-inline-item {
    display: inline-block;
}
.list-inline-item:not(:last-child) {
    margin-right: 0.5rem;
}
.orderable-list {
    margin-left: 3.5rem;
    counter-reset: countItem;
    padding-left: 0;
}
.orderable-list li {
    position: relative;
    list-style: none;
    --spread: 0.75rem;
    box-shadow: 0 2px var(--spread) 0 rgba(154, 154, 154, 0.25);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    cursor: grab;
}
.orderable-list li:before {
    content: "";
    --gradient-direction: 180deg;
    background-color: var(--colour-info);
    background-image: linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%) !important;
    height: 100%;
    width: 2.5rem;
    display: inline-block;
    position: absolute;
    top: 0;
    right: calc(100% + 1rem);
    border-radius: 0.5rem;
}
.orderable-list li:after {
    counter-increment: countItem; /* Increment the value of section counter by 1 */
    content: counter(countItem);
    height: 2rem;
    width: 2.5rem;
    line-height: 2rem;
    font-size: 1.25rem;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    top: calc(50% - 1rem);
    right: calc(100% + 1rem);
    text-align: center;
}
  /* #endregion */
}
@layer elements {
  /* region tick list*/
.tick-list {
    padding-left: 0;
}
.tick-list li {
    --fa-family: var(--fa-family-duotone);
    position: relative;
    list-style: none;
    padding-bottom: 1rem;
    padding-left: 1.5em;
}
.tick-list li:before {
    content: var(--fa, "\f058");
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    font-size: 1em;
    /* color: var(--tick-colour, var(--colour-complete)); */
    font-family: var(--fa-family, "Font Awesome 7 Pro");
    font-weight: var(--icon-weight, 900);
    color: var(--colour-white);
}
.tick-list li:after {
    content: var(--fa, "\f058");
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    font-size: 1em;
    color: var(--tick-colour, var(--colour-success));
    font-family: var(--fa-family, "Font Awesome 7 Pro");
    font-weight: var(--icon-weight, 900);
    font-feature-settings: "ss01";
}
.tick-list .tick--warning {
    --fa: '\f071';
    --tick-colour: var(--colour-warning);
}
.tick-list .tick--danger {
    --fa: '\f06a';
    --tick-colour: var(--colour-danger);
}
.tick-list .tick--question {
    --fa: '\f059';
    --tick-colour: var(--colour-info);
}
.tick-list .tick--incomplete {
    --tick-colour: var(--colour-border);
}
.tick-list .tick--loading:before {
    font-family: var(--fa-family-classic);
    content: "\f3f4";
    font-weight: var(--icon-weight, 900);
    color: var(--colour-heading);
    animation: spin 1.5s infinite steps(10);
    font-size: 1em;
}
.tick-list .tick--loading:after {
    display: none;
}
.tick-list li[class*=bg-] {
    padding: 1rem;
    padding-left: 4rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    z-index: 0;
}
.tick-list li[class*=bg-]:is(:before, :after) {
    top: 50%;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
}
.tick-list li[class*=bg-]:after {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: white;
    border-radius: 50%;
    transform-origin: 50% 50%;
    transform: scale(0.9);
}
.bg-primary .tick-list {
    --icon-weight: 900;
}
  /* #endregion */
}
@layer elements {
:is(.breadcrumb, .breadcrumbs) {
    font-size: 0.875rem; /* 14/16 */
    padding-left: 0;
    list-style: none;
}
:is(.breadcrumb, .breadcrumbs) li {
    display: inline-block;
}
:is(.breadcrumb, .breadcrumbs) li:not(:first-child):before {
    content: " / ";
    font-weight: bold;
    color: var(--colour-link);
}
:is(.breadcrumb, .breadcrumbs) li a {
    text-decoration: none;
    text-transform: uppercase;
}
}
@layer elements {
*:has(> .list--steps) {
    container-type: inline-size;
}
:is(.list--steps, .list--steps-vertical) {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0 0 0.375rem 0;
    gap: 0.75rem;
    counter-reset: pages;
    color: var(--colour-heading);
    position: relative;
    margin-bottom: 0.375rem;
    text-align: center;
& li {
      position: relative;
      display: block;
      padding-top: 2rem;
      width: 1.5rem;
      flex-grow: 0;
      flex-shrink: 1;
      overflow: hidden;
      text-indent: -300px;
&:before {
        counter-increment: pages;
        content: counter(pages);
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -0.75rem;
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.125rem; /* 18/16 */
        line-height: 1.5rem;
        text-align: center;
        font-weight: bold;
        border: 1px solid currentColor;
        border-radius: 1rem;
        text-indent: 0;
}
}
li.step--current:before {
      background-color: var(--colour-primary-theme);
      border-color: var(--colour-primary-theme);
      color: var(--colour-white);
}
li.step--complete:before {
      background-color: light-dark(var(--colour-success), var(--colour-complete));
      border-color: light-dark(var(--colour-success), var(--colour-complete));
}
&::after {
      content: attr(data-mobile-text);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      display: block;
      height: 1.5rem;
      line-height: 1.5rem;
      font-weight: bold;
}
}
@media screen and (min-width: 36em) {
:is(.list--steps, .list--steps-vertical) {
      padding: 0;
      margin-bottom: 1.5rem;
&::after {
        display: none;
}
li {
        width: 100%;
        flex-grow: 1;
        text-indent: 0;
        overflow: visible;
&:not(:last-child):after {
          content: "";
          position: absolute;
          top: 0.75rem;
          left: calc(50% + 2rem);
          width: calc(100% - 2.5rem);
          height: 2px;
          font-size: 1.125rem; /* 18/16 */
          background-color: var(--colour-heading);
}
}
}
}
@media screen and (min-width: 62em) {
:is(.list--steps, .list--steps-vertical) {
li {
        max-width: 20%;
}
}
}
.list--steps-vertical {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 0 2rem;
    gap: 2.5rem;
    text-align: left;
li {
      padding-top: 0;
      padding-left: 2rem;
      width: 100%;
      text-indent: 0;
      overflow: visible;
      margin-bottom: 1.125rem; /* 18/16 */
      margin-top: 0.5rem;
      display: flex;
      align-items: center;
      min-height: 1.5rem;
&:before {
        top: 50%;
        left: 0;
        margin-left: 0;
        margin-top: -0.75rem;
        flex-shrink: 0;
}
&:not(:last-child):after {
        left: 0.6875rem; /* 11/16 */
        top: 2.25rem; /* 36/16 */
        width: 2px;
        height: calc(100% + 1rem);
}
}
}
@media screen and (min-width: 36em) {
.list--steps-vertical {
      padding-left: 2.5rem;
li {
        padding-left: 2.25rem; /* 36/16 */
&:not(:last-child):after {
          left: 0.75rem;
          top: 2.25rem; /* 36/16 */
          width: 2px;
          height: calc(100% + 1rem);
}
}
}
}
@media screen and (min-width: 62em) {
.list--steps-vertical {
li {
        max-width: none;
        margin-bottom: 1.25rem;
}
}
}
}
@layer elements {
abbr[title] {
    text-underline-offset: 0.2em;
}
.tooltip {
    text-decoration: none;
    position: relative;
}
.tooltip:is(:hover, :focus, :active) {
    text-decoration: none;
}
.tooltip:after {
    font-family: var(--fa-family-classic);
    font-weight: 900;
    content: "\f059";
    display: inline-block;
    margin-left: 0.2em;
    margin-right: 0.1em;
    margin-bottom: 0.1em;
    color: var(--colour-primary);
}
.tooltip > span {
    opacity: 0;
    position: absolute;
}
.tooltip:is(:hover, .hover, :focus, :active) > span {
    opacity: 1;
    display: block;
    z-index: var(--index-floating);
    position: absolute;
    top: calc(100% + 0.5rem);
    left: auto;
    right: 0.85em;
    width: 16.875rem; /* 270 */
    transform: translate(50%, 0);
    background: var(--colour-primary);
    color: var(--colour-white);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
}
.tooltip:is(:hover, .hover, :focus, :active) > span > strong:first-child {
    display: block;
    padding-bottom: 1rem;
    color: inherit;
}
.tooltip:is(:hover, .hover, :focus, :active) > span::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -0.25rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent transparent var(--colour-primary) transparent;
    margin-bottom: -1px;
}
@media screen and (min-width: 36em) {
.tooltip:is(:hover, .hover, :focus, :active) > span {
      width: 20.9375rem; /* 335 */
}
}
@media screen and (min-width: 62em) {
.tooltip:is(:hover, .hover, :focus, :active) > span {
      width: 22.5rem; /* 360 */
}
}
.tooltip.tooltip--top span {
    top: auto;
    bottom: calc(100% + 0.5rem);
    left: auto;
    right: 0.85em;
}
.tooltip.tooltip--top span:after {
    top: 100%;
    bottom: auto;
    left: 50%;
    border-color: var(--colour-primary) transparent transparent transparent;
    margin-top: -1px;
}
.tooltip.shift--left span {
    transform: translate(calc(0% + 1.5rem), 0);
}
.tooltip.shift--left span:after {
    left: calc(100% - 1.5rem);
}
.tooltip.shift--right span {
    transform: translate(calc(100% - 1rem), 0);
}
.tooltip.shift--right span:after {
    left: 1rem;
}
@media screen and (min-width: 36em) {
.tooltip:is(.shift--left, .shift--right) span {
      transform: translate(50%, 0);
}
.tooltip:is(.shift--left, .shift--right) span:after {
      left: 50%;
}
.tooltip.tooltip--left span {
      top: 50%;
      bottom: auto;
      left: auto;
      right: 1.6em;
      transform: translate(0, -50%);
}
.tooltip.tooltip--left span:after {
      top: calc(50% - 0.5em);
      bottom: auto;
      left: calc(100% + 0.25em - 1px);
      border-color: transparent transparent transparent var(--colour-primary);
      margin-bottom: 0;
}
.tooltip.tooltip--right span {
      top: 50%;
      bottom: auto;
      left: calc(100% + 0.5rem);
      right: auto;
      transform: translate(0, -50%);
}
.tooltip.tooltip--right span:after {
      top: calc(50% - 0.5em);
      bottom: auto;
      left: auto;
      right: calc(100% - 1px);
      border-color: transparent var(--colour-primary) transparent transparent;
      margin-bottom: 0;
}
}
.tooltip__content {
    position: absolute;
    max-width: 16.875rem; /* 270 */
    background: var(--colour-primary);
    color: var(--colour-white);
    padding: 1.5rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
    margin: 0.75rem;
    overflow: visible;
}
.tooltip__content > strong:first-child {
    display: block;
    padding-bottom: 1rem;
    color: inherit;
}
@media screen and (min-width: 36em) {
.tooltip__content {
      max-width: 20.9375rem; /* 335 */
}
}
@media screen and (min-width: 62em) {
.tooltip__content {
      max-width: 22.5rem; /* 360 */
}
}
.tooltip__content::after {
    content: "";
    position: absolute;
    transform: translate(-50%, 0);
    border-width: 0.5rem;
    border-style: solid;
    left: 50%;
    bottom: auto;
    top: 100%;
    border-color: var(--colour-primary) transparent transparent transparent;
    margin-bottom: -1px;
}
label .tooltip__content {
    display: none;
    left: 50%;
    translate: -50% 0;
    width: 100%;
}
label:is(:hover, :focus-within) .tooltip__content {
    display: block;
    z-index: 2;
    bottom: 100%;
}
}
@layer elements {
  /* #region container */
.container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.container:not([class*=col-]) {
    grid-column: container !important;
    padding: var(--container-padding);
}
.container:not(:has(.row)):has([class*=col-]) {
    display: grid;
    grid-template-columns: [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end] !important;
    column-gap: 1rem;
}
.container:not(.container-fluid) {
    max-width: var(--container-max-width);
}
.container .container:not(.container-xs-breakout) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
}
.container[class*=bg-] {
    padding-top: 3rem;
    padding-bottom: 2rem;
}
.container[class*=bg-] + .container:not([class*=bg-]) {
    padding-top: 2rem;
}
.container {
    /* Fix the clearing for containers */
}
.container:before {
    display: table;
    clear: both;
    content: "";
}
.container:after {
    display: table;
    clear: both;
    content: "";
}
.container.container-xs-breakout {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    width: calc(100% + 2.5rem);
}
@media screen and (min-width: 36em) {
.container.container-xs-breakout {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
}
}
.container--inline-size {
    container-type: inline-size;
}
:host .container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: var(--container-padding);
    width: 100%;
}
  /* replicate container padding-bottom */
main > .row {
    padding-bottom: 1rem;
}
main > .row[class*=bg-] {
    padding-top: 3rem;
    padding-bottom: 2rem;
}
main > .row[class*=bg-] + :is(.row, .container):not([class*=bg-]) {
    padding-top: 2rem;
}
  /* #endregion */
}
@layer utilities {
.container [class*=col-span-]:not([class*=-col-span-]):not(:first-child) {
    --col-start: auto;
}
@media screen and (min-width: 36em) {
.container [class*=sm-col-span-]:not(:first-child) {
      --col-start: auto!important;
}
}
@media screen and (min-width: 62em) {
.container [class*=md-col-span-]:not(:first-child) {
      --col-start: auto!important;
}
}
}
@layer elements {
  /* #region reset */
table {
    caption-side: bottom;
    border-collapse: collapse;
}
caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: gray;
    text-align: left;
}
  /*  1. Removes font-weight bold by inheriting */
  /*  2. Matches default `<td>` alignment by inheriting `text-align`. */
  /*  3. Fix alignment for Safari */
th {
    font-weight: normal; /*  1 */
    text-align: inherit; /*  2 */
    text-align: -webkit-match-parent; /*  3 */
}
thead,
  tbody,
  tfoot,
  tr,
  td,
  th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}
  /* #endregion */
  /* #region Default table */
table {
    --border-width: 2px;
    --inner-border-width: 2px;
    width: 100%;
    font-size: 1rem;
    border: none;
    margin-bottom: 2rem;
    overflow: auto;
}
div:has(> table:first-child:last-child) {
    overflow: auto;
    margin-bottom: 2rem;
}
div:has(> table:first-child:last-child) table {
    margin-bottom: 0;
}
:is(td, th) {
    padding: 0.75rem 2rem 0.75rem 0;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
    border: none;
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--colour-body);
}
:is(td, th):last-child {
    padding-right: 0;
}
:is(td, th) p {
    font-size: inherit;
    padding: 0;
}
:is(td, th).th--sm {
    width: 1px;
}
th {
    font-weight: bold;
    color: var(--colour-heading);
}
thead tr {
    border-bottom: var(--border-width) solid currentColor;
    border-color: var(--colour-primary);
}
thead th {
    padding-top: 0;
    vertical-align: bottom;
}
  /*  Error messages */
tr td[colspan="100%"]:first-child:last-child span {
    max-width: 39rem;
    font-weight: bold;
    padding: 3rem;
    text-align: center;
    display: block;
    color: var(--colour-heading);
}
@media screen and (min-width: 62em) {
tr td[colspan="100%"]:first-child:last-child span {
      max-width: 65.5rem;
}
}
@container (width >= 60em) {
thead th:not(:empty) {
      white-space: nowrap;
      min-width: 7.5rem;
}
thead th.th--mw-md {
      min-width: 15rem; /* 240 */
}
thead th.th--mw-lg {
      min-width: 22.5rem; /* 360 */
}
}
tbody tr {
    border-bottom: var(--border-width) solid currentColor;
    border-color: var(--colour-border);
}
.border-0 > table,
  table.border-0 {
    --border-width: 0px;
    --inner-border-width: 0px;
}
  /* #endregion */
}
@layer elements {
  /* #region global */
a {
    color: var(--colour-link);
    text-decoration: underline;
}
a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}
a:is(:hover, :focus, .hover, :focus-within) {
    color: var(--colour-hover);
}
a:is(:active, .active) {
    color: var(--colour-active);
}
a:is(:active, .active, .selected, [aria-current=page]) {
    --colour-underline: var(--colour-info);
    text-decoration-color: var(--colour-info) !important;
}
a:is(.selected, [aria-current=page]) {
    pointer-events: none;
}
a:not([href]):not([class]),
  a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}
  /* #endregion */
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
  .link {
    background-color: transparent;
    text-decoration: none;
    display: inline-block;
    border: none;
    color: var(--colour-link);
    margin: 0 1.5rem 1.5rem 0;
    padding: 0;
    font-size: 1.125rem; /* 18/16 */
    line-height: 1.5rem;
    min-height: 1.5rem;
    position: relative;
    font-weight: bold;
}
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))):last-child,
  .link:last-child {
    margin-right: 0;
}
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))):not(.text-decoration-none):after,
  .link:not(.text-decoration-none):after {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    height: 2px;
    width: 100%;
    transform: translate(-50%, 0);
    background: var(--colour-underline);
    transition: width 0.5s;
}
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))):not(.text-decoration-none).text-underline-plain:after,
  .link:not(.text-decoration-none).text-underline-plain:after {
    background: currentColor;
}
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card)))[class*=fa-],
  .link[class*=fa-] {
    margin-left: 0;
    margin-right: 0.5rem;
}
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card)))[class*=fa-]:not(:first-child),
  .link[class*=fa-]:not(:first-child) {
    margin-left: 0.5rem;
    margin-right: 0;
}
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))):not([disabled]):is(:hover, :focus, .hover, :active, .active, :focus-within):after,
  .link:not([disabled]):is(:hover, :focus, .hover, :active, .active, :focus-within):after {
    width: 60%;
}
a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card)))[disabled],
  .link[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
:where(p, ul, ol, dd, .body) a:not(.btn):not(.link),
  table:not(.table--email) td a:not(.btn):not(.link) {
    min-height: none;
    display: inline;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    text-decoration-thickness: 0.125rem;
    font-size: inherit;
}
:where(p, ul, ol, dd, .body) a:not(.btn):not(.link):after,
  table:not(.table--email) td a:not(.btn):not(.link):after {
    display: none;
}
:where(p, ul, ol, dd, .body) a:not(.btn):not(.link) [class*=fa-],
  table:not(.table--email) td a:not(.btn):not(.link) [class*=fa-] {
    margin: 0;
    display: inline;
    --fa-display: inline;
}
:where(p, ul, ol, dd, .body) a:not(.btn):not(.link) [class*=fa-]:after,
  table:not(.table--email) td a:not(.btn):not(.link) [class*=fa-]:after {
    content: " ";
}
:where(p, ul, ol, dd, .body) a:not(.btn):not(.link):not([disabled]):is(:hover, :focus, .hover, :focus-within),
  table:not(.table--email) td a:not(.btn):not(.link):not([disabled]):is(:hover, :focus, .hover, :focus-within) {
    color: var(--colour-hover);
    text-decoration: none;
}
:where(p, ul, ol, dd, .body) a:not(.btn):not(.link):not([disabled]):is(:active, .active),
  table:not(.table--email) td a:not(.btn):not(.link):not([disabled]):is(:active, .active) {
    color: var(--colour-active);
    text-decoration: none;
    filter: brightness(85%);
}
  /* #region Support card component */
:is(a, button, label):has(.card, iam-card) {
    border: none;
    background: none;
    padding: 0;
    display: flex;
    margin-bottom: 1.5rem;
    text-decoration: none;
    border-radius: var(--card-border-radius) !important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-primary) {
    --hover-outline-colour: var(--colour-primary) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-secondary) {
    --hover-outline-colour: var(--colour-secondary) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-info) {
    --hover-outline-colour: var(--colour-info) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-warning) {
    --hover-outline-colour: var(--colour-warning) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-success) {
    --hover-outline-colour: var(--colour-success) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-complete) {
    --hover-outline-colour: var(--colour-complete) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-danger) {
    --hover-outline-colour: var(--colour-danger) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-dark) {
    --hover-outline-colour: var(--colour-dark) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):has(.colour-light) {
    --hover-outline-colour: var(--colour-light) !important;
    --card-icon-bg: var(--colour-warning)!important;
    --card-icon-colour: var(--colour-primary-theme)!important;
}
:is(a, button, label):has(.card, iam-card):not(:hover, :focus, .hover, :active, .active):not(:has(input)) {
    outline: none !important;
}
:is(a, button, label):has(.card, iam-card):is(:focus) {
    --card-icon-bg: var(--colour-primary-theme);
    --card-icon-colour: #ffffff;
    outline: 2px solid var(--hover-outline-colour);
}
:is(a, button, label):has(.card, iam-card):is(:focus) {
    --card-icon-bg: var(--colour-primary-theme);
    --card-icon-colour: #ffffff;
    outline: 2px solid var(--hover-outline-colour);
}
:is(a, button, label):has(.card, iam-card):is(:hover, :focus, .hover) {
    --card-icon-bg: var(--colour-primary-theme);
    --card-icon-colour: #ffffff;
    outline: 2px solid var(--hover-outline-colour);
}
:is(a, button, label):has(.card, iam-card):has(.card--article):is(:hover, :focus, .hover) {
    outline: none !important;
}
:is(a, button, label):has(.card, iam-card):is(:active, .active) {
    --card-icon-right: var(--card-icon-right-overide, 0.5rem);
}
:is(a, button, label):has(.card, iam-card):has(input) {
    cursor: pointer;
    outline: 1px solid var(--colour-border, red);
}
:is(a, button, label):has(.card, iam-card):has(input):is(:hover, :focus) {
    --card-bg: var(--colour-light);
}
:is(a, button, label):has(.card, iam-card):has(:checked) {
    --card-icon-bg: var(--colour-primary-theme);
    --card-icon-colour: #ffffff;
    outline: 2px solid var(--hover-outline-colour, red);
}
:is(a, button, label):has(.card, iam-card):before {
    display: none;
}
:is(a, button, label):has(.card, iam-card):not([class*=col]) {
    margin: 0 0 1.5rem 0;
}
:is(a, button, label):has(.card, iam-card):not(.d-inline-block):not([class*=col]) {
    width: 100%;
}
:is(a, button, label):has(.card, iam-card) iam-card {
    width: 100%;
    height: stretch;
}
iam-carousel.carousel--article-cards :is(a, button, label):is(:hover, .hover, :focus) iam-card,
  :is(a, button, label):is(:hover, .hover, :focus) iam-card.card--article,
  iam-card.article-card:has([slot=link]:hover),
  iam-carousel.carousel--article-cards iam-card:has([slot=link]:hover) {
    --card-head-overlay: linear-gradient(357.98deg, #1EBEE6 1.36%, rgba(17, 106, 128, 0) 97.97%);
}
  /* #endregion */
}
@layer elements {
:is(.video-link, .youtube-link, .vimeo-link) {
    --compact-size: 3rem;
    position: relative;
}
:is(.video-link, .youtube-link, .vimeo-link):before, :is(.video-link, .youtube-link, .vimeo-link):after {
    content: "\f04b";
    font-family: "Font Awesome 7 Pro" !important;
    display: block;
    position: absolute;
    text-indent: 0;
    line-height: calc(var(--compact-size) - 0.25rem);
    font-weight: 900;
    font-size: 1rem !important;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    --compact-size: 3rem;
    padding: 0 !important;
    margin-bottom: 0.5rem;
    text-align: center;
    width: var(--compact-size);
    min-width: var(--compact-size);
    max-width: var(--compact-size);
    height: var(--compact-size) !important;
    min-height: var(--compact-size) !important;
    max-height: var(--compact-size) !important;
    align-content: center;
    line-height: 1 !important;
    overflow: hidden;
}
:is(.video-link, .youtube-link, .vimeo-link):after {
    border-radius: 50% !important;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    background-color: var(--colour-success);
    border: 1px solid var(--colour-success);
}
:is(.video-link, .youtube-link, .vimeo-link):is(:hover, :focus):not(:active):after {
    background-color: var(--colour-white);
    border-color: var(--colour-white);
}
:is(.video-link, .youtube-link, .vimeo-link):is(:active):after {
    filter: brightness(85%);
}
}
@layer elements {
  /* #region Sidebar link styling including parent group styling */
iam-collapsible-side > * {
    padding-left: 1.5rem;
}
@media screen and (min-width: 36em) {
iam-collapsible-side > * {
      padding-left: 2.5rem;
}
}
@media screen and (min-width: 62em) {
iam-collapsible-side > * {
      padding-left: var(--container-padding-x);
}
}
iam-collapsible-side hr {
    border-bottom: 2px solid var(--colour-border) !important;
    margin-right: -2.5rem !important;
}
.vertical-tabs [class*=link],
  iam-collapsible-side [class*=link] {
    display: block !important;
    line-height: 1.25rem !important;
    padding: 1rem 1.5rem 1rem 1.5rem !important;
    margin: 0 !important;
    flex-shrink: 0;
    font-size: 1rem !important;
    font-weight: normal !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--colour-border) !important;
    border-right: 2px solid var(--colour-border) !important;
    margin-right: -2.5rem !important;
    z-index: 2;
}
.vertical-tabs [class*=link]::after,
  iam-collapsible-side [class*=link]::after {
    display: none !important;
}
.vertical-tabs [class*=link] i,
  iam-collapsible-side [class*=link] i {
    /*  icon */
    margin-right: 0.5rem !important;
}
@media screen and (min-width: 36em) {
.vertical-tabs [class*=link],
    iam-collapsible-side [class*=link] {
      padding-left: 1.5rem !important;
}
}
@media screen and (min-width: 62em) {
.vertical-tabs [class*=link],
    iam-collapsible-side [class*=link] {
      padding-left: var(--container-padding-x) !important;
}
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a[aria-expanded],
  iam-collapsible-side a:hover,
  iam-collapsible-side a:focus,
  iam-collapsible-side a[aria-expanded] {
    background-color: var(--colour-activeLink) !important;
}
.vertical-tabs [class*=active],
  iam-collapsible-side [class*=active] {
    background-color: var(--colour-activeLink) !important;
    border-right-color: var(--colour-activeLinkBorder) !important;
    border-right-width: 3px !important;
}
  /*  Parent links */
.vertical-tabs .parent,
  iam-collapsible-side .parent {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
.vertical-tabs .parent li:first-of-type,
  iam-collapsible-side .parent li:first-of-type {
    cursor: pointer;
}
.vertical-tabs .parent li:first-of-type a,
  iam-collapsible-side .parent li:first-of-type a {
    padding-right: 2.5rem !important;
}
.vertical-tabs .parent li:first-of-type a::before,
  iam-collapsible-side .parent li:first-of-type a::before {
    position: absolute;
    display: block;
    content: "\f055";
    font-family: var(--fa-family-classic);
    right: 20px;
    font-weight: 300;
}
.vertical-tabs .parent li:not(:first-of-type),
  iam-collapsible-side .parent li:not(:first-of-type) {
    display: none;
}
.vertical-tabs .parent li:not(:first-of-type) a,
  iam-collapsible-side .parent li:not(:first-of-type) a {
    background-color: var(--colour-light) !important;
    padding-left: 5.625rem !important;
}
.vertical-tabs .parent.reveal li:first-of-type a::before,
  iam-collapsible-side .parent.reveal li:first-of-type a::before {
    content: "\f056";
    font-weight: bold;
}
.vertical-tabs .parent.reveal li:not(:first-of-type),
  iam-collapsible-side .parent.reveal li:not(:first-of-type) {
    display: block;
}
@media screen and (min-width: 36em) {
.vertical-tabs .parent li:not(:first-of-type) a,
    iam-collapsible-side .parent li:not(:first-of-type) a {
      padding-left: 5.625rem !important;
}
}
  /* #endregion */
}
@layer elements {
  /* #region reset */
button {
    border-radius: 0;
    text-transform: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
:is(button, [type=button], [type=reset], [type=submit], [role=button]) {
    -webkit-appearance: button;
&:not(:disabled) {
      cursor: pointer;
}
}
  /* #endregion */
  /* #region button primary */
.btn {
    --btn-margin: 1rem;
    --btn-padding-block: 0.75rem;
    --btn-padding-inline: 2.5rem;
    --btn-border-width: 2px;
    --btn-font-size: 1.125rem; /* 18/16 */
    --btn-line-height: 1.25rem;
    display: inline-block;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    color: var(--colour-btn);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    border-radius: 1.5rem;
    margin-bottom: var(--btn-margin);
    background: none;
    transition: border 0.5s, background 0.5s, color 0.5s;
    height: auto;
    width: fit-content;
    max-width: 100%;
    appearance: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
&:not(.btn-secondary)[class*=colour-] {
      --colour-btn-bg: var(--colour);
      --colour-btn-border: var(--colour);
}
&:is(.colour-primary, .colour-dark, .colour-danger, .colour-black) {
      --colour-btn: #fcfcfc;
}
&:not(.border-0) {
      background: var(--colour-btn-bg);
      border: none !important;
      outline: var(--btn-border-width) solid var(--colour-btn-border);
      outline-offset: -2px;
}
&:not(:last-child) {
      margin-right: var(--btn-margin);
}
}
@media screen and (min-width: 36em) {
.btn {
      --btn-margin: 1.5rem;
}
}
a:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) .btn,
  .btn:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
    text-decoration: none;
    background: var(--colour-btn-bg-hover);
    color: var(--colour-btn-hover);
    border-radius: 1.5rem;
}
a:is(:active, .active):not([disabled]) .btn,
  .btn:is(:active, .active):not([disabled]) {
    filter: brightness(85%);
    transition: background 0.1s, color 0.1s;
    color: var(--colour-btn);
    border-radius: 1.5rem;
}
a:disabled .btn,
  .btn:disabled,
  [disabled] .btn,
  .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
  /* #endregion */
  /* #region btn with colour success */
.btn.btn-complete {
    --colour: var(--colour-success);
    --colour-btn-bg-hover: var(--colour);
    --colour-btn-border-hover: var(--colour);
    --colour-btn-hover: var(--colour-primary-theme);
    --colour-btn-bg: var(--colour);
    --colour-btn-border: var(--colour);
    position: relative;
    padding-left: 3.5rem; /*56 */
    padding-right: 3.5rem; /*56 */
}
a:is(:hover, :focus, .hover):not([disabled], :active, .active) .btn.btn-complete,
  .btn.btn-complete:is(:hover, :focus, .hover):not([disabled], :active, .active) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
&:before {
      content: "\f00c";
      font-family: var(--fa-family-classic);
      margin-right: 1rem;
      font-style: inherit;
      width: 1rem;
      display: inline-block;
      height: var(--btn-line-height);
      vertical-align: bottom;
}
}
  /* #endregion */
  /* #region button small and tag */
.btn.btn-sm {
    --btn-padding-block: 0.5rem;
    --btn-padding-inline: 2rem;
    --btn-margin: 0.5rem;
    --btn-font-size: 1rem;
}
  /* #endregion */
  /* #region button with icon */
.btn {
&[class*=fa-]:before {
      content: var(--fa);
      font-family: var(--fa-family-classic);
}
&[class*=fa-after] {
      padding-right: 4rem;
}
&[class*=fa-after]:before {
      margin-right: 0;
      margin-right: 0.375rem; /* 6 */
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translate(0, -50%);
}
&:not(.btn-compact):before {
      margin-right: 1rem;
}
i[class*=fa-] {
      --fa-width: 1em;
      font-family: var(--fa-family-classic);
      margin-right: 1rem;
      line-height: 1em;
      font-style: inherit;
&:not(:first-child) {
        margin-left: 1rem;
        margin-right: 0;
}
}
}
  /* #endregion */
  /* #region button with prompt */
.btn.btn--prompt {
&:after {
      content: "";
      height: var(--btn-line-height);
      width: 1rem;
      display: inline-block;
      background: currentColor;
      mask-image: var(--icon-arrow);
      mask-size: 100%;
      mask-repeat: no-repeat;
      mask-position: 50% 50%;
      -webkit-mask-image: var(--icon-arrow);
      -webkit-mask-size: 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: 50% 50%;
      vertical-align: bottom;
      margin-left: 1rem;
}
}
a:is(:hover, :focus, .hover):not([disabled], :active, .active) .btn.btn--prompt,
  .btn.btn--prompt:is(:hover, :focus, .hover):not([disabled], :active, .active) {
&:after {
      margin-left: 1.5rem;
      margin-right: -0.5rem;
}
}
  /* #endregion */
  /* #region button that opens up a filter dialog */
.btn-filter {
&:after {
      content: "\f1de";
      display: inline-block;
      margin-left: 1em;
      margin-bottom: -0.15em;
      height: 1em;
      width: 1em;
      z-index: var(--index-focus);
      color: currentColor;
      font-weight: 300;
      font-family: var(--fa-family-classic);
}
}
  /* #endregion */
}
@layer elements {
  /* #region secondary button */
.btn-secondary {
    color: var(--colour-btn-secondary);
&:not(.border-0) {
      background: var(--colour-btn-secondary-bg);
      outline: 2px solid var(--colour-btn-secondary-border);
}
}
a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
  .btn-secondary:is(:hover, :focus, .hover, :focus-within, :active, .active):not([disabled]) {
    background: var(--colour-btn-secondary-bg-hover);
    color: var(--colour-btn-secondary-hover);
}
  /* #endregion */
}
@layer elements {
  /* #region Tertiary Button */
.btn.btn-tertiary {
    background-color: transparent;
    outline: none;
    color: var(--colour-link);
    margin: 0 var(--btn-margin) var(--btn-margin) 0;
    padding: 0;
    font-size: 1.125rem; /* 18/16 */
    font-weight: normal;
    line-height: 1.5rem;
    min-height: 1.5rem;
    position: relative;
&:after {
      position: absolute;
      content: "";
      top: 100%;
      left: 50%;
      height: 2px;
      width: 100%;
      transform: translate(-50%, 0);
      background: var(--colour-underline);
      transition: width 0.5s;
}
&.text-decoration-none:after {
      width: 0%;
}
&[class*=fa-] {
      margin-left: 0;
      margin-right: 0.5rem;
}
&[class*=fa-]:not(:first-child) {
      margin-left: 0.5rem;
      margin-right: 0;
}
&:is(:hover, :focus, .hover, :focus-within):not([disabled], :disabled, :active, .active) {
&:after {
        width: 60% !important;
}
}
&:is(:active, .active):not([disabled], :disabled) {
      color: var(--colour-active);
}
}
  /* #endregion */
}
@layer elements {
  /* #region Action button */
.btn-action {
    --btn-border-width: 1px;
    --btn-padding-block: 0.3125rem /* 5px */;
    --btn-padding-inline: 0.3125rem /* 5px */;
    --btn-margin: 0.5rem;
    border-radius: 0.25rem !important;
    font-weight: 400 !important;
    font-size: 1rem;
    line-height: 1.25rem;
&:not(.btn-primary) {
      color: var(--colour-heading);
}
&:not(.btn-primary):not(.border-0) {
      background-color: var(--colour-canvas-2);
      outline: var(--btn-border-width) solid var(--colour-muted);
}
&.btn[class*=fa-]:before {
      content: var(--fa);
      margin-right: 0.375rem; /* 6 */
}
&.icon-only {
      position: relative;
      text-indent: -300vw;
      overflow: hidden;
      min-width: 1.75rem;
&:before {
        position: absolute;
        left: 0;
        top: 0;
        min-width: 1.75rem;
        text-align: center;
        text-indent: 0;
        padding-inline: 0.25rem;
        line-height: 1.85rem;
}
}
a:not(.btn-primary):is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
    &:not(.btn-primary):is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
      background: var(--colour-btn-action-hover-bg);
}
.btn-primary:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
    &.btn-primary:is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {
      filter: brightness(90%);
      background: var(--colour-btn-bg);
      border: var(--btn-border-width) solid var(--colour-btn-border);
      color: var(--colour-btn);
}
a:is(:active, .active):not([disabled]):not(.btn-primary) &,
    &:is(:active, .active):not([disabled]):not(.btn-primary) {
      filter: brightness(85%);
      transition: all 0.1s;
      color: var(--colour-heading);
}
}
  /* #endregion */
.btn-action:not(.btn-compact).fa-compact-only:before {
    display: none !important;
}
}
@layer elements {
.btn-compact {
    --compact-size: 3rem;
    padding: 0 !important;
    margin-bottom: 0.5rem;
    text-align: center;
    width: var(--compact-size);
    min-width: var(--compact-size);
    max-width: var(--compact-size);
    height: var(--compact-size) !important;
    min-height: var(--compact-size) !important;
    max-height: var(--compact-size) !important;
    align-content: center;
    line-height: 1 !important;
    text-indent: -500px;
    overflow: hidden;
    position: relative;
    font-size: 1rem;
&:not(:last-child) {
      margin-right: 0.5rem;
}
&:before {
      content: var(--fa);
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-indent: 0;
      line-height: var(--compact-size);
      font-weight: 900;
}
[class*=fa-]:before {
      line-height: var(--compact-size);
@container style(--theme: dark) {
        color: white;
}
}
&.btn-sm {
      --compact-size: 2.5rem;
      font-size: 1rem;
      padding: 0 !important;
}
&.btn-action {
      --compact-size: 2rem;
      font-size: 1rem;
&:before {
        font-size: 1em;
        font-weight: 400;
}
}
&.btn-secondary {
      --colour-btn-bg: transparent;
      --colour-btn-border: transparent;
&:not(:focus-visible) {
        outline: none !important;
}
&:not([class*=colour-]) {
        --colour: var(--colour-light);
}
}
&.btn-secondary:is(:hover, :focus, .hover, :active, .active, [aria-expanded], :focus-within):not([disabled]):not(.btn-collapse) {
      background-color: var(--colour);
      color: var(--colour-primary-theme);
      outline-color: var(--colour);
&:is(.colour-primary, .colour-dark, .colour-danger, .colour-black) {
        color: var(--colour-inverted);
}
}
&[data-number] {
      position: relative;
}
&[data-number]:after {
      content: attr(data-number);
      position: absolute;
      top: 0.5em;
      z-index: 99;
      background: var(--colour-danger);
      height: 1.5em;
      width: 1.5em;
      border-radius: 50%;
      text-indent: 0;
      left: 50%;
      font-size: 0.5em;
      line-height: 1.5em;
      text-align: center;
      color: white;
      letter-spacing: -0.1em;
      font-family: arial, sans-serif;
}
}
  /* #region Detect font awesome has been loaded and if not show the inner text */
.btn-compact {
&:is(.fa-left,
    .fa-chevron-left,
    .fa-right,
    .fa-chevron-right,
    .fa-up,
    .fa-chevron-up,
    .fa-down,
    .fa-chevron-down,
    .fa-plus,
    .fa-bars,
    .fa-edit,
    .fa-envelope,
    .fa-calendar) {
      --iso-display: block;
      --iso-font-size: 1.5rem;
      --iso-border-radius: 50%;
      --iso-text-indent: -500px;
}
}
@container style(--font-body) {
.btn-compact {
      font-size: var(--iso-font-size, 0.6rem) !important;
      text-indent: var(--iso-text-indent, 0px);
      white-space: initial;
&:not(.btn-action) {
        border-radius: var(--iso-border-radius, 0.25rem) !important;
}
&:before {
        display: var(--iso-display, none);
        font-family: monospace !important;
        content: var(--iso) !important;
}
}
}
@container style(--fa-font-regular) {
.btn-compact {
      text-indent: -500px;
      font-size: 1rem !important;
&:not(.btn-action) {
        border-radius: 50% !important;
}
&:before {
        font-family: "Font Awesome 7 Pro" !important;
        content: var(--fa) !important;
        display: block;
}
}
}
  /* #endregion */
}
@layer elements {
  /* #region btn compact */
.btn[popovertarget] {
    position: relative;
    anchor-name: --button2;
& > .fa-chevron-down {
      display: none;
}
&:not(:has(i)):not(.no-icon):after {
      content: "";
      display: inline-block;
      margin-right: 0.25em;
      margin-left: 1em;
      height: 0.8em;
      width: 0.8em;
      z-index: var(--index-focus);
      background: currentColor;
      mask-image: var(--icon-arrow);
      mask-size: 100%;
      mask-repeat: no-repeat;
      mask-position: 50% 50%;
      -webkit-mask-image: var(--icon-arrow);
      -webkit-mask-size: 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: 50% 50%;
      transform: rotate(90deg);
}
&[aria-pressed]:after {
      transform: rotate(270deg);
}
}
  /* #endregion */
  /* #region Select as button */
.btn:has(select) {
    position: relative;
    padding: 0;
    max-width: fit-content;
    min-width: fit-content;
    width: fit-content;
select {
      all: unset !important;
      padding: var(--btn-padding-block) var(--btn-padding-inline) !important;
      padding-right: calc(var(--btn-padding-inline) + 2rem) !important;
      border-radius: 1.5rem !important;
      appearance: none !important;
      background: none !important;
      border: none !important;
      color: currentColor !important;
      display: block;
      outline: none;
      font-weight: inherit !important;
      font-size: var(--btn-font-size) !important;
      line-height: var(--btn-line-height) !important;
      field-sizing: content !important;
      appearance: base-select !important;
}
&:after {
      position: absolute;
      top: 0.625rem; /* 10 */
      right: 1.5rem;
      content: "";
      height: 1.5rem;
      width: 1rem;
      display: inline-block;
      background: currentColor;
      mask-image: var(--icon-arrow);
      mask-size: 100%;
      mask-repeat: no-repeat;
      mask-position: 50% 50%;
      -webkit-mask-image: var(--icon-arrow);
      -webkit-mask-size: 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: 50% 50%;
      vertical-align: bottom;
      margin-left: 1rem;
      transform: rotate(90deg);
      pointer-events: none;
}
}
  /* #endregion */
  /* #region btn that is a select */
.btn-action:has(select) {
    padding-block: 0;
    padding-right: 2rem;
    font-size: 1em;
select {
      margin: 0rem 0rem !important;
      padding-right: 2rem !important;
      margin-right: -2rem !important;
      font-size: 1rem !important;
}
&:after {
      top: 0.2rem;
      right: 0.5rem;
}
}
  /* #endregion */
}
@layer elements {
.btn__group {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    reading-flow: source-order;
    margin-bottom: 1.5rem;
.btn-compact {
      max-width: fit-content;
      margin-inline: auto;
}
}
:where(.btn__group, iam-modal) {
    reading-flow: source-order;
.btn {
      margin-inline-end: 0;
      width: 100%;
      max-width: 100%;
      text-align: center;
      white-space: normal;
      margin: 0;
&:not(:last-child) {
        margin-right: 0;
}
}
.btn-tertiary {
      max-width: fit-content;
      margin-block: 0 !important;
      margin-inline: auto !important;
      order: 3;
      reading-order: 3;
}
.btn-secondary {
      order: 2;
      reading-order: 2;
}
.btn-primary {
      order: 1;
      reading-order: 1;
      margin: 0;
&:not(:last-child) {
        margin: 0;
}
}
}
:is(iam-form, form) .btn__group {
    padding-top: 1rem;
}
@container (min-width: 36em) {
.btn__group {
      flex-direction: row;
      row-gap: 0;
      gap: var(--gap);
      flex-wrap: wrap;
.btn-tertiary {
        max-width: fit-content;
        margin-inline: 0 !important;
        margin-block: auto;
        order: 1;
}
.btn-secondary {
        order: 2;
}
.btn-primary {
        order: 3;
}
.btn-compact {
        margin-inline: 0;
        margin-block: auto;
}
}
:where(iam-modal, .btn__group) {
.btn {
        max-width: fit-content;
        white-space: nowrap;
        margin-block: auto;
}
}
.btn__group {
.btn-tertiary {
        reading-order: 1;
}
.btn-secondary {
        reading-order: 2;
}
.btn-primary {
        reading-order: 3;
}
}
iam-modal {
.btn-tertiary {
        reading-order: 3;
        order: 1;
}
.btn-secondary {
        order: 2;
        reading-order: 2;
}
.btn-primary {
        order: 3;
        reading-order: 1;
}
}
.btn__group.text-end {
      justify-content: flex-end;
}
:is(iam-form, form) .btn__group {
      justify-content: flex-end;
      padding-top: 3rem;
}
iam-modal .btn__group:last-child .btn,
    dialog .btn__group:last-child .btn {
      margin-bottom: 0;
}
}
}
@layer elements {
  /*  non-js fallback */
body:not(.js-enabled) dialog:not([open]):target {
    display: block;
}
  /* #region Default styling of both modals */
dialog,
  [popover] {
    --dialog-padding: 0.5rem;
    --mh-padding-inline: var(--dialog-padding);
    color: inherit;
    width: fit-content;
    height: fit-content;
    border: none;
    overscroll-behavior: contain;
    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
    font-size: 1rem;
    background: var(--dropdown-bg);
    margin-block: var(--dropdown-margin-block);
    padding: var(--dialog-padding);
    border-radius: var(--dropdown-border-radius);
    box-shadow: var(--dropdown-box-shadow);
}
dialog > *:last-child,
  [popover] > *:last-child {
    margin-bottom: 0;
}
dialog > :is(p):last-child,
  [popover] > :is(p):last-child {
    padding-bottom: 0;
}
dialog[open]:has(iam-modal) {
    --modal-inner-dialog-display: contents;
    place-self: center;
}
@media (prefers-color-scheme: light) {
dialog[open]:has(iam-modal) {
      color-scheme: light;
      --colour-body: #595959;
      --colour-heading: var(--colour-primary-theme);
}
}
  /*  Size variants */
  /*  small */
@media screen and (min-width: 36em) {
*:not(.dialog__wrapper) > dialog[open]:has(.modal--sm) {
      min-width: 20.9375rem;
      width: 20.9375rem;
      max-width: 20.9375rem;
}
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog[open]:has(.modal--sm) {
      min-width: 28.375rem;
      width: 28.375rem;
      max-width: 28.375rem;
}
}
  /*  large */
@media screen and (min-width: 36em) {
*:not(.dialog__wrapper) > dialog[open]:has(.modal--lg) {
      min-width: 42.875rem;
      width: 42.875rem;
      max-width: 42.875rem;
}
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog[open]:has(.modal--lg) {
      min-width: 46rem;
      width: 46rem;
      max-width: 46rem;
}
}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    overscroll-behavior: contain;
}
dialog[open],
  [popover]:popover-open {
    display: flex;
    flex-direction: column;
}
  /*  TODO: when the old modals are depreciated this selector can be simplified */
*:not(.dialog__wrapper) > dialog[open],
  *:not(.dialog__wrapper) > [popover]:popover-open {
    overflow-y: auto;
    width: 90vw;
    max-width: 20.25rem; /*  col-width*4 */
    max-height: min(90vh, 47rem);
    min-height: var(--modal-min-height, 16rem);
    overscroll-behavior: contain;
}
@media screen and (min-width: 36em) {
*:not(.dialog__wrapper) > dialog[open],
    *:not(.dialog__wrapper) > [popover]:popover-open {
      min-width: 20.9375rem;
      width: fit-content;
      max-width: 42.875rem;
}
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog[open],
    *:not(.dialog__wrapper) > [popover]:popover-open {
      min-width: 28.375rem;
      width: fit-content;
      max-width: 46rem;
}
}
  /* #endregion */
details.bg-light {
    margin-inline: calc(var(--dialog-padding) * -1);
    padding-inline: var(--dialog-padding);
}
}
@layer elements {
  /* #region popover styling */
.dialog__wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: calc(var(--btn-margin) - 0.25rem);
}
.dialog__wrapper:has(dialog[open], dialog:popover-open) > button {
    background: var(--colour-btn-secondary-bg-hover);
}
.dialog__wrapper:has(dialog[open], dialog:popover-open) > button:not(.btn-action) {
    color: var(--colour-btn-secondary-hover);
}
.dialog__wrapper:has(dialog[open], dialog:popover-open) > button {
    filter: brightness(85%);
    transition: background 0.1s, color 0.1s;
    /* color: var(--colour-btn); */
    border-radius: 1.5rem;
}
.dialog__wrapper > .btn:first-child {
    /* margin-bottom: 0.25rem; */
}
.dialog__wrapper > .btn:first-child:not(.btn-compact):not([class*=fa-]):after {
    content: "";
    display: inline-block;
    margin-left: 1em;
    height: 1em;
    width: 1em;
    z-index: var(--index-focus);
    background: currentColor;
    mask-image: var(--icon-arrow);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    -webkit-mask-image: var(--icon-arrow);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    transform: rotate(90deg);
}
.dialog__wrapper > .btn:first-child[aria-expanded]:not([data-number]):after {
    transform: rotate(270deg);
}
.dialog__wrapper > .btn:first-child:has(+ dialog[open]):not([data-number]):after {
    transform: rotate(270deg);
}
.dialog__wrapper > [popover] {
    display: var(--menu-display, none);
    position: fixed;
    top: anchor(bottom) !important;
    left: anchor(left) !important;
    position-try-fallbacks: flip-block, flip-inline !important;
    /* right: auto; */
    margin: 0 0 0 0.25rem;
    /* padding: 1rem; */
    padding: 0.5rem;
}
.dialog__wrapper > [popover]::backdrop {
    display: none;
}
.dialog__wrapper > [popover]:popover-open {
    display: block !important;
}
.dialog__wrapper:has([popover]:popover-open) > button {
    background-color: var(--colour);
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open) {
    left: 0;
    margin-top: -1rem;
    top: 100%;
    z-index: var(--index-floating);
    min-width: 20rem; /* 320 */
    border-radius: 1rem;
    width: 20rem; /* 320 */
}
@media screen and (min-width: 36em) {
.dialog__wrapper > :is(dialog[open], dialog:popover-open) {
      width: 20.9375rem; /* 335 */
}
}
@media screen and (min-width: 62em) {
.dialog__wrapper > :is(dialog[open], dialog:popover-open) {
      width: 22.5rem; /* 360 */
}
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list {
    width: fit-content !important;
    min-width: 10rem !important; /* 160 */
    max-width: 15rem !important; /* 240 */
    padding: var(--menu-padding, 0.5rem);
    margin: 0;
    background: var(--menu-bg, canvas);
    border: var(--menu-border, 2px solid grey);
    overflow: auto;
    border: none !important;
    border-radius: 0.5rem;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 36em) {
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list {
      width: max-content !important;
}
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list hr {
    height: 1px !important;
    background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
    width: 100%;
    margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
    padding: 0 !important;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list .radio--tick {
    margin-right: 0;
    padding-left: 1.5rem;
    margin-bottom: 0;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list .radio--tick:before {
    left: 0;
    font-size: 1em;
    top: 0.75rem;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list a {
    padding: 0.375rem; /* 6 */
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list a:not(:hover, :focus, :active) {
    border-color: transparent;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list a {
    margin: 0;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list a:after {
    display: none;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list .btn-action {
    background: unset;
    border: unset;
    outline: unset;
    color: var(--colour-primary);
    font-weight: inherit;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.1875rem; /* 19 */
    display: block;
    margin: var(--menu-item-margin, 0 0 0.25rem 0);
    padding-block: var(--menu-item-padding, 0.5rem);
    width: var(--menu-item-width, 100%);
    max-width: var(--menu-item-width, 100%);
    text-align: var(--menu-item-text-align, left);
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list .btn-action:not(:hover, :focus, :active) {
    border-color: transparent;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list .btn-action:is(:hover, :focus) {
    background: var(--colour-light) !important;
    border-radius: 0.25rem !important;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open).dialog--list .btn-action:is(:active) {
    background: rgb(224, 224, 224) !important;
    border-radius: 0.25rem !important;
}
.dialog__wrapper > :is(dialog[open], dialog:popover-open) :is(dialog[open], dialog:popover-open) {
    display: contents;
}
.dialog__wrapper.dialog__wrapper--right > :is(dialog[open], dialog:popover-open) {
    right: 0;
    left: auto;
}
.dialog__wrapper.dialog__wrapper--sm > :is(dialog[open], dialog:popover-open) {
    width: 14.9375rem; /* 239 */
}
.dialog__wrapper.dialog__wrapper--lg > :is(dialog[open], dialog:popover-open) {
    width: 19.9375rem; /* 319*/
}
@media screen and (min-width: 36em) {
.dialog__wrapper.dialog__wrapper--sm-left > dialog[open] {
      left: 0;
      right: auto;
}
.dialog__wrapper.dialog__wrapper--sm-right > dialog[open] {
      right: 0;
      left: auto;
}
.dialog__wrapper.dialog__wrapper--sm > dialog[open] {
      width: 16.5625rem;
}
.dialog__wrapper.dialog__wrapper--lg > dialog[open] {
      width: 28.25rem; /* 452 */
}
}
@media screen and (min-width: 62em) {
.dialog__wrapper.dialog__wrapper--md-left > dialog[open] {
      left: 0;
      right: auto;
}
.dialog__wrapper.dialog__wrapper--md-right > dialog[open] {
      right: 0;
      left: auto;
}
.dialog__wrapper.dialog__wrapper--sm > dialog[open] {
      width: 16.5625rem;
}
.dialog__wrapper.dialog__wrapper--lg > dialog[open] {
      width: 28.375rem; /* 454 */
}
}
  /*  Show hide the indidual or multiple label */
.dialog__wrapper :is(.empty, .individual) {
    display: none;
}
@supports selector(:has(*)) {
.dialog__wrapper :is(.empty, .individual) {
      display: inline;
}
}
.dialog__wrapper:has(input:checked) .empty,
  .dialog__wrapper:not(:has(input:checked)) .individual,
  .dialog__wrapper:has(input:checked ~ input:checked) .individual,
  .dialog__wrapper:not(:has(input:checked ~ input:checked)) .multiple {
    display: none;
}
  /* #endregion */
}
@layer elements {
  /* #region modal styling */
*:not(.dialog__wrapper) > dialog[open] { /*  change this selector to be a dialog without a popover attribute */
}
*:not(.dialog__wrapper) > dialog[open]:has(.mh-lg) {
    overflow-y: hidden !important;
}
*:not(.dialog__wrapper) > dialog[open] {
    width: 90vw;
    max-width: 20.25rem; /* 324 */ /*  col-width*4 */
    /* height: 90vh; */
    max-height: min(90vh, 47rem);
    overscroll-behavior: contain;
}
@media screen and (min-width: 36em) {
*:not(.dialog__wrapper) > dialog[open] {
      --dialog-padding: 2rem;
      min-width: 20.9375rem; /* 335 */
      width: fit-content;
      max-width: 42.875rem; /* 686 */
}
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog[open] {
      min-width: 28.375rem; /* 454 */
      width: fit-content;
      max-width: 46rem; /* 736 */
}
}
*:not(.dialog__wrapper) > dialog[open] {
    /*  Close button */
}
*:not(.dialog__wrapper) > dialog[open] > form:first-child {
    position: static;
}
*:not(.dialog__wrapper) > dialog[open] > form:first-child button,
  *:not(.dialog__wrapper) > dialog[open] > button:first-child {
    position: absolute;
    top: var(--dialog-padding);
    right: var(--dialog-padding);
    z-index: var(--index-floating);
    text-indent: 300%;
    overflow: hidden;
    border: none;
    height: 1.25rem;
    width: 1.25rem;
    background: transparent;
}
*:not(.dialog__wrapper) > dialog[open] > form:first-child button:after,
  *:not(.dialog__wrapper) > dialog[open] > button:first-child:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    display: block;
    height: 1.25rem;
    width: 1.25rem;
    z-index: var(--index-focus);
    background: currentColor;
    mask-image: var(--icon-close);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    -webkit-mask-image: var(--icon-close);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
}
*:not(.dialog__wrapper) > dialog[open] > form:first-child button + *,
  *:not(.dialog__wrapper) > dialog[open] > button:first-child + * {
    padding-right: var(--dialog-padding);
    margin-right: 1.25rem;
    display: block;
}
*:not(.dialog__wrapper) > dialog[open] > form:first-child button + span:not(.h1, .h2, .h3, .h4, .h5, .h6),
  *:not(.dialog__wrapper) > dialog[open] > button:first-child + span:not(.h1, .h2, .h3, .h4, .h5, .h6) {
    padding-bottom: 0.5rem;
    line-height: 1.1875rem; /* 19 */
}
*:not(.dialog__wrapper) > dialog[open] > form:first-child button + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + *,
  *:not(.dialog__wrapper) > dialog[open] > button:first-child + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
    padding-right: var(--dialog-padding);
    margin-right: 1.25rem;
    display: block;
}
@media (forced-colors: active) {
*:not(.dialog__wrapper) > dialog[open] > form:first-child button,
    *:not(.dialog__wrapper) > dialog[open] > button:first-child {
      text-indent: 0;
      width: fit-content;
}
*:not(.dialog__wrapper) > dialog[open] > form:first-child button:after,
    *:not(.dialog__wrapper) > dialog[open] > button:first-child:after {
      display: none;
}
}
*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
    padding: 0 !important;
}
*:not(.dialog__wrapper) > dialog[open].dialog--fullwidth {
    max-width: 69.5rem; /* 1112*/
}
@media screen and (max-width: 36em) {
*:not(.dialog__wrapper) > dialog[open] :is(form, fieldset, .btn--wrapper):has(> .btn:first-child, > .btn:last-child) .btn:not(.dialog__close) {
      width: 100%;
      max-width: 100%;
      margin: 0;
      display: block;
      text-align: center;
}
*:not(.dialog__wrapper) > dialog[open] :is(form, fieldset, .btn--wrapper):has(> .btn:first-child, > .btn:last-child) .btn:not(.dialog__close):not(:last-child) {
      margin-bottom: 1rem !important;
}
}
*:not(.dialog__wrapper) > dialog[open] .mh-lg {
    padding-left: 1rem;
    margin-left: -1rem;
    padding-right: calc(var(--dialog-padding) - 10px);
    margin-right: calc(var(--dialog-padding) * -1 + 10px);
    margin-bottom: calc(var(--dialog-padding) * -1);
}
*:not(.dialog__wrapper) > dialog[open] .mh-lg > *:last-child {
    margin-bottom: 2rem !important;
}
*:not(.dialog__wrapper) > dialog[open] .mh-lg > p:last-child {
    padding-bottom: 0 !important;
}
  /* #endregion */
  /* #region Transactional */
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
    text-align: center;
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement):not(.hide-icon):before {
    content: "\f05a";
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-family: var(--fa-family-classic);
    font-size: 3rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1;
    color: var(--colour-heading);
    clear: both;
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement):not(.hide-icon):before {
      font-size: 4rem;
}
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement):has(> i):before {
    display: none;
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement):has(> i) > i {
    display: var(--fa-display, inline-block);
    line-height: 1;
    font-size: 3rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1;
    color: var(--colour-heading);
    clear: both;
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement):has(> i) > i {
      font-size: 4rem;
}
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement):has(> i) > i:has(> i) {
    position: relative;
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement):has(> i) > i > i:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: scale(0.5) translate(-100%, 0);
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) > form:first-child button,
  *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) > button:first-child {
    display: none;
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) > form:first-child button + *,
  *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) > button:first-child + * {
    padding-right: 0;
    margin-right: 0;
}
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) > form:first-child button + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + *,
  *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) > button:first-child + span:not(.h1, .h2, .h3, .h4, .h5, .h6) + * {
    padding-right: 0;
    margin-right: 0;
}
@media screen and (min-width: 36em) {
*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) :is(button, .btn):has(~ :is(button, .btn):last-child),
    *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) :is(button, .btn):last-child {
      min-width: calc(50% - 1rem);
      text-align: center;
}
}
  /* #endregion */
  /* #region youTube video */
*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
    display: block;
}
*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) .mh-lg,
  *:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) .mh-lg:before {
    display: contents;
}
@media screen and (min-width: 36em) {
*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
      min-width: 42.875rem; /* 686 */
      max-width: 42.875rem; /* 686 */
}
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog[open]:has(.youtube-embed) {
      min-width: 46rem; /* 736 */
      max-width: 46rem; /* 736 */
}
}
  /* #endregion */
  /* #region admin panel dialog */
dialog:has(> .admin-panel) .dialog__close {
    margin-top: -0.8rem;
}
dialog > .admin-panel {
    margin: -1rem calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) calc(var(--dialog-padding) * -1) !important;
    padding-top: 0;
}
dialog > .admin-panel:last-child {
    margin-bottom: calc(var(--dialog-padding) * -1);
}
  /* #endregion */
  /* #region Multi step modal */
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
    padding: 0;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] > button:first-child {
    top: calc(var(--dialog-padding) * 4) !important;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] :is(.h1, .h2, .h3, .h4, .h5, .h6) {
    padding-right: calc(var(--dialog-padding) * 3);
    padding-bottom: var(--dialog-padding);
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] iam-multi-step {
    padding-inline: 0 !important;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] form {
    overflow: auto;
    padding-bottom: var(--dialog-padding);
    max-height: calc(min(90vh, 47rem) - 6rem);
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] fieldset > :last-child {
    margin-bottom: var(--dialog-padding) !important;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] fieldset > p:last-child {
    padding-bottom: 0 !important;
    margin-bottom: var(--dialog-padding) !important;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] fieldset:not(.active) {
    display: none;
}
@media screen and (min-width: 36em) {
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
      min-width: 28.25rem; /* 452 */
      width: 28.25rem; /* 452 */
      max-width: 28.25rem; /* 452 */
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] > button:first-child {
      top: calc(var(--dialog-padding) * 3.25) !important;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] .btn--wrapper {
      margin-top: auto;
      text-align: right;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] form {
      height: calc(100vh - 6rem);
      padding-left: 0 !important;
      padding-right: var(--dialog-padding) !important;
}
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
      min-width: 57.75rem; /* 924 */
      width: 57.75rem; /* 924 */
      max-width: 57.75rem; /* 924 */
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] > button:first-child {
      top: calc(var(--dialog-padding) * 1) !important;
}
}
@media screen and (min-width: 62em) and (min-height: 31.25rem) {
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] {
      height: 29.875rem; /* 478 */
      max-height: 29.875rem; /* 478 */
}
}
@media screen and (min-width: 62em) {
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] form {
      display: flex;
      flex-direction: column;
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] fieldset {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      position: relative;
      overflow: auto;
      margin-bottom: calc(var(--dialog-padding) * -1);
      padding-right: calc(var(--dialog-padding) - 10px);
      margin-right: calc(var(--dialog-padding) * -1 + 10px);
      max-height: 23.125rem; /* 370 */
}
*:not(.dialog__wrapper) > dialog:has(iam-multi-step)[open] fieldset::before {
      content: "";
      top: 100%;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--dialog-padding);
      min-height: var(--dialog-padding);
      position: sticky;
      display: block;
      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
      z-index: 2;
      margin-bottom: calc(var(--dialog-padding) * -1);
}
}
  /* #endregion */
  /* #region mobile fullwidth view For multi step modal */
@media screen and (max-width: 36em) {
dialog[open]:has(iam-multi-step) {
      min-width: 100%;
      min-height: 100%;
      border-radius: 0;
      overflow-y: auto;
}
dialog[open]:has(iam-multi-step) iam-multi-step {
      padding-inline: 0 !important;
}
dialog[open]:has(iam-multi-step) form {
      height: calc(100vh - 6rem);
      padding-inline: var(--dialog-padding) !important;
}
dialog[open]:has(iam-multi-step) .btn--wrapper {
      padding-top: 4rem; /* 64 */
}
dialog[open]:has(iam-multi-step) .mh-lg {
      max-height: none !important;
      overflow: visible;
}
dialog[open]:has(iam-multi-step):before,
    dialog[open]:has(iam-multi-step) *:first-child {
      margin-top: auto !important;
}
dialog[open]:has(iam-multi-step) *:last-child {
      margin-bottom: auto !important;
}
}
  /* #endregion */
}
@layer elements {
.admin-panel {
    --padding-x: 1.5rem;
    --padding-top: 1rem;
    --padding-bottom: 1rem;
    --mh-modifier: 4.5rem; /* 56px + 16px */
    --mh-padding-inline: var(--padding-x);
    display: block;
    padding: var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
    background-color: var(--colour-canvas-2);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
&:has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-])) {
      display: grid;
> * {
        grid-column: var(--col-start, col-1-start)/var(--col-end, col-12-end);
}
}
&:empty {
      display: none;
}
> :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):not(.lead):first-child {
      --gradient-direction: -90deg !important;
      background-color: var(--colour-success);
&:not([class*=bg-]) {
        color: var(--colour-primary-theme);
        background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
}
      margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
      display: block;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
}
> :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child,
    .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead) {
      font-size: 1.125rem; /* 18/16 */
      line-height: 1.5rem;
      font-weight: bold;
      padding: 1rem 1.5rem;
      max-width: unset;
}
> :is(.admin-panel__heading):first-child {
      display: flex !important;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
      padding: 1rem 1.5rem;
> :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
        padding: 0;
        margin-inline-end: auto;
}
.btn {
        --btn-margin: 0;
        margin-bottom: 0;
}
.dialog__wrapper + .btn {
        --btn-margin: 0.25rem;
        margin-inline-end: 0;
}
@media (prefers-color-scheme: light) {
.btn-action,
        .dialog__wrapper {
          --colour-canvas-2: #ffffff;
          --colour-heading: var(--colour-primary);
          --colour-btn-action-hover-bg: var(--colour-light);
          --colour-btn-hover: var(--colour-primary);
          --colour-border: #d8d8d8;
}
}
}
:is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax, .iam-table) {
      margin: 0 0 2rem 0;
      padding: 0;
      box-shadow: none;
      background: none;
}
& > *:not([class*=mb-]):not(.btn__group):last-child {
      margin-bottom: 0 !important;
}
& > *:is(p):last-child {
      padding-bottom: 0 !important;
}
& p {
      max-width: 100%;
      padding-bottom: 1.5rem;
}
& > :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
      overflow: auto;
&:before {
        top: 100% !important;
}
}
& > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child + :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
      padding-top: var(--padding-top);
      margin-top: calc(var(--padding-top) * -1);
}
& > :is(.mh-sm,
    .mh-md,
    .mh-lg,
    .mh-sm-sm,
    .mh-sm-md,
    .mh-sm-lg,
    .mh-md-sm,
    .mh-md-md,
    .mh-md-lg,
    .mh-fluid):last-child {
      padding-bottom: var(--padding-bottom);
      margin-bottom: calc(var(--padding-bottom) * -1) !important;
& > *:not([class*=mb-]):last-child {
        margin-bottom: 0 !important;
}
& > *:is(p):last-child {
        padding-bottom: 0 !important;
}
}
& > iam-pagination {
      margin-top: -1rem;
}
&:has(.mh-fluid) {
      max-height: 100%;
      display: flex;
      flex-direction: column;
}
&.grid {
      display: grid !important;
      grid-template-columns: subgrid !important;
> *:not(:first-child) {
        grid-column: var(--col-start, col-1-start)/var(--col-end, col-12-end);
}
}
& > hr {
      margin-inline: calc(var(--padding-x) * -1);
}
}
@container style(--theme: dark) {
.admin-panel {
      background-color: var(--colour-canvas-2);
      color: var(--colour-body);
.bg-white {
        background-color: transparent !important;
        color: var(--white) !important;
}
}
}
[class*=col].admin-panel:first-child:last-child:not(:has(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid)) {
    min-height: calc(100% - 1.5rem);
}
  /* #region Has actionbar */
.admin-panel:has(iam-actionbar) {
& > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child {
      margin-bottom: 0;
}
iam-actionbar {
      background: var(--colour-canvas);
      margin-inline: calc(var(--padding-x) * -1);
      margin-bottom: var(--padding-top);
&:first-child {
        margin-top: calc(var(--padding-top) * -1);
}
&:not(:first-child) {
        border-radius: 0;
}
}
& > :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax) {
      overflow: visible;
&:first-child {
        margin-top: calc(var(--padding-top) * -1);
}
iam-actionbar {
        margin-top: 0 !important;
        border-radius: 0;
        box-shadow: none;
}
}
}
  /* #endregion */
  /* #region Admin panel as details */
details.admin-panel {
summary:after {
      content: "\f077";
      font-weight: bold;
      margin-left: 0;
      height: 2rem;
      width: 2rem;
      text-align: center;
      line-height: 2rem;
      margin-right: -0.5rem;
}
summary:not(:has(.btn:hover)):hover:after {
      background: var(--colour-light);
      border-radius: 50%;
}
summary:not(:has(.btn:hover)):active:after {
      background: var(--colour-light);
      filter: brightness(85%);
      border-radius: 50%;
}
}
details.admin-panel:not([open]) {
    padding-bottom: 0;
summary:first-child {
      margin-bottom: 0;
}
summary:after {
      content: "\f078";
}
}
  /* #endregion */
.admin-panel__footer:last-child {
    background-color: var(--wider-colour);
    padding-top: var(--padding-top);
    margin-inline: calc(var(--padding-x) * -1);
    padding-inline: var(--padding-x);
    padding-bottom: 0;
& > *:last-child {
      margin-bottom: 0;
      padding-bottom: var(--padding-bottom);
      align-self: center;
}
}
.admin-panel__footer:not([class*=mb-]):last-child {
    margin-bottom: calc(var(--padding-bottom) * -1) !important;
}
  /* #region */
.sub-panel {
    background: var(--colour-canvas);
    padding: var(--spacer-1);
    border: 1px solid var(--colour-border);
    border-radius: 0.25rem;
    font-weight: normal;
    margin-bottom: 1rem;
    display: block;
& > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
      font-size: 1rem;
      line-height: 1;
      margin-bottom: 0;
      padding-bottom: 0.5rem;
      font-weight: normal;
}
strong {
      font-weight: normal;
}
.logo {
      height: 1.5rem;
      width: 1.5rem;
      object-fit: contain;
      padding: 0;
      margin: 0 auto 0.25rem auto;
      display: block;
}
}
  /* #endregion */
}
@layer elements {
:is(.prefix, .suffix) {
    display: none;
}
:is(.prefix, .suffix) {
    --fa-display: flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0 0.75rem;
    font-size: var(--input-fs, 1rem);
    line-height: var(--input-lh, 1.25rem);
    color: var(--colour-body);
    background-color: var(--colour-primary-theme);
    border: 2px solid var(--colour-primary);
    color: var(--colour-white);
    margin: 0 !important;
    /* margin-bottom: 1rem; */
    border-end-start-radius: 0.5rem;
    border-start-start-radius: 0.5rem;
    min-width: calc(2.75rem + 4px);
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;
    position: relative;
    height: calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) + 4px);
}
@supports (height: stretch) {
:is(.prefix, .suffix) {
      height: stretch;
}
}
:is(.prefix, .suffix) {
    flex-shrink: 0;
}
:is(.prefix, .suffix):after {
    display: inline-block;
    max-width: 1.25rem;
}
:is(.prefix, .suffix)[class*=fa-] {
    width: calc(2.75rem + 4px);
    padding-inline: 0;
}
:is(.prefix, .suffix) select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
:is(.prefix, .suffix) span {
    display: none;
}
:is(.prefix, .suffix) select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
  :is(.prefix, .suffix) select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
  :is(.prefix, .suffix) select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
  :is(.prefix, .suffix) select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
  :is(.prefix, .suffix) select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
  :is(.prefix, .suffix) select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
  :is(.prefix, .suffix) select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
  :is(.prefix, .suffix) select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
  :is(.prefix, .suffix) select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
  :is(.prefix, .suffix) select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
    display: block;
}
:is(.prefix, .suffix) select ~ span:after {
    content: " \f078";
    font-family: var(--fa-family-classic);
    font-size: 0.8em;
    display: inline-block;
    padding-left: 1em;
}
:is(.prefix, .suffix) select:focus-visible ~ span:after {
    content: "\f077";
}
@container style(--font-body) {
:is(.prefix, .suffix)::before {
      content: var(--iso) !important;
}
}
@container style(--fa-font-regular) {
:is(.prefix, .suffix)::before {
      content: var(--fa) !important;
}
}
.prefix {
    border-right: none;
}
.suffix {
    border-left: none;
    border-end-start-radius: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0.5rem !important;
    border-end-end-radius: 0.5rem !important;
    order: 2;
}
.prefix span {
    display: none;
}
.prefix span small {
    font-size: 0.8em;
}
.prefix ~ :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), textarea, output) {
    border-end-start-radius: 0 !important;
    border-start-start-radius: 0 !important;
}
}
@layer elements {
:is(label:not(.tag), .label) {
    font-size: 1.125rem; /* 18/16 */
    line-height: 1.3125rem; /* 21/16 */
    margin-bottom: 0.5rem;
    font-weight: normal;
    color: var(--colour-heading);
    display: block;
& > iam-rating {
      margin-top: 0.25rem !important;
}
&.label--sm {
      --input-max-width: 15rem;
}
}
}
@layer elements {
input {
    margin: 0; /*  1 */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
  /*  Remove the dropdown arrow only from text type inputs built with datalists in Chrome. */
  /*  See https://stackoverflow.com/a/54997118 */
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important;
}
  /*  1. Prevent a WebKit bug where (2) destroys native `audio` and `video` */
  /*     controls in Android 4. */
  /*  2. Correct the inability to style clickable types in iOS and Safari. */
  /*  3. Opinionated: add "hand" cursor to non-disabled button elements. */
  /*  Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */
::-moz-focus-inner {
    padding: 0;
    border-style: none;
}
  /*  1. By using `float: left`, the legend will behave like a block element. */
  /*     This way the border of a fieldset wraps around the legend if present. */
  /*  2. Fix wrapping bug. */
  /*     See https://github.com/twbs/bootstrap/issues/29712 */
legend {
    float: left; /*  1 */
    width: 100%;
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: inherit;
}
legend + * {
    clear: left; /*  2 */
}
  /*  Fix height of inputs with a type of datetime-local, date, month, week, or time */
  /*  See https://github.com/twbs/bootstrap/issues/18842 */
::-webkit-datetime-edit-fields-wrapper,
  ::-webkit-datetime-edit-text,
  ::-webkit-datetime-edit-minute,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-year-field {
    padding: 0;
}
::-webkit-inner-spin-button {
    height: auto;
}
  /*  1. Correct the outline style in Safari. */
  /*  2. This overrides the extra rounded corners on search inputs in iOS so that our */
  /*     `.form-control` class can properly style them. Note that this cannot simply */
  /*     be added to `.form-control` as it's not specific enough. For details, see */
  /*     https://github.com/twbs/bootstrap/issues/11586. */
[type=search] {
    outline-offset: -2px; /*  1 */
    -webkit-appearance: textfield; /*  2 */
}
  /*  1. A few input types should stay LTR */
  /*  See https://rtlstyling.com/posts/rtl-styling#form-inputs */
  /*  2. RTL only output */
  /*  See https://rtlcss.com/learn/usage-guide/control-directives/#raw */
  /* rtl:raw:
  [type="tel"],
  [type="url"],
  [type="email"],
  [type="number"] {
    direction: ltr;
  }
  */
  /*  Remove the inner padding in Chrome and Safari on macOS. */
::-webkit-search-decoration {
    -webkit-appearance: none;
}
  /*  Remove padding around color pickers in webkit browsers */
::-webkit-color-swatch-wrapper {
    padding: 0;
}
::-moz-color-swatch {
    border-radius: 0;
    border: none;
}
::-webkit-color-swatch {
    border-radius: 0;
    border: none;
}
  /*  1. Inherit font family and line height for file input buttons */
  /*  2. Correct the inability to style clickable types in iOS and Safari. */
::file-selector-button {
    font: inherit; /*  1 */
    -webkit-appearance: button; /*  2 */
}
  /* #region input field */
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  output) {
    display: block;
    width: 100%;
    display: block;
    width: 100%;
    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
    font-size: var(--input-fs, 1rem);
    line-height: var(--input-lh, 1.25rem);
    color: var(--colour-heading);
    background-color: var(--colour-canvas-2);
    background-clip: padding-box;
    border: 2px solid var(--colour-primary);
    appearance: none; /*  Fix appearance for date inputs in Safari */
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    min-height: calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) + 4px);
    max-height: calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) + 4px);
    /*  Customize the `:focus` state to imitate native WebKit styles. */
}
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  output):is(:focus, .focus):not(:disabled) {
    border-color: var(--colour-info);
    outline: 0;
}
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  output):is(:focus, .focus):not(:disabled):not(:invalid) {
    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
}
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  output) {
    /*  Disabled inputs */
}
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  output):disabled {
    background-color: #ccd6d8;
    opacity: 0.4;
    cursor: not-allowed;
}
input[type=color] {
    padding: 0 !important;
    max-width: 3rem !important;
}
[disabled] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  output,
  select:not(.select--minimal, .btn)) {
    background-color: #ccd6d8;
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
[disabled] label {
    cursor: not-allowed;
    pointer-events: none;
}
:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range])) {
    max-width: var(--input-max-width);
}
  /* #endregion */
}
@layer elements {
  /*  1. Remove the margin in Firefox and Safari */
select,
  optgroup {
    margin: 0; /*  1 */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
select {
    text-transform: none;
    word-wrap: normal;
    /*  Undo the opacity change from Chrome */
}
select:disabled {
    opacity: 1;
}
  /* #region Select */
select:not(.select--minimal, .btn) {
    background: var(--icon-select) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem)/var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat, linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top/calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat, linear-gradient(to right, var(--colour-canvas-2), var(--colour-canvas-2));
    padding-right: calc(var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem) + var(--input-lh, 1.25rem)) !important;
}
select:not(.select--minimal, .btn) option {
    font-size: 1.2em;
}
select:not(.select--minimal, .btn) {
    box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
    max-width: var(--select-max-width);
}
select:not(.select--minimal, .btn)[multiple], select:not(.select--minimal, .btn)[size]:not([size="1"]) {
    background: none;
    max-height: none !important;
}
select:not(.select--minimal, .btn):disabled {
    background-color: gray;
    border-color: black;
}
select:not(.select--minimal, .btn) {
    /*  Remove outline from select box in FF */
}
select:not(.select--minimal, .btn):-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 inherit;
}
div:has(> select) {
    margin-bottom: 1.5rem;
}
div:has(> select) select {
    margin-bottom: 0 !important;
}
.select--minimal {
    all: unset;
    font-size: inherit;
    line-height: inherit;
    background: none;
    border: 2px solid transparent;
    display: inline-block;
    padding: 0.4em calc(1em + 0.8ch) 0.4rem var(--select-padding-left, 0.4em) !important;
    font-weight: normal !important;
    margin: -0.4em 0 !important;
    border-radius: 0.25em;
    color: var(--colour-body);
    height: auto;
    cursor: pointer;
    font-family: var(--font-body) !important;
}
.select--minimal option {
    background-color: var(--colour-canvas);
    padding-left: 1em;
    font-size: inherit;
    line-height: inherit;
}
.select--minimal:hover {
    /* border: none; */
    background: var(--colour-light);
}
.select--minimal:is(:focus, .focus):not(:disabled) {
    border-color: var(--colour-info);
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
}
*:has(> .select--minimal) {
    position: relative;
    display: inline-block !important;
    width: auto !important;
    font-size: inherit !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
}
*:has(> .select--minimal):after {
    font-size: 0.8em;
    line-height: 1em;
    content: "\f078";
    font-family: "Font Awesome 7 Pro";
    position: absolute;
    top: 40%;
    transform: translate(0, -50%);
    right: 0.8ch;
    pointer-events: none;
    color: var(--colour-body);
}
  /* #endregion */
select:not(.select--minimal, .btn) {
    width: 100%;
    display: block;
    width: 100%;
    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
    font-size: var(--input-fs, 1rem);
    line-height: var(--input-lh, 1.25rem);
    color: var(--colour-heading);
    background-color: var(--colour-canvas-2);
    background-clip: padding-box;
    border: 2px solid var(--colour-primary);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    min-height: calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) + 4px);
    max-height: calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) + 4px);
    /*  Customize the `:focus` state to imitate native WebKit styles. */
}
select:not(.select--minimal, .btn):is(:focus, .focus):not(:disabled) {
    border-color: var(--colour-info);
    outline: 0;
}
select:not(.select--minimal, .btn):is(:focus, .focus):not(:disabled):not(:invalid) {
    box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
}
select:not(.select--minimal, .btn) {
    /*  Disabled inputs */
}
select:not(.select--minimal, .btn):disabled {
    background-color: #ccd6d8;
    opacity: 0.4;
    cursor: not-allowed;
}
[disabled] select:not(.select--minimal, .btn) {
    background-color: #ccd6d8;
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
  /* #region make select look like dropdown */
@media (hover: hover) {
select {
      appearance: base-select !important;
}
}
select::picker-icon {
    display: none;
}
select::picker(select) {
    appearance: base-select;
}
select option::checkmark {
    display: none;
}
select selectedcontent span {
    display: none;
}
  /* #endregion */
  /* #region Multi-select */
select[multiple] {
    border-radius: 0.35rem;
}
select[multiple]::-webkit-scrollbar {
    width: 0.7rem; /*  manage scrollbar width here */
}
select[multiple]::-webkit-scrollbar {
    background-color: transparent; /*  manage scrollbar background color here */
}
select[multiple]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    /* background-color:#000000!important; // manage scrollbar thumb background color here */
    border-radius: 0.35rem;
}
  /* #endregion */
}
@layer elements {
textarea {
    --textarea-height-scale: 3;
    margin: 0; /*  1 */
    font-family: inherit;
    resize: vertical; /*  1 */
    display: block;
    width: 100%;
    display: block;
    width: 100%;
    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
    font-size: var(--input-fs, 1rem);
    line-height: var(--input-lh, 1.25rem);
    color: var(--colour-heading);
    background-color: var(--colour-canvas-2);
    background-clip: padding-box;
    border: 2px solid var(--colour-primary);
    appearance: none; /*  Fix appearance for date inputs in Safari */
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    max-height: 100%;
&:not([rows]) {
      min-height: calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) * var(--textarea-height-scale) + 4px) !important;
}
&[rows="1"] {
      --textarea-height-scale: 1;
}
&[rows="2"] {
      --textarea-height-scale: 2;
}
&:is([rows="2"], [rows="2"]) {
      min-height: calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) * var(--textarea-height-scale) + 4px) !important;
}
    /*  Customize the `:focus` state to imitate native WebKit styles. */
&:is(:focus, .focus):not(:disabled) {
      border-color: var(--colour-info);
      outline: 0;
}
&:is(:focus, .focus):not(:disabled):not(:invalid) {
      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
}
    /*  Disabled inputs */
&:disabled {
      background-color: #ccd6d8;
      opacity: 0.4;
      cursor: not-allowed;
}
}
[disabled] textarea {
    background-color: #ccd6d8;
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
label:not(.tag):has(textarea) {
    display: block;
    margin-bottom: 1.5rem;
    max-width: var(--input-max-width);
textarea {
      margin-top: 0.5rem;
      margin-bottom: 0 !important;
}
}
}
@layer elements {
  /* #region RESETS */
  /*  1. Browsers set a default `min-width: min-content;` on fieldsets, */
  /*     unlike e.g. `<div>`s, which have `min-width: 0;` by default. */
  /*     So we reset that to ensure fieldsets behave more like a standard block element. */
  /*     See https://github.com/twbs/bootstrap/issues/12359 */
  /*     and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements */
  /*  2. Reset the default outline behavior of fieldsets so they don't affect page layout. */
fieldset {
    min-width: 0; /*  1 */
    padding: 0; /*  2 */
    margin: 0; /*  2 */
    border: 0; /*  2 */
}
  /*  Correct element displays */
output {
    display: inline-block;
}
  /*  Remove border from iframe */
iframe {
    border: 0;
}
  /*  Summary */
  /*  */
  /*  1. Add the correct display in all browsers */
summary {
    display: list-item; /*  1 */
    cursor: pointer;
}
  /*  Progress */
  /*  */
  /*  Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress {
    vertical-align: baseline;
}
  /*  Hidden attribute */
  /*  */
  /*  Always hide an element with the `hidden` HTML attribute. */
  /* #endregion */
  /* #region input field */
[disabled] label {
    cursor: not-allowed;
    pointer-events: none;
}
  /* #endregion */
  /* #region legend */
fieldset {
    width: 100%;
    position: relative;
}
legend {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: var(--heading-weight);
    line-height: 2rem;
    color: var(--colour-heading);
    margin: 0;
    clear: both;
    display: block;
    float: none;
    font-size: var(--h4-fs);
    line-height: var(--heading-lh);
    padding-bottom: 0.5rem;
    max-width: var(--content-max-width);
    min-width: 100%;
}
  /* #endregion */
  /* #region wrappers */
div:has(> label:first-child):has(> input) {
    position: relative;
    max-width: var(--input-max-width);
    margin-bottom: 1.5rem;
}
div:has(> label:first-child):has(> input) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  div:has(> label:first-child):has(> input) output,
  div:has(> label:first-child):has(> input) .prefix,
  div:has(> label:first-child):has(> input) .suffix {
    margin-bottom: 0 !important;
}
div:has(> label:first-child):has(> input) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
div:has(> label:first-child):has(> input) > *:not(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range])):not(output):not(.prefix):not(.suffix) {
    flex-shrink: 0;
    width: 100%;
}
div:has(> label:first-child):has(> input) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), output) {
    flex-shrink: 1;
    flex-grow: 1;
    width: 0;
}
div:has(> label:first-child):has(> input) input ~ *:not(output) {
    order: 5;
    margin-top: 0.5rem;
}
*:has(> :is(.form-control-sm, .input--sm)) {
    --input-fs: 0.875rem; /* 14/16 */
    --input-lh: 1rem;
    --input-padding-block: 0.625rem;
    --input-padding-inline: 0.875rem; /* 14/16 */
}
*:has(> :is(.form-control-lg, .input--lg)) {
    --input-fs: 1.5rem;
    --input-lh: 1.8125rem; /* 29 */
    --input-padding-block: 1.25rem;
    --input-padding-inline: 1.375rem; /* 22 */
}
*:has(> label:first-child):has(> input):has(> :is(.form-control-inline, .input--inline)) label {
    flex-shrink: 0;
    white-space: nowrap;
    width: fit-content !important;
    margin: 0;
    margin-inline-end: 1rem;
}
  /* #endregion */
  /* #region readonly */
*:has(> input[readonly]) {
    position: relative;
    max-width: var(--input-max-width);
}
*:has(> input[readonly]):after {
    font-family: var(--fa-family-classic);
    font-weight: 300;
    content: "\f023";
    position: absolute;
    font-size: var(--input-lh, 1.25rem);
    height: var(--input-lh, 1.25rem);
    width: var(--input-lh, 1.25rem);
    top: auto !important;
    bottom: calc(var(--input-padding-block, 0.75rem) + 2px);
    right: calc(var(--input-padding-block, 1rem) + 2px);
    text-align: center;
}
  /* #endregion */
  /* #region prefix */
@supports selector(:has(*)) {
.suffix ~ :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=date]):not([type=time]),
    output),
    :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=date]):not([type=time]),
    output):has(~ .suffix) {
      order: 1;
      border-start-end-radius: 0 !important;
      border-end-end-radius: 0 !important;
}
:is(input):has(~ iam-password-indicator) {
      border-start-end-radius: 0 !important;
      border-end-end-radius: 0 !important;
}
label:has(.suffix) input {
      border-start-end-radius: 0 !important;
      border-end-end-radius: 0 !important;
}
}
  /* #endregion */
  /* #region Form validation */
.was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid]):not(.is-valid) + label,
  .was-validated label:has(*:not(button):is(:invalid, .is-invalid, [aria-invalid]):not(.is-valid)) {
    --colour-check-border: var(--colour-danger);
    --colour-check-bg: #fcebec;
    border-color: var(--colour-danger);
}
.was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
    border-color: var(--colour-danger) !important;
}
.was-validated select:not(.btn):is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
    background: var(--icon-select) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem)/var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat, linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top/calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat, var(--icon-error) right var(--input-padding-block, 3.5rem) top var(--input-padding-block, 0.75rem)/var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat;
    padding-right: 6rem !important;
}
.was-validated input:is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
    background-image: var(--icon-error);
    background-repeat: no-repeat;
    background-position: right var(--input-padding-inline, 1rem) center;
    background-size: var(--input-lh, 1.25rem) var(--input-lh, 1.25rem);
    padding-right: calc(var(--input-lh, 1.25rem) + var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem)) !important;
}
.was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
    border-color: var(--colour-complete);
}
.was-validated input:is(:valid, .is-valid):not(:is(:invalid, .is-invalid)) {
    background-image: var(--icon-tick);
    background-repeat: no-repeat;
    background-position: right var(--input-padding-inline, 1rem) center;
    background-size: var(--input-lh, 1.25rem) var(--input-lh, 1.25rem);
    padding-right: calc(var(--input-lh, 1.25rem) + var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem)) !important;
}
.invalid-feedback {
    color: var(--colour-danger);
    margin-top: 0.5rem;
    background-image: var(--icon-error);
    background-repeat: no-repeat;
    background-position: left top 1px;
    background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
    padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
    display: none;
}
  /*  Postcode lookup validation */
iam-address-lookup:has([required]) {
    --req-display: none;
}
.was-validated :is(:invalid, .is-invalid) ~ .invalid-feedback {
    display: block;
}
.was-validated iam-address-lookup:has([required]:invalid) {
    --error-border: var(--colour-danger);
    --error-bg: var(--icon-error);
    --error-display: block;
    --error-hide: none;
}
  /* #region radio/checkbox field */
@supports selector(:has(*)) {
input:is([type=radio], [type=checkbox]) {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      height: 0;
      width: 0;
      margin: 0;
      pointer-events: none;
}
:is(div, fieldset, label:not(.tag)):has(> input:is([type=radio], [type=checkbox])):not(:has(label input)) {
      position: relative;
      margin-bottom: 1.5rem;
}
:is(div, fieldset, label:not(.tag)):has(> input[type=radio]) {
      --border-radius: 50%;
      --outline-width: 0.5rem;
}
:is(div, fieldset, label:not(.tag)):has(> input[type=checkbox]) {
      --border-radius: 0.25rem;
      --outline-width: 0.25rem;
}
input:is([type=radio], [type=checkbox]) + label:not(:has(> iam-card)),
    label:not(.tag):has(input:is([type=radio], [type=checkbox])):not(:has(> iam-card)) {
      --tick-colour: transparent;
      color: var(--colour-heading);
      position: relative;
      font-size: 1rem;
      line-height: 1.25rem;
      padding-left: 2.5rem;
      padding-top: 0.625rem; /* 10 */
      padding-bottom: 0.625rem; /* 10 */
      margin-bottom: 1.5rem;
      margin-right: 1.5rem;
      cursor: pointer;
}
input:is([type=radio], [type=checkbox]) + label:not(:has(> iam-card)):has(+ span),
    label:not(.tag):has(input:is([type=radio], [type=checkbox])):not(:has(> iam-card)):has(+ span) {
      margin-bottom: 0;
}
input:is([type=radio], [type=checkbox]) + label:not(:has(> iam-card)):has(+ input),
    label:not(.tag):has(input:is([type=radio], [type=checkbox])):not(:has(> iam-card)):has(+ input) {
      margin-bottom: 0;
}
input:is([type=radio], [type=checkbox]) + label:not(:has(> iam-card)):last-child,
    label:not(.tag):has(input:is([type=radio], [type=checkbox])):not(:has(> iam-card)):last-child {
      margin-bottom: 0;
}
input:is([type=radio], [type=checkbox]) + label:not(:has(> iam-card)):before,
    label:not(.tag):has(input:is([type=radio], [type=checkbox])):not(:has(> iam-card)):before {
      content: "";
      border: 2px solid var(--colour-check-border, var(--colour-primary));
      background: var(--colour-check-bg, transparent);
      border-radius: var(--border-radius);
      height: var(--radio-size, 1.5rem);
      width: var(--radio-size, 1.5rem);
      display: inline-block;
      position: absolute;
      top: 0.5rem;
      left: var(--outline-width);
}
input:is([type=radio], [type=checkbox]) + label:not(:has(> iam-card)).btn:before,
    label:not(.tag):has(input:is([type=radio], [type=checkbox])):not(:has(> iam-card)).btn:before {
      opacity: 0;
}
input[type=radio] + label:not(:has(> iam-card)):after,
    label:not(.tag):has(input[type=radio]):not(:has(> iam-card)):after {
      content: "" !important;
      background: var(--colour-info);
      border-radius: var(--border-radius);
      height: 0.875rem; /* 14/16 */
      width: 0.875rem; /* 14/16 */
      height: var(--radio-inner-size, 0.875rem);
      width: var(--radio-inner-size, 0.875rem);
      display: none;
      position: absolute;
      top: var(--radio-inner-top, 0.8125rem);
      left: var(--radio-inner-left, calc(0.3125rem + var(--outline-width)));
}
input[type=radio] + label:not(:has(> iam-card)).radio--tick:before,
    label:not(.tag):has(input[type=radio]):not(:has(> iam-card)).radio--tick:before {
      content: "\f00c";
      position: absolute;
      font-size: 1.5em;
      line-height: 1;
      color: var(--tick-colour);
      font-family: var(--fa-family-classic);
      background: none !important;
      border: none !important;
      outline: none !important;
      left: 0.25rem;
}
input[type=radio] + label:not(:has(> iam-card)).radio--tick:after,
    label:not(.tag):has(input[type=radio]):not(:has(> iam-card)).radio--tick:after {
      display: none;
}
@media (forced-colors: active) {
input:is([type=radio], [type=checkbox]):not(:checked) + label.radio--tick:not(:has(> iam-card)):before,
      label:has(input:is([type=radio], [type=checkbox]):not(:checked)).radio--tick:not(:has(> iam-card)):before {
        display: none;
}
}
    /*  multiple radio's together */
:is(div, fieldset):has(> :is(input[type=radio], input[type=checkbox]):nth-of-type(2)) label:not(.tag):not(:has(> iam-card)) {
      margin-bottom: 0rem;
}
fieldset:has(label > input:is([type=radio], [type=checkbox])) label {
      margin-bottom: 0 !important;
}
fieldset:has(label > input:is([type=radio], [type=checkbox])) {
      margin-bottom: 1.5rem;
}
input:is([type=radio], [type=checkbox]):checked + label,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):checked) {
      --tick-colour: var(--colour-info);
}
input:is([type=radio], [type=checkbox]):checked + label:before,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):checked):before {
      border-color: var(--colour-info);
}
input:is([type=radio], [type=checkbox]):checked + label:after,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):checked):after {
      display: inline-block;
}
input:is([type=radio], [type=checkbox]):checked + label iam-card,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):checked) iam-card {
      --colour: var(--colour, var(--colour-info));
}
input[type=checkbox]:not([disabled]):checked + label:before,
    label:not(.tag):has(input[type=checkbox]:not([disabled]):checked):before {
      background: var(--colour-info) !important;
}
input[type=checkbox]:checked + label:not(:has(> iam-card)):after,
    label:not(.tag):has(input[type=checkbox]:checked):after {
      content: "\f00c";
      position: absolute;
      font-size: var(--checkbox-tick-size, 1em);
      line-height: 1;
      color: var(--colour-primary-theme);
      font-family: var(--fa-family-classic);
      font-weight: bold;
      height: var(--checkbox-inner-size, 1.5rem);
      width: var(--checkbox-inner-size, 1.5rem);
      line-height: 1.625rem; /* 26 */
      background: none !important;
      border: none !important;
      outline: none !important;
      top: var(--checkbox-inner-top, 0.5rem);
      left: var(--checkbox-inner-left, var(--outline-width));
      text-align: center;
}
input[type=checkbox]:indeterminate + label:before,
    label:not(.tag):has(input[type=checkbox]:indeterminate):before {
      background: var(--colour-info) !important;
      border-color: var(--colour-info) !important;
}
input[type=checkbox]:indeterminate + label:after,
    label:not(.tag):has(input[type=checkbox]:indeterminate):after {
      content: "\f068";
      position: absolute;
      font-size: var(--checkbox-tick-size, 1em);
      line-height: 1;
      color: var(--colour-primary-theme);
      font-family: var(--fa-family-classic);
      font-weight: bold;
      height: var(--checkbox-inner-size, 1.5rem);
      width: var(--checkbox-inner-size, 1.5rem);
      line-height: 1.625rem; /* 26 */
      background: none !important;
      border: none !important;
      outline: none !important;
      top: var(--checkbox-inner-top, 0.5rem);
      left: var(--checkbox-inner-left, var(--outline-width));
      text-align: center;
}
input:is([type=radio], [type=checkbox]):checked:is(:focus, :hover, .focus) + label,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):checked:is(:focus, :hover, .focus)) {
      --tick-colour: var(--colour-info);
}
input:is([type=radio], [type=checkbox]):is(:focus, :hover, .focus) + label,
    input:is([type=radio], [type=checkbox]) + label.hover,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):is(:focus, :hover, .focus)) {
      --tick-colour: var(--colour-muted);
}
input:is([type=radio], [type=checkbox]):is(:focus, :hover, .focus) + label:before,
    input:is([type=radio], [type=checkbox]) + label.hover:before,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):is(:focus, :hover, .focus)):before {
      background: var(--colour-check-bg, light-dark(var(--colour-light), #444444));
      outline: var(--outline-width) solid light-dark(var(--colour-light), #444444);
}
input:is([type=radio], [type=checkbox]):is(:active, .active) + label,
    input:is([type=radio], [type=checkbox]) + label.active,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):is(:active, .active)) {
      --tick-colour: var(--colour-light);
}
input:is([type=radio], [type=checkbox]):is(:active, .active) + label:before,
    input:is([type=radio], [type=checkbox]) + label.active:before,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):is(:active, .active)):before {
      background: var(--colour-check-bg, #e0e0e0);
      outline: var(--outline-width) solid #e0e0e0;
}
    /*  Disabled */
input:is([type=radio], [type=checkbox]):disabled + label,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):disabled) {
      opacity: 0.4;
      cursor: not-allowed;
}
input:is([type=radio], [type=checkbox]):disabled + label > iam-card,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):disabled) > iam-card {
      pointer-events: none;
}
input:is([type=radio], [type=checkbox]):disabled + label:before,
    label:not(.tag):has(input:is([type=radio], [type=checkbox]):disabled):before {
      background-color: none !important;
      outline: none !important;
      border-color: var(--colour-primary) !important;
}
input[type=radio][disabled]:checked + label:after,
    label:not(.tag):has(input[type=radio][disabled]:checked):after {
      background-color: var(--colour-primary) !important;
}
input[type=checkbox][disabled]:checked + label:before,
    label:not(.tag):has(input[type=checkbox][disabled]:checked):before {
      background: #e0e0e0 !important;
      border-color: #e0e0e0 !important;
}
}
  /* #endregion */
  /* #region Conditional reveal */
.conditional {
    display: none;
}
input:checked + .conditional,
  input:checked + label + .conditional,
  label:has(:checked) + .conditional,
  .was-validated .conditional:has(input[required]:invalid),
  .was-validated .conditional:focus-within {
    display: block;
    clear: both;
}
input:not([class*=conditional-input-]):nth-of-type(1):checked ~ .conditional-1,
  input:not([class*=conditional-input-]):nth-of-type(2):checked ~ .conditional-2,
  input:not([class*=conditional-input-]):nth-of-type(3):checked ~ .conditional-3,
  input:not([class*=conditional-input-]):nth-of-type(4):checked ~ .conditional-4,
  input:not([class*=conditional-input-]):nth-of-type(5):checked ~ .conditional-5,
  input.conditional-input-1:checked ~ .conditional-1,
  input.conditional-input-2:checked ~ .conditional-2,
  input.conditional-input-3:checked ~ .conditional-3,
  input.conditional-input-4:checked ~ .conditional-4,
  input.conditional-input-5:checked ~ .conditional-5,
  label:has(input.conditional-input-1:checked) ~ .conditional-1,
  label:has(input.conditional-input-2:checked) ~ .conditional-2,
  label:has(input.conditional-input-3:checked) ~ .conditional-3,
  label:has(input.conditional-input-4:checked) ~ .conditional-4,
  label:has(input.conditional-input-5:checked) ~ .conditional-5 {
    display: block;
    clear: both;
}
  /* #endregion */
  /* #region file upload */
iam-fileupload input {
    display: none;
}
  /* #endregion */
  /* #region label with input field in */
:is(label:not(.tag), .label):has(:is(input, select, textarea)) {
    display: block;
    margin-bottom: 1.5rem;
    max-width: var(--input-max-width);
}
:is(label:not(.tag), .label):has(:is(input, select, textarea)) :is(input:not([type=range]), select) {
    margin-top: 0.5rem;
    margin-bottom: 0 !important;
}
:is(label:not(.tag), .label):has(:is(input, select, textarea)) :is(input, select) ~ span:not(:is(.suffix, .prefix, .invalid-feedback)),
  :is(label:not(.tag), .label):has(:is(input, select, textarea)) span:has(> :is(input, select)) ~ span:not(:is(.suffix, .prefix, .invalid-feedback)),
  :is(label:not(.tag), .label):has(:is(input, select, textarea)) .hint-text {
    all: initial;
    font-family: var(--font-body);
    color: var(--colour-body);
    margin-top: 0.5rem;
    display: block;
    line-height: 1.2;
}
:is(label:not(.tag), .label):has(:is(input, select, textarea)) .invalid-feedback {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
}
:is(label:not(.tag), .label):has(:is(input, select, textarea)) span:has(:is(input, select)) {
    display: flex;
    width: 100%;
}
:is(label:not(.tag), .label):has(:is(input, select, textarea)) :is(.suffix, .prefix):not(.mt-0) {
    margin: 0.5rem 0 0 0 !important;
}
.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select)),
  .was-validated fieldset:has(label input:is([type=radio], [type=checkbox]):invalid) {
    margin-bottom: 1.5rem;
}
.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select)):has(:is(:invalid, .is-invalid)):after,
  .was-validated fieldset:has(label input:is([type=radio], [type=checkbox]):invalid):has(:is(:invalid, .is-invalid)):after {
    content: "This field is required";
    color: var(--colour-danger);
    margin-top: 0.5rem;
    background-image: var(--icon-error);
    background-repeat: no-repeat;
    background-position: left top 1px;
    background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
    padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
    display: block;
    width: 100%;
    font-size: 1rem;
    line-height: 1.2;
}
.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select))[data-error]:has(:is(:invalid, .is-invalid)):after,
  .was-validated fieldset:has(label input:is([type=radio], [type=checkbox]):invalid)[data-error]:has(:is(:invalid, .is-invalid)):after {
    content: attr(data-error) !important;
}
.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select)).error-nowrap:after,
  .was-validated fieldset:has(label input:is([type=radio], [type=checkbox]):invalid).error-nowrap:after {
    white-space: nowrap;
}
  /* #endregion */
  /* #region input range */
input[type=range] {
    --track-size: 0.5rem;
    --track-colour: var(--colour-light);
    --thumb-colour: var(--colour-info);
    --thumb-size: 1.5rem;
    width: 100%;
    background: transparent;
    cursor: pointer;
    margin-top: 2rem;
    margin-bottom: 2rem;
    height: 2rem;
    border-radius: 50%;
    accent-color: var(--thumb-colour);
    -webkit-appearance: none;
    appearance: none;
}
*:has(> input[type=range]) {
    position: relative;
    padding-bottom: 6rem;
    max-width: var(--input-max-width);
}
label input[type=range] {
    position: absolute;
    top: 1.5rem;
    left: 0;
}
  /*  Track Styles */
input[type=range]::-webkit-slider-runnable-track {
    background: var(--track-colour);
    height: var(--track-size);
    border-radius: 0.5rem;
}
input[type=range]::-moz-range-track {
    background: var(--track-colour);
    height: var(--track-size);
    border-radius: 0.5rem;
}
  /*  Thumb Styles */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -0.5rem; /* Centers thumb on the track */
    background-color: var(--thumb-colour);
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    position: relative;
    z-index: 99;
    pointer-events: all;
}
input[type=range]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    position: relative;
    z-index: 99;
    pointer-events: all;
}
  /*  Focus Styles */
input[type=range]:focus {
    outline: none;
}
input[type=range]:hover::-webkit-slider-thumb,
  input[type=range]:focus::-webkit-slider-thumb {
    outline: 0.5rem solid rgba(30, 190, 231, 0.2);
}
input[type=range]:active::-webkit-slider-thumb {
    outline: 0.5rem solid rgba(30, 190, 231, 0.4);
}
input[type=range]:hover::-moz-range-thumb,
  input[type=range]:focus::-moz-range-thumb {
    outline: 0.5rem solid rgba(30, 190, 231, 0.2);
}
input[type=range]:focus::-moz-range-thumb {
    outline: 0.5rem solid rgba(30, 190, 231, 0.4);
}
iam-slider input::-webkit-outer-spin-button,
  iam-slider input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
  /* #endregion */
  /* #region Date and time fields */
:is(input[type=date], input[type=datetime-local], input[type=year], input[type=month], input[type=week], input[type=time]) {
    position: relative;
    margin-right: -3rem;
    padding-right: 3rem !important;
    background-position: right 4rem center;
    border-radius: 0.5rem !important;
}
::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    order: 3;
    z-index: 98;
}
::-webkit-datetime-edit {
    position: relative;
    z-index: 99;
    max-width: fit-content;
}
  /* #endregion */
  /* #region Input wrapper */
.input__wrapper {
    margin-top: 0.5rem;
    display: block;
    position: relative;
}
.input__wrapper input {
    margin: 0 !important;
}
  /* #endregion */
}
@layer elements {
  /* #region toggle */
.toggle {
    --outline-width: 0.25rem !important;
    padding-left: 3.25rem !important;
    max-width: fit-content !important;
}
.toggle:before {
    border-radius: 2rem !important;
    background-color: var(--colour-canvas) !important;
    border: 2px solid var(--colour-heading) !important;
    transition: 0.4s !important;
    width: 2.5rem !important;
    left: 0.25rem !important;
}
label.toggle:has(:is(input[type=checkbox], input[type=radio]):not([disabled]):checked):before {
    background: var(--colour-primary-theme) !important;
}
.toggle:after {
    position: absolute !important;
    content: "" !important;
    display: block !important;
    top: 0.5rem !important;
    height: 1em !important;
    width: 1em !important;
    left: 0.25em !important;
    background-color: var(--colour-heading) !important;
    -webkit-transition: 0.4s !important;
    transition: 0.4s !important;
    margin: 0.25em !important;
    border-radius: 0.5em;
}
label.toggle:has(:is(input[type=checkbox], input[type=radio]):not([disabled]):not([disabled]):checked):after {
    background: var(--colour-primary-theme) !important;
    background-color: white !important;
    -webkit-transform: translateX(1rem) !important;
    -ms-transform: translateX(1rem) !important;
    transform: translateX(1rem) !important;
}
  /* #endregion */
label.toggle:has(+ label.toggle) {
    margin-bottom: 0 !important;
}
}
@layer elements {
:is(.badge, .tag) {
    font-size: 1rem;
    line-height: 1.625rem; /* 26 */
    border: none;
    margin: 0;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    max-width: fit-content;
    color: #262626;
    position: relative;
    background: var(--wider-colour, var(--wider-colour-1));
    margin-bottom: 0.5rem;
&:has(+ :is(.badge, .tag)) {
      margin-right: 0.375rem; /* 6 */
}
&:empty {
      display: none;
}
&:is(.bg-primary, .bg-dark, .bg-danger) {
      color: #fcfcfc !important;
}
}
.badge {
    border-radius: 0.375rem; /* 6 */
    padding: 0 0.5rem;
}
.badge--rounded {
    border-radius: 1rem;
    min-width: 1.625rem;
    padding: 0;
}
.tag {
    border-radius: 1rem;
    padding: 0 1rem;
i {
      margin-left: 0.5rem;
}
&:is(:hover, :focus, .hover, :focus-within, :focus-visible) {
      background: color-mix(in oklab, var(--colour), #000000 5%);
}
&:is(:active, .active) {
      background: color-mix(in oklab, var(--colour), #000000 10%);
}
&:has(input:disabled),
    &:disabled {
      background: var(--wider-colour-1) !important;
      color: #99adb1 !important;
}
&:has([readonly]) {
      pointer-events: none;
}
&:has([readonly]):after {
      display: none !important;
}
}
iam-multiselect:not(:defined) .tag,
  .tag.tag--toggle {
    background: var(--colour-canvas);
    outline: 1px solid var(--colour-border);
}
.tag.tag--toggle {
&:after {
      display: none;
}
&:is(:hover, :focus) {
      background: #eeeeee;
}
&:has(:hover, :focus) {
      background: #eeeeee !important;
}
&:is(:active) {
      background: #e0e0e0;
}
&:has(input:checked),
    &.selected,
    &[aria-pressed=true] {
      background: #e9f9fd !important;
      outline: 1px solid #1ebee6 !important;
}
}
  /* Quick fix for badges in buttons */
.btn :is(.badge, .tag) {
    position: relative;
    top: -1px;
}
}
@layer elements {
.feature {
    --padding: 1rem;
    background-color: var(--colour-canvas-2);
    border: 1px solid var(--colour-muted);
    border-radius: 0.5rem;
    padding: var(--padding);
    margin-bottom: 1.5rem;
    display: inline-block;
    min-height: 4.75rem;
    width: 100%;
&:not(.d-flex) > strong:first-child {
      display: block;
      padding-bottom: 0.2em;
}
&.d-flex {
      gap: 0.5rem;
}
}
.admin-panel .feature {
    --padding: 0rem;
    border: 0;
    margin-top: 0.5rem;
    border-radius: 0;
&:has(+ .feature) {
      border-bottom: 1px solid var(--colour-border);
      padding-bottom: 1rem;
      margin-bottom: 1rem;
      min-height: 3rem;
}
}
.feature[class*=fa-] {
    padding-left: calc(var(--padding) + 3rem);
    position: relative;
&:before {
      position: absolute;
      inset: var(--padding);
      content: var(--fa);
      font-family: "Font Awesome 7 Pro";
      display: block;
      background-color: var(--colour, var(--colour-success));
      color: var(--colour-primary-theme);
      border-radius: 50%;
      padding: 0;
      height: 2rem;
      line-height: 2rem;
      width: 2rem;
      text-align: center;
}
}
:is(.feature--danger, .feature--warning, .feature--success, .feature--complete, .feature--loading, .feature--missing) {
    padding-left: 6.5rem;
    position: relative;
    overflow: hidden;
&:before {
      content: "";
      position: absolute;
      inset: 0;
      display: block;
      font-weight: 900;
      font-size: 2rem;
      /* border-radius: 50%; */
      width: 4.8rem; /* TODO unmagic this number, should be 1 column width */
      padding: 0;
      height: 100%;
      text-align: center;
      color: var(--colour-white);
      border-right: 1px solid var(--colour-muted);
}
&:after {
      position: absolute;
      top: calc(50% - 0.75rem);
      left: 1.65rem;
      font-family: "Font Awesome 7 Pro";
      display: block;
      font-weight: 900;
      font-size: 1.5rem;
      width: 1.5rem;
      padding: 0;
      height: 1.5rem;
      line-height: 1;
      text-align: center;
      color: var(--colour-white);
      z-index: 2;
}
}
.feature--danger {
&:before {
      background: var(--colour, var(--colour-danger));
}
&:after {
      content: "\f06a";
}
}
.feature--warning {
&:before {
      background: var(--colour, var(--colour-warning));
}
&:after {
      content: "\f071";
}
}
:is(.feature--success, .feature--success) {
&:before {
      background: var(--colour, var(--colour-complete));
}
&:after {
      content: "\f058";
}
}
.feature--loading {
&:before {
      background: var(--colour, var(--colour-border));
}
&:after {
      content: "\f3f4";
      color: var(--colour-primary-theme);
      animation: spin 1s infinite steps(10);
}
}
.feature--missing {
&:before {
      background: var(--colour, var(--colour-border));
}
&:after {
      content: "\f059";
      color: var(--colour-primary-theme);
}
}
.feature--error {
    background: var(--colour, var(--colour-danger));
    border: none;
    color-scheme: light;
    --colour-heading: var(--colour-white);
    --colour-body: var(--colour-white);
    --colour-underline: var(--colour-white);
    --colour-link: var(--colour-white);
    color: var(--colour-white);
    padding-right: 6.5rem;
    position: relative;
button {
      position: absolute !important;
      top: 50%;
      right: 0;
      left: auto;
      translate: 0 -50%;
}
}
}
@layer elements {
details {
    display: block;
&:not([open]) {
      padding-bottom: 2rem;
}
summary {
      font-size: 1.125rem; /* 18/16 */
      line-height: 1.3125rem; /* 21 */
      font-weight: normal;
      color: var(--colour-heading);
      display: block;
&:after {
        content: "\f055";
        display: inline-block;
        margin-left: 0.5em;
        line-height: 1em;
        font-size: 1em;
        font-family: var(--fa-family-classic);
}
}
&[open] summary {
      margin-bottom: 1rem;
}
}
iam-accordion details {
    --inline-padding: 0.125rem;
    --border-radius: 0.5rem 0.5rem 0 0;
    --icon-top: 0.875rem; /* 14/16 */
    --line-height: 1.5rem;
    --block-padding: 0.875rem; /* 14/16 */
*:not(iam-tabs) > &:not([open]) {
      padding-bottom: 2.625rem; /* 42 */
}
summary {
      border-bottom: 1px solid var(--colour-border);
      padding-left: 0;
      padding-inline-end: calc(var(--inline-padding) + 1.6875rem + 0.75rem);
      padding-block: var(--block-padding) !important;
      position: relative;
      color: var(--colour-heading);
&:is(:hover, :focus-visible) {
        background: var(--colour-light);
        border-radius: var(--border-radius);
}
h3,
      .h3 {
        all: unset !important;
}
&::after {
        display: none;
}
*:is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
        max-width: 100%;
        padding: 0;
        margin: 0;
&:after {
          content: "\f055";
          position: absolute;
          font-size: 1.5rem;
          top: calc(var(--line-height) / 2 - 0.75rem);
          right: var(--inline-padding);
          width: 1.5rem;
          height: 1.5rem;
          line-height: 1.5rem;
          font-weight: 300;
          font-family: var(--fa-family-classic);
}
}
*:is(h4, .h4, h2, .h2):after {
        top: calc(var(--line-height) / 2 + var(--inline-padding) - 0.875rem);
}
.badge {
        margin: 0 0 0 0.5rem;
}
}
&[open] summary {
      margin-bottom: 2rem;
}
&[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
&:after {
        content: "\f056";
        font-weight: 900;
}
}
summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label)) {
      /*  h3 purposelessly missed out */
      font-family: var(--font-heading);
      font-style: normal;
      color: var(--colour-heading);
      clear: both;
      display: block;
[class*=fa-] {
        margin-right: 0.5rem;
}
      font-size: 1.125rem; /* 18/16 */
      line-height: var(--line-height);
      padding-bottom: var(--heading-pb);
      font-weight: 700;
      max-width: 100%;
&:after {
        content: "\f055";
        display: block;
        position: absolute;
        font-size: 1.5rem;
        top: calc(var(--line-height) / 2 - 0.75rem + 0.875rem);
        right: var(--inline-padding);
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        line-height: 1.5rem;
        font-weight: 300;
        font-family: var(--fa-family-classic);
}
}
&[open] summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6)) {
&:after {
        content: "\f056";
}
}
}
@media screen and (min-width: 36em) {
iam-accordion details {
      --inline-padding: 0.875rem; /* 14/16 */
      --block-padding: 0.875rem; /* 14/16 */
      --icon-top: 1.5rem;
      --line-height: 1.5rem;
summary {
&:has(.h2, h2, .h4, h4) {
          --inline-padding: 1.375rem; /* 22 */
          --block-padding: 1.375rem; /* 22 */
}
}
summary {
&:has(.h2, h2) {
          --line-height: 3.25rem; /* 52 */
}
&:has(.h4, h4) {
          --line-height: 1.875rem; /* 30 */
}
}
}
}
dialog iam-accordion details {
    --inline-padding: var(--dialog-padding);
    margin-inline: calc(var(--dialog-padding) * -1);
    padding-inline: var(--dialog-padding);
    width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
&:has(summary:is(:hover, :focus-visible)),
    &[open] {
      background: var(--colour-light);
      overflow: hidden;
}
    /*  Fix the border bottom issue */
&:has(+ details[open]),
    &:has(summary:is(:hover, :focus-visible)),
    &:has(+ details summary:is(:hover, :focus-visible)),
    &[open] {
      border-bottom: 1px solid var(--colour-border);
}
&:has(+ details[open]) summary,
    &:has(summary:is(:hover, :focus-visible)) summary,
    &:has(+ details summary:is(:hover, :focus-visible)) summary,
    &[open] summary {
      border-bottom: 0;
}
&[open] summary {
      margin-bottom: 1rem;
}
summary {
      --inline-padding: 0;
}
&::before {
      content: "";
}
}
@media screen and (min-width: 36em) {
dialog iam-accordion details {
      --dialog-padding: 2rem;
      margin-inline: calc(var(--dialog-padding) * -1);
      padding-inline: var(--dialog-padding);
}
}
  /* #region grid fix */
iam-tabs:has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-])) {
    display: block !important;
}
details[open]:has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-]))::details-content {
    display: grid !important;
    grid-template-rows: auto !important;
    grid-template-columns: [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end] !important;
    column-gap: var(--gap) !important;
}
  /* #endregion */
}
@layer elements {
:is(label, .label):has(progress) {
    position: relative;
    max-width: var(--input-max-width);
    margin-bottom: 2rem;
    padding-right: 3rem;
}
progress {
    border-radius: 0.3125rem; /* 5 */
    display: block;
    margin-top: 0.5rem;
    width: calc(100% + 3rem);
    height: 0.5rem;
    margin-left: 0;
    border: none;
}
label[data-percent]:not(:has(strong)):has(progress):before {
    content: attr(data-percent) "%";
}
label[data-percent]:not(:has(strong)):has(progress):before,
  label[data-percent]:has(progress) strong {
    vertical-align: 0;
    line-height: 1;
    position: absolute;
    top: auto;
    left: auto;
    right: 0;
    bottom: 1rem;
    color: var(--colour-heading);
    font-weight: bold;
}
progress[data-progress]:before {
    content: attr(data-progress) "%";
}
progress::-webkit-progress-bar {
    background-color: var(--colour-light);
    border-radius: var(--border-radius, 0.3125rem);
}
progress::-webkit-progress-value {
    background-color: var(--colour, var(--colour-info));
    border-radius: var(--border-radius, 0.3125rem);
}
  /* #region inline progress */
:is(label, .label):has(.progress--inline) {
    font-size: 1rem;
    color: var(--colour-body);
}
:is(label, .label):has(.progress--inline):before {
    bottom: -0.25em;
}
:is(label, .label):has(.progress--inline) progress.progress--inline {
    width: 100%;
}
  /* #endregion */
  /* #region Circular */
label:has(.progress--circular) {
    --max-width: 12.5rem;
    --pt: 5.625rem;
    --pt-percent: 45%;
    --bar-width: 1.25rem;
    --value-fs: 3rem;
    --value-pb: 2rem;
    --label-fs: 1.125rem; /* 18/16 */
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin-bottom: 2rem;
    padding-right: 0;
    aspect-ratio: 1/1;
    height: auto;
    width: 100%;
    text-align: center;
    padding-top: min(var(--pt-percent) + var(--value-pb), var(--pt) + var(--value-pb));
    padding-inline: var(--value-pb);
    display: inline-block;
    font-size: var(--label-fs);
    line-height: 1;
}
label:has(.progress--circular.progress--md) {
    --max-width: 10.625rem;
    --pt: 4.78125rem;
    --pt-percent: 45%;
    --bar-width: 1.25rem;
    --value-pb: 1.5rem;
}
label:has(.progress--circular.progress--sm) {
    --max-width: 7.5rem; /* 120 */
    --pt: 3.375rem;
    --pt-percent: 45%;
    --bar-width: 1rem;
    --value-fs: 1.5rem;
    --value-pb: 1rem;
    --label-fs: 0.75rem;
}
  /*  Responsive-ish settings */
*:has(> label > .progress--circular) {
    container-type: inline-size;
}
@container (width <= 10.625rem) {
label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
      --max-width: 10.625rem;
      --pt: 4.78125rem;
      --pt-percent: 45%;
      --bar-width: 1.25rem;
      --value-pb: 1.5rem;
}
}
@container (width <= 7.5rem) {
label:has(.progress--circular:not(.progress--sm):not(.progress--md)) {
      --max-width: 7.5rem; /* 120 */
      --pt: 3.375rem;
      --pt-percent: 45%;
      --bar-width: 1rem;
      --value-fs: 1.5rem;
      --value-pb: 1rem;
      --label-fs: 0.75rem;
}
}
label:has(.progress--circular) + label:has(.progress--circular) {
    margin-left: 2rem;
}
  /*  Needed to allow it to be animated */
@property --progress {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}
.progress--circular {
    --progress-shown: var(--progress, 0%);
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    margin: 0;
    background: red;
    background: conic-gradient(var(--colour, var(--colour-info)) var(--progress-shown), var(--colour-light) var(--progress-shown) calc(100% - var(--progress-shown)));
    height: 100%;
    width: 100%;
    border-radius: 50%;
    box-shadow: 0.1875rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.2);
    transition: --progress 1s;
}
.progress--circular::-webkit-progress-bar,
  .progress--circular::-webkit-progress-value {
    opacity: 0;
}
.progress--circular::-moz-progress-bar {
    opacity: 0;
}
label[data-percent]:not(:has(strong)):has(.progress--circular):before,
  label[data-percent]:has(.progress--circular) strong {
    top: var(--pt-percent);
    left: 50%;
    right: auto;
    bottom: auto;
    color: var(--colour-heading);
    transform: translate(-50%, -50%);
    font-size: var(--value-fs);
    line-height: 1;
    z-index: 2;
    text-indent: 0;
}
label:has(.progress--circular):after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    width: calc(100% - var(--bar-width) - var(--bar-width));
    background-color: var(--colour-canvas);
    border-radius: 50%;
}
  /* #endregion */
}
@layer elements {
pre,
  code,
  kbd,
  samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1rem;
}
pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: 0.875rem; /* 14/16 */
    /* Account for some code outputs that place code tags in pre tags */
code {
      font-size: inherit;
      color: inherit;
      word-break: normal;
}
}
code {
    font-size: 0.875rem; /* 14/16 */
    color: #d63384;
    word-wrap: break-word;
}
  /* Streamline the style when inside anchors to avoid broken underline and more */
a > code {
    color: inherit;
}
kbd {
    padding: 0.1875rem 0.375rem;
    font-size: 0.875rem; /* 14/16 */
kbd {
      padding: 0;
      font-size: 1rem;
      font-weight: normal;
}
}
}
@layer elements {
.highlight {
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    position: relative;
& > *:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
}
&:has(> img) {
      padding-right: 13rem;
      position: relative;
      min-height: 8rem;
      align-items: center;
}
& > img {
      width: 16rem;
      position: absolute;
      top: auto;
      left: auto;
      bottom: 0;
      right: 0;
      margin-right: -3rem;
      margin-bottom: -4rem !important;
}
p:last-child, p:has(+ img:last-child) {
      padding-bottom: 0;
}
& > iam-tooltip:empty:first-child {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
}
& > iam-tooltip:has(i:first-child:last-child) {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
}
}
.highlight:is([class*=bg-], [class*=colour-], [class*=colour-]) {
    --highlight-colour: var(--colour, var(--bg-colour,));
    --tint: 80%;
&:not(.bg-primary, .gradient-primary) {
      --colour-heading: var(--colour-primary-theme);
      --colour-body: var(--colour-primary-theme);
      color: var(--colour-primary-theme);
      background-color: color-mix(in oklab, var(--highlight-colour), var(--colour-mix, #FCFCFC) var(--tint)) !important;
& > * {
        color-scheme: light;
}
}
&:not(.bg-primary, .gradient-primary, .highlight--raised) {
      border: 1px solid var(--highlight-colour);
}
}
.highlight--raised {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
    background-color: var(--colour-canvas-2);
}
}
@layer elements {
  /* #region dropdown wrapper - used for components */
.dropdown__wrapper {
    position: relative;
    display: block;
label {
      position: relative;
}
input {
      padding-right: 3rem;
}
label:after,
    .hint-text {
      position: absolute;
      top: 100%;
}
label[for=use]:after {
      top: var(--checkbox-inner-top, 0.5rem);
}
}
.was-validated .dropdown__wrapper label:has(:is(input:not([type=radio]):not([type=checkbox]), select)),
  .dropdown__wrapper.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select)) {
    /*margin-bottom: 2.5rem;*/
input {
      background: none !important;
}
&:has(:invalid, .is-invalid) .hint-text {
      display: none;
}
}
.dark-theme .dropdown__wrapper datalist {
    color-scheme: dark;
}
.dropdown__wrapper:is(:focus-within, :has(*:active), :active) datalist {
    display: block;
&:empty {
      display: block !important;
}
}
  /* #endregion */
  /* #region Dropdown */
:is(.dropdown, datalist, [popover]),
  select::picker(select) {
    border-top: none;
    border: none !important;
    font-size: 1rem;
    background: var(--dropdown-bg);
    margin-block: var(--dropdown-margin-block);
    padding: var(--dropdown-padding);
    border-radius: var(--dropdown-border-radius);
    box-shadow: var(--dropdown-box-shadow);
}
:is(.dropdown, datalist):empty {
    display: none !important;
}
:is(.dropdown, datalist) {
    overflow-y: auto;
    width: 100%;
    max-width: var(--input-max-width, 50rem);
    z-index: 100;
    max-height: 25rem;
    overflow: auto;
&:before {
      display: none;
}
}
datalist {
    position: absolute;
    top: 100%;
    left: 0;
&:has(> .js-hide):not(:has(> *:not(.js-hide))):before,
    &:empty:before {
      content: "No results found"; /* TODO Allow for text to be overwritten */
      background-color: white;
      padding: 1rem 0.5rem;
      color: var(--colour-primary) !important;
      font-weight: inherit !important;
      font-family: inherit !important;
      font-size: 1rem !important;
      line-height: 1.1875rem !important;
      padding-block: var(--menu-item-padding, 1rem) !important;
      display: block;
}
}
[popover] {
    top: calc(anchor(top) + anchor-size(height));
    left: anchor(left);
    bottom: auto;
    right: auto;
    border: unset !important;
}
  /* #endregion */
  /* #region Dropdown Option */
:is(.dropdown, datalist, select) option,
  .dropdown__option:not([slot=checked]) {
    background: var(--dropdown-bg);
    cursor: pointer;
    background: unset !important;
    border: unset !important;
    color: var(--option-color) !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    margin: 0;
    padding: var(--option-padding) !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    border-radius: var(--option-border-radius) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: clip;
    outline: none;
&:not(:last-child) {
      margin: 0 0 0.25rem 0 !important;
}
&:is(:hover, :focus) {
      background: var(--option-bg-hover) !important;
      color: var(--option-color-hover) !important;
}
&:has(:is(:hover, :focus)) {
      background: var(--option-bg-hover) !important;
      color: var(--option-color-hover) !important;
}
&:is(:active, .active, :checked) {
      border-left: var(--option-border-left-active) !important;
      padding-left: calc(var(--option-padding) - 4px) !important;
      background: var(--option-bg-active) !important;
}
&:has(:is(:active, .active, :checked)) {
      border-left: var(--option-border-left-active) !important;
      padding-left: calc(var(--option-padding) - 4px) !important;
      background: var(--option-bg-active) !important;
}
&:has(:is(:active, .active, :checked)) {
      border-left: var(--option-border-left-active) !important;
      background: var(--option-bg-active) !important;
}
&:after {
      content: attr(data-after);
}
}
:is(.dropdown, datalist, select, [popover]) hr {
    height: 1px !important;
    background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
    width: 100%;
    margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
    padding: 0 !important;
}
:is(.dropdown, datalist, select, [popover]) *:last-child {
    margin-bottom: 0;
}
:is(.dropdown, datalist, select, [popover]) :is(p):last-child {
    padding-bottom: 0;
}
  /* #endregion */
  /* #region Dropdown headings */
:is(.dropdown, datalist, [popover]) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-size: 1rem !important;
    line-height: 1.1875rem !important;
    padding-bottom: 0.5rem;
    font-weight: 700;
}
  /* #endregion */
  /* #region Needed for the component files */
:is(iam-tag, iam-multiselect):has(label:not([slot=checked])) {
    --display-panel: block;
}
:is(iam-tag, iam-multiselect):has(label[slot=checked]) {
    --display-button: block;
}
:is(iam-tag, iam-multiselect)[data-single] .tag[slot=checked],
  :is(iam-tag, iam-multiselect)[data-single] .tag[slot=checked] * {
    pointer-events: none !important;
}
@container style(--theme: dark) {
:host :is(.tag, .badge):not([slot=checked]) {
      color: var(--colour-heading);
}
}
  /* #endregion */
  /* #region Indivitual options */
.dropdown__option[slot=checked] {
    order: var(--order, 1);
}
  /* #endregion */
}
.spinner {
  font-size: var(--spinner-size);
  display: block;
  margin-inline: auto;
  position: relative;
  width: var(--spinner-size);
  height: var(--spinner-size);
  color: var(--colour-heading);
&:before {
    font-family: var(--fa-family-classic);
    content: "\f3f4";
    position: absolute;
    font-weight: 900;
    color: var(--colour-heading);
    animation: spin 1.5s infinite steps(10);
    font-size: 1em;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;
    font-weight: normal;
}
}
@layer elements {
.illustration--sm {
    width: 100%;
    max-width: 6.25rem;
}
.illustration--md {
    width: 100%;
    max-width: 12.5rem;
}
}
/*  Components */
@layer components {
iam-nav {
    display: block;
    padding: var(--container-padding);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    max-width: 100%;
    margin-inline: auto;
}
iam-nav .brand {
    font-size: 3rem;
    height: 3rem;
    padding: 0;
    text-decoration: none;
    min-width: min(var(--svg-width), 14rem);
}
@media screen and (min-width: 62em) {
iam-nav {
      padding-inline: max(var(--padding-inline), (100% - var(--container-max-width)) / 2 + var(--padding-inline)) !important;
}
}
@media (scripting: enabled) {
iam-nav:not(:defined) > *:not([slot=logo]) {
      display: none;
}
iam-nav:not(:defined):not(:target) > *:not(.brand) {
      display: none;
}
}
@media screen and (scripting: enabled) and (min-width: 62em) {
iam-nav:not(:defined):has([slot=secondary]) {
      padding-top: 4rem; /* 64 */
}
}
}
@layer components {
iam-banner {
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
iam-banner:not([class*=bg-]) {
    --colour-heading: var(--colour-primary-theme);
    --colour-body: var(--colour-primary-theme);
    color: var(--colour-primary-theme);
    color-scheme: light !important;
    background-color: var(--colour-canvas-2) !important;
    color: var(--colour-primary-theme) !important;
}
iam-banner [slot=buttons] {
    margin: 0 !important;
}
}
@layer components {
iam-card:not(:defined) {
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    background: var(--colour-canvas-2);
    padding: 0.5rem;
}
  /* #region Cards */
iam-card:has([slot=footer]) {
    --card-footer-bottom-padding: 1.5rem;
}
.card:not(:defined) {
    box-shadow: var(--card-box-shadow);
    border-radius: var(--card-border-radius);
    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
}
.row [class*=col]:has(label:first-child:last-child .card:defined:first-child:last-child,
  button:first-child:last-child .card:defined:first-child:last-child,
  a:first-child:last-child .card:defined:first-child:last-child) {
    display: flex;
}
iam-card:has([type=checkbox]:checked) {
    --hover-outline-colour: var(--colour-info);
    --outline-colour: var(--colour-info);
}
label:has(.card) {
    padding: 0 !important;
    margin-right: 0 !important;
}
label:has(.card):before, label:has(.card):after {
    display: none !important;
}
label:has(.card) .optional-text {
    display: none;
}
iam-filter-card:not(:has(i)) {
    border-left: 0.75rem solid var(--colour, var(--colour-primary));
}
.card .badge:not([class*=bg-]):not([class*=wider-colour-]) {
    background-color: var(--colour-canvas);
    outline: 1px solid var(--colour-light);
}
a[target=_blank] .card {
    --icon: var(--icon-new-tab);
}
  /* #endregion */
}
iam-header {
  --padding-top: 2.75rem;
  --padding-bottom: 2rem;
  display: block;
  margin-bottom: 2rem;
}
iam-header:not(:defined) {
  --colour-heading: var(--colour-white);
  --colour-body: var(--colour-white);
  --colour-underline: var(--colour-white);
  color-scheme: dark;
  color: var(--colour-white);
  margin-left: auto;
  margin-right: auto;
  grid-column: full-width !important;
  padding: var(--padding-top) var(--container-padding-x) var(--padding-bottom) var(--container-padding-x);
  width: 100%;
  max-width: var(--max-width);
  background-color: var(--colour-primary-theme);
}
iam-header:not(:defined) hr[slot=toolbox] {
  display: none !important;
}
@layer components {
iam-carousel {
    --button-height: 3rem;
    --marker-height: 1.25rem;
    --marker-mb: 1rem;
    padding-inline: 0.5rem;
    margin-inline: -0.5rem;
    padding-bottom: calc(1rem + var(--button-height) + var(--marker-height) + var(--marker-mb));
    margin-bottom: var(--carousel-mb, 2rem);
    scroll-padding: 0.5rem;
    display: grid;
    grid-auto-flow: column;
    gap: var(--gap);
    anchor-scope: all;
    anchor-name: --carousel;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-marker-group: before;
    scroll-behavior: smooth;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / var(--count, 1) - var(--gap) * (var(--count, 1) - 1) / var(--count, 1));
}
  /* #region items */
iam-carousel > * {
    container-type: scroll-state;
    grid-column: auto !important;
    min-height: 100%;
    margin: 0;
    scroll-snap-align: start;
}
  /* #endregion */
  /* #region left and right buttons */
iam-carousel::scroll-button(*) {
    cursor: pointer;
    position-anchor: --carousel;
    background: none;
    border: none;
    font-size: 1rem !important;
    padding: 0 !important;
    margin-bottom: 0.5rem;
    text-align: center;
    width: var(--button-height);
    height: var(--button-height);
    align-content: center;
    line-height: 1 !important;
    overflow: hidden;
    font-size: 1rem;
    font-family: "Font Awesome 7 Pro" !important;
    display: none;
    position: absolute;
    position-area: block-end center;
    border-radius: 50%;
    margin-top: calc((var(--button-height) + var(--marker-height) + var(--marker-mb)) * -1);
}
iam-carousel::scroll-button(left) {
    display: inline-block;
    content: "\f053"/"Scroll left" !important;
    margin-left: calc(var(--button-height) * -1) !important;
}
iam-carousel::scroll-button(right) {
    display: inline-block;
    content: "\f054"/"Scroll right" !important;
    margin-right: calc(var(--button-height) * -1) !important;
}
iam-carousel::scroll-button(*):disabled {
    pointer-events: none;
}
iam-carousel::scroll-button(*):is(:hover, :focus-visible) {
    outline-offset: 5px;
    background-color: var(--colour-light);
    border-color: var(--colour);
}
  /* #endregion */
  /* #region left and right buttons on desktop */
@container (min-width: 62em) {
main > iam-carousel,
    main > .container > iam-carousel {
      --button-height: 0rem;
}
main > iam-carousel::scroll-button(*),
    main > .container > iam-carousel::scroll-button(*) {
      --button-height: 3rem;
      margin-top: -1rem;
}
main > iam-carousel::scroll-button(left),
    main > .container > iam-carousel::scroll-button(left) {
      position-area: center inline-start;
}
main > iam-carousel::scroll-button(right),
    main > .container > iam-carousel::scroll-button(right) {
      position-area: center inline-end;
}
}
  /* #endregion */
@container style(--hide-carousel-btns) {
iam-carousel {
      --button-height: 0rem;
}
iam-carousel::scroll-button(*) {
      display: none !important;
}
}
  /* #region markers */
iam-carousel::scroll-marker-group {
    position: absolute;
    position-anchor: --carousel;
    container: marker-group/inline-size;
    display: grid;
    place-content: safe center;
    box-sizing: border-box;
    border-radius: var(--radius-round);
    scrollbar-width: none;
    scroll-behavior: smooth;
    inline-size: 100%;
    max-inline-size: 100cqi;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    grid-auto-columns: var(--marker-height); /* Magic number */
    grid-auto-rows: var(--marker-height); /* Magic number */
    overflow-x: auto;
    top: auto;
    bottom: anchor(bottom);
    grid-auto-flow: column;
    justify-items: center;
    align-items: center;
    padding-block: 0;
    margin-bottom: var(--marker-mb);
    left: anchor(center);
    transform: translate(-50%, 0);
}
iam-carousel > *::scroll-marker {
    content: "";
    scroll-snap-align: start;
    cursor: pointer;
    text-decoration: none;
    interactivity: auto;
    width: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #a5ecfd; /* Magic colour */
    cursor: pointer;
    border: none;
}
iam-carousel > *::scroll-marker:target-current {
    border-color: var(--colour-info);
    background: var(--colour-info);
    width: 1rem;
    height: 1rem;
    min-height: 1rem;
    margin-inline: 0.125rem; /* Magic number */
}
  /* #endregion */
  /* #region count the number of items and set variables to hide the controls/markers */
iam-carousel:has(> *:first-child:last-child) {
    --hide-markers: 1;
}
@container (min-width: 30em) and (max-width: 63em) {
iam-carousel { /* TODO work out this number - shoule be 6 columns */
}
iam-carousel[data-smcols="2"]:not(:has(> *:nth-child(3))) {
      --hide-markers: 1;
      --marker-height: 0rem;
      --marker-mb: 0rem;
}
iam-carousel[data-smcols="3"]:not(:has(> *:nth-child(4))) {
      --hide-markers: 1;
      --marker-height: 0rem;
      --marker-mb: 0rem;
}
}
@container (min-width: 62em) {
iam-carousel[data-mdcols="2"]:not(:has(> *:nth-child(3))) {
      --hide-buttons: 1;
      --hide-markers: 1;
      --button-height: 0rem;
      --marker-height: 0rem;
      --marker-mb: 0rem;
}
iam-carousel[data-mdcols="3"]:not(:has(> *:nth-child(4))) {
      --hide-buttons: 1;
      --hide-markers: 1;
      --button-height: 0rem;
      --marker-height: 0rem;
      --marker-mb: 0rem;
}
}
  /* #endregion */
  /* #region change the item count via queries */
iam-carousel[data-xscols="2"] {
    --count: 2;
}
iam-carousel[data-xscols="3"] {
    --count: 3;
}
@container (min-width: 30em) and (max-width: 62em) {
iam-carousel[data-smcols="2"] {
      --count: 2;
}
iam-carousel[data-smcols="3"] {
      --count: 3;
}
}
@container (min-width: 62em) {
iam-carousel[data-mdcols="2"] {
      --count: 2;
}
iam-carousel[data-mdcols="3"] {
      --count: 3;
}
iam-carousel[data-mdcols="4"] {
      --count: 4;
}
}
  /* #endregion */
  /* #region carousel responsive to the count number variable */
@container style(--count) {
iam-carousel > * {
      scroll-snap-align: unset;
      scroll-snap-stop: unset;
}
iam-carousel > *::scroll-marker {
      display: none;
}
}
@container style(--count: 2) {
iam-carousel > *:nth-child(2n+1) {
      scroll-snap-align: start;
      scroll-snap-stop: always;
}
iam-carousel > *:nth-child(2n+1)::scroll-marker {
      display: block;
}
}
@container style(--count: 3) {
iam-carousel > *:nth-child(3n+1) {
      scroll-snap-align: start;
      scroll-snap-stop: always;
}
iam-carousel > *:nth-child(3n+1)::scroll-marker {
      display: block;
}
}
@container style(--count: 4) {
iam-carousel > *:nth-child(4n+1) {
      scroll-snap-align: start;
      scroll-snap-stop: always;
}
iam-carousel > *:nth-child(4n+1)::scroll-marker {
      display: block;
}
}
  /* #endregion */
  /* #region hide controls/markers */
@container style(--hide-buttons) {
iam-carousel {
      --button-height: 0rem;
}
iam-carousel::scroll-button(*) {
      display: none;
}
}
@container style(--hide-markers) {
iam-carousel {
      --marker-height: 0rem;
      --marker-mb: 0rem;
}
iam-carousel::scroll-marker-group {
      display: none;
}
}
  /* #endregion */
  /* #region carousel inside of admin panel */
.admin-panel {
    --hide-buttons: 1;
}
.admin-panel:has(iam-carousel) {
    container-type: inline-size;
}
.admin-panel iam-carousel {
    --button-height: 0rem;
    --marker-mb: 0rem;
    margin-bottom: 0;
}
  /* #endregion */
iam-carousel::part(carousel__controls) {
    position-anchor: --carousel;
    top: auto;
    left: anchor(left);
    right: anchor(right);
    bottom: anchor(bottom);
}
@supports not selector(::scroll-marker-group) {
iam-carousel {
      --button-height: 0rem;
      --marker-height: 0rem;
      --marker-mb: 0rem;
      --carousel-controls-display: block;
}
iam-carousel::part(carousel__progress-xs) {
      display: block;
}
@container (min-width: 30em) and (max-width: 63em) {
iam-carousel::part(carousel__progress-xs) {
        display: none;
}
iam-carousel::part(carousel__progress-sm) {
        display: block;
}
}
@container (min-width: 62em) {
iam-carousel::part(carousel__progress-sm) {
        display: none;
}
iam-carousel::part(carousel__progress-md) {
        display: block;
}
}
}
@supports selector(::scroll-marker-group) {
@container (max-width: 30em) {
iam-carousel:has(> *:nth-child(6)) {
        --button-height: 0rem;
        --hide-markers: 1;
        --carousel-controls-display: block;
}
iam-carousel:has(> *:nth-child(6))::part(carousel__progress-xs) {
        display: block;
}
}
@container (min-width: 30em) and (max-width: 63em) {
iam-carousel::part(carousel__progress-xs) {
        display: none !important;
}
iam-carousel[data-smcols="2"]:has(> *:nth-child(10)) {
        --hide-markers: 1;
        --carousel-controls-display: block;
}
iam-carousel[data-smcols="2"]:has(> *:nth-child(10))::part(carousel__progress-sm) {
        display: block;
}
iam-carousel[data-smcols="3"]:has(> *:nth-child(15)) {
        --button-height: 0rem;
        --hide-markers: 1;
        --carousel-controls-display: block;
}
iam-carousel[data-smcols="3"]:has(> *:nth-child(15))::part(carousel__progress-sm) {
        display: block;
}
}
@container (min-width: 62em) {
iam-carousel::part(carousel__progress-xs),
      iam-carousel::part(carousel__progress-sm) {
        display: none !important;
}
iam-carousel[data-mdcols="2"]:has(> *:nth-child(10)) {
        --button-height: 0rem;
        --hide-markers: 1;
        --carousel-controls-display: block;
}
iam-carousel[data-mdcols="2"]:has(> *:nth-child(10))::part(carousel__progress-md) {
        display: block;
}
iam-carousel[data-mdcols="3"]:has(> *:nth-child(15)) {
        --button-height: 0rem;
        --hide-markers: 1;
        --carousel-controls-display: block;
}
iam-carousel[data-mdcols="3"]:has(> *:nth-child(15))::part(carousel__progress-md) {
        display: block;
}
}
}
  /* #region thumbnails */
iam-carousel.thumbnails {
    --hide-buttons: 1;
    --hide-markers: 1;
    --carousel-controls-display: block;
}
iam-carousel.thumbnails::part(carousel__pips) {
    height: 5rem;
}
  /* #endregion */
  /* #region article cards */
iam-carousel.carousel--article-cards {
    --card-head-height: 5rem;
    --card-fs: 1rem;
    --card-gap: 0.5rem;
    --card-body-top-padding: 1rem;
    --card-body-bottom-padding: 0.5rem;
    --card-left-padding: 0.5rem;
    --card-right-padding: 0.75rem;
    --card-right-arrow-display: none;
    --card-body-fs: 0.6875rem;
    --card-body-lh: 1rem;
    --card-footer-bottom-padding: 0.5rem;
    --card-badges-top-padding:0.5rem;
    --card-badges-bottom-padding: 0;
    --card-right-padding: 0.5rem;
    --card-left-padding: 0.5rem;
}
iam-carousel.carousel--article-cards iam-card {
    --card-footer-bottom-padding: 0.5rem;
}
  /* #endregon */
}
/* #region Multi step modal */
@layer components {
iam-multi-step-modal :is(.h1, .h2, .h3, .h4, .h5, .h6) {
    padding-right: calc(var(--dialog-padding) * 3);
    padding-bottom: var(--dialog-padding);
}
iam-multi-step-modal form {
    overflow: auto;
    padding-bottom: var(--dialog-padding);
    padding-top: var(--dialog-padding);
    max-height: calc(min(90vh, 47rem) - 6rem);
}
iam-multi-step-modal fieldset > :last-child {
    margin-bottom: var(--dialog-padding) !important;
}
iam-multi-step-modal fieldset > p:last-child {
    padding-bottom: 0 !important;
    margin-bottom: var(--dialog-padding) !important;
}
iam-multi-step-modal fieldset:not(.active) {
    display: none;
}
@media screen and (min-width: 36em) {
iam-multi-step-modal .btn--wrapper {
      margin-top: auto;
      text-align: right;
}
iam-multi-step-modal form {
      height: calc(100vh - 6rem);
      padding-left: 0 !important;
      padding-right: var(--dialog-padding) !important;
}
}
@media screen and (min-width: 62em) {
iam-multi-step-modal form {
      display: flex;
      flex-direction: column;
}
iam-multi-step-modal fieldset.active {
      display: flex;
}
iam-multi-step-modal fieldset {
      flex-direction: column;
      flex-grow: 1;
      position: relative;
      overflow: auto;
      margin-bottom: calc(var(--dialog-padding) * -1);
      padding-right: calc(var(--dialog-padding) - 10px);
      margin-right: calc(var(--dialog-padding) * -1 + 10px);
      max-height: 23.125rem; /* 370 */
}
iam-multi-step-modal fieldset::before {
      content: "";
      top: 100%;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--dialog-padding);
      min-height: var(--dialog-padding);
      position: sticky;
      display: block;
      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
      z-index: 2;
      margin-bottom: calc(var(--dialog-padding) * -1);
}
}
}
/* #endregion */
@layer components {
iam-inline-edit .optional-text {
    display: none;
}
iam-inline-edit label,
  iam-inline-edit textarea {
    margin: 0;
}
iam-inline-edit:focus-within {
    position: relative;
    z-index: 99;
    --display-status: none;
}
  /*  Inactive state */
iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
    --display-btns: none;
}
iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) input,
  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) textarea,
  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) select {
    border-color: transparent;
    background: none;
    margin-left: -1rem;
    width: calc(100% + 1rem);
    max-width: calc(100% + 1rem);
    box-shadow: none;
}
iam-inline-edit:defined:focus-within:has(select),
  iam-inline-edit:defined[data-saving]:has(select) {
    --display-btns: none;
}
  /*  Hover state */
iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover input,
  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover textarea,
  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover select {
    border: none;
    background: var(--colour-light);
}
  /*  Multi select */
iam-inline-edit:has(iam-multiselect) {
    --display-btns: none;
    --display-status: none;
}
*:has(> iam-inline-edit) {
    position: relative;
}
*:has(> iam-inline-edit)[data-value]:hover:before {
    opacity: 1;
    z-index: 1;
    position: relative;
}
*:has(> iam-inline-edit)[data-value]:before {
    content: attr(data-value);
    display: block;
    padding-inline: 1rem;
    opacity: 0;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.625rem; /* 26 */
    pointer-events: none;
    color: var(--colour-heading);
}
td:has(> iam-inline-edit) {
    height: 3.5rem;
}
iam-inline-edit:has(iam-multiselect) {
    --search-display: none;
    --input-ms: 0;
    position: absolute;
    inset: 0.1rem 2rem 0.75rem 0;
    width: 100%;
    height: 100%;
}
iam-inline-edit:has(iam-multiselect):focus-within {
    position: absolute;
}
td iam-inline-edit:has(iam-multiselect) {
    width: calc(100% - 2rem);
}
iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot=checked]) {
    --display-button: none;
}
*:hover > iam-inline-edit iam-multiselect,
  iam-inline-edit iam-multiselect.hover,
  iam-inline-edit:focus-within iam-multiselect {
    --search-display: inline-block;
}
iam-inline-edit iam-multiselect .tag[slot=checked] {
    outline: none;
    pointer-events: none;
}
iam-inline-edit iam-multiselect.hover .tag[slot=checked],
  iam-inline-edit iam-multiselect:hover .tag[slot=checked],
  iam-inline-edit iam-multiselect:focus-within .tag[slot=checked] {
    display: none;
}
span iam-inline-edit:has(iam-multiselect) {
    margin-top: -0.6rem;
}
  /*  Error message */
iam-inline-edit.was-validated label:has(:is(input:not([type=radio]):not([type=checkbox]), select)):has(:is(:invalid, .is-invalid)):after {
    position: absolute;
    right: 0;
    bottom: 100%;
    padding: 0.85rem;
    width: min-content;
    white-space: nowrap;
    color: var(--colour-heading);
    display: block;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
    background: var(--colour-canvas-2);
    border-radius: 0.5rem;
    margin: 0 0 -1rem 0;
    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
}
  /* #region preview element */
iam-inline-edit:has(.preview) {
    position: relative;
}
iam-inline-edit:has(.preview) label {
    opacity: 0;
    margin-top: -0.75rem;
}
iam-inline-edit:has(.preview) .preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    padding: 0.75rem;
    margin-top: -0.75rem;
    margin-left: -0.75rem;
}
iam-inline-edit:has(.preview) .preview:empty:before {
    content: attr(data-placeholder);
}
iam-inline-edit:has(.preview):hover .preview, iam-inline-edit:has(.preview):focus .preview {
    border: none;
    background: var(--colour-light);
}
iam-inline-edit:has(.preview):focus-within label {
    opacity: 1;
}
iam-inline-edit:has(.preview):focus-within .preview {
    opacity: 0;
}
  /* #endregion */
}
@layer components {
iam-barchart {
    --chart-bar-alignment: left;
    --chart-text-color: var(--colour-heading);
}
iam-barchart:not(.chart--horizontal)::part(xaxis-label) {
    text-align: left;
    transform-origin: 0rem 1rem;
    transform: rotate(45deg);
    max-width: 5rem;
    font-size: 1rem;
    color: var(--colour-heading);
}
iam-barchart:not(.chart--horizontal)::part(spacer) {
    aspect-ratio: 1/1;
    display: block;
    width: fit-content;
}
iam-barchart:not(.chart--horizontal)::part(chart-key) {
    padding-top: 2rem;
    order: 3;
}
iam-barchart::part(key),
  iam-barchart::part(key-checked),
  iam-barchart::part(key-unchecked) {
    --key-border-radius: 50%;
    --btn-border-width: 1px;
    --btn-padding-block: 0.375rem; /* 6 */
    --btn-padding-inline: 0.375rem; /* 6 */
    background-color: var(--colour-canvas-2);
    border: var(--btn-border-width) solid var(--colour-muted);
    border-radius: 0.25rem !important;
    font-weight: 400 !important;
    font-size: 1rem;
    line-height: 1.25rem;
    padding: calc(var(--btn-padding-block) - var(--btn-border-width)) calc(var(--btn-padding-inline) - var(--btn-border-width));
    color: var(--colour-heading);
}
iam-barchart::part(key):is(:hover, :focus, .hover, :focus-within):not(:active),
  iam-barchart::part(key-checked):is(:hover, :focus, .hover, :focus-within):not(:active),
  iam-barchart::part(key-unchecked):is(:hover, :focus, .hover, :focus-within):not(:active) {
    background: var(--colour-btn-action-hover-bg);
}
iam-barchart::part(key):is(:hover, :focus, .hover, :focus-within),
  iam-barchart::part(key-checked):is(:hover, :focus, .hover, :focus-within),
  iam-barchart::part(key-unchecked):is(:hover, :focus, .hover, :focus-within) {
    background: var(--colour-btn-action-hover-bg);
}
iam-barchart::part(key-unchecked) {
    opacity: 0.25;
}
iam-barchart::part(tooltip) {
    text-decoration: none !important;
}
iam-barchart::part(tooltip):after {
    font-family: var(--fa-family-classic);
    font-weight: 900;
    content: "\f059";
    display: inline-block;
    margin-left: 0.2em;
    margin-right: 0.1em;
    margin-bottom: 0.1em;
    color: var(--colour-primary);
    border: none;
}
iam-barchart {
    /* --xaxis-max-width: 3rem; */
}
}
@layer components {
iam-menu i {
    width: 1.25rem;
}
iam-menu iam-button button {
    all: unset !important;
}
  /* #region sub menu */
iam-menu > button:has(+ iam-menu) {
    position: relative;
}
iam-menu > button:has(+ iam-menu):after {
    content: "";
    height: var(--btn-line-height);
    width: 1rem;
    height: 1rem;
    display: inline-block;
    background: currentColor;
    mask-image: var(--icon-arrow);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    -webkit-mask-image: var(--icon-arrow);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    vertical-align: bottom;
    position: absolute;
    top: calc(50% - 0.5rem);
    right: 0.5rem;
}
iam-menu > button:has(+ iam-menu:not([popover])):after {
    rotate: 90deg;
}
iam-menu > button.open:has(+ iam-menu:not([popover])) {
    position: relative;
}
iam-menu > button.open:has(+ iam-menu:not([popover])):after {
    top: calc(50% - 0.5rem);
    right: 0.5rem;
    rotate: 270deg;
}
iam-menu > button:has(+ iam-menu:popover-open) {
    position: relative;
}
iam-menu > button:has(+ iam-menu:popover-open):after {
    top: calc(50% - 0.5rem);
    right: 0.5rem;
    rotate: 180deg;
}
iam-menu > button:not(.open) + iam-menu:not([popover]) {
    display: none;
}
iam-menu > button + iam-menu:not([popover]) > *:is(button, a, label) {
    padding-left: 2rem;
}
  /* #endregion */
}
iam-tabs {
  --colour-tab-underline: var(--colour-info);
}
iam-tabs details[open] {
  padding-top: 2rem;
}
iam-tabs details:not([open]) {
  padding-bottom: 0;
}
iam-tabs .tabs__dropdown {
  display: none;
  width: fit-content;
}
iam-tabs:is(.tabs--dropdown) .tabs__dropdown {
  display: block;
}
iam-tabs:is(.tabs--dropdown)::part(wrapper) {
  display: none;
}
@container (min-width: 62em) {
iam-tabs:is(.tabs--dropdown) .tabs__dropdown {
    display: none;
}
iam-tabs:is(.tabs--dropdown)::part(wrapper) {
    display: block;
}
}
iam-tabs::part(next-button) {
  display: none;
}
@container (width > 62em) {
iam-tabs.tabs--guided::part(next-button) {
    position: absolute;
    top: 9.375rem; /* 150*/
    right: 0;
    display: block;
}
}
iam-tabs.tabs--guided::part(next-button):not(:hover) {
  background: var(--colour-success);
}
.tabs:not(.admin-panel) {
  position: relative;
}
.tabs:not(.admin-panel) .tabs__links__wrapper {
  position: relative;
  margin: 0 auto;
}
.tabs:not(.admin-panel) .tabs__links__wrapper:after {
  content: "";
  left: 50%;
  position: relative;
  height: 1px;
  width: 100vw;
  background-color: var(--colour-border);
  transform: translate(-50%, 0);
  display: block;
  clear: both;
}
.tabs.admin-panel .tabs__links__wrapper:after {
  display: none;
}
.tabs:not(.admin-panel) .tabs__links {
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
}
.tabs__links {
  scroll-snap-type: x mandatory;
  padding-bottom: 3px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: auto;
  margin: 0 -1.5rem;
  overflow-y: clip;
  overflow-x: auto;
}
.tabs__links::-webkit-scrollbar {
  display: none;
}
.tabs__links .link {
  white-space: nowrap;
  scroll-snap-align: start;
  scroll-margin-left: var(--container-padding);
}
.tabs__links .link:not(.text-decoration-none):not(.btn) {
  --is-current: 0;
  font-weight: bold;
  font-family: var(--font-heading);
  font-size: 1.125rem; /* 18/16 */
  cursor: pointer;
  margin: 0;
  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
  display: inline-block;
}
.tabs__links .link:not(.text-decoration-none):not(.btn).disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.tabs__links .link:not(.text-decoration-none):not(.btn):last-child {
  margin-inline-end: 0;
}
.tabs__links .link:not(.text-decoration-none):not(.btn):after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%; /*  half way across */
  height: 3px;
  width: 100%;
  transform: translate(-50%, 0) scale(0, 0); /*  translate pulls this left so it's centered */
  background: var(--colour-tab-underline, var(--colour-info));
  transition: transform 0.4s;
}
.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):hover:after, .tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):focus:after, .tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled).focus:after {
  transform: translate(-50%, 0) scale(0.6, 1);
}
.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):is([aria-pressed=true], :active, .current, .active):after {
  transform: translate(-50%, 0) scale(1, 1);
}
.tabs__links .link:not(.text-decoration-none):not(.btn):is([aria-pressed=true], .current) {
  pointer-events: none;
}
@media (min-width: 576px) {
.tabs__links .link:not(.text-decoration-none):not(.btn) {
    padding: 2rem 2rem 0.5rem 2rem;
}
.tabs__links__wrapper {
    margin: 0 auto 2.5rem;
}
}
/* #region admin-panel links */
.admin-panel :is(.admin-panel__links, .tabs__links) {
  padding: 0;
  margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--colour-border);
  overflow: hidden;
}
.admin-panel :is(.admin-panel__links, .tabs__links):after {
  display: none;
}
@media screen and (min-width: 36em) {
.admin-panel :is(.admin-panel__links, .tabs__links) {
    flex-direction: row;
}
}
.admin-panel :is(.admin-panel__links, .tabs__links) .link:not(.text-decoration-none):not(.btn) {
  margin: 0;
  /* margin-left: calc(var(--wrapper-padding) * -1); */
  padding: 1rem var(--padding-x);
  width: 100%;
  position: relative;
  text-align: left;
  flex-grow: 1;
  --gradient-direction: -90deg;
  background-color: var(--colour-success);
}
.admin-panel :is(.admin-panel__links, .tabs__links) .link:not(.text-decoration-none):not(.btn):not([class*=bg-]) {
  background-image: linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%);
}
.admin-panel :is(.admin-panel__links, .tabs__links) .link:not(.text-decoration-none):not(.btn):is(.current, [aria-pressed=true]) {
  color: var(--colour-primary-theme);
}
.admin-panel :is(.admin-panel__links, .tabs__links) .link:not(.text-decoration-none):not(.btn):not(.current, [aria-pressed=true]) {
  background: var(--colour-canvas-2) !important;
}
.admin-panel :is(.admin-panel__links, .tabs__links) .link:not(.text-decoration-none):not(.btn):after {
  display: none;
}
@media screen and (min-width: 36em) {
.admin-panel :is(.admin-panel__links, .tabs__links) .link:not(.text-decoration-none):not(.btn) {
    margin: 0;
}
.admin-panel :is(.admin-panel__links, .tabs__links) .link:not(.text-decoration-none):not(.btn):not(:first-child) {
    border-left: 1px solid var(--colour-border) !important;
}
}
.admin-panel :is(.admin-panel__links, .tabs__links) .link:is(.current, [aria-pressed=true]) {
  pointer-events: none;
}
/* #endregion */
@media screen and (min-width: 36em) {
:host(.tabs--inline) .tabs__links {
    margin: 0;
    justify-content: center;
}
:host(.tabs--inline) .tabs__links__wrapper:after {
    width: 100%;
}
}
/* #region tabs - toggle tags */
.tabs--toggle-tags .tabs__links {
  flex-wrap: wrap;
  margin: 0;
  padding: 1px;
  -webkit-mask-image: unset !important;
  mask-image: unset !important;
}
.tabs--toggle-tags .tabs__links__wrapper:after {
  display: none !important;
}
/* #endregion */
iam-std-address-lookup:not([data-allow-manual]) iam-address-lookup::part(manualButton) {
  display: none;
}
iam-std-address-lookup[data-allow-manual] iam-address-lookup:not(.searched)::part(manualButton) {
  display: none;
}
iam-std-address-lookup.show-overseas iam-address-lookup > *:not(.overseas) {
  display: none;
}
iam-std-address-lookup:not(.show-overseas) iam-address-lookup > *.overseas {
  display: none;
}
iam-std-address-lookup iam-address-lookup {
  --menu-item-width: 31.25rem;
  max-width: 31.25rem;
}
iam-address-lookup:not(.show-welsh) .alt {
  display: none;
}
iam-address-lookup.show-welsh .default {
  display: none;
}
[slot=beforeList] {
  position: sticky;
  top: 0;
  z-index: 100;
}
iam-std-address-lookup iam-address-lookup .atleastone label:not(:has([readonly])):after,
iam-std-address-lookup iam-address-lookup .overseas-atleastone label:not(:has([readonly])):after {
  display: none;
}
iam-std-address-lookup iam-address-lookup .hint {
  display: block;
}
iam-std-address-lookup iam-address-lookup label:has([readonly]) + .hint,
iam-std-address-lookup iam-address-lookup label:has([readonly]) + .hint {
  display: none;
}
.was-validated iam-std-address-lookup iam-address-lookup .atleastone:not(:has(input:valid)) > .invalid-feedback,
.was-validated iam-std-address-lookup iam-address-lookup .overseas-atleastone:not(:has(input:valid)) > .invalid-feedback,
iam-std-address-lookup iam-address-lookup.was-validated .atleastone:not(:has(input:valid)) > .invalid-feedback,
iam-std-address-lookup iam-address-lookup.was-validated .overseas-atleastone:not(:has(input:valid)) > .invalid-feedback {
  display: block;
  margin-bottom: 1rem;
}
.was-validated iam-std-address-lookup iam-address-lookup .atleastone:not(:has(input:valid)) > .invalid-feedback + .hint,
.was-validated iam-std-address-lookup iam-address-lookup .overseas-atleastone:not(:has(input:valid)) > .invalid-feedback + .hint,
iam-std-address-lookup iam-address-lookup.was-validated .atleastone:not(:has(input:valid)) > .invalid-feedback + .hint,
iam-std-address-lookup iam-address-lookup.was-validated .overseas-atleastone:not(:has(input:valid)) > .invalid-feedback + .hint {
  display: none;
}
iam-std-address-lookup iam-address-lookup input:is(:valid, .is-valid):not(:is(:invalid, .is-invalid)) {
  background-image: none !important;
}
/*  For demo purposes */
iam-std-address-lookup.open-results iam-address-lookup::part(list-wrapper) {
  display: block;
}
iam-std-address-lookup.open-results iam-address-lookup [slot=preloadedList] {
  display: block;
}
iam-address-lookup label[slot=actions]:has([type=checkbox]) {
  margin-bottom: 0;
  padding-top: 0;
}
iam-address-lookup label[slot=actions]:has([type=checkbox]):before, iam-address-lookup label[slot=actions]:has([type=checkbox]):after {
  top: -0.2rem;
}
iam-milestone {
  --milestone-divider-colour: var(--colour-muted);
  --milestone-panel-border: var(--wider-colour-1-active);
  --milestone-default-background: #ffffff;
  --milestone-future-background: #f5f5f5;
}
iam-milestone-group {
  display: flex;
  flex-wrap: wrap;
  max-width: 43rem;
  gap: 2.75rem;
}
iam-milestone-group.reverse-items {
  flex-direction: column-reverse;
}
iam-milestone-group.reverse-items .milestone + .milestone:before {
  top: auto;
  bottom: 0;
  transform: translate(-1px, 2.2rem);
}
iam-milestone-group[data-show-all-toggle] .milestone.current ~ .milestone {
  display: none;
}
iam-milestone-group[data-show-all-toggle].show-all .milestone.current ~ .milestone {
  display: block;
}
iam-milestone-group[data-show-all-toggle].show-all .show-all-toggle:before {
  content: "\f070";
}
iam-milestone-group .show-all-toggle {
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-right: 1.7rem;
  position: relative;
}
iam-milestone-group .show-all-toggle:before {
  content: "\f06e";
  font-family: var(--fa-family-classic);
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
  margin-right: 0;
}
iam-milestone-group iam-milestone + .milestone {
  position: relative;
}
iam-milestone-group iam-milestone + .milestone:before {
  content: "";
  height: 1.5rem;
  width: 2px;
  background: var(--milestone-divider-colour);
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-1px, -2.2rem);
}
iam-milestone::part(status) {
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin-bottom: 0.5rem;
}
iam-milestone {
  border: 2px solid var(--milestone-panel-border);
  border-radius: 8px;
  display: block;
  width: 100%;
  max-width: 43rem;
  background: var(--milestone-default-background);
  padding-top: 1rem;
}
iam-milestone.current ~ .milestone {
  background: var(--milestone-future-background);
}
iam-milestone h2 {
  text-align: center;
}
iam-milestone ul {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
iam-milestone ul li {
  width: 100%;
}
iam-milestone p {
  padding: 0 1rem 2rem;
}
iam-milestone p + ul {
  margin-top: 2rem;
}
iam-milestone .task-details {
  padding: 1rem 1.5rem;
}
iam-milestone .task-details p {
  padding: 0;
}
iam-milestone .task-details p + ul {
  margin-top: 2rem;
}
iam-milestone summary,
iam-milestone li {
  gap: 1rem;
}
iam-milestone summary:before,
iam-milestone li:before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--colour-primary);
  border-radius: 50%;
  font-family: var(--fa-family-classic);
  color: #fff;
  font-size: 0.7rem;
}
iam-milestone summary.complete:before,
iam-milestone li.complete:before {
  content: "\f00c";
  border-color: var(--colour-success);
  background: var(--colour-success);
  text-align: center;
}
iam-milestone summary {
  border-top: 1px solid #d6d6d6;
  padding: 1rem 1.5rem;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  font-weight: 600;
}
iam-milestone summary:before {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.2;
}
iam-milestone summary:after {
  content: "\f078";
}
iam-milestone summary + p {
  padding-bottom: 0;
}
iam-milestone details {
  padding-bottom: 0;
}
iam-milestone details[open] summary:after {
  content: "\f077";
}
iam-milestone li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
iam-milestone li .action-date {
  font-size: 0.75rem;
}
@media (prefers-color-scheme: dark) {
iam-milestone {
    color-scheme: light;
}
iam-milestone > * {
    color: var(--colour-primary-theme);
}
}
@layer components {
iam-calendar,
  .event-colours {
    --event-colour-1: var(--wider-colour-1);
    --event-colour-2: var(--wider-colour-2);
    --event-colour-3: var(--wider-colour-3);
    --event-colour-4: var(--wider-colour-4);
    --event-colour-5: var(--wider-colour-17);
    --event-colour-6: var(--wider-colour-6);
    --event-colour-7: var(--wider-colour-7);
    --event-colour-8: var(--wider-colour-14);
    --event-colour-9: var(--wider-colour-10);
    --event-colour-10: var(--wider-colour-23);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="1"] {
    --event-colour: var(--event-colour-1);
}
iam-calendar.calendar--multi [data-calendar-enum="1"] {
    --event-colour: var(--event-colour-1);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="2"] {
    --event-colour: var(--event-colour-2);
}
iam-calendar.calendar--multi [data-calendar-enum="2"] {
    --event-colour: var(--event-colour-2);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="3"] {
    --event-colour: var(--event-colour-3);
}
iam-calendar.calendar--multi [data-calendar-enum="3"] {
    --event-colour: var(--event-colour-3);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="4"] {
    --event-colour: var(--event-colour-4);
}
iam-calendar.calendar--multi [data-calendar-enum="4"] {
    --event-colour: var(--event-colour-4);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="5"] {
    --event-colour: var(--event-colour-5);
}
iam-calendar.calendar--multi [data-calendar-enum="5"] {
    --event-colour: var(--event-colour-5);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="6"] {
    --event-colour: var(--event-colour-6);
}
iam-calendar.calendar--multi [data-calendar-enum="6"] {
    --event-colour: var(--event-colour-6);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="7"] {
    --event-colour: var(--event-colour-7);
}
iam-calendar.calendar--multi [data-calendar-enum="7"] {
    --event-colour: var(--event-colour-7);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="8"] {
    --event-colour: var(--event-colour-8);
}
iam-calendar.calendar--multi [data-calendar-enum="8"] {
    --event-colour: var(--event-colour-8);
}
iam-calendar:not(.calendar--multi) [data-event-type-enum="9"] {
    --event-colour: var(--event-colour-9);
}
iam-calendar.calendar--multi [data-calendar-enum="9"] {
    --event-colour: var(--event-colour-9);
}
iam-calendar {
    margin-bottom: 1rem;
}
iam-calendar button {
    --background-opacity: 100%;
    display: block;
    width: 100%;
    /* height:  1.5rem; */
    border: none;
    border-left: 4px solid color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 28%);
    border-radius: 4px;
    padding: 0.25rem;
    font-size: 0.875rem; /* 14/16 */
    line-height: 1.125rem; /* 18/16 */
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
    position: relative;
    z-index: 1;
    background: rgb(from var(--event-colour, var(--wider-colour-1)) r g b/var(--background-opacity));
}
iam-calendar button:hover {
    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
}
iam-calendar button:active {
    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
}
iam-calendar button .tooltip__content {
    display: none;
}
iam-calendar button:hover .tooltip__content {
    display: block;
    z-index: var(--index-floating);
    position: absolute;
    width: 15.625rem; /* 250 */
    background: var(--colour-primary);
    color: var(--colour-white);
    padding: 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
    /* top: auto; */
    /* bottom: calc(100% + 0.25rem); */
    left: 50%;
    /* transform: translate(-50%,0); */
    font-size: 0.875rem; /* 14/16 */
    line-height: 1.2;
    white-space: normal;
    z-index: 9999;
    position: fixed;
    bottom: anchor(top);
    justify-self: anchor-center;
    margin: 0.5rem;
}
iam-calendar button:hover .tooltip__content > strong:first-child {
    color: white;
    display: block;
    padding-bottom: 1rem;
    color: inherit;
}
iam-calendar button:hover .tooltip__content:after {
    content: "";
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 50%;
    margin-left: -0.25rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: var(--colour-primary) transparent transparent transparent;
    margin-top: -1px;
}
iam-calendar.calendar--multi {
    background: rgb(from var(--event-colour, var(--wider-colour-8)) r g b/var(--background-opacity));
}
iam-calendar.calendar--multi:hover {
    background: rgb(from var(--event-colour-hover, var(--wider-colour-8-hover)) r g b/var(--background-opacity));
}
iam-calendar.calendar--multi:active {
    background: rgb(from var(--event-colour-active, var(--wider-colour-8-active)) r g b/var(--background-opacity));
}
iam-calendar[data-hide-confirmed] button:not(.tentative, .cancelled) {
    display: none !important;
}
iam-calendar[data-hide-unconfirmed] button.tentative {
    display: none !important;
}
iam-calendar[data-hide-cancelled] button.cancelled {
    display: none !important;
}
iam-calendar button.tentative {
    --background-opacity: 40%;
    border-top: 1px dashed var(--event-colour);
    border-right: 1px dashed var(--event-colour);
    border-bottom: 1px dashed var(--event-colour);
    border-left: none;
    padding-left: 0.5rem;
}
iam-calendar button.tentative:before {
    content: "";
    height: 100%;
    width: 4px;
    background-color: var(--event-colour);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23FFFFFF' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23FFFFFF' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    left: 0;
}
iam-calendar button.cancelled {
    border-top: 2px solid var(--colour-danger);
    border-right: 2px solid var(--colour-danger);
    border-bottom: 2px solid var(--colour-danger);
}
iam-calendar button.repeat {
    padding-right: 2rem;
}
iam-calendar button.repeat:after {
    position: absolute;
    top: 0;
    right: 0.25rem;
    content: "\f363";
    font-family: var(--fa-family-classic);
    font-weight: 300;
    line-height: 1.625rem; /* 26 */
}
iam-calendar[data-view=month] button {
    margin-bottom: 1px;
}
iam-calendar[data-view=month] button > span {
    display: block;
    height: 1.125rem; /* 18/16 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
iam-calendar[data-view=month] button[data-start] > span:before {
    content: attr(data-start);
    display: inline-block;
    margin-right: 0.25rem;
}
iam-calendar[data-view=month] button {
    /*
    span:not(.tooltip__content) {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: inherit;
    }
      */
}
iam-calendar:is([data-view=week], [data-view=day]) button:not(.allday-event) {
    height: var(--event-height, 1.09375rem); /* 17.5 */
    line-height: 1.125rem !important;
    padding-top: 0.25rem !important;
    white-space: normal !important;
    display: inline-flex !important; /* keep the inline nature of buttons */
    align-items: flex-start !important;
    width: var(--event-width, 100%) !important;
    max-width: var(--event-max-width, 100%) !important;
    margin-bottom: 0px !important;
}
iam-calendar:is([data-view=week], [data-view=day]) button:not(.allday-event) > span:not(.tooltip__content) {
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: inherit;
    max-height: 100%;
}
  /*  resize */
iam-calendar[data-resize]:is([data-view=week], [data-view=day]) button:not(.allday-event) {
    resize: vertical !important;
}
iam-calendar:is([data-view=week]) button.allday-event {
    width: var(--event-width, 100%) !important;
    max-width: var(--event-max-width, 100%) !important;
}
iam-calendar:is([data-view=week], [data-view=day]) button.allday-event > span {
    display: block;
    height: 1.125rem; /* 18/16 */
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}
iam-calendar:is([data-view=week], [data-view=day]) button.allday-event[data-start] > span:before {
    content: attr(data-start);
    display: inline-block;
    margin-right: 0.25rem;
}
iam-calendar:is([data-view=week], [data-view=day]) button.resizing {
    background: black !important;
}
iam-calendar:is([data-view=week], [data-view=day]) button.resizing .tooltip__content {
    opacity: 0;
}
iam-calendar:is([data-view=week], [data-view=day]) button:-webkit-drag .tooltip__content {
    opacity: 0;
}
iam-calendar:is([data-view=week], [data-view=day]) button.continued {
    display: none !important;
}
  /* #endregion */
}
.event-colours option {
  /* display: none; */
}
.event-colours option[value=month] {
  display: flex;
}
.event-colours,
.event-colours::picker(select) {
  appearance: base-select;
}
.event-colours {
  text-indent: -300%;
  overflow: hidden;
  position: relative;
  width: 1.8rem;
  border: none;
  background-color: transparent;
}
.event-colours:before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 1rem;
  height: 1rem;
  background: pink;
  border-radius: 0.5rem;
}
.event-colours::picker-icon {
  display: none;
}
.event-colours::picker(select) {
  border-radius: 0.5rem;
  border-color: var(--colour-border);
  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  text-indent: 0;
}
.event-colours option {
  padding-block: 0.25rem;
  position: relative;
  padding-left: 2rem;
  font-weight: light;
  border-left: 4px solid transparent;
  margin-bottom: 0.25rem;
  border-radius: 0.25rem;
}
.event-colours option:checked {
  background: rgb(from var(--event-colour) r g b/40%);
  border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
}
.event-colours option:hover {
  background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
  border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
}
.event-colours option:active {
  background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
  border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
}
.event-colours option:before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 1rem;
  height: 1rem;
  background: pink;
  border-radius: 0.5rem;
}
.event-colours option:before,
.event-colours:has(option:checked):before {
  background: color-mix(in srgb, var(--event-colour), black 28%);
}
.event-colours option[value="--wider-colour-1"],
.event-colours:has(option[value="--wider-colour-1"]:checked) {
  --event-colour: var(--wider-colour-1);
}
.event-colours option[value="--wider-colour-2"],
.event-colours:has(option[value="--wider-colour-2"]:checked) {
  --event-colour: var(--wider-colour-2);
}
.event-colours option[value="--wider-colour-3"],
.event-colours:has(option[value="--wider-colour-3"]:checked) {
  --event-colour: var(--wider-colour-3);
}
.event-colours option[value="--wider-colour-4"],
.event-colours:has(option[value="--wider-colour-4"]:checked) {
  --event-colour: var(--wider-colour-4);
}
.event-colours option[value="--wider-colour-17"],
.event-colours:has(option[value="--wider-colour-17"]:checked) {
  --event-colour: var(--wider-colour-17);
}
.event-colours option[value="--wider-colour-6"],
.event-colours:has(option[value="--wider-colour-6"]:checked) {
  --event-colour: var(--wider-colour-6);
}
.event-colours option[value="--wider-colour-7"],
.event-colours:has(option[value="--wider-colour-7"]:checked) {
  --event-colour: var(--wider-colour-7);
}
.event-colours option[value="--wider-colour-14"],
.event-colours:has(option[value="--wider-colour-14"]:checked) {
  --event-colour: var(--wider-colour-14);
}
.event-colours option[value="--wider-colour-10"],
.event-colours:has(option[value="--wider-colour-10"]:checked) {
  --event-colour: var(--wider-colour-10);
}
.event-colours option[value="--wider-colour-23"],
.event-colours:has(option[value="--wider-colour-23"]:checked) {
  --event-colour: var(--wider-colour-23);
}
.event-colours option:checked {
  font-weight: bold;
}
.event-colours option::checkmark {
  display: none;
}
@layer components {
iam-skeleton {
    --bone-height: 0.8125rem; /* 13px */
    --colour-heading: #D9D9D9;
    --colour-underline: #D9D9D9;
    container-type: inline-size;
}
iam-bone {
    background-color: #D9D9D9; /* TODO: needs to be a variable */
    border: unset;
    outline: unset;
    display: block;
    width: 100%;
    min-height: var(--bone-height);
    pointer-events: none !important;
    margin-bottom: 1rem;
}
iam-bone:not(.btn, .badge, .tag) {
    height: var(--bone-height);
    border-radius: 0.5rem;
}
hr {
    width: 100%;
}
}
@layer components {
  /*  Make sure the first */
main {
    position: relative;
}
main > *:first-child {
    padding-top: 2rem;
}
  /*  Search */
iam-search .optional-text {
    display: none !important;
}
  /*  Table dark mode support */
@container style(--theme: dark) {
iam-table tbody tr {
      --hover-background: var(--colour-canvas);
}
iam-table tbody tr:is(:hover, :focus-within, .hover) {
      background: var(--row-bg);
}
}
@container (width > 23.4375em) {
@media screen and (prefers-color-scheme: dark) {
iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) tr > *:not(:first-child):last-child {
        background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
}
}
}
@container style(--theme: dark) {
iam-table tr:has([type=checkbox]:checked) {
      --row-bg: #000000;
}
}
iam-pagination {
    --pagination-link-color: var(--colour-light);
    --pagination-link-color-active: #e0e0e0;
}
@container style(--theme: dark) {
iam-fileupload::part(file) {
      background: var(--colour-canvas-2);
      border-color: var(--colour-canvas-2);
      color: var(--colour-body);
}
}
}
/*  Templates */
@layer templates {
body:has(.template--form) {
    background-color: #e9f9fd;
}
.template--form {
    --input-max-width: 28.125rem;
    --select-max-width: 31.25rem;
}
.template--form .container {
    max-width: 80rem !important;
}
@supports selector(:has(*)) {
.template--form label:has(> :is(.suffix, .prefix)) {
      --input-max-width: 31.25rem;
      max-width: var(--input-max-width);
}
.template--form div:has(> :is(.suffix, .prefix)) {
      --input-max-width: 31.25rem;
      max-width: var(--input-max-width);
}
}
.template--form {
    /*  Make H2's look like H3's */
}
.template--form :is(h2, .h2) {
    font-size: var(--h3-fs);
    max-width: var(--content-max-width);
}
.template--form {
    background-color: #e9f9fd;
}
.template--form .form-panel {
    display: block;
    padding: 2rem;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
    background-color: var(--colour-canvas-2);
    margin-bottom: 1.5rem;
    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
    width: 100%;
}
.template--form .form-panel > *:last-child {
    margin-bottom: 0 !important;
}
@media screen and (min-width: 36em) {
.template--form .form-panel {
      max-width: calc(100% - 5rem); /*  Guess */
      margin-inline: auto;
}
}
@media screen and (min-width: 62em) {
.template--form .form-panel {
      max-width: 57.75rem; /* 924 */ /*  Guess */
      border-radius: 0.5rem;
      padding-inline: 5.875rem;
      padding-block: 2.5rem;
      margin-bottom: 2rem;
}
.template--form .form-panel--sm {
      max-width: 40rem; /* 640px */
      padding-inline: 2rem;
}
}
@media screen and (min-width: 62em) {
.template--form .container--form {
      padding-inline: 0;
      max-width: 57.75rem !important;
}
.template--form .form-panel .btn__group {
      margin-bottom: 0;
}
}
.template--form [data-loading] {
    opacity: 0.5;
}
.template--form .switch-accounts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media screen and (min-width: 36em) {
.template--form .switch-accounts {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
}
.template--form .switch-accounts > * {
      flex-basis: calc(50% - 0.5rem);
      flex-grow: 0;
      flex-shrink: 1;
}
}
@media screen and (min-width: 62em) {
.template--form .switch-accounts {
      padding-inline: 5rem;
}
}
}
@layer templates {
body:has(.template--auth) {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: var(--colour-canvas-2);
    --padding-top: 1.5rem;
    --brand-size: 2.25rem;
    max-width: 80rem;
    margin-inline: auto;
}
@media screen and (min-width: 62em) {
body:has(.template--auth) {
      --padding-top: 2.5rem;
      --brand-size: 4rem;
}
}
.template--auth {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-top);
    padding-inline: var(--container-padding-x);
}
@media screen and (min-width: 62em) {
.template--auth {
      flex: 0 0 auto;
      width: 43.75%;
      padding-inline-end: calc(var(--container-padding-x) - 1rem);
}
}
.template--auth .brand {
    font-size: var(--brand-size);
    padding-top: 0;
}
body:has(.template--auth) aside {
    display: none;
}
@media screen and (min-width: 62em) {
body:has(.template--auth) aside {
      display: block;
      flex: 0 0 auto;
      width: 56.25%;
      padding-inline: var(--container-padding-x) !important;
      padding-block: var(--padding-top);
      position: relative;
      overflow: hidden;
}
}
body:has(.template--auth) aside > figure {
    position: relative;
    display: block;
    margin-top: calc(var(--padding-top) * -1);
    margin-inline: calc(var(--container-padding-x) * -1);
    min-width: calc(100% + var(--container-padding-x) + var(--container-padding-x));
    margin-bottom: 2.5rem;
    max-height: 25rem; /* 400 */
    clip-path: ellipse(70% 80% at 50% 20%);
    rotate: -5deg;
}
body:has(.template--auth) aside > figure:after {
    content: "";
    position: absolute;
    display: block;
    right: -2rem;
    left: -2rem;
    bottom: -1rem;
    height: 50%;
    rotate: -5deg;
    background: linear-gradient(0deg, rgb(0, 49, 60) 0%, rgba(28, 182, 226, 0.45) 40%, rgba(28, 182, 226, 0) 100%);
    opacity: 0.9;
}
body:has(.template--auth) aside img {
    margin-inline: -1.5rem;
    min-width: calc(100% + 1.5rem + 1.5rem);
    margin-top: -0.75rem;
    max-height: 26.5rem;
    object-fit: cover;
    object-position: 50% 50%;
    rotate: 5deg;
}
}
/*  Overrides */
@layer overrides {
@media (prefers-reduced-motion) {
* {
      transition: unset;
      animation: none;
}
}
}
@layer utilities {
.fa-right {
    --iso: '\2192';
}
.fa-chevron-right {
    --iso: '\003e';
}
.fa-left {
    --iso: '\2190';
}
.fa-chevron-left {
    --iso: '\003c';
}
.fa-up {
    --iso: '\2191';
}
.fa-chevron-up {
    --iso: '\2227';
}
.fa-down {
    --iso: '\2193';
}
.fa-chevron-down {
    --iso: '\2228';
}
.fa-plus {
    --iso: '\002b';
}
.fa-bars {
    --iso: '\039e';
}
.fa-bars {
    --iso: '\039e';
}
.fa-edit {
    --iso: '\270e';
}
.fa-envelope {
    --iso: '\2709';
}
.fa-calendar {
    --iso: '\2636';
}
}
@layer utilities {
.clearfix {
&::after {
      display: block;
      clear: both;
      content: "";
}
}
}
@layer utilities {
.visually-hidden,
  .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
}
@layer utilities {
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
}
@layer utilities {
.ratio {
    display: block;
    position: relative;
    width: 100%;
&::before {
      display: block;
      padding-top: var(--aspect-ratio);
      content: "";
}
> * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}
}
.ratio-1x1 {
    --aspect-ratio: 100%;
}
.ratio-4x3 {
    --aspect-ratio: calc(3 / 4 * 100%);
}
.ratio-16x9 {
    --aspect-ratio: calc(9 / 16 * 100%);
}
.ratio-21x9 {
    --aspect-ratio: calc(9 / 21 * 100%);
}
}
@layer utilities {
.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--index-floating);
}
.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--index-floating);
}
}
@layer utilities {
.sticky-top {
    position: sticky;
    top: 0;
    z-index: var(--index-floating);
}
.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: var(--index-floating);
}
@media screen and (min-width: 36em) {
.sticky-sm-top {
      position: sticky;
      top: 0;
      z-index: var(--index-floating);
}
.sticky-sm-bottom {
      position: sticky;
      bottom: 0;
      z-index: var(--index-floating);
}
}
@media screen and (min-width: 62em) {
.sticky-md-top {
      position: sticky;
      top: 0;
      z-index: var(--index-floating);
}
.sticky-md-bottom {
      position: sticky;
      bottom: 0;
      z-index: var(--index-floating);
}
}
}
@layer utilities {
:is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid):not(iam-table):not(.table__wrapper) {
    padding-inline: var(--mh-padding-inline, 0);
    margin-inline: calc(var(--mh-padding-inline, 0) * -1);
}
:is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid)::before {
    top: calc(100% - 1.5rem);
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5rem;
    position: sticky;
    display: block;
    background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
    z-index: 2;
    margin-bottom: -1.5rem;
}
:is(.mh-sm, .mh-md, .mh-lg, .mh-fluid) {
    overflow: auto;
    overscroll-behavior: contain;
}
:is(.mh-sm, .mh-md, .mh-lg, .mh-fluid)::before {
    content: "";
}
.mh-sm {
    max-height: calc(var(--max-height-sm) - var(--mh-modifier, 0rem));
}
.mh-md {
    max-height: calc(var(--max-height-md) - var(--mh-modifier, 0rem));
}
.mh-lg {
    max-height: calc(var(--max-height-lg) - var(--mh-modifier, 0rem));
}
.mh-fluid {
    max-height: 100%;
}
@media screen and (min-width: 36em) {
:is(.mh-sm-sm, .mh-sm-md, .mh-sm-lg) {
      overflow: auto;
      overscroll-behavior: contain;
}
:is(.mh-sm-sm, .mh-sm-md, .mh-sm-lg)::before {
      content: "";
}
.mh-sm-sm {
      max-height: calc(var(--max-height-sm) - var(--mh-modifier, 0rem));
}
.mh-sm-md {
      max-height: calc(var(--max-height-md) - var(--mh-modifier, 0rem));
}
.mh-sm-lg {
      max-height: calc(var(--max-height-lg) - var(--mh-modifier, 0rem));
}
}
@media screen and (min-width: 62em) {
:is(.mh-md-sm, .mh-md-md, .mh-md-lg) {
      overflow: auto;
      overscroll-behavior: contain;
}
:is(.mh-md-sm, .mh-md-md, .mh-md-lg)::before {
      content: "";
}
.mh-md-sm {
      max-height: calc(var(--max-height-sm) - var(--mh-modifier, 0rem));
}
.mh-md-md {
      max-height: calc(var(--max-height-md) - var(--mh-modifier, 0rem));
}
.mh-md-lg {
      max-height: calc(var(--max-height-lg) - var(--mh-modifier, 0rem));
}
}
}
@layer utilities {
@media (scripting: enabled) {
.js-show {
      display: none !important;
}
.js-hide {
      display: none !important;
}
}
}
@layer utilities {
.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: hidden;
    overflow: hidden;
}
.line-clamp--2 {
    -webkit-line-clamp: 2;
}
.line-clamp--3 {
    -webkit-line-clamp: 3;
}
.line-clamp--4 {
    -webkit-line-clamp: 4;
}
.line-clamp--5 {
    -webkit-line-clamp: 5;
}
}
@layer utilities {
.align-baseline {
    vertical-align: baseline !important;
}
.align-top {
    vertical-align: top !important;
}
.align-middle {
    vertical-align: middle !important;
}
.align-bottom {
    vertical-align: bottom !important;
}
.align-text-bottom {
    vertical-align: text-bottom !important;
}
.align-text-top {
    vertical-align: text-top !important;
}
}
@layer utilities {
.wider-colour-1 {
    --colour: var(--wider-colour-1 );
    --wider-colour: var(--wider-colour-1 );
    color: #262626 !important;
}
.wider-colour-2 {
    --colour: var(--wider-colour-2 );
    --wider-colour: var(--wider-colour-2 );
    color: #262626 !important;
}
.wider-colour-3 {
    --colour: var(--wider-colour-3 );
    --wider-colour: var(--wider-colour-3 );
    color: #262626 !important;
}
.wider-colour-4 {
    --colour: var(--wider-colour-4 );
    --wider-colour: var(--wider-colour-4 );
    color: #262626 !important;
}
.wider-colour-5 {
    --colour: var(--wider-colour-5 );
    --wider-colour: var(--wider-colour-5 );
    color: #262626 !important;
}
.wider-colour-6 {
    --colour: var(--wider-colour-6 );
    --wider-colour: var(--wider-colour-6 );
    color: #262626 !important;
}
.wider-colour-7 {
    --colour: var(--wider-colour-7 );
    --wider-colour: var(--wider-colour-7 );
    color: #262626 !important;
}
.wider-colour-8 {
    --colour: var(--wider-colour-8 );
    --wider-colour: var(--wider-colour-8 );
    color: #262626 !important;
}
.wider-colour-9 {
    --colour: var(--wider-colour-9 );
    --wider-colour: var(--wider-colour-9 );
    color: #262626 !important;
}
.wider-colour-10 {
    --colour: var(--wider-colour-10 );
    --wider-colour: var(--wider-colour-10 );
    color: #262626 !important;
}
.wider-colour-11 {
    --colour: var(--wider-colour-11 );
    --wider-colour: var(--wider-colour-11 );
    color: #262626 !important;
}
.wider-colour-12 {
    --colour: var(--wider-colour-12 );
    --wider-colour: var(--wider-colour-12 );
    color: #262626 !important;
}
.wider-colour-13 {
    --colour: var(--wider-colour-13 );
    --wider-colour: var(--wider-colour-13 );
    color: #262626 !important;
}
.wider-colour-14 {
    --colour: var(--wider-colour-14 );
    --wider-colour: var(--wider-colour-14 );
    color: #262626 !important;
}
.wider-colour-15 {
    --colour: var(--wider-colour-15 );
    --wider-colour: var(--wider-colour-15 );
    color: #262626 !important;
}
.wider-colour-16 {
    --colour: var(--wider-colour-16 );
    --wider-colour: var(--wider-colour-16 );
    color: #262626 !important;
}
.wider-colour-17 {
    --colour: var(--wider-colour-17 );
    --wider-colour: var(--wider-colour-17 );
    color: #262626 !important;
}
.wider-colour-18 {
    --colour: var(--wider-colour-18 );
    --wider-colour: var(--wider-colour-18 );
    color: #262626 !important;
}
.wider-colour-19 {
    --colour: var(--wider-colour-19 );
    --wider-colour: var(--wider-colour-19 );
    color: #262626 !important;
}
.wider-colour-20 {
    --colour: var(--wider-colour-20 );
    --wider-colour: var(--wider-colour-20 );
    color: #262626 !important;
}
.wider-colour-21 {
    --colour: var(--wider-colour-21 );
    --wider-colour: var(--wider-colour-21 );
    color: #262626 !important;
}
.wider-colour-22 {
    --colour: var(--wider-colour-22 );
    --wider-colour: var(--wider-colour-22 );
    color: #262626 !important;
}
.wider-colour-23 {
    --colour: var(--wider-colour-23 );
    --wider-colour: var(--wider-colour-23 );
    color: #262626 !important;
}
}
@layer utilities {
.opacity-0 {
    opacity: 0 !important;
}
.opacity-25 {
    opacity: 0.25 !important;
}
.opacity-50 {
    opacity: 0.5 !important;
}
.opacity-75 {
    opacity: 0.75 !important;
}
.opacity-100 {
    opacity: 1 !important;
}
}
@layer utilities {
.overflow-auto {
    overflow: auto !important;
}
.overflow-hidden {
    overflow: hidden !important;
}
.overflow-visible {
    overflow: visible !important;
}
.overflow-scroll {
    overflow: scroll !important;
}
}
@layer utilities {
.d-inline {
    display: inline !important;
}
.d-inline-block {
    display: inline-block !important;
}
.d-block {
    display: block !important;
}
.d-grid {
    display: grid !important;
}
.d-table {
    display: table !important;
}
.d-table-row {
    display: table-row !important;
}
.d-table-cell {
    display: table-cell !important;
}
.d-flex {
    display: flex !important;
}
.d-inline-flex {
    display: inline-flex !important;
}
.d-none {
    display: none !important;
}
@media screen and (min-width: 36em) {
.d-sm-inline {
      display: inline !important;
}
.d-sm-inline-block {
      display: inline-block !important;
}
.d-sm-block {
      display: block !important;
}
.d-sm-grid {
      display: grid !important;
}
.d-sm-table {
      display: table !important;
}
.d-sm-table-row {
      display: table-row !important;
}
.d-sm-table-cell {
      display: table-cell !important;
}
.d-sm-flex {
      display: flex !important;
}
.d-sm-inline-flex {
      display: inline-flex !important;
}
.d-sm-none {
      display: none !important;
}
}
@media screen and (min-width: 62em) {
.d-md-inline {
      display: inline !important;
}
.d-md-inline-block {
      display: inline-block !important;
}
.d-md-block {
      display: block !important;
}
.d-md-grid {
      display: grid !important;
}
.d-md-table {
      display: table !important;
}
.d-md-table-row {
      display: table-row !important;
}
.d-md-table-cell {
      display: table-cell !important;
}
.d-md-flex {
      display: flex !important;
}
.d-md-inline-flex {
      display: inline-flex !important;
}
.d-md-none {
      display: none !important;
}
}
}
@layer utilities {
.position-static {
    position: static !important;
}
.position-relative {
    position: relative !important;
}
.position-absolute {
    position: absolute !important;
}
.position-fixed {
    position: fixed !important;
}
.position-sticky {
    position: sticky !important;
}
@media screen and (min-width: 36em) {
.position-sm-static {
      position: static !important;
}
.position-sm-relative {
      position: relative !important;
}
.position-sm-absolute {
      position: absolute !important;
}
.position-sm-fixed {
      position: fixed !important;
}
.position-sm-sticky {
      position: sticky !important;
}
}
@media screen and (min-width: 62em) {
.position-md-static {
      position: static !important;
}
.position-md-relative {
      position: relative !important;
}
.position-md-absolute {
      position: absolute !important;
}
.position-md-fixed {
      position: fixed !important;
}
.position-md-sticky {
      position: sticky !important;
}
}
}
@layer utilities {
.border {
    border: var(--border-width) var(--border-style) var(--border-color) !important;
}
.border-0 {
    border: 0 !important;
}
.border-top {
    border-top: var(--border-width) var(--border-style) var(--border-color) !important;
}
.border-top-0 {
    border-top: 0 !important;
}
.border-end {
    border-right: var(--border-width) var(--border-style) var(--border-color) !important;
}
.border-end-0 {
    border-right: 0 !important;
}
.border-bottom {
    border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
}
.border-bottom-0 {
    border-bottom: 0 !important;
}
.border-start {
    border-left: var(--border-width) var(--border-style) var(--border-color) !important;
}
.border-start-0 {
    border-left: 0 !important;
}
.border-1 {
    --border-width: 1px;
}
.border-2 {
    --border-width: 2px;
}
.border-3 {
    --border-width: 3px;
}
.border-4 {
    --border-width: 4px;
}
.border-5 {
    --border-width: 5px;
}
.border-gradient {
    background: linear-gradient(var(--bg-colour, Canvas), var(--bg-colour, Canvas)) padding-box, linear-gradient(to right, var(--colour-primary-theme), var(--colour-info)) border-box;
    border: var(--border-width) solid transparent;
}
}
@layer utilities {
.w-25 {
    width: 25% !important;
}
.w-50 {
    width: 50% !important;
}
.w-75 {
    width: 75% !important;
}
.w-100 {
    width: 100% !important;
}
.w-auto {
    width: auto !important;
}
.mw-100 {
    max-width: 100% !important;
}
.mw-fit-content {
    max-width: fit-content !important;
}
.mw-input {
    max-width: fit-content !important;
}
.mw-content {
    max-width: var(--content-max-width) !important;
}
.vw-100 {
    width: 100vw !important;
}
.min-vw-100 {
    min-width: 100vw !important;
}
.h-25 {
    height: 25% !important;
}
.h-50 {
    height: 50% !important;
}
.h-75 {
    height: 75% !important;
}
.h-100 {
    height: 100% !important;
}
.h-auto {
    height: auto !important;
}
.mh-100 {
    max-height: 100% !important;
}
.vh-100 {
    height: 100vh !important;
}
.min-vh-100 {
    min-height: 100vh !important;
}
.min-100 {
    min-width: 100% !important;
}
.min-fit-content {
    min-width: fit-content !important;
}
.object-cover {
    object-fit: cover !important;
}
.object-contain {
    object-fit: contain !important;
}
}
@layer utilities {
.flex-fill {
    flex: 1 1 auto !important;
}
.flex-row {
    flex-direction: row !important;
}
.flex-column {
    flex-direction: column !important;
}
.flex-row-reverse {
    flex-direction: row-reverse !important;
}
.flex-column-reverse {
    flex-direction: column-reverse !important;
}
.flex-grow-0 {
    flex-grow: 0 !important;
}
.flex-grow-1 {
    flex-grow: 1 !important;
}
.flex-shrink-0 {
    flex-shrink: 0 !important;
}
.flex-shrink-1 {
    flex-shrink: 1 !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.flex-nowrap {
    flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}
.justify-content-start {
    justify-content: flex-start !important;
}
.justify-content-end {
    justify-content: flex-end !important;
}
.justify-content-center {
    justify-content: center !important;
}
.justify-content-between {
    justify-content: space-between !important;
}
.justify-content-around {
    justify-content: space-around !important;
}
.justify-content-evenly {
    justify-content: space-evenly !important;
}
.align-items-start {
    align-items: flex-start !important;
}
.align-items-end {
    align-items: flex-end !important;
}
.align-items-center {
    align-items: center !important;
}
.align-items-baseline {
    align-items: baseline !important;
}
.align-items-stretch {
    align-items: stretch !important;
}
.align-content-start {
    align-content: flex-start !important;
}
.align-content-end {
    align-content: flex-end !important;
}
.align-content-center {
    align-content: center !important;
}
.align-content-between {
    align-content: space-between !important;
}
.align-content-around {
    align-content: space-around !important;
}
.align-content-stretch {
    align-content: stretch !important;
}
.align-self-auto {
    align-self: auto !important;
}
.align-self-start {
    align-self: flex-start !important;
}
.align-self-end {
    align-self: flex-end !important;
}
.align-self-center {
    align-self: center !important;
}
.align-self-baseline {
    align-self: baseline !important;
}
.align-self-stretch {
    align-self: stretch !important;
}
@media screen and (min-width: 36em) {
.flex-sm-fill {
      flex: 1 1 auto !important;
}
.flex-sm-row {
      flex-direction: row !important;
}
.flex-sm-column {
      flex-direction: column !important;
}
.flex-sm-row-reverse {
      flex-direction: row-reverse !important;
}
.flex-sm-column-reverse {
      flex-direction: column-reverse !important;
}
.flex-sm-grow-0 {
      flex-grow: 0 !important;
}
.flex-sm-grow-1 {
      flex-grow: 1 !important;
}
.flex-sm-shrink-0 {
      flex-shrink: 0 !important;
}
.flex-sm-shrink-1 {
      flex-shrink: 1 !important;
}
.flex-sm-wrap {
      flex-wrap: wrap !important;
}
.flex-sm-nowrap {
      flex-wrap: nowrap !important;
}
.flex-sm-wrap-reverse {
      flex-wrap: wrap-reverse !important;
}
.justify-content-sm-start {
      justify-content: flex-start !important;
}
.justify-content-sm-end {
      justify-content: flex-end !important;
}
.justify-content-sm-center {
      justify-content: center !important;
}
.justify-content-sm-between {
      justify-content: space-between !important;
}
.justify-content-sm-around {
      justify-content: space-around !important;
}
.justify-content-sm-evenly {
      justify-content: space-evenly !important;
}
.align-items-sm-start {
      align-items: flex-start !important;
}
.align-items-sm-end {
      align-items: flex-end !important;
}
.align-items-sm-center {
      align-items: center !important;
}
.align-items-sm-baseline {
      align-items: baseline !important;
}
.align-items-sm-stretch {
      align-items: stretch !important;
}
.align-content-sm-start {
      align-content: flex-start !important;
}
.align-content-sm-end {
      align-content: flex-end !important;
}
.align-content-sm-center {
      align-content: center !important;
}
.align-content-sm-between {
      align-content: space-between !important;
}
.align-content-sm-around {
      align-content: space-around !important;
}
.align-content-sm-stretch {
      align-content: stretch !important;
}
.align-self-sm-auto {
      align-self: auto !important;
}
.align-self-sm-start {
      align-self: flex-start !important;
}
.align-self-sm-end {
      align-self: flex-end !important;
}
.align-self-sm-center {
      align-self: center !important;
}
.align-self-sm-baseline {
      align-self: baseline !important;
}
.align-self-sm-stretch {
      align-self: stretch !important;
}
}
@media screen and (min-width: 62em) {
.flex-md-fill {
      flex: 1 1 auto !important;
}
.flex-md-row {
      flex-direction: row !important;
}
.flex-md-column {
      flex-direction: column !important;
}
.flex-md-row-reverse {
      flex-direction: row-reverse !important;
}
.flex-md-column-reverse {
      flex-direction: column-reverse !important;
}
.flex-md-grow-0 {
      flex-grow: 0 !important;
}
.flex-md-grow-1 {
      flex-grow: 1 !important;
}
.flex-md-shrink-0 {
      flex-shrink: 0 !important;
}
.flex-md-shrink-1 {
      flex-shrink: 1 !important;
}
.flex-md-wrap {
      flex-wrap: wrap !important;
}
.flex-md-nowrap {
      flex-wrap: nowrap !important;
}
.flex-md-wrap-reverse {
      flex-wrap: wrap-reverse !important;
}
.justify-content-md-start {
      justify-content: flex-start !important;
}
.justify-content-md-end {
      justify-content: flex-end !important;
}
.justify-content-md-center {
      justify-content: center !important;
}
.justify-content-md-between {
      justify-content: space-between !important;
}
.justify-content-md-around {
      justify-content: space-around !important;
}
.justify-content-md-evenly {
      justify-content: space-evenly !important;
}
.align-items-md-start {
      align-items: flex-start !important;
}
.align-items-md-end {
      align-items: flex-end !important;
}
.align-items-md-center {
      align-items: center !important;
}
.align-items-md-baseline {
      align-items: baseline !important;
}
.align-items-md-stretch {
      align-items: stretch !important;
}
.align-content-md-start {
      align-content: flex-start !important;
}
.align-content-md-end {
      align-content: flex-end !important;
}
.align-content-md-center {
      align-content: center !important;
}
.align-content-md-between {
      align-content: space-between !important;
}
.align-content-md-around {
      align-content: space-around !important;
}
.align-content-md-stretch {
      align-content: stretch !important;
}
.align-self-md-auto {
      align-self: auto !important;
}
.align-self-md-start {
      align-self: flex-start !important;
}
.align-self-md-end {
      align-self: flex-end !important;
}
.align-self-md-center {
      align-self: center !important;
}
.align-self-md-baseline {
      align-self: baseline !important;
}
.align-self-md-stretch {
      align-self: stretch !important;
}
}
}
@layer utilities {
.order-first {
    order: -1 !important;
}
.order-0 {
    order: 0 !important;
}
.order-1 {
    order: 1 !important;
}
.order-2 {
    order: 2 !important;
}
.order-3 {
    order: 3 !important;
}
.order-4 {
    order: 4 !important;
}
.order-5 {
    order: 5 !important;
}
.order-last {
    order: 99 !important;
}
@media screen and (min-width: 36em) {
.order-sm-first {
      order: -1 !important;
}
.order-sm-0 {
      order: 0 !important;
}
.order-sm-1 {
      order: 1 !important;
}
.order-sm-2 {
      order: 2 !important;
}
.order-sm-3 {
      order: 3 !important;
}
.order-sm-4 {
      order: 4 !important;
}
.order-sm-5 {
      order: 5 !important;
}
.order-sm-last {
      order: 99 !important;
}
}
@media screen and (min-width: 62em) {
.order-md-first {
      order: -1 !important;
}
.order-md-0 {
      order: 0 !important;
}
.order-md-1 {
      order: 1 !important;
}
.order-md-2 {
      order: 2 !important;
}
.order-md-3 {
      order: 3 !important;
}
.order-md-4 {
      order: 4 !important;
}
.order-md-5 {
      order: 5 !important;
}
.order-md-last {
      order: 99 !important;
}
}
}
@layer utilities {
.m-0 {
    margin: var(--spacer-0) !important;
}
.mx-0 {
    margin-left: var(--spacer-0) !important;
    margin-right: var(--spacer-0) !important;
}
.mx-minus-0 {
    margin-left: -var(--spacer-0) !important;
    margin-right: -var(--spacer-0) !important;
}
.my-minus-0 {
    margin-top: -var(--spacer-0) !important;
    margin-bottom: -var(--spacer-0) !important;
}
.my-0 {
    margin-top: var(--spacer-0) !important;
    margin-bottom: var(--spacer-0) !important;
}
.mt-0 {
    margin-top: var(--spacer-0) !important;
}
.me-0 {
    margin-right: var(--spacer-0) !important;
}
.mb-0 {
    margin-bottom: var(--spacer-0) !important;
}
.ms-0 {
    margin-left: var(--spacer-0) !important;
}
.m-1 {
    margin: var(--spacer-1) !important;
}
.mx-1 {
    margin-left: var(--spacer-1) !important;
    margin-right: var(--spacer-1) !important;
}
.mx-minus-1 {
    margin-left: -var(--spacer-1) !important;
    margin-right: -var(--spacer-1) !important;
}
.my-minus-1 {
    margin-top: -var(--spacer-1) !important;
    margin-bottom: -var(--spacer-1) !important;
}
.my-1 {
    margin-top: var(--spacer-1) !important;
    margin-bottom: var(--spacer-1) !important;
}
.mt-1 {
    margin-top: var(--spacer-1) !important;
}
.me-1 {
    margin-right: var(--spacer-1) !important;
}
.mb-1 {
    margin-bottom: var(--spacer-1) !important;
}
.ms-1 {
    margin-left: var(--spacer-1) !important;
}
.m-2 {
    margin: var(--spacer-2) !important;
}
.mx-2 {
    margin-left: var(--spacer-2) !important;
    margin-right: var(--spacer-2) !important;
}
.mx-minus-2 {
    margin-left: -var(--spacer-2) !important;
    margin-right: -var(--spacer-2) !important;
}
.my-minus-2 {
    margin-top: -var(--spacer-2) !important;
    margin-bottom: -var(--spacer-2) !important;
}
.my-2 {
    margin-top: var(--spacer-2) !important;
    margin-bottom: var(--spacer-2) !important;
}
.mt-2 {
    margin-top: var(--spacer-2) !important;
}
.me-2 {
    margin-right: var(--spacer-2) !important;
}
.mb-2 {
    margin-bottom: var(--spacer-2) !important;
}
.ms-2 {
    margin-left: var(--spacer-2) !important;
}
.m-3 {
    margin: var(--spacer-3) !important;
}
.mx-3 {
    margin-left: var(--spacer-3) !important;
    margin-right: var(--spacer-3) !important;
}
.mx-minus-3 {
    margin-left: -var(--spacer-3) !important;
    margin-right: -var(--spacer-3) !important;
}
.my-minus-3 {
    margin-top: -var(--spacer-3) !important;
    margin-bottom: -var(--spacer-3) !important;
}
.my-3 {
    margin-top: var(--spacer-3) !important;
    margin-bottom: var(--spacer-3) !important;
}
.mt-3 {
    margin-top: var(--spacer-3) !important;
}
.me-3 {
    margin-right: var(--spacer-3) !important;
}
.mb-3 {
    margin-bottom: var(--spacer-3) !important;
}
.ms-3 {
    margin-left: var(--spacer-3) !important;
}
.m-4 {
    margin: var(--spacer-4) !important;
}
.mx-4 {
    margin-left: var(--spacer-4) !important;
    margin-right: var(--spacer-4) !important;
}
.mx-minus-4 {
    margin-left: -var(--spacer-4) !important;
    margin-right: -var(--spacer-4) !important;
}
.my-minus-4 {
    margin-top: -var(--spacer-4) !important;
    margin-bottom: -var(--spacer-4) !important;
}
.my-4 {
    margin-top: var(--spacer-4) !important;
    margin-bottom: var(--spacer-4) !important;
}
.mt-4 {
    margin-top: var(--spacer-4) !important;
}
.me-4 {
    margin-right: var(--spacer-4) !important;
}
.mb-4 {
    margin-bottom: var(--spacer-4) !important;
}
.ms-4 {
    margin-left: var(--spacer-4) !important;
}
.m-5 {
    margin: var(--spacer-5) !important;
}
.mx-5 {
    margin-left: var(--spacer-5) !important;
    margin-right: var(--spacer-5) !important;
}
.mx-minus-5 {
    margin-left: -var(--spacer-5) !important;
    margin-right: -var(--spacer-5) !important;
}
.my-minus-5 {
    margin-top: -var(--spacer-5) !important;
    margin-bottom: -var(--spacer-5) !important;
}
.my-5 {
    margin-top: var(--spacer-5) !important;
    margin-bottom: var(--spacer-5) !important;
}
.mt-5 {
    margin-top: var(--spacer-5) !important;
}
.me-5 {
    margin-right: var(--spacer-5) !important;
}
.mb-5 {
    margin-bottom: var(--spacer-5) !important;
}
.ms-5 {
    margin-left: var(--spacer-5) !important;
}
.m-auto {
    margin: auto !important;
}
.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}
.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
.mt-auto {
    margin-top: auto !important;
}
.me-auto {
    margin-right: auto !important;
}
.mb-auto {
    margin-bottom: auto !important;
}
.ms-auto {
    margin-left: auto !important;
}
}
@layer utilities {
.p-0 {
    padding: var(--spacer-0) !important;
}
.px-0 {
    padding-left: var(--spacer-0) !important;
    padding-right: var(--spacer-0) !important;
}
.py-0 {
    padding-top: var(--spacer-0) !important;
    padding-bottom: var(--spacer-0) !important;
}
.pt-0 {
    padding-top: var(--spacer-0) !important;
}
.pe-0 {
    padding-right: var(--spacer-0) !important;
}
.pb-0 {
    padding-bottom: var(--spacer-0) !important;
}
.ps-0 {
    padding-left: var(--spacer-0) !important;
}
.p-1 {
    padding: var(--spacer-1) !important;
}
.px-1 {
    padding-left: var(--spacer-1) !important;
    padding-right: var(--spacer-1) !important;
}
.py-1 {
    padding-top: var(--spacer-1) !important;
    padding-bottom: var(--spacer-1) !important;
}
.pt-1 {
    padding-top: var(--spacer-1) !important;
}
.pe-1 {
    padding-right: var(--spacer-1) !important;
}
.pb-1 {
    padding-bottom: var(--spacer-1) !important;
}
.ps-1 {
    padding-left: var(--spacer-1) !important;
}
.p-2 {
    padding: var(--spacer-2) !important;
}
.px-2 {
    padding-left: var(--spacer-2) !important;
    padding-right: var(--spacer-2) !important;
}
.py-2 {
    padding-top: var(--spacer-2) !important;
    padding-bottom: var(--spacer-2) !important;
}
.pt-2 {
    padding-top: var(--spacer-2) !important;
}
.pe-2 {
    padding-right: var(--spacer-2) !important;
}
.pb-2 {
    padding-bottom: var(--spacer-2) !important;
}
.ps-2 {
    padding-left: var(--spacer-2) !important;
}
.p-3 {
    padding: var(--spacer-3) !important;
}
.px-3 {
    padding-left: var(--spacer-3) !important;
    padding-right: var(--spacer-3) !important;
}
.py-3 {
    padding-top: var(--spacer-3) !important;
    padding-bottom: var(--spacer-3) !important;
}
.pt-3 {
    padding-top: var(--spacer-3) !important;
}
.pe-3 {
    padding-right: var(--spacer-3) !important;
}
.pb-3 {
    padding-bottom: var(--spacer-3) !important;
}
.ps-3 {
    padding-left: var(--spacer-3) !important;
}
.p-4 {
    padding: var(--spacer-4) !important;
}
.px-4 {
    padding-left: var(--spacer-4) !important;
    padding-right: var(--spacer-4) !important;
}
.py-4 {
    padding-top: var(--spacer-4) !important;
    padding-bottom: var(--spacer-4) !important;
}
.pt-4 {
    padding-top: var(--spacer-4) !important;
}
.pe-4 {
    padding-right: var(--spacer-4) !important;
}
.pb-4 {
    padding-bottom: var(--spacer-4) !important;
}
.ps-4 {
    padding-left: var(--spacer-4) !important;
}
.p-5 {
    padding: var(--spacer-5) !important;
}
.px-5 {
    padding-left: var(--spacer-5) !important;
    padding-right: var(--spacer-5) !important;
}
.py-5 {
    padding-top: var(--spacer-5) !important;
    padding-bottom: var(--spacer-5) !important;
}
.pt-5 {
    padding-top: var(--spacer-5) !important;
}
.pe-5 {
    padding-right: var(--spacer-5) !important;
}
.pb-5 {
    padding-bottom: var(--spacer-5) !important;
}
.ps-5 {
    padding-left: var(--spacer-5) !important;
}
}
@layer utilities {
.gap-0 {
    gap: var(--spacer-0) !important;
}
.gap-1 {
    gap: var(--spacer-1) !important;
}
.gap-2 {
    gap: var(--spacer-2) !important;
}
.gap-3 {
    gap: var(--spacer-3) !important;
}
.gap-4 {
    gap: var(--spacer-4) !important;
}
.gap-5 {
    gap: var(--spacer-5) !important;
}
}
@layer utilities {
.font-monospace {
    font-family: var(--font-monospace) !important;
}
.font-body {
    font-family: var(--font-body) !important;
}
.fs-1 {
    font-size: 2.5rem !important;
}
.fs-2 {
    font-size: 2rem !important;
}
.fs-3 {
    font-size: 1.75rem !important;
}
.fs-4 {
    font-size: 1.5rem !important;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.fs-6 {
    font-size: 1rem !important;
}
.fst-italic {
    font-style: italic !important;
}
.fst-normal {
    font-style: normal !important;
}
.fw-light {
    font-weight: 300 !important;
}
.fw-lighter {
    font-weight: lighter !important;
}
.fw-normal {
    font-weight: 400 !important;
}
.fw-bold {
    font-weight: 700 !important;
}
.fw-semibold {
    font-weight: 600 !important;
}
.fw-bolder {
    font-weight: bolder !important;
}
.lh-0 {
    line-height: 0 !important;
}
.lh-1 {
    line-height: 1 !important;
}
.text-start {
    text-align: left !important;
}
.text-end {
    text-align: right !important;
}
.text-center {
    text-align: center !important;
> * {
      margin-inline: auto;
}
}
.text-decoration-none {
    text-decoration: none !important;
}
.text-decoration-underline {
    text-decoration: underline !important;
}
.text-decoration-line-through {
    text-decoration: line-through !important;
}
.text-lowercase {
    text-transform: lowercase !important;
}
.text-uppercase {
    text-transform: uppercase !important;
}
.text-capitalize {
    text-transform: capitalize !important;
}
.text-wrap {
    white-space: normal !important;
}
.text-nowrap {
    white-space: nowrap !important;
}
.text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
}
@media screen and (min-width: 36em) {
.text-sm-start {
      text-align: left !important;
}
.text-sm-end {
      text-align: right !important;
}
.text-sm-center {
      text-align: center !important;
> * {
        margin-inline: auto;
}
}
.text-sm-wrap {
      white-space: normal !important;
}
.text-sm-nowrap {
      white-space: nowrap !important;
}
.text-sm-break {
      word-wrap: break-word !important;
      word-break: break-word !important;
}
}
@media screen and (min-width: 62em) {
.text-md-start {
      text-align: left !important;
}
.text-md-end {
      text-align: right !important;
}
.text-md-center {
      text-align: center !important;
> * {
        margin-inline: auto;
}
}
.text-md-wrap {
      white-space: normal !important;
}
.text-md-nowrap {
      white-space: nowrap !important;
}
.text-md-break {
      word-wrap: break-word !important;
      word-break: break-word !important;
}
}
}
@layer utilities {
.text-heading {
    color: var(--colour-heading) !important;
}
.text-primary {
    color: var(--colour-primary) !important;
}
.bg-primary {
    --bg-colour: var(--colour-primary) !important;
    background-color: var(--colour-primary) !important;
}
.hover-primary:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-primary) !important;
    background-color: var(--colour-primary) !important;
}
.colour-primary {
    --colour: var(--colour-primary) !important;
}
.text-secondary {
    color: var(--colour-secondary) !important;
}
.bg-secondary {
    --bg-colour: var(--colour-secondary) !important;
    background-color: var(--colour-secondary) !important;
}
.hover-secondary:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-secondary) !important;
    background-color: var(--colour-secondary) !important;
}
.colour-secondary {
    --colour: var(--colour-secondary) !important;
}
.text-info {
    color: var(--colour-info) !important;
}
.bg-info {
    --bg-colour: var(--colour-info) !important;
    background-color: var(--colour-info) !important;
}
.hover-info:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-info) !important;
    background-color: var(--colour-info) !important;
}
.colour-info {
    --colour: var(--colour-info) !important;
}
.text-warning {
    color: var(--colour-warning) !important;
}
.bg-warning {
    --bg-colour: var(--colour-warning) !important;
    background-color: var(--colour-warning) !important;
}
.hover-warning:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-warning) !important;
    background-color: var(--colour-warning) !important;
}
.colour-warning {
    --colour: var(--colour-warning) !important;
}
.text-success {
    color: var(--colour-success) !important;
}
.bg-success {
    --bg-colour: var(--colour-success) !important;
    background-color: var(--colour-success) !important;
}
.hover-success:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-success) !important;
    background-color: var(--colour-success) !important;
}
.colour-success {
    --colour: var(--colour-success) !important;
}
.text-complete {
    color: var(--colour-complete) !important;
}
.bg-complete {
    --bg-colour: var(--colour-complete) !important;
    background-color: var(--colour-complete) !important;
}
.hover-complete:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-complete) !important;
    background-color: var(--colour-complete) !important;
}
.colour-complete {
    --colour: var(--colour-complete) !important;
}
.text-danger {
    color: var(--colour-danger) !important;
}
.bg-danger {
    --bg-colour: var(--colour-danger) !important;
    background-color: var(--colour-danger) !important;
}
.hover-danger:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-danger) !important;
    background-color: var(--colour-danger) !important;
}
.colour-danger {
    --colour: var(--colour-danger) !important;
}
.text-dark {
    color: var(--colour-dark) !important;
}
.bg-dark {
    --bg-colour: var(--colour-dark) !important;
    background-color: var(--colour-dark) !important;
}
.hover-dark:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-dark) !important;
    background-color: var(--colour-dark) !important;
}
.colour-dark {
    --colour: var(--colour-dark) !important;
}
.text-light {
    color: var(--colour-light) !important;
}
.bg-light {
    --bg-colour: var(--colour-light) !important;
    background-color: var(--colour-light) !important;
}
.hover-light:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-light) !important;
    background-color: var(--colour-light) !important;
}
.colour-light {
    --colour: var(--colour-light) !important;
}
.text-canvas {
    color: var(--colour-canvas) !important;
}
.bg-canvas {
    --bg-colour: var(--colour-canvas) !important;
    background-color: var(--colour-canvas) !important;
}
.hover-canvas:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-canvas) !important;
    background-color: var(--colour-canvas) !important;
}
.colour-canvas {
    --colour: var(--colour-canvas) !important;
}
.text-white {
    color: var(--colour-white) !important;
}
.bg-white {
    --bg-colour: var(--colour-white) !important;
    background-color: var(--colour-white) !important;
}
.hover-white:is(:hover, :focus, :focus-within) {
    --bg-colour: var(--colour-white) !important;
    background-color: var(--colour-white) !important;
}
.colour-white {
    --colour: var(--colour-white) !important;
}
.text-body {
    color: var(--colour-body) !important;
}
.text-muted {
    color: var(--colour-muted) !important;
}
}
@layer utilities {
.bg-gradient {
    background-image: var(--gradient) !important;
}
.gradient-success {
    --gradient-direction: 180deg;
    background-image: linear-gradient(var(--gradient-direction), var(--colour-success-theme) 0, transparent 100%) !important;
}
.gradient-primary {
    --gradient-direction: 180deg;
    background-image: linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, transparent 100%) !important;
}
.gradient-info {
    --gradient-direction: 180deg;
    background-image: linear-gradient(var(--gradient-direction), var(--colour-info-theme) 0, transparent 100%) !important;
}
.gradient-direction-left {
    --gradient-direction: 90deg;
}
.gradient-direction-angle {
    --gradient-direction: 135deg;
}
}
@layer utilities {
.pe-none {
    pointer-events: none !important;
}
.pe-auto {
    pointer-events: auto !important;
}
}
@layer utilities {
.rounded {
    border-radius: var(--border-radius) !important;
}
.rounded-0 {
    border-radius: 0 !important;
}
.rounded-1 {
    border-radius: var(--border-radius-sm) !important;
}
.rounded-2 {
    border-radius: var(--border-radius) !important;
}
.rounded-3 {
    border-radius: var(--border-radius-lg) !important;
}
.rounded-4 {
    border-radius: var(--border-radius-xl) !important;
}
.rounded-5 {
    border-radius: var(--border-radius-2xl) !important;
}
.rounded-circle {
    border-radius: 50% !important;
}
.rounded-pill {
    border-radius: var(--border-radius-pill) !important;
}
.rounded-top {
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
}
.rounded-end {
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}
.rounded-bottom {
    border-bottom-right-radius: var(--border-radius) !important;
    border-bottom-left-radius: var(--border-radius) !important;
}
.rounded-start {
    border-bottom-left-radius: var(--border-radius) !important;
    border-top-left-radius: var(--border-radius) !important;
}
}
@layer utilities {
.visible {
    visibility: visible !important;
}
.invisible {
    visibility: hidden !important;
}
}
@layer utilities {
[class*=columns-] {
    column-gap: var(--gap, 1rem);
> li {
      break-inside: avoid-column;
}
}
.columns-2 {
    column-count: 2;
}
.columns-3 {
    column-count: 3;
}
.columns-4 {
    column-count: 4;
}
@media screen and (min-width: 36em) {
.columns-sm-2 {
      column-count: 2;
}
.columns-sm-3 {
      column-count: 3;
}
.columns-sm-4 {
      column-count: 4;
}
}
@media screen and (min-width: 62em) {
.columns-md-2 {
      column-count: 2;
}
.columns-md-3 {
      column-count: 3;
}
.columns-md-4 {
      column-count: 4;
}
}
}
/* #region no shadow */
@layer utilities {
.shadow-none {
    box-shadow: none !important;
}
.box-shadow {
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
}
}
/* #endregion */
/* #region grid mixins */
/* #endregion */
@layer utilities {
  /* #region Grid utility classes */
.grid {
    display: grid !important;
    grid-template-columns: subgrid !important;
}
.grid > * {
    grid-column: var(--col-start, col-1-start)/var(--col-end, col-12-end);
}
.sub-grid {
    display: grid !important;
    grid-template-rows: auto !important;
    grid-template-columns: [content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end] !important;
    column-gap: var(--gap) !important;
}
.sub-grid > * {
    grid-column: var(--col-start, col-1-start)/var(--col-end, col-12-end);
}
*:has([class*=order-]:not([class*=border-])) > *:not([class*=order-]) {
    order: 99;
}
.inline-start {
    justify-self: start;
}
.block-start {
    align-self: start;
}
.inline-center {
    justify-self: center;
}
.block-center {
    align-self: center;
}
.inline-end {
    justify-self: end;
}
.block-end {
    align-self: end;
}
.display-contents {
    display: contents;
}
.display-none {
    display: none;
}
.display-block {
    display: block;
}
.display-grid {
    display: grid;
}
.flow-dense {
    /*  Apply to a wrapper div of the items */
    grid-auto-flow: dense;
}
.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.order-4 {
    order: 4;
}
.order-5 {
    order: 5;
}
.order-6 {
    order: 6;
}
.order-7 {
    order: 7;
}
.order-8 {
    order: 8;
}
.order-9 {
    order: 9;
}
.order-10 {
    order: 10;
}
@media screen and (min-width: 36em) {
.sm-inline-start {
      justify-self: start;
}
.sm-block-start {
      align-self: start;
}
.sm-inline-center {
      justify-self: center;
}
.sm-block-center {
      align-self: center;
}
.sm-inline-end {
      justify-self: end;
}
.sm-block-end {
      align-self: end;
}
.sm-display-contents {
      display: contents;
}
.sm-display-none {
      display: none;
}
.sm-display-block {
      display: block;
}
.sm-display-grid {
      display: grid;
}
.sm-flow-dense {
      /*  Apply to a wrapper div of the items */
      grid-auto-flow: dense;
}
.sm-order-1 {
      order: 1;
}
.sm-order-2 {
      order: 2;
}
.sm-order-3 {
      order: 3;
}
.sm-order-4 {
      order: 4;
}
.sm-order-5 {
      order: 5;
}
.sm-order-6 {
      order: 6;
}
.sm-order-7 {
      order: 7;
}
.sm-order-8 {
      order: 8;
}
.sm-order-9 {
      order: 9;
}
.sm-order-10 {
      order: 10;
}
}
@media screen and (min-width: 62em) {
.md-inline-start {
      justify-self: start;
}
.md-block-start {
      align-self: start;
}
.md-inline-center {
      justify-self: center;
}
.md-block-center {
      align-self: center;
}
.md-inline-end {
      justify-self: end;
}
.md-block-end {
      align-self: end;
}
.md-display-contents {
      display: contents;
}
.md-display-none {
      display: none;
}
.md-display-block {
      display: block;
}
.md-display-grid {
      display: grid;
}
.md-flow-dense {
      /*  Apply to a wrapper div of the items */
      grid-auto-flow: dense;
}
.md-order-1 {
      order: 1;
}
.md-order-2 {
      order: 2;
}
.md-order-3 {
      order: 3;
}
.md-order-4 {
      order: 4;
}
.md-order-5 {
      order: 5;
}
.md-order-6 {
      order: 6;
}
.md-order-7 {
      order: 7;
}
.md-order-8 {
      order: 8;
}
.md-order-9 {
      order: 9;
}
.md-order-10 {
      order: 10;
}
}
  /* #endregion */
  /* #region Create the columns */
:is([class*=col-start-], [class*=col-end-], [class*=col-span-]) {
    grid-column: var(--col-start, col-1-start)/var(--col-end, col-12-end);
}
*:not(:where(html, body)):has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-])) {
    display: grid;
    grid-template-columns: subgrid;
}
*:not(:where(html, body)):has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-])) [class*=col-]:not([class*=col-start-auto]) {
    --col-start: col-1;
}
*:not(:where(html, body)):has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-])) [class*=col-] [class*=col-] {
    --col-start: auto;
}
*:not(:where(html, body)):has(:is([class*=cols-], [class*=col-start-], [class*=col-end-], [class*=col-span-]):not([class*=row-cols-])) * {
    grid-column: var(--col-start, col-1-start)/var(--col-end, col-12-end);
}
*:not(:where(main)):has(> [class*=col-]) {
    display: grid;
    grid-template-columns: subgrid;
}
.col-start-auto {
    --col-start: auto;
}
.col-start-auto:first-child {
    --col-start: col-1;
}
hr + .col-start-auto {
    --col-start: col-1;
}
.col-start-1 {
    --col-start: col-1-start !important;
}
.col-end-1 {
    --col-end: col-1-end;
}
.col-end-1 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-2-start;
}
.col-span-1 {
    --col-end: span 1;
}
.col-span-1 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-2-start;
}
.col-start-2 {
    --col-start: col-2-start !important;
}
.col-end-2 {
    --col-end: col-2-end;
}
.col-end-2 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-3-start;
}
.col-span-2 {
    --col-end: span 2;
}
.col-span-2 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-3-start;
}
.col-start-3 {
    --col-start: col-3-start !important;
}
.col-end-3 {
    --col-end: col-3-end;
}
.col-end-3 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-4-start;
}
.col-span-3 {
    --col-end: span 3;
}
.col-span-3 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-4-start;
}
.col-start-4 {
    --col-start: col-4-start !important;
}
.col-end-4 {
    --col-end: col-4-end;
}
.col-end-4 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-5-start;
}
.col-span-4 {
    --col-end: span 4;
}
.col-span-4 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-5-start;
}
.col-start-5 {
    --col-start: col-5-start !important;
}
.col-end-5 {
    --col-end: col-5-end;
}
.col-end-5 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-6-start;
}
.col-span-5 {
    --col-end: span 5;
}
.col-span-5 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-6-start;
}
.col-start-6 {
    --col-start: col-6-start !important;
}
.col-end-6 {
    --col-end: col-6-end;
}
.col-end-6 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-7-start;
}
.col-span-6 {
    --col-end: span 6;
}
.col-span-6 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-7-start;
}
.col-start-7 {
    --col-start: col-7-start !important;
}
.col-end-7 {
    --col-end: col-7-end;
}
.col-end-7 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-8-start;
}
.col-span-7 {
    --col-end: span 7;
}
.col-span-7 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-8-start;
}
.col-start-8 {
    --col-start: col-8-start !important;
}
.col-end-8 {
    --col-end: col-8-end;
}
.col-end-8 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-9-start;
}
.col-span-8 {
    --col-end: span 8;
}
.col-span-8 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-9-start;
}
.col-start-9 {
    --col-start: col-9-start !important;
}
.col-end-9 {
    --col-end: col-9-end;
}
.col-end-9 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-10-start;
}
.col-span-9 {
    --col-end: span 9;
}
.col-span-9 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-10-start;
}
.col-start-10 {
    --col-start: col-10-start !important;
}
.col-end-10 {
    --col-end: col-10-end;
}
.col-end-10 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-11-start;
}
.col-span-10 {
    --col-end: span 10;
}
.col-span-10 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-11-start;
}
.col-start-11 {
    --col-start: col-11-start !important;
}
.col-end-11 {
    --col-end: col-11-end;
}
.col-end-11 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-12-start;
}
.col-span-11 {
    --col-end: span 11;
}
.col-span-11 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-12-start;
}
.col-start-12 {
    --col-start: col-12-start !important;
}
.col-end-12 {
    --col-end: col-12-end;
}
.col-end-12 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-13-start;
}
.col-span-12 {
    --col-end: span 12;
}
.col-span-12 + .col-start-auto:not([class*=col-span-]) {
    --col-start: col-13-start;
}
@media screen and (min-width: 36em) {
*:not(:where(main)):has(> [class*=sm-col-]) {
      display: grid;
      grid-template-columns: subgrid;
}
.sm-col-start-auto {
      --col-start: auto;
}
.sm-col-start-auto:first-child {
      --col-start: col-1;
}
hr + .sm-col-start-auto {
      --col-start: col-1;
}
.sm-col-start-1 {
      --col-start: col-1-start !important;
}
.sm-col-end-1 {
      --col-end: col-1-end;
}
.sm-col-end-1 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-2-start;
}
.sm-col-span-1 {
      --col-end: span 1;
}
.sm-col-span-1 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-2-start;
}
.sm-col-start-2 {
      --col-start: col-2-start !important;
}
.sm-col-end-2 {
      --col-end: col-2-end;
}
.sm-col-end-2 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-3-start;
}
.sm-col-span-2 {
      --col-end: span 2;
}
.sm-col-span-2 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-3-start;
}
.sm-col-start-3 {
      --col-start: col-3-start !important;
}
.sm-col-end-3 {
      --col-end: col-3-end;
}
.sm-col-end-3 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-4-start;
}
.sm-col-span-3 {
      --col-end: span 3;
}
.sm-col-span-3 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-4-start;
}
.sm-col-start-4 {
      --col-start: col-4-start !important;
}
.sm-col-end-4 {
      --col-end: col-4-end;
}
.sm-col-end-4 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-5-start;
}
.sm-col-span-4 {
      --col-end: span 4;
}
.sm-col-span-4 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-5-start;
}
.sm-col-start-5 {
      --col-start: col-5-start !important;
}
.sm-col-end-5 {
      --col-end: col-5-end;
}
.sm-col-end-5 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-6-start;
}
.sm-col-span-5 {
      --col-end: span 5;
}
.sm-col-span-5 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-6-start;
}
.sm-col-start-6 {
      --col-start: col-6-start !important;
}
.sm-col-end-6 {
      --col-end: col-6-end;
}
.sm-col-end-6 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-7-start;
}
.sm-col-span-6 {
      --col-end: span 6;
}
.sm-col-span-6 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-7-start;
}
.sm-col-start-7 {
      --col-start: col-7-start !important;
}
.sm-col-end-7 {
      --col-end: col-7-end;
}
.sm-col-end-7 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-8-start;
}
.sm-col-span-7 {
      --col-end: span 7;
}
.sm-col-span-7 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-8-start;
}
.sm-col-start-8 {
      --col-start: col-8-start !important;
}
.sm-col-end-8 {
      --col-end: col-8-end;
}
.sm-col-end-8 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-9-start;
}
.sm-col-span-8 {
      --col-end: span 8;
}
.sm-col-span-8 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-9-start;
}
.sm-col-start-9 {
      --col-start: col-9-start !important;
}
.sm-col-end-9 {
      --col-end: col-9-end;
}
.sm-col-end-9 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-10-start;
}
.sm-col-span-9 {
      --col-end: span 9;
}
.sm-col-span-9 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-10-start;
}
.sm-col-start-10 {
      --col-start: col-10-start !important;
}
.sm-col-end-10 {
      --col-end: col-10-end;
}
.sm-col-end-10 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-11-start;
}
.sm-col-span-10 {
      --col-end: span 10;
}
.sm-col-span-10 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-11-start;
}
.sm-col-start-11 {
      --col-start: col-11-start !important;
}
.sm-col-end-11 {
      --col-end: col-11-end;
}
.sm-col-end-11 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-12-start;
}
.sm-col-span-11 {
      --col-end: span 11;
}
.sm-col-span-11 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-12-start;
}
.sm-col-start-12 {
      --col-start: col-12-start !important;
}
.sm-col-end-12 {
      --col-end: col-12-end;
}
.sm-col-end-12 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-13-start;
}
.sm-col-span-12 {
      --col-end: span 12;
}
.sm-col-span-12 + .sm-col-start-auto:not([class*=col-span-]) {
      --col-start: col-13-start;
}
}
@media screen and (min-width: 62em) {
*:not(:where(main)):has(> [class*=md-col-]) {
      display: grid;
      grid-template-columns: subgrid;
}
.md-col-start-auto {
      --col-start: auto;
}
.md-col-start-auto:first-child {
      --col-start: col-1;
}
hr + .md-col-start-auto {
      --col-start: col-1;
}
.md-col-start-1 {
      --col-start: col-1-start !important;
}
.md-col-end-1 {
      --col-end: col-1-end;
}
.md-col-end-1 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-2-start;
}
.md-col-span-1 {
      --col-end: span 1;
}
.md-col-span-1 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-2-start;
}
.md-col-start-2 {
      --col-start: col-2-start !important;
}
.md-col-end-2 {
      --col-end: col-2-end;
}
.md-col-end-2 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-3-start;
}
.md-col-span-2 {
      --col-end: span 2;
}
.md-col-span-2 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-3-start;
}
.md-col-start-3 {
      --col-start: col-3-start !important;
}
.md-col-end-3 {
      --col-end: col-3-end;
}
.md-col-end-3 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-4-start;
}
.md-col-span-3 {
      --col-end: span 3;
}
.md-col-span-3 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-4-start;
}
.md-col-start-4 {
      --col-start: col-4-start !important;
}
.md-col-end-4 {
      --col-end: col-4-end;
}
.md-col-end-4 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-5-start;
}
.md-col-span-4 {
      --col-end: span 4;
}
.md-col-span-4 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-5-start;
}
.md-col-start-5 {
      --col-start: col-5-start !important;
}
.md-col-end-5 {
      --col-end: col-5-end;
}
.md-col-end-5 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-6-start;
}
.md-col-span-5 {
      --col-end: span 5;
}
.md-col-span-5 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-6-start;
}
.md-col-start-6 {
      --col-start: col-6-start !important;
}
.md-col-end-6 {
      --col-end: col-6-end;
}
.md-col-end-6 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-7-start;
}
.md-col-span-6 {
      --col-end: span 6;
}
.md-col-span-6 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-7-start;
}
.md-col-start-7 {
      --col-start: col-7-start !important;
}
.md-col-end-7 {
      --col-end: col-7-end;
}
.md-col-end-7 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-8-start;
}
.md-col-span-7 {
      --col-end: span 7;
}
.md-col-span-7 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-8-start;
}
.md-col-start-8 {
      --col-start: col-8-start !important;
}
.md-col-end-8 {
      --col-end: col-8-end;
}
.md-col-end-8 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-9-start;
}
.md-col-span-8 {
      --col-end: span 8;
}
.md-col-span-8 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-9-start;
}
.md-col-start-9 {
      --col-start: col-9-start !important;
}
.md-col-end-9 {
      --col-end: col-9-end;
}
.md-col-end-9 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-10-start;
}
.md-col-span-9 {
      --col-end: span 9;
}
.md-col-span-9 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-10-start;
}
.md-col-start-10 {
      --col-start: col-10-start !important;
}
.md-col-end-10 {
      --col-end: col-10-end;
}
.md-col-end-10 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-11-start;
}
.md-col-span-10 {
      --col-end: span 10;
}
.md-col-span-10 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-11-start;
}
.md-col-start-11 {
      --col-start: col-11-start !important;
}
.md-col-end-11 {
      --col-end: col-11-end;
}
.md-col-end-11 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-12-start;
}
.md-col-span-11 {
      --col-end: span 11;
}
.md-col-span-11 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-12-start;
}
.md-col-start-12 {
      --col-start: col-12-start !important;
}
.md-col-end-12 {
      --col-end: col-12-end;
}
.md-col-end-12 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-13-start;
}
.md-col-span-12 {
      --col-end: span 12;
}
.md-col-span-12 + .md-col-start-auto:not([class*=col-span-]) {
      --col-start: col-13-start;
}
}
  /* #endregion */
  /* #region Create rows */
:where([class*=row-], [class*=rows-]) {
    grid-row: var(--row-start, auto)/span var(--row-span, 1);
}
  /*  Assign how many rows an item takes */
.row-span-1 {
    --row-span: 1;
}
.row-span-2 {
    --row-span: 2;
}
.row-span-3 {
    --row-span: 3;
}
.row-span-4 {
    --row-span: 4;
}
.row-span-5 {
    --row-span: 5;
}
.row-span-6 {
    --row-span: 6;
}
.row-span-7 {
    --row-span: 7;
}
.row-span-8 {
    --row-span: 8;
}
.row-span-9 {
    --row-span: 9;
}
.row-span-10 {
    --row-span: 10;
}
  /*  Move the item to a set row */
.row-start-1 {
    --row-start: 1;
}
.row-start-2 {
    --row-start: 2;
}
.row-start-3 {
    --row-start: 3;
}
.row-start-4 {
    --row-start: 4;
}
.row-start-5 {
    --row-start: 5;
}
.row-start-6 {
    --row-start: 6;
}
.row-start-7 {
    --row-start: 7;
}
.row-start-8 {
    --row-start: 8;
}
.row-start-9 {
    --row-start: 9;
}
.row-start-10 {
    --row-start: 10;
}
.row-start-11 {
    --row-start: 11;
}
.row-start-12 {
    --row-start: 12;
}
.row-start-13 {
    --row-start: 13;
}
.row-start-14 {
    --row-start: 14;
}
.row-start-15 {
    --row-start: 15;
}
.row-start-16 {
    --row-start: 16;
}
.row-start-17 {
    --row-start: 17;
}
.row-start-18 {
    --row-start: 18;
}
.row-start-19 {
    --row-start: 19;
}
.row-start-20 {
    --row-start: 20;
}
@media screen and (min-width: 36em) {
    /*  Assign how many rows an item takes */
.sm-row-span-1 {
      --row-span: 1;
}
.sm-row-span-2 {
      --row-span: 2;
}
.sm-row-span-3 {
      --row-span: 3;
}
.sm-row-span-4 {
      --row-span: 4;
}
.sm-row-span-5 {
      --row-span: 5;
}
.sm-row-span-6 {
      --row-span: 6;
}
.sm-row-span-7 {
      --row-span: 7;
}
.sm-row-span-8 {
      --row-span: 8;
}
.sm-row-span-9 {
      --row-span: 9;
}
.sm-row-span-10 {
      --row-span: 10;
}
    /*  Move the item to a set row */
.sm-row-start-1 {
      --row-start: 1;
}
.sm-row-start-2 {
      --row-start: 2;
}
.sm-row-start-3 {
      --row-start: 3;
}
.sm-row-start-4 {
      --row-start: 4;
}
.sm-row-start-5 {
      --row-start: 5;
}
.sm-row-start-6 {
      --row-start: 6;
}
.sm-row-start-7 {
      --row-start: 7;
}
.sm-row-start-8 {
      --row-start: 8;
}
.sm-row-start-9 {
      --row-start: 9;
}
.sm-row-start-10 {
      --row-start: 10;
}
.sm-row-start-11 {
      --row-start: 11;
}
.sm-row-start-12 {
      --row-start: 12;
}
.sm-row-start-13 {
      --row-start: 13;
}
.sm-row-start-14 {
      --row-start: 14;
}
.sm-row-start-15 {
      --row-start: 15;
}
.sm-row-start-16 {
      --row-start: 16;
}
.sm-row-start-17 {
      --row-start: 17;
}
.sm-row-start-18 {
      --row-start: 18;
}
.sm-row-start-19 {
      --row-start: 19;
}
.sm-row-start-20 {
      --row-start: 20;
}
}
@media screen and (min-width: 62em) {
    /*  Assign how many rows an item takes */
.md-row-span-1 {
      --row-span: 1;
}
.md-row-span-2 {
      --row-span: 2;
}
.md-row-span-3 {
      --row-span: 3;
}
.md-row-span-4 {
      --row-span: 4;
}
.md-row-span-5 {
      --row-span: 5;
}
.md-row-span-6 {
      --row-span: 6;
}
.md-row-span-7 {
      --row-span: 7;
}
.md-row-span-8 {
      --row-span: 8;
}
.md-row-span-9 {
      --row-span: 9;
}
.md-row-span-10 {
      --row-span: 10;
}
    /*  Move the item to a set row */
.md-row-start-1 {
      --row-start: 1;
}
.md-row-start-2 {
      --row-start: 2;
}
.md-row-start-3 {
      --row-start: 3;
}
.md-row-start-4 {
      --row-start: 4;
}
.md-row-start-5 {
      --row-start: 5;
}
.md-row-start-6 {
      --row-start: 6;
}
.md-row-start-7 {
      --row-start: 7;
}
.md-row-start-8 {
      --row-start: 8;
}
.md-row-start-9 {
      --row-start: 9;
}
.md-row-start-10 {
      --row-start: 10;
}
.md-row-start-11 {
      --row-start: 11;
}
.md-row-start-12 {
      --row-start: 12;
}
.md-row-start-13 {
      --row-start: 13;
}
.md-row-start-14 {
      --row-start: 14;
}
.md-row-start-15 {
      --row-start: 15;
}
.md-row-start-16 {
      --row-start: 16;
}
.md-row-start-17 {
      --row-start: 17;
}
.md-row-start-18 {
      --row-start: 18;
}
.md-row-start-19 {
      --row-start: 19;
}
.md-row-start-20 {
      --row-start: 20;
}
}
  /* #endregion */
  /* #region Create the Columns wrappers */
[class*=cols-]:not(.row) {
    display: grid;
    grid-template-columns: subgrid;
}
.cols-1 > * {
    grid-column: auto/span 12 !important;
}
.cols-2 > * {
    grid-column: auto/span 6 !important;
}
.cols-3 > * {
    grid-column: auto/span 4 !important;
}
.cols-4 > * {
    grid-column: auto/span 3 !important;
}
.cols-5 > * {
    grid-column: auto/span 2 !important;
}
.cols-6 > * {
    grid-column: auto/span 2 !important;
}
@media screen and (min-width: 36em) {
.sm-cols-1 > * {
      grid-column: auto/span 12 !important;
}
.sm-cols-2 > * {
      grid-column: auto/span 6 !important;
}
.sm-cols-3 > * {
      grid-column: auto/span 4 !important;
}
.sm-cols-4 > * {
      grid-column: auto/span 3 !important;
}
.sm-cols-5 > * {
      grid-column: auto/span 2 !important;
}
.sm-cols-6 > * {
      grid-column: auto/span 2 !important;
}
}
@media screen and (min-width: 62em) {
.md-cols-1 > * {
      grid-column: auto/span 12 !important;
}
.md-cols-2 > * {
      grid-column: auto/span 6 !important;
}
.md-cols-3 > * {
      grid-column: auto/span 4 !important;
}
.md-cols-4 > * {
      grid-column: auto/span 3 !important;
}
.md-cols-5 > * {
      grid-column: auto/span 2 !important;
}
.md-cols-6 > * {
      grid-column: auto/span 2 !important;
}
}
  /* #endregion */
  /* #region auto grid */
.auto-grid {
    display: flex;
    flex-wrap: nowrap;
    column-gap: var(--gap);
}
.auto-grid > * {
    display: block !important;
    width: 100%;
}
@media screen and (min-width: 36em) {
.sm-auto-grid {
      display: flex;
      column-gap: var(--gap);
}
.sm-auto-grid > * {
      display: block !important;
      width: 100%;
}
}
@media screen and (min-width: 62em) {
.md-auto-grid {
      display: flex;
      column-gap: var(--gap);
}
.md-auto-grid > * {
      display: block !important;
      width: 100%;
}
}
  /* #endregion */
  /* #region Bootstrap grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--gap)); /*  stylelint-disable-line function-disallowed-list */
    margin-left: calc(-0.5 * var(--gap)); /*  stylelint-disable-line function-disallowed-list */
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gap) * 0.5);
    padding-left: calc(var(--gap) * 0.5);
}
.col {
    flex: 1 0 0%;
}
.col-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
}
.col-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
}
.col-3 {
    flex: 0 0 auto;
    width: 25%;
}
.col-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
}
.col-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.col-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
}
.col-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
}
.col-9 {
    flex: 0 0 auto;
    width: 75%;
}
.col-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
}
.col-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
.row-cols-auto {
    display: flex;
    flex: 0 0 auto;
    width: auto;
}
.row-cols-auto > * {
    display: block !important;
    width: 100%;
}
.row-cols-1 {
    display: flex;
}
.row-cols-1 > * {
    display: block !important;
    flex: 0 0 auto;
    width: 100%;
}
.row-cols-2 {
    display: flex;
}
.row-cols-2 > * {
    display: block !important;
    flex: 0 0 auto;
    width: 50%;
}
.row-cols-3 {
    display: flex;
}
.row-cols-3 > * {
    display: block !important;
    flex: 0 0 auto;
    width: 33.3333333333%;
}
.row-cols-4 {
    display: flex;
}
.row-cols-4 > * {
    display: block !important;
    flex: 0 0 auto;
    width: 25%;
}
@media screen and (min-width: 36em) {
.row-cols-sm-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
}
.row-cols-sm-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
}
.row-cols-sm-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
}
.row-cols-sm-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
}
.col-sm-auto {
      flex: 0 0 auto;
      width: auto;
}
.col-sm-1 {
      flex: 0 0 auto;
      width: 8.3333333333%;
}
.col-sm-2 {
      flex: 0 0 auto;
      width: 16.6666666667%;
}
.col-sm-3 {
      flex: 0 0 auto;
      width: 25%;
}
.col-sm-4 {
      flex: 0 0 auto;
      width: 33.3333333333%;
}
.col-sm-5 {
      flex: 0 0 auto;
      width: 41.6666666667%;
}
.col-sm-6 {
      flex: 0 0 auto;
      width: 50%;
}
.col-sm-7 {
      flex: 0 0 auto;
      width: 58.3333333333%;
}
.col-sm-8 {
      flex: 0 0 auto;
      width: 66.6666666667%;
}
.col-sm-9 {
      flex: 0 0 auto;
      width: 75%;
}
.col-sm-10 {
      flex: 0 0 auto;
      width: 83.3333333333%;
}
.col-sm-11 {
      flex: 0 0 auto;
      width: 91.6666666667%;
}
.col-sm-12 {
      flex: 0 0 auto;
      width: 100%;
}
}
@media screen and (min-width: 62em) {
.row-cols-md-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
}
.row-cols-md-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
}
.row-cols-md-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
}
.row-cols-md-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
}
.col-md-auto {
      flex: 0 0 auto;
      width: auto;
}
.col-md-1 {
      flex: 0 0 auto;
      width: 8.3333333333%;
}
.col-md-2 {
      flex: 0 0 auto;
      width: 16.6666666667%;
}
.col-md-3 {
      flex: 0 0 auto;
      width: 25%;
}
.col-md-4 {
      flex: 0 0 auto;
      width: 33.3333333333%;
}
.col-md-5 {
      flex: 0 0 auto;
      width: 41.6666666667%;
}
.col-md-6 {
      flex: 0 0 auto;
      width: 50%;
}
.col-md-7 {
      flex: 0 0 auto;
      width: 58.3333333333%;
}
.col-md-8 {
      flex: 0 0 auto;
      width: 66.6666666667%;
}
.col-md-9 {
      flex: 0 0 auto;
      width: 75%;
}
.col-md-10 {
      flex: 0 0 auto;
      width: 83.3333333333%;
}
.col-md-11 {
      flex: 0 0 auto;
      width: 91.6666666667%;
}
.col-md-12 {
      flex: 0 0 auto;
      width: 100%;
}
}
  /* #endregion */
}
@layer utilities {
.has-text-align-center {
    margin-inline: auto;
    text-align: center;
}
}
code {
  font-family: "Source Code Pro", monospace;
}
.note {
  border-left: 2px solid var(--colour-danger);
  padding: 1rem 0.5rem 1rem 0.5rem;
  background: rgba(0, 0, 0, 0.05);
}
.note strong:first-child {
  color: var(--colour-danger);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  padding-bottom: 1rem;
}
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-size: 1rem;
  line-height: 1.25rem;
  padding-bottom: 1rem;
}
.markdown-body {
  container-type: inline-size;
}
.markdown-body td {
  min-width: 0 !important;
}
@container (width < 23.4375em) {
.markdown-body td:empty {
    display: none;
}
}
.markdown-body p:has(strong:first-child:last-child) {
  color: var(--colour-primary);
  padding-bottom: 0.5rem;
}
.version-control {
  padding-top: 3rem;
}
.version-control > .container {
  container-type: inline-size;
}
.version-control table {
  --border-width: 0px;
  --inner-border-width: 0px;
}
.version-control table thead th {
  padding-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--colour-body);
}
.version-control table thead th:nth-child(1) {
  width: 1rem;
}
.version-control table thead th:nth-child(2) {
  width: 1rem;
}
.version-control table tr:has(th:nth-child(4)) th:nth-child(3) {
  width: 9rem;
}
.version-control table tr > *:first-child {
  padding-inline-start: 0;
}
.version-control table td {
  padding-top: 0;
}
@container (width < 36em) {
.version-control table tr > *:nth-child(2) {
    display: none;
}
.version-control table tr:has(*:nth-child(4)) > *:nth-child(3) {
    display: none;
}
}
@container (width >= 36em) {
.version-control table thead th:nth-child(1) {
    width: 9rem;
}
.version-control table thead th:nth-child(2) {
    width: 8rem;
}
.version-control table tr:has(th:nth-child(4)) th:nth-child(3) {
    width: 9rem;
}
}
@media screen and (max-width: 62em) {
.nav__inner {
    display: none;
}
#showMenu:checked ~ .nav__inner {
    display: block;
}
}
.ds-header {
  --colour-heading: var(--colour-white);
}
mark {
  padding-inline: 0;
}
a.router-link-active:not(.text-decoration-none):not(.btn):before {
  width: 100%;
}
iam-nav > a.router-link-active:not([slot=logo]) {
  text-decoration: underline !important;
  text-underline-offset: 0.3em !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: var(--colour-info) !important;
}
.nav {
  overflow-x: visible;
}
.nav:has(#showMenu:checked) {
  min-height: unset;
}
footer .router-link-active {
  text-decoration: none;
}
@layer reset {
#visualtest:target ~ *:not(main),
  #visualtest:target ~ main > *:not(.visualtest, .visualtest--container) {
    display: none !important;
}
}
@layer utilities {
#visualtest:target ~ main > .d-none.visualtest {
    display: block !important;
}
}
#visualtest:target ~ main > .visualtest .visualtest-hide,
#visualtest:target ~ main > .visualtest pre {
  display: none !important;
}
.markdown-body {
  overflow: auto;
}
.dark-theme .ds-header > * {
  color-scheme: dark;
  --colour-heading: var(--colour-white)!important;
  color: var(--colour-white) !important;
}
@media (prefers-color-scheme: dark) {
html:not(.light-theme) .ds-header > * {
    color-scheme: dark;
    --colour-heading: var(--colour-white)!important;
    color: var(--colour-white) !important;
}
}
span:has(.dark-var, .light-var) {
  display: contents !important;
}
html:not(.dark-theme) .dark-var {
  display: none;
}
html:not(.light-theme) .light-var {
  display: none;
}
main > .breadcrumb:first-child + * {
  padding-top: 2rem;
}
/* region broken down visual tests */
body:has(.visualtest.target) nav,
body:has(.visualtest.target) footer,
main:has(.visualtest.target) > *:not(.target, .visualtest--container),
main:has(.visualtest.target) > .visualtest--container > *:not(.target) {
  display: none !important;
}
main:has(.visualtest.target) > *.target .visualtest-hide {
  display: none !important;
}
main:has(.visualtest.target) > *.target {
  --col-start: col-1;
}
@layer utilities {
main:has(.visualtest.target) > *:is(.d-flex, .d-block):not(.target) {
    display: none !important;
}
main:has(.visualtest.target) > *.target .visualtest-hide:is(.d-flex, .d-block) {
    display: none !important;
}
}
/* #endregion */