@import '../lib/select2/css/select2.min.css';
@import '../lib/select2/css/select2-bootstrap-5-theme.min.css';
/* Watermarks for non-live environments. */
figure.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.01;
  rotate: -0.075turn;
  user-select: none;
  pointer-events: none;
}

figure.watermark.development {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='20'><text fill='var(--bs-primary)' x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'>DEVELOPMENT</text></svg>");
}

figure.watermark.testing {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='20'><text fill='var(--bs-primary)' x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'>TESTING</text></svg>");
  opacity: 0.05;
}

figure.watermark.staging {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='20'><text fill='var(--bs-primary)' x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'>STAGING</text></svg>");
  opacity: 0.1;
}

/* Container queries support */
@media (min-width: 576px) {
  :root {
    --bs-breakpoint-sm: 576px;
  }
}
@media (min-width: 768px) {
  :root {
    --bs-breakpoint-md: 768px;
  }
}
@media (min-width: 992px) {
  :root {
    --bs-breakpoint-lg: 992px;
  }
}
@media (min-width: 1200px) {
  :root {
    --bs-breakpoint-xl: 1200px;
  }
}
@media (min-width: 1400px) {
  :root {
    --bs-breakpoint-xxl: 1400px;
  }
}
/* Row */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* Base col */
.col {
  flex: 1 0 0%;
}

/* Auto width columns */
.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Column sizes (1-12) */
.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

/* SM breakpoint (?576px) */
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
/* MD breakpoint (?768px) */
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
/* LG breakpoint (?992px) */
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
/* XL breakpoint (?1200px) */
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
/* XXL breakpoint (?1400px) */
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
.input-group {
  display: flex;
}

body {
  /*view-transition-name: match-element;*/
}

@view-transition {
  navigation: auto;
}
.change-theme::view-transition {
  background: #555;
}

.change-theme::view-transition-image-pair(root) {
  perspective: 2500px;
  perspective-origin: center;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 100vw;
  filter: drop-shadow(0px 0px 6px hsl(165deg, 11%, 3%)) drop-shadow(0px 0px 25px hsla(165deg, 11%, 3%, 0.5));
}

.change-theme::view-transition-old(root),
.change-theme::view-transition-new(root) {
  /*animation: 1.5s linear( 0, 0.324 9.1%, 0.584 18.6%, 0.782 28.6%, 0.858 33.8%, 0.92 39.2%, 0.997 49.5%, 1.021 55.1%, 1.033 61%, 1.035 71.7%, 1 );*/
  animation: 1.5s linear(0, 0.324 18.2%, 0.584 37.2%, 0.782 57.2%, 0.858 67.6%, 0.92 78.4%, 0.997 99%, 1);
  transform-style: preserve-3d;
  transform-origin: 50% 50% 0;
  /*   perspective: 800px; */
  transform: translateZ(-50vw) scale(var(--scale)) rotatey(var(--rotation)) translatez(50vw);
  backface-visibility: hidden;
}

.change-theme::view-transition-old(root) {
  animation-name: reveal-out;
}

.change-theme::view-transition-new(root) {
  animation-name: reveal-in;
}

@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@keyframes reveal-in {
  from {
    --rotation: -90deg;
    animation-timing-function: ease-in-out;
  }
  15% {
    --scale: 0.8;
    --rotation: -90deg;
  }
  45% {
    --scale: 0.8;
    --rotation: 0deg;
    animation-timing-function: ease-in-out;
  }
  to {
    --rotation: 0deg;
  }
}
@keyframes reveal-out {
  from {
    --rotation: 0deg;
    animation-timing-function: ease-in-out;
  }
  15% {
    --scale: 0.8;
    --rotation: 0deg;
  }
  45% {
    --scale: 0.8;
    --rotation: 90deg;
    animation-timing-function: ease-in-out;
  }
  to {
    --rotation: 90deg;
  }
}
html:has(.login-form) {
  --breakpoint-width: 335px;
  height: 100%;
}

body.login-form {
  overflow: hidden;
  background: url("../img/login.png");
  background-size: cover;
}
body.login-form .form {
  position: absolute;
  inset: 0;
  height: 100%;
  display: grid;
  place-items: center;
}
body.login-form .logoSpinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
body.login-form .logoSpinner .wrapper {
  transform: perspective(300px) rotateY(40deg) rotateX(50deg);
  color: var(--light, #fff);
  width: 10rem;
  height: 10rem;
  animation: logo-image 2s ease forwards;
}
body.login-form .logoSpinner .text {
  /*color: light-dark(var(--tertiary, black), var(--color-light, white));*/
  color: #fff;
  font-size: 300%;
  font-weight: bold;
  position: absolute;
  /*text-stroke: 3px light-dark(var(--color-light, white), var(--tertiary, black));*/
  -webkit-text-stroke: 0.3rem var(--primary);
  text-stroke: 0.3rem var(--primary);
  paint-order: stroke fill;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  animation: logo-text 1s ease forwards 1s;
}
body.login-form .kitten {
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 0;
  left: calc(50% - 2.5rem);
  transition: top 0.5s ease;
  z-index: -1;
}
body.login-form .kitten.shown {
  top: -5rem;
}
body.login-form .kitten img {
  width: 100%;
  height: 100%;
}
body.login-form article {
  /* Dark blue at the top or the anti-aliasing on the border radius causes a light curve to show. */
  background: linear-gradient(to bottom, var(--primary), var(--primary) 5%, #fff 5%, #eee);
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 1rem;
  width: 25rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2509803922);
}
body.login-form article header {
  background: linear-gradient(to bottom right, var(--primary), color-mix(in oklab, var(--primary), var(--tertiary) 20%));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
body.login-form article #account {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
body.login-form article button {
  --button-border: var(--secondary);
  --button-background: var(--secondary);
  justify-content: center;
}
body.login-form article a {
  text-align: center;
}
body.login-form article p {
  text-align: center;
  display: flex;
  text-wrap: pretty;
  color: #888;
}
body.login-form article p::before, body.login-form article p::after {
  content: "";
  margin: auto 0;
  flex: 1 1 auto;
  border-top: 1px solid #ccc;
}
body.login-form article #external {
  background: var(--tertiary);
  color: var(--light);
  margin-block-end: 1.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
}
body.login-form article #forgot {
  color: var(--primary);
}
body.login-form article h2 {
  text-align: center;
  font-size: 150%;
  margin-bottom: 0;
}
body.login-form article h3 {
  text-align: center;
  font-weight: normal;
  font-size: 100%;
  margin-top: 0;
}
body.login-form article input {
  padding: var(--spacing-2) var(--spacing-3);
}

@keyframes logo-image {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}
@keyframes logo-text {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  body.login-form {
    overflow: hidden;
  }
  body.login-form .card-header {
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 0;
  }
}
/*.login-form {
    margin: 0;
    height: 100%;
    font-family: sans-serif;
    display: block;
    overflow: auto;

    .outer {
        height: 100%;
        display: grid;
        place-items: center stretch;
        padding: 1rem;
    }

    .wrapper {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(var(--breakpoint-width, 350px), 1fr));
        height: 100%;
    }

    .graphic {
        background: url(../img/Login.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        display: grid;
        place-items: center;
        border-radius: 0.5rem;
        position: relative;

        & img {
            width: 80%;
            max-width: 20rem;
            margin: 1rem;
        }

        h1 {
            position: absolute;
            font-size: 800%;
            color: var(--tertiary);
            -webkit-text-stroke-width: 0.05em;
            -webkit-text-stroke-color: #fff;
            paint-order: stroke fill;
            user-select: none;
        }
    }

    .form {
        display: grid;
        place-items: center;
    }

    form {
        display: grid;
        gap: 1rem;

        & h1 {
            margin: 0;
        }

        & .field {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-areas: "label extra" "input input";
            gap: 0.25rem;

            & label {
                grid-area: label;
            }

            & input {
                grid-area: input;
            }

            & .field-validation-error {
                grid-column: 1 / -1;
            }
        }

        & label {
            font-weight: bold;
        }

        & input {
            border: 1px solid var(--s-border-color, #e0e1e8);
            border-radius: 0.5rem;
            padding: 0.5rem;
        }

        & button {
            background: linear-gradient(310deg, #3a416f, var(--s-color-theme, #5569d4));
            color: #fff;
            border: 0;
            border-radius: 0.5rem;
            padding: 0.5rem;
            text-transform: uppercase;
            transition: scale 0.25s ease;
            cursor: pointer;

            &:hover {
                scale: 105%;
            }
        }
    }
}
*/
/* Color scheme - uncomment to customize */
/*:root {
    --fg: #000;
    --bg: #fff;
    --primary: #1e90ff;
    --primary-contrast: #fff;
    --secondary: #003878;
    --article: var(--bg);
    --main-bg: var(--secondary);
    --tab-bg: color-mix(in oklab, var(--secondary), var(--fg) 15%);
}*/
/* Base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "IBM Plex Sans", Roboto, "Segoe UI", system-ui, sans-serif;
  margin: 0;
  background: #000;
  height: 100%;
  overflow: hidden;
}

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

input {
  border-radius: 0.25rem;
  border: 1px solid;
  padding-inline: 0.5rem;
}

button {
  --button-background: linear-gradient(to right, #356eba, #346fba);
  --button-color: #fff;
  --button-border: #356eba;
  background: var(--button-background);
  color: var(--button-color);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--button-border);
  cursor: pointer;
}
button.outline {
  --button-background: transparent;
  --button-color: var(--primary);
  --button-border: var(--primary);
}
button:hover {
  --button-background: var(--tertiary);
  --button-color: #fff;
  --button-border: var(--tertiary);
}

h1,
h2 {
  margin: 0;
}

h2 {
  color: var(--secondary);
  text-transform: capitalize;
  font-size: 200%;
}

/* Main layout */
main {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: "aside topnav" min-content "aside header" auto "sidenav article" 1fr/min-content 1fr;
  background: var(--main-bg, var(--primary));
}

/* Aside - logo area */
main > .logo {
  grid-area: aside;
  background: none;
  border: none;
  width: 80%;
  height: 80%;
  display: grid;
  justify-self: center;
  align-self: center;
  place-items: center;
  position: relative;
  margin-top: -0.5rem;
  color: var(--primary-contrast);
  font-size: 150%;
}
main > .logo img {
  width: 100%;
  position: absolute;
}
main > .logo svg {
  transform: perspective(300px) rotateY(40deg) rotateX(50deg);
}
main > .logo h1 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 120%;
  font-weight: bold;
  color: var(--primary-contrast);
  -webkit-text-stroke: 0.25em var(--primary);
  paint-order: stroke fill;
}

/* Top navigation */
main > nav.top {
  grid-area: topnav;
  display: flex;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 0;
}
main > nav.top > section {
  display: flex;
  gap: 1rem;
}
main > nav.top a, main > nav.top button {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--top-nav-item-border);
  background: var(--top-nav-item-bg);
  color: var(--top-nav-item-fg);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: 0.25rem;
  transition: all 0.25s ease;
  font-size: 80%;
}
main > nav.top a:hover, main > nav.top button:hover {
  background: var(--top-nav-hover-bg);
  color: var(--top-nav-hover-fg);
}
main > nav.top .search {
  position: relative;
  display: flex;
  align-items: stretch;
}
main > nav.top .search input {
  padding-right: 2rem;
}
main > nav.top .search i {
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0.5;
}

/* Side navigation */
main > nav.side {
  grid-area: sidenav;
  font-size: 80%;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  min-width: 8rem;
  overflow: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  direction: rtl;
}
main > nav.side > div {
  direction: ltr;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
main > nav.side .group {
  display: inherit;
  flex-direction: inherit;
  gap: inherit;
  background: var(--side-nav-group-bg);
  color: var(--side-nav-group-fg);
  padding: 0.5rem;
  padding-right: 0;
  border-radius: 0.25rem;
}
main > nav.side .group heading {
  color: var(--primary-contrast);
  margin-bottom: 0;
  padding-inline-end: 0.5rem;
  font-size: 80%;
  font-weight: bold;
  text-transform: uppercase;
}
main > nav.side a {
  direction: ltr;
  position: relative;
  color: var(--side-nav-item-fg);
  background: var(--side-nav-item-bg);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.25rem 0 0 0.25rem;
  transition: all 0.25s ease;
  white-space: nowrap;
}
main > nav.side a i {
  font-size: 120%;
}
main > nav.side a:hover {
  background: var(--side-nav-hover-bg);
  color: var(--side-nav-hover-fg);
}
main > nav.side a.active {
  color: var(--side-nav-active-fg);
  background: var(--side-nav-active-bg);
  position: sticky;
  top: 0;
  bottom: 0;
  z-index: 1;
}
main > nav.side button {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid;
  color: rgb(from var(--primary-contrast) r g b / 0.5);
  background: rgb(from var(--primary-contrast) r g b / 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
  margin-right: 0.5rem;
}
main > nav.side button i {
  font-size: 150%;
}

/* Header */
main > header {
  grid-area: header;
  background: linear-gradient(to bottom right, #f7f8fa, #f8f8fb);
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main > header section {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}
main > header section > span {
  font-weight: bold;
  align-self: center;
}
main > header section div {
  padding: 0.25rem;
  padding-inline: 1rem;
  background: #eef2f8;
  color: #666;
  display: flex;
  align-items: center;
  border-radius: 0.25rem;
}
main > header section div span {
  margin-left: 1rem;
  font-weight: bold;
  color: var(--secondary);
}

/* Footer */
main > footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1rem;
  overflow: hidden;
  color: var(--primary-contrast);
  font-size: 60%;
  display: flex;
  justify-content: end;
  align-items: center;
  padding-inline: 1rem;
}

/* Article/content area */
main > article {
  grid-area: article;
  padding: 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #f3f4f9, #f3f5f8);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
main > article > section {
  flex-direction: column;
  gap: 1rem;
}

.page:has(> heading) {
  grid-template-rows: min-content minmax(0, 1fr);
}
.page > heading {
  color: #444;
  font-size: 150%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
}
.page > section {
  flex-grow: 1;
  display: grid;
  gap: 1rem;
  overflow: hidden;
}
.page > section > nav {
  display: flex;
  flex-direction: column;
}
.page > section > nav hr {
  width: 100%;
  border: 0;
  border-bottom: 1px solid;
}
.page > section > nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #444;
  text-decoration: none;
  padding: 0.75rem;
  border-radius: 0.25rem;
  font-size: 80%;
  background: var(--article-nav-item-bg);
  color: var(--article-nav-item-fg);
}
.page > section > nav a:hover {
  background: var(--article-nav-hover-bg);
  color: var(--article-nav-hover-fg);
}
.page > section > nav a.active {
  background: var(--article-nav-active-bg);
  color: var(--article-nav-active-fg);
}
.page > section > article {
  border: 1px solid #ddd;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.06);
  border-radius: 0.5rem;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: scroll;
}
.page .empty-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-grow: 1;
}
.page .empty-section > i {
  font-size: 1000%;
  opacity: 0.2;
}

.page:has(> section > nav) > section {
  grid-template-columns: auto 1fr;
}
.page:has(> section > nav) > section > article {
  overflow: hidden;
}
.page:has(> section > nav) > section > article > heading {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}
.page:has(> section > nav) > section > article > section {
  overflow: scroll;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* Badges */
.badge {
  margin-left: auto;
  padding: 0.05rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 80%;
  align-self: center;
  background: #fff;
  color: #444;
}
.badge.alert {
  position: absolute;
  display: flex;
  top: -0.25em;
  left: -0.25em;
  background: red;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  min-height: 1em;
  padding: 0.35em;
  border-radius: 1rem;
  line-height: 1;
  color: var(--primary-contrast, var(--bg));
  font-weight: bold;
  min-width: 1rem;
}
.badge.alert:is(:empty) {
  display: none;
}

/* :not(#\#) forces high specificity so this selector will generally win over others */
:not(#\#) .scrollable {
  overflow: hidden auto;
}
:not(#\#) .hidden {
  display: none;
}

.input-group {
  position: relative;
}
.input-group > .form-control {
  border-radius: 0;
}
.input-group > :nth-child(1 of :not(.hidden):not(.state, .indicator)) {
  border-start-start-radius: 0.25rem !important;
  border-end-start-radius: 0.25rem !important;
}
.input-group > :nth-last-child(1 of :not(.hidden):not(.state, .indicator)) {
  border-start-end-radius: 0.25rem !important;
  border-end-end-radius: 0.25rem !important;
}
.input-group .input-group-text {
  --soft: color-mix(in oklab, var(--primary), transparent 70%);
  --softer: color-mix(in oklab, var(--primary), transparent 90%);
  display: flex;
  align-items: center;
  border: 1px solid var(--soft);
  background: var(--softer);
  border-radius: 0.25rem;
}
.input-group .input-group-text:has(+ :not(.hidden):not(.state, .indicator)) {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
  border-right: 0;
}
.input-group .btn {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.input-group .form-control + .btn {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
}
.input-group .state {
  position: absolute;
  bottom: -0.25rem;
  right: -0.25rem;
  font-size: 65%;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.25rem;
  background: var(--bg);
  color: var(--state-colour, var(--bg));
  border-color: var(--state-colour, var(--bg));
}
.input-group .state:has(.editing:not(.hidden)) {
  --state-colour: purple;
}
.input-group .state:has(.saving:not(.hidden)) {
  --state-colour: orange;
}
.input-group .state:has(.saved:not(.hidden)) {
  --state-colour: var(--state-saved, var(--secondary));
  animation: state-saved 2s linear forwards;
}
.input-group .state:not(.hidden) {
  display: flex;
  align-items: stretch;
}
.input-group .state:not(.hidden) span {
  display: flex;
  align-items: stretch;
}
.input-group .state:not(.hidden) span i {
  align-self: center;
}
.input-group .state:not(.hidden) button {
  margin: -0.25rem;
  border-radius: 0.4rem;
}
.input-group .state:not(.hidden) .saving::after {
  content: "Saving...";
}
.input-group .state:not(.hidden) .saved {
  animation: state-saved 2s linear forwards;
}
.input-group .state:not(.hidden) .saved::after {
  content: "Saved";
}

@keyframes state-saved {
  from {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.form-control {
  width: 100%;
  --soft: color-mix(in oklab, var(--primary), transparent 70%);
  --softer: color-mix(in oklab, var(--primary), transparent 90%);
  border: 1px solid var(--soft);
  box-shadow: 0.25rem 0.25rem 0.25rem var(--softer);
  padding: 0.5rem;
  border-radius: 0.25rem;
}
.form-control[readonly], .form-control[disabled] {
  background: rgb(from var(--fg) r g b / 0.05);
}

.form-label {
  overflow: clip;
  width: 100%;
  display: inline-block;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  color: var(--primary);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 75%;
}

dynamic-view .text-danger {
  background: rgb(from orange r g b / 0.1);
  padding: 1rem;
  border-left: 0.25rem solid orange;
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  gap: 1rem;
}
dynamic-view .text-danger > i {
  grid-row: 1;
  grid-column: 1;
  color: orange;
}
dynamic-view .text-danger > p {
  grid-column: 2;
  margin: 0;
}
dynamic-view .text-danger > p:first-of-type {
  font-weight: bold;
  text-transform: uppercase;
  color: orange;
  font-size: 80%;
}

:focus-visible {
  box-shadow: 0 0 1rem var(--tertiary);
  outline: 0;
}

:root {
  --dark: #000;
  --light: #fff;
  --bg: #fff;
  --fg: #000;
  --primary: #003878;
  --primary-contrast: #fff;
  --secondary: #a3d331;
  --secondary-contrast: #fff;
  --tertiary: #1e90ff;
  --tertiary-contrast: #fff;
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
}

body {
  --main-bg: var(--primary);
  --border-radius-size: 0.25rem;
}

body {
  --main-bg: var(--primary);
  --article: color-mix(in srgb, var(--primary) 5%, #ffffff);
  --top-nav-item-border: color-mix(in oklab, var(--primary), var(--primary-contrast) 70%);
  --top-nav-item-bg: transparent;
  --top-nav-item-fg: var(--top-nav-item-border);
  --top-nav-hover-bg: var(--tertiary);
  --top-nav-hover-fg: var(--tertiary-contrast);
  --side-nav-item-bg: color-mix(in oklab, var(--main-bg), var(--dark) 10%);
  --side-nav-item-fg: var(--primary-contrast);
  --side-nav-active-bg: linear-gradient(to right, var(--article, var(--bg)), #f3f4f9);
  --side-nav-active-fg: var(--primary);
  --side-nav-hover-bg: var(--tertiary);
  --side-nav-hover-fg: var(--tertiary-contrast);
  --side-nav-group-bg: color-mix(in oklab, var(--main-bg), var(--light) 10%);
  --side-nav-group-fg: var(--primary-contrast);
  --article-nav-primary: color-mix(in oklab, var(--primary), var(--tertiary) 40%);
  --article-nav-secondary: color-mix(in oklab, var(--article-nav-primary), var(--light) 30%);
  --article-nav-item-bg: transparent;
  --article-nav-item-fg: var(--fg);
  --article-nav-active-bg: linear-gradient(to right, var(--article-nav-primary), var(--article-nav-secondary));
  --article-nav-active-fg: var(--primary-contrast);
  --article-nav-hover-bg: var(--tertiary);
  --article-nav-hover-fg: var(--tertiary-contrast);
}

/* TODO: Most of these are bootstrap override crap, so can go */
/*:is(html, body) {*/
/* Theming overrides */
/*body {

    &.small-font {
        font-size: 90%;
    }

    &.compact {
        --spacing-1: 0.1rem;
        --spacing-2: 0.175rem;
        --spacing-3: 0.25rem;
        --spacing-4: 0.5rem;
        --bs-border-radius-pill: 0.5em;

        .sidebar-brand {
            height: 2.9rem;
        }

        .btn {
            --bs-btn-border-radius: 0.5em;
        }
    }

    .accordion-button:focus {
        box-shadow: var(--focus-box-shadow-primary);
    }

    .dropdown-menu {
        --bs-dropdown-link-active-bg: var(--primary);
    }

    nav {
        --lte-sidebar-submenu-color: var(--dark);
        --lte-sidebar-submenu-active-color: var(--light);
        --lte-sidebar-submenu-active-bg: var(--secondary);
    }

    .btn-primary {
        --bs-btn-border-color: var(--primary);
        --bs-btn-bg: var(--primary);
        --bs-btn-hover-bg: var(--primary-dark);
        --bs-btn-hover-border-color: var(--primary-dark);
        --bs-btn-active-bg: var(--primary-darker);
        --bs-btn-active-border-color: var(--primary-darker);
    }

    .btn-outline-primary {
        --bs-btn-border-color: var(--primary);
        --bs-btn-color: var(--primary);
        --bs-btn-hover-bg: var(--primary-dark);
        --bs-btn-hover-border-color: var(--primary-dark);
        --bs-btn-active-bg: var(--primary-darker);
        --bs-btn-active-border-color: var(--primary-darker);
    }

    .btn-close {
        --bs-btn-close-focus-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--secondary), transparent 75%);
    }

    .btn:not(.btn-primary) {
        --bs-btn-hover-border-color: var(--primary-dark);
    }

    .btn.btn-danger {
        border: 1px solid var(--bs-btn-border-color);
    }

    .btn:disabled, btn.disabled, fieldset:disabled .btn {
        --bs-btn-disabled-bg: hsl(from var(--bs-btn-bg) h 0 l);
        --bs-btn-disabled-border-color: hsl(from var(--bs-btn-border-color) h 0 l);
    }

    .card[class*="card-"]:not(.card-outline) > .card-header .btn-tool,
    .card[class*="text-bg-"]:not(.card-outline) > .card-header .btn-tool {
        --bs-btn-hover-color: var(--secondary);
        --bs-btn-hover-border-color: var(--secondary);
    }

    .card-primary, .bg-primary, .text-bg-primary {
        --lte-card-variant-bg: var(--primary);
    }

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

    .form-control:focus,
    .form-check-input:focus {
        border-color: var(--secondary-light);
        box-shadow: var(--bs-box-shadow-inset),0 0 0 .25rem hsl(from var(--secondary) h s l / 0.25);*/ /*rgba(225,37,27,.25)*/
/*}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-control-plaintext {
    border-color: color-mix(in oklab, var(--dark), transparent 90%);
    padding-inline: 0.5rem;
    border-radius: var(--bs-border-radius);
    border-width: var(--bs-border-width);
}

footer a, .card-body a {*/
/*color: var(--primary-darker);*/
/*}

.nav-tabs {
    --bs-nav-link-color: var(--primary-dark);
    --bs-nav-link-hover-color: var(--primary-darker);
}

.nav-link:hover, .nav-link:focus {
}

.form-switch .form-check-input:focus {*/
/* TODO: this one needs some more work */
/*--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23afd400'/%3e%3c/svg%3e");
    }

    .select2-container--bootstrap-5 .select2-selection {
        padding: var(--spacing-1) var(--spacing-3);
        min-height: calc(1.5em + var(--spacing-1) + calc(var(--bs-border-width)*2));
    }

    .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus,
    .select2-container--bootstrap-5.select2-container--focus .select2-selection,
    .select2-container--bootstrap-5.select2-container--open .select2-selection {
        box-shadow: 0 0 0 0.25rem hsl(from var(--secondary) h s l / 0.25);
        border-color: var(--secondary);
    }

    .select2-container--bootstrap-5 .select2-dropdown {
        border-color: var(--secondary);
        box-shadow: 0 0 0 0.25rem hsl(from var(--secondary) h s l / 0.25);
        clip-path: inset(0px -0.25rem -0.25rem -0.25rem);
    }

    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
        background-color: var(--primary);
    }

    .form-label {
        margin-bottom: 0;
        text-transform: uppercase;
        font-size: 70%;
        font-weight: bold;
    }

    .validation-summary-errors.alert ul {
        margin-bottom: 0;
    }

    ::placeholder {
        font-style: italic;
        color: #777 !important;
    }

    table.table.dataTable {
        --dt-row-selected: var(--secondary);
        --dt-row-selected-text: var(--bs-table-color);

        tbody {
            tr.selected > * {
                box-shadow: inset 0 0 0 9999px rgba(from var(--dt-row-selected) r g b / 0.5);
            }
        }
    }

    table.table.dataTable.table-hover {
        tr.selected:hover > * {
            box-shadow: inset 0 0 0 9999px rgba(from var(--dt-row-selected) r g b / 0.6);
        }
    }
}

[data-bs-theme=dark] {
    --bs-link-color-rgb: var(--secondary-rgb);

    a {
        --bs-link-color-rgb: var(--secondary-rgb);
    }

    .breadcrumb-item.active, .form-text {
        color: var(--light);
    }

    .form-control-plaintext {
        border-color: color-mix(in oklab, var(--light), transparent 80%);
    }

    .app-footer {
        color: var(--light);
    }

    .sidebar-wrapper .nav-treeview > .nav-item > .nav-link {
        color: var(--light);
    }

    .nav-link {
        --bs-nav-link-color: var(--light);
        --bs-nav-link-hover-color: var(--secondary);
    }
}*/
/* Stuff to be sorted */
/*.app-header {*/
/*border-bottom: 3px solid var(--bs-primary);*/
/*}

.app-sidebar {
    transition: margin-left 0.5s ease;
}

.sidebar-wrapper {*/
/*border-top: 3px solid var(--bs-primary);*/
/*}

.dt-scroll-body {
    background: none !important;
}*/
/* Give all buttons a pill style rounded border by default. */
/*.btn {*/
/*border-radius: var(--bs-border-radius-pill);*/
/*--bs-btn-border-radius: 0.75em;
}

.btn.rounded-start-pill {
    border-radius: var(--bs-border-radius-pill) 0 0 var(--bs-border-radius-pill);
}

.btn.rounded-end-pill {
    border-radius: 0 var(--bs-border-radius-pill) var(--bs-border-radius-pill) 0;
}

.input-group .btn {*/
/*border-radius: 0;*/
/*}

.table .btn {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem;
}

.btn:not(.btn-primary) {
    border: 1px solid var(--bs-border-color);
}

.btn:not(.btn-primary):hover {
    --bs-btn-hover-border-color: var(--bs-primary);
    border-color: var(--bs-btn-hover-border-color);
}

body .btn.btn-right-rounded {
    border-radius: var(--bs-border-radius-pill) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.left-rounded {
    border-top-left-radius: var(--bs-border-radius-pill);
    border-bottom-left-radius: var(--bs-border-radius-pill);
}*/
/* Remove box-shadows from user menu dropdown buttons. */
/*.app-header .dropdown-menu .btn {
    box-shadow: none !important;
}*/
/* Reduce footer size. */
/*.app-footer {
    padding: 0.5rem;
    font-size: 80%;
    min-height: 1.75rem;
}*/
/* Styling for readonly inputs */
/*input, textarea {
    &[readonly] {
        background: var(--bs-secondary-bg);
    }
}*/
/* Improve search box focus border visuals. */
/*.input-group:has(#txtSearchTerm:focus) {
    box-shadow: var(--bs-box-shadow-inset),0 0 0 .25rem var(--focus-box-shadow-primary);*/ /*rgba(225,37,27,.25)*/
/*border-radius: var(--bs-border-radius-pill);
}

#txtSearchTerm:focus {
    box-shadow: none !important;
}*/
/* Flip logo text colour in dark mode */
/*[data-bs-theme=dark] .brand-image:last-child {
    filter: invert(1);
}*/
/* Fix for tool buttons overflowing container */
/*.btn-tool {
    margin: 0;
}

.inactive-row {*/
/*opacity: 0.5;*/
/*text-decoration: line-through;

    td {
        color: color-mix(in oklab, currentColor 50%, transparent 50%);

        > a {
            color: inherit;
        }
    }
}

.field-validation-error {
    display: block;
}*/
/* Prevent extra space below validation summary when shown in an alert box. */
/*.alert .validation-summary-errors ul {
    margin-bottom: 0;
}*/
/* Height fixes for entity cards so they take the full height, and scroll appropriately. */
/*body:has(.entity-form) {
    overflow: hidden;
}

.app-wrapper:has(.entity-form) {
    max-height: 100vh;
}

main:has(.entity-form) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden !important;
}

.app-content:has(.entity-form) {
    display: grid;
}

.app-content:has(.entity-form) .container-fluid {
    display: grid;
    overflow: hidden;
}

.form-label {
    text-transform: uppercase;
    font-size: 75%;
    font-weight: bold;
}

.entity-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;*/ /* Tabs, Card/Body, Footer - may be better off with named areas so layouts without tabs work. */
/*overflow: hidden;
}

.entity-form .card-body {
    overflow: auto;
}

.list-tab {
    display: grid;
}

.list-tab .dt-container {
    height: 100%;
    display: flex !important;
    place-items: start;
    justify-content: stretch;
    flex-direction: column;
}

.list-tab .dt-container .table {
    position: relative;
}

.list-tab .dt-container .dt-info {
    margin-top: auto;
}

.list-tab .dt-container .dt-paging + div {
    display: none;
}

.list-tab .card-header > .card-tools {
    margin-right: 0;
}*/
/* Select2 bootstrap 5 theme overrides. I hate people. */
/*body .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--primary);*/ /*#f0928d*/
/*box-shadow: var(--bs-box-shadow-inset),0 0 0 .25rem rgba(225,37,27,.25);
    }

    .select2-search__field:focus-visible {
        outline: 0 !important;
        box-shadow: none !important;
    }

    body .input-group .select2-container--bootstrap-5 {
        flex-grow: 1;
        flex-shrink: 1;
        width: auto !important;
    }

    body {
        .select2-container--bootstrap-5.select2-container--focus .select2-selection,
        .select2-container--bootstrap-5.select2-container--open .select2-selection {
            outline: 1px solid var(--secondary) !important;
            box-shadow: 0 0 0 0.25rem var(--focus-box-shadow-primary) !important;
        }
    }
}*/
.m-0 {
  margin: var(--spacing-0) !important;
}

.m-1 {
  margin: var(--spacing-1) !important;
}

.m-2 {
  margin: var(--spacing-2) !important;
}

.m-3 {
  margin: var(--spacing-3) !important;
}

.m-4 {
  margin: var(--spacing-4) !important;
}

.m-5 {
  margin: var(--spacing-5) !important;
}

.m-auto {
  margin: auto !important;
}

.mt-0 {
  margin-top: var(--spacing-0) !important;
}

.mt-1 {
  margin-top: var(--spacing-1) !important;
}

.mt-2 {
  margin-top: var(--spacing-2) !important;
}

.mt-3 {
  margin-top: var(--spacing-3) !important;
}

.mt-4 {
  margin-top: var(--spacing-4) !important;
}

.mt-5 {
  margin-top: var(--spacing-5) !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-0 {
  margin-bottom: var(--spacing-0) !important;
}

.mb-1 {
  margin-bottom: var(--spacing-1) !important;
}

.mb-2 {
  margin-bottom: var(--spacing-2) !important;
}

.mb-3 {
  margin-bottom: var(--spacing-3) !important;
}

.mb-4 {
  margin-bottom: var(--spacing-4) !important;
}

.mb-5 {
  margin-bottom: var(--spacing-5) !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: var(--spacing-0) !important;
}

.ms-1 {
  margin-left: var(--spacing-1) !important;
}

.ms-2 {
  margin-left: var(--spacing-2) !important;
}

.ms-3 {
  margin-left: var(--spacing-3) !important;
}

.ms-4 {
  margin-left: var(--spacing-4) !important;
}

.ms-5 {
  margin-left: var(--spacing-5) !important;
}

.ms-auto {
  margin-left: auto !important;
}

.me-0 {
  margin-right: var(--spacing-0) !important;
}

.me-1 {
  margin-right: var(--spacing-1) !important;
}

.me-2 {
  margin-right: var(--spacing-2) !important;
}

.me-3 {
  margin-right: var(--spacing-3) !important;
}

.me-4 {
  margin-right: var(--spacing-4) !important;
}

.me-5 {
  margin-right: var(--spacing-5) !important;
}

.me-auto {
  margin-right: auto !important;
}

.mx-0 {
  margin-left: var(--spacing-0) !important;
  margin-right: var(--spacing-0) !important;
}

.mx-1 {
  margin-left: var(--spacing-1) !important;
  margin-right: var(--spacing-1) !important;
}

.mx-2 {
  margin-left: var(--spacing-2) !important;
  margin-right: var(--spacing-2) !important;
}

.mx-3 {
  margin-left: var(--spacing-3) !important;
  margin-right: var(--spacing-3) !important;
}

.mx-4 {
  margin-left: var(--spacing-4) !important;
  margin-right: var(--spacing-4) !important;
}

.mx-5 {
  margin-left: var(--spacing-5) !important;
  margin-right: var(--spacing-5) !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-0 {
  margin-top: var(--spacing-0) !important;
  margin-bottom: var(--spacing-0) !important;
}

.my-1 {
  margin-top: var(--spacing-1) !important;
  margin-bottom: var(--spacing-1) !important;
}

.my-2 {
  margin-top: var(--spacing-2) !important;
  margin-bottom: var(--spacing-2) !important;
}

.my-3 {
  margin-top: var(--spacing-3) !important;
  margin-bottom: var(--spacing-3) !important;
}

.my-4 {
  margin-top: var(--spacing-4) !important;
  margin-bottom: var(--spacing-4) !important;
}

.my-5 {
  margin-top: var(--spacing-5) !important;
  margin-bottom: var(--spacing-5) !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.p-0 {
  padding: var(--spacing-0) !important;
}

.p-1 {
  padding: var(--spacing-1) !important;
}

.p-2 {
  padding: var(--spacing-2) !important;
}

.p-3 {
  padding: var(--spacing-3) !important;
}

.p-4 {
  padding: var(--spacing-4) !important;
}

.p-5 {
  padding: var(--spacing-5) !important;
}

.pt-0 {
  padding-top: var(--spacing-0) !important;
}

.pt-1 {
  padding-top: var(--spacing-1) !important;
}

.pt-2 {
  padding-top: var(--spacing-2) !important;
}

.pt-3 {
  padding-top: var(--spacing-3) !important;
}

.pt-4 {
  padding-top: var(--spacing-4) !important;
}

.pt-5 {
  padding-top: var(--spacing-5) !important;
}

.pb-0 {
  padding-bottom: var(--spacing-0) !important;
}

.pb-1 {
  padding-bottom: var(--spacing-1) !important;
}

.pb-2 {
  padding-bottom: var(--spacing-2) !important;
}

.pb-3 {
  padding-bottom: var(--spacing-3) !important;
}

.pb-4 {
  padding-bottom: var(--spacing-4) !important;
}

.pb-5 {
  padding-bottom: var(--spacing-5) !important;
}

.ps-0 {
  padding-left: var(--spacing-0) !important;
}

.ps-1 {
  padding-left: var(--spacing-1) !important;
}

.ps-2 {
  padding-left: var(--spacing-2) !important;
}

.ps-3 {
  padding-left: var(--spacing-3) !important;
}

.ps-4 {
  padding-left: var(--spacing-4) !important;
}

.ps-5 {
  padding-left: var(--spacing-5) !important;
}

.pe-0 {
  padding-right: var(--spacing-0) !important;
}

.pe-1 {
  padding-right: var(--spacing-1) !important;
}

.pe-2 {
  padding-right: var(--spacing-2) !important;
}

.pe-3 {
  padding-right: var(--spacing-3) !important;
}

.pe-4 {
  padding-right: var(--spacing-4) !important;
}

.pe-5 {
  padding-right: var(--spacing-5) !important;
}

.px-0 {
  padding-left: var(--spacing-0) !important;
  padding-right: var(--spacing-0) !important;
}

.px-1 {
  padding-left: var(--spacing-1) !important;
  padding-right: var(--spacing-1) !important;
}

.px-2 {
  padding-left: var(--spacing-2) !important;
  padding-right: var(--spacing-2) !important;
}

.px-3 {
  padding-left: var(--spacing-3) !important;
  padding-right: var(--spacing-3) !important;
}

.px-4 {
  padding-left: var(--spacing-4) !important;
  padding-right: var(--spacing-4) !important;
}

.px-5 {
  padding-left: var(--spacing-5) !important;
  padding-right: var(--spacing-5) !important;
}

.py-0 {
  padding-top: var(--spacing-0) !important;
  padding-bottom: var(--spacing-0) !important;
}

.py-1 {
  padding-top: var(--spacing-1) !important;
  padding-bottom: var(--spacing-1) !important;
}

.py-2 {
  padding-top: var(--spacing-2) !important;
  padding-bottom: var(--spacing-2) !important;
}

.py-3 {
  padding-top: var(--spacing-3) !important;
  padding-bottom: var(--spacing-3) !important;
}

.py-4 {
  padding-top: var(--spacing-4) !important;
  padding-bottom: var(--spacing-4) !important;
}

.py-5 {
  padding-top: var(--spacing-5) !important;
  padding-bottom: var(--spacing-5) !important;
}

/* Full gap (sets both horizontal and vertical gutters) */
.g-0 {
  --bs-gutter-x: var(--spacing-0);
  --bs-gutter-y: var(--spacing-0);
}

.g-1 {
  --bs-gutter-x: var(--spacing-1);
  --bs-gutter-y: var(--spacing-1);
}

.g-2 {
  --bs-gutter-x: var(--spacing-2);
  --bs-gutter-y: var(--spacing-2);
}

.g-3 {
  --bs-gutter-x: var(--spacing-3);
  --bs-gutter-y: var(--spacing-3);
}

.g-4 {
  --bs-gutter-x: var(--spacing-4);
  --bs-gutter-y: var(--spacing-4);
}

.g-5 {
  --bs-gutter-x: var(--spacing-5);
  --bs-gutter-y: var(--spacing-5);
}

/* Horizontal gap only */
.gx-0 {
  --bs-gutter-x: var(--spacing-0);
}

.gx-1 {
  --bs-gutter-x: var(--spacing-1);
}

.gx-2 {
  --bs-gutter-x: var(--spacing-2);
}

.gx-3 {
  --bs-gutter-x: var(--spacing-3);
}

.gx-4 {
  --bs-gutter-x: var(--spacing-4);
}

.gx-5 {
  --bs-gutter-x: var(--spacing-5);
}

/* Vertical gap only */
.gy-0 {
  --bs-gutter-y: var(--spacing-0);
}

.gy-1 {
  --bs-gutter-y: var(--spacing-1);
}

.gy-2 {
  --bs-gutter-y: var(--spacing-2);
}

.gy-3 {
  --bs-gutter-y: var(--spacing-3);
}

.gy-4 {
  --bs-gutter-y: var(--spacing-4);
}

.gy-5 {
  --bs-gutter-y: var(--spacing-5);
}

.row {
  --bs-gutter-x: var(--spacing-4);
}

.card-body {
  --bs-card-spacer-x: var(--spacing-3);
  --bs-card-spacer-y: var(--spacing-3);
}

.form-control {
  padding: var(--spacing-1) var(--spacing-3);
}

.btn {
  --bs-btn-padding-x: var(--spacing-3);
  --bs-btn-padding-y: var(--spacing-1);
}

.input-group-text {
  line-height: 1;
}

.dropdown-divider {
  --bs-dropdown-divider-margin-y: var(--spacing-1);
}

.alert {
  --bs-alert-padding-x: var(--spacing-4);
  --bs-alert-padding-y: var(--spacing-4);
  --bs-alert-margin-bottom: var(--spacing-4);
}

body div.swal-theme-custom-container {
  --swal2-confirm-button-background-color: var(--secondary);
  --swal2-cancel-button-background-color: var(--primary);
}
body div.swal-theme-custom-container .swal-theme-custom-title {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 150%;
}
body div.swal-theme-custom-container .swal-theme-custom-htmlcontainer {
  text-align: initial;
}
body div.swal-theme-custom-container .swal-theme-custom-actions {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-inline: 1rem;
}
body div.swal-theme-custom-container .swal-theme-custom-actions button {
  min-width: 6rem;
}

.dynamic-view .form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.dynamic-view .form-field {
  display: flex;
  flex-direction: column;
}
.dynamic-view .form-label {
  font-weight: bold;
}
.dynamic-view textarea, .dynamic-view input, .dynamic-view select {
  padding: 0.5rem;
  font-size: 1rem;
}
.dynamic-view .base-field {
  flex: 1 1 auto;
}
.dynamic-view .input-group:has(.indicator.looking:not(.hidden)) {
  outline: 2px solid var(--user-colour, --secondary);
  outline-offset: 2px;
  outline-style: dashed;
}
.dynamic-view .input-group:has(.indicator.editing:not(.hidden)) {
  outline: 2px solid var(--user-colour, --secondary);
  outline-offset: 2px;
  outline-style: solid;
}
.dynamic-view .indicator {
  border-radius: 1rem;
  background: var(--bg);
  display: flex;
  place-items: center;
  color: #fff;
  font-size: 70%;
  padding: 0 0.25rem;
  margin-left: 1px;
  user-select: none;
  position: absolute;
  top: -0.75rem;
  right: 0.25rem;
  z-index: 10;
  pointer-events: none;
}
.dynamic-view .indicator.hidden {
  display: none;
}
.dynamic-view .indicator.editing {
  background: var(--user-colour, --secondary);
  color: #fff;
  border: 1px solid var(--user-colour, --secondary);
}
.dynamic-view .indicator.looking {
  color: var(--user-colour, --secondary);
  border: 1px solid var(--user-colour, --secondary);
}
.dynamic-view .state {
  min-width: 2rem;
  display: grid;
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  overflow: clip;
}
.dynamic-view .state.hidden, .dynamic-view .state .hidden {
  display: none;
}
.dynamic-view .state > span {
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  gap: 0.5rem;
  padding-inline: 0.5rem;
}
.dynamic-view .state .error {
  background: var(--bs-danger);
  color: #fff;
}
.dynamic-view .state .conflict {
  background: var(--bs-warning);
  color: #fff;
}
.dynamic-view .state .saving {
  animation: saving-pulse 1s ease infinite both;
}
.dynamic-view .state .saved {
  color: var(--bs-success);
}
@keyframes saving-pulse {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.8;
  }
  100% {
    scale: 1;
  }
}
.dynamic-view .thumb-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 0.375rem;
  text-align: center;
  cursor: pointer;
}
.dynamic-view .thumb-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.dynamic-view .thumb-wrapper .icon {
  font-size: 3rem;
}
.dynamic-view .thumb-wrapper .icon-description {
  font-size: small;
}

.drying .dashboard-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.drying .dashboard-layout .raise {
  grid-column: 1;
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  margin: 1rem;
}
.drying .dashboard-layout .raise i,
.drying .dashboard-layout .raise svg {
  grid-column: 1;
  grid-row: 1/-1;
  font-size: 4rem;
}
.drying .dashboard-layout .raise header {
  font-size: 120%;
  font-weight: bold;
}
.drying .dashboard-layout .raise p {
  margin: 0;
}
.drying .dashboard-layout .jobs {
  grid-column: 1;
  border-top: 1px solid var(--bs-border-color);
  padding: 1rem;
  display: grid;
  grid-template-rows: min-content min-content 1fr;
  overflow: hidden;
}
.drying .dashboard-layout .findjob {
  grid-column: 2;
  grid-row: 1/-1;
  border-left: 1px solid var(--bs-border-color);
  padding: 1rem;
  display: grid;
  grid-template-rows: min-content min-content 1fr;
  overflow: hidden;
}
.drying .dashboard-layout .items {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-auto-rows: min-content;
  gap: 1rem;
  padding: 1rem;
  box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.06) inset;
  border-radius: 0 0 1rem 1rem;
  border: 1px solid var(--bs-border-color);
  container-type: size;
}
.drying .dashboard-layout .input-and-refresh input:not([type=checkbox]) {
  border-radius: var(--bs-border-radius) 0 0 0;
}
.drying .dashboard-layout .input-and-refresh button {
  border-radius: 0;
}
.drying .dashboard-layout .input-and-refresh button:last-child {
  border-radius: 0 var(--bs-border-radius) 0 0;
}
.drying .raise-jobs {
  display: grid;
}
.drying .raise-jobs .items {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-auto-rows: min-content;
  gap: 1rem;
  padding: 1rem;
  box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.06) inset;
  border: 1px solid var(--bs-border-color);
  container-type: size;
}
.drying.title .status {
  --status-colour: green;
  grid-area: unset;
  border: 1px solid var(--status-colour);
  color: var(--status-colour);
  background: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  place-self: start end;
  font-size: 80%;
  text-transform: uppercase;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.drying.title .status.closed {
  --status-colour: red;
}
.drying .job {
  --border: var(--bs-border-color);
  --highlight: var(--primary);
  --text: var(--bs-body-color);
  --highlighttext: #fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  display: grid;
  grid-template-areas: "code clientreference clientreference" "name name client" "address address types" "postcode postcode types";
  grid-template-rows: 3rem auto auto auto;
  font-size: 80%;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--text);
  text-decoration: none;
}
.drying .job:hover {
  --border: var(--primary);
  --highlight: #fff;
  --text: #fff;
  --highlighttext: var(--primary);
  background-color: var(--primary);
  color: #fff;
}
.drying .job header {
  font-size: 120%;
  font-weight: bold;
  grid-area: code;
  position: absolute;
  top: -1rem;
  left: -1rem;
  text-align: center;
  background: var(--highlight);
  color: var(--highlighttext);
  padding: 0.25rem 1rem;
  border-radius: 0 0 1rem 0;
  border-top-left-radius: inherit;
  white-space: nowrap;
  height: 3rem;
  place-items: center;
  display: grid;
  transition: all 0.25s ease;
}
.drying .job .client {
  grid-area: client;
  text-align: right;
}
.drying .job .clientreference {
  grid-area: clientreference;
  text-align: center;
  transition: all 0.25s ease;
  padding-right: 2.5rem;
}
.drying .job .name {
  grid-area: name;
  font-weight: bold;
  transition: all 0.25s ease;
}
.drying .job .address {
  grid-area: address;
  transition: all 0.25s ease;
}
.drying .job .postcode {
  grid-area: postcode;
  transition: all 0.25s ease;
}
.drying .job .status {
  --status-colour: green;
  grid-area: unset;
  border: 1px solid var(--status-colour);
  color: var(--status-colour);
  background: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  place-self: start end;
  font-size: 80%;
  text-transform: uppercase;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.drying .job .status.closed {
  --status-colour: red;
}
.drying .job .types {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  place-items: center;
  background-color: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  color: var(--primary);
  border: 1px solid var(--primary);
  place-self: start end;
  display: flex;
  gap: 0.5rem;
  z-index: 1;
}
.drying .job .types i {
  transition: scale 0.25s ease;
}
.drying .job .types i:hover {
  color: var(--secondary);
  cursor: help;
  scale: 1.5;
}
.drying .job:has(.status.closed) {
  background: light-dark(#eee, #222);
  opacity: 0.5;
}

.drying-dashboard-raise-modal-body {
  display: grid;
  grid-template-rows: min-content 1fr;
}

.drying .messages {
  display: grid;
  gap: 2rem;
  padding-bottom: 1rem;
}
.drying .day {
  margin-block: 2rem;
  text-align: center;
  font-weight: bold;
  color: var(--primary);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bs-body-bg);
}
.drying .day span {
  background: var(--bs-body-bg);
  padding-inline: 1rem;
  position: relative;
  z-index: 1;
}
.drying .day::after {
  content: "";
  border-bottom: 1px solid var(--primary);
  display: block;
  position: relative;
  top: -0.75rem;
}
.drying .message {
  --recipient-border: color-mix(in oklab, #000, transparent 85%);
  --recipient-border-inner: color-mix(in oklab, var(--recipient-border), transparent 50%);
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--bs-body-color);
  --message-bg: var(--bs-body-bg);
  --message-border: var(--bs-body-color);
  --message-fg: var(--bs-body-color);
  --recipient-bg: var(--message-bg);
  --recipient-fg: var(--message-fg);
  --recipient-border: var(--message-fg);
  --message-speechtick: var(--message-fg);
  cursor: pointer;
}
.drying .message:hover .bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsla(0deg, 0%, 100%, 0.2);
  border-radius: inherit;
  pointer-events: none;
}
.drying .message.sent {
  margin-right: 10%;
  border-bottom-left-radius: 0;
}
.drying .message.sent .bubble::after {
  border-width: 1rem 1rem 0 0;
  border-color: var(--message-speechtick) transparent transparent transparent;
  left: 1rem;
}
.drying .message.sent .date {
  text-align: right;
}
.drying .message.sent .date::before {
  content: "Sent ";
}
.drying .message.sent .from {
  align-self: start;
}
.drying .message.sent .to {
  right: 1rem;
}
.drying .message.received {
  margin-left: 10%;
  border-bottom-right-radius: 0;
}
.drying .message.received .bubble::after {
  border-width: 0 1rem 1rem 0;
  border-color: transparent var(--message-speechtick) transparent transparent;
  right: 1rem;
}
.drying .message.received .date::before {
  content: "Received ";
}
.drying .message.received .from {
  align-self: end;
}
.drying .message.received .to {
  left: 1rem;
}
.drying .message.solid.sent {
  --message-bg: var(--secondary);
  --message-border: var(--secondary);
  --message-fg: #fff;
  --recipient-bg: var(--message-fg);
  --recipient-fg: var(--bs-body-color);
  --recipient-border: var(--bs-body-color);
  --message-speechtick: var(--message-bg);
}
.drying .message.solid.received {
  --message-bg: var(--primary);
  --message-border: var(--primary);
  --message-fg: #fff;
  --recipient-bg: var(--message-fg);
  --recipient-fg: var(--bs-body-color);
  --recipient-border: var(--bs-body-color);
  --message-speechtick: var(--message-bg);
}
.drying .message .bubble {
  background: var(--message-bg);
  color: var(--message-fg);
  border: 1px solid var(--message-border);
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
}
.drying .message .bubble::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  bottom: -1rem;
}
.drying .message .subject {
  font-weight: bold;
  border-bottom: 1px solid color-mix(in oklab, var(--message-fg), transparent 70%);
  margin-bottom: 0.5rem;
}
.drying .message .preview {
  text-overflow: ellipsis;
  line-clamp: 4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.drying .message .date {
  font-size: 75%;
  margin-inline: 1rem;
}
.drying .message .from, .drying .message .to {
  font-size: 80%;
  border: 1px solid var(--recipient-fg);
  border-radius: 0.75rem;
  padding: 0.1rem 0.75rem;
  display: inline-block;
  background: var(--recipient-bg);
}
.drying .message .to {
  position: absolute;
  top: -0.75rem;
}
.drying .message .to::before {
  content: "To";
  border-right: 1px solid var(--recipient-border-inner);
  padding-right: 0.5rem;
  margin-right: 0.5rem;
}
.drying .message .from::before {
  content: "From";
  border-right: 1px solid var(--recipient-border-inner);
  padding-right: 0.5rem;
  margin-right: 0.5rem;
}

.asbestos .dashboard-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.asbestos .dashboard-layout .raise {
  grid-column: 1;
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  margin: 1rem;
}
.asbestos .dashboard-layout .raise i,
.asbestos .dashboard-layout .raise svg {
  grid-column: 1;
  grid-row: 1/-1;
  font-size: 4rem;
}
.asbestos .dashboard-layout .raise header {
  font-size: 120%;
  font-weight: bold;
}
.asbestos .dashboard-layout .raise p {
  margin: 0;
}
.asbestos .dashboard-layout .jobs {
  grid-column: 1;
  border-top: 1px solid var(--bs-border-color);
  padding: 1rem;
  display: grid;
  grid-template-rows: min-content min-content 1fr;
  overflow: hidden;
}
.asbestos .dashboard-layout .findjob {
  grid-column: 2;
  grid-row: 1/-1;
  border-left: 1px solid var(--bs-border-color);
  padding: 1rem;
  display: grid;
  grid-template-rows: min-content min-content 1fr;
  overflow: hidden;
}
.asbestos .dashboard-layout .items {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-auto-rows: min-content;
  gap: 1rem;
  padding: 1rem;
  box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.06) inset;
  border-radius: 0 0 1rem 1rem;
  border: 1px solid var(--bs-border-color);
  container-type: size;
}
.asbestos .dashboard-layout .input-and-refresh input {
  border-radius: var(--bs-border-radius) 0 0 0;
}
.asbestos .dashboard-layout .input-and-refresh button {
  border-radius: 0 var(--bs-border-radius) 0 0;
}
.asbestos .raise-jobs {
  display: grid;
}
.asbestos .raise-jobs .items {
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-auto-rows: min-content;
  gap: 1rem;
  padding: 1rem;
  box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.06) inset;
  border: 1px solid var(--bs-border-color);
  container-type: size;
}
.asbestos .job {
  --border: var(--bs-border-color);
  --highlight: var(--primary);
  --text: var(--bs-body-color);
  --highlighttext: #fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  display: grid;
  grid-template-areas: "code clientreference clientreference" "name name client" "address address types" "postcode postcode types";
  grid-template-rows: 3rem auto auto auto;
  font-size: 80%;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--text);
  text-decoration: none;
}
.asbestos .job:hover {
  --border: var(--primary);
  --highlight: #fff;
  --text: #fff;
  --highlighttext: var(--primary);
  background-color: var(--primary);
  color: #fff;
}
.asbestos .job header {
  font-size: 120%;
  font-weight: bold;
  grid-area: code;
  position: absolute;
  top: -1rem;
  left: -1rem;
  text-align: center;
  background: var(--highlight);
  color: var(--highlighttext);
  padding: 0.25rem 1rem;
  border-radius: 0 0 1rem 0;
  border-top-left-radius: inherit;
  white-space: nowrap;
  height: 3rem;
  place-items: center;
  display: grid;
  transition: all 0.25s ease;
}
.asbestos .job .client {
  grid-area: client;
  text-align: right;
}
.asbestos .job .clientreference {
  grid-area: clientreference;
  text-align: center;
  transition: all 0.25s ease;
  padding-right: 2.5rem;
}
.asbestos .job .name {
  grid-area: name;
  font-weight: bold;
  transition: all 0.25s ease;
}
.asbestos .job .address {
  grid-area: address;
  transition: all 0.25s ease;
}
.asbestos .job .postcode {
  grid-area: postcode;
  transition: all 0.25s ease;
}
.asbestos .job .status {
  grid-area: unset;
  border: 1px solid darkorange;
  color: darkorange;
  background: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  place-self: start end;
  font-size: 80%;
  text-transform: uppercase;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.asbestos .job .types {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  place-items: center;
  background-color: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  color: var(--primary);
  border: 1px solid var(--primary);
  place-self: start end;
  display: flex;
  gap: 0.5rem;
  z-index: 1;
}
.asbestos .job .types i {
  transition: scale 0.25s ease;
}
.asbestos .job .types i:hover {
  color: var(--secondary);
  cursor: help;
  scale: 1.5;
}

.asbestos-dashboard-raise-modal-body {
  display: grid;
  grid-template-rows: min-content 1fr;
}

.asbestos .messages, .page-instruction-messages .messages {
  display: grid;
  gap: 2rem;
  padding-bottom: 1rem;
}
.asbestos .day, .page-instruction-messages .day {
  margin-block: 2rem;
  text-align: center;
  font-weight: bold;
  color: var(--primary);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bs-body-bg, var(--bg));
}
.asbestos .day span, .page-instruction-messages .day span {
  background: var(--bs-body-bg, var(--bg));
  padding-inline: 1rem;
  position: relative;
  z-index: 1;
}
.asbestos .day::after, .page-instruction-messages .day::after {
  content: "";
  border-bottom: 1px solid var(--primary);
  display: block;
  position: relative;
  top: -0.75rem;
}
.asbestos .message, .page-instruction-messages .message {
  --recipient-border: color-mix(in oklab, #000, transparent 85%);
  --recipient-border-inner: color-mix(in oklab, var(--recipient-border), transparent 50%);
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--bs-body-color);
  --message-bg: var(--bs-body-bg);
  --message-border: var(--bs-body-color);
  --message-fg: var(--bs-body-color);
  --recipient-bg: var(--message-bg);
  --recipient-fg: var(--message-fg);
  --recipient-border: var(--message-fg);
  --message-speechtick: var(--message-fg);
  cursor: pointer;
}
.asbestos .message:hover .bubble::before, .page-instruction-messages .message:hover .bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsla(0deg, 0%, 100%, 0.2);
  border-radius: inherit;
  pointer-events: none;
}
.asbestos .message.sent, .page-instruction-messages .message.sent {
  margin-right: 10%;
  border-bottom-left-radius: 0;
}
.asbestos .message.sent .bubble::after, .page-instruction-messages .message.sent .bubble::after {
  border-width: 1rem 1rem 0 0;
  border-color: var(--message-speechtick) transparent transparent transparent;
  left: 1rem;
}
.asbestos .message.sent .date, .page-instruction-messages .message.sent .date {
  text-align: right;
}
.asbestos .message.sent .date::before, .page-instruction-messages .message.sent .date::before {
  content: "Sent ";
}
.asbestos .message.sent .from, .page-instruction-messages .message.sent .from {
  align-self: start;
}
.asbestos .message.sent .to, .page-instruction-messages .message.sent .to {
  right: 1rem;
}
.asbestos .message.received, .page-instruction-messages .message.received {
  margin-left: 10%;
  border-bottom-right-radius: 0;
}
.asbestos .message.received .bubble::after, .page-instruction-messages .message.received .bubble::after {
  border-width: 0 1rem 1rem 0;
  border-color: transparent var(--message-speechtick) transparent transparent;
  right: 1rem;
}
.asbestos .message.received .date::before, .page-instruction-messages .message.received .date::before {
  content: "Received ";
}
.asbestos .message.received .from, .page-instruction-messages .message.received .from {
  align-self: end;
}
.asbestos .message.received .to, .page-instruction-messages .message.received .to {
  left: 1rem;
}
.asbestos .message.solid.sent, .page-instruction-messages .message.solid.sent {
  --message-bg: var(--secondary);
  --message-border: var(--secondary);
  --message-fg: #fff;
  --recipient-bg: var(--message-fg);
  --recipient-fg: var(--bs-body-color);
  --recipient-border: var(--bs-body-color);
  --message-speechtick: var(--message-bg);
}
.asbestos .message.solid.received, .page-instruction-messages .message.solid.received {
  --message-bg: var(--primary);
  --message-border: var(--primary);
  --message-fg: #fff;
  --recipient-bg: var(--message-fg);
  --recipient-fg: var(--bs-body-color);
  --recipient-border: var(--bs-body-color);
  --message-speechtick: var(--message-bg);
}
.asbestos .message .bubble, .page-instruction-messages .message .bubble {
  background: var(--message-bg);
  color: var(--message-fg);
  border: 1px solid var(--message-border);
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
}
.asbestos .message .bubble::after, .page-instruction-messages .message .bubble::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  bottom: -1rem;
}
.asbestos .message .subject, .page-instruction-messages .message .subject {
  font-weight: bold;
  border-bottom: 1px solid color-mix(in oklab, var(--message-fg), transparent 70%);
  margin-bottom: 0.5rem;
}
.asbestos .message .preview, .page-instruction-messages .message .preview {
  text-overflow: ellipsis;
  line-clamp: 4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.asbestos .message .date, .page-instruction-messages .message .date {
  font-size: 75%;
  margin-inline: 1rem;
}
.asbestos .message .from, .asbestos .message .to, .page-instruction-messages .message .from, .page-instruction-messages .message .to {
  font-size: 80%;
  border: 1px solid var(--recipient-fg);
  border-radius: 0.75rem;
  padding: 0.1rem 0.75rem;
  display: inline-block;
  background: var(--recipient-bg);
}
.asbestos .message .to, .page-instruction-messages .message .to {
  position: absolute;
  top: -0.75rem;
}
.asbestos .message .to::before, .page-instruction-messages .message .to::before {
  content: "To";
  border-right: 1px solid var(--recipient-border-inner);
  padding-right: 0.5rem;
  margin-right: 0.5rem;
}
.asbestos .message .from::before, .page-instruction-messages .message .from::before {
  content: "From";
  border-right: 1px solid var(--recipient-border-inner);
  padding-right: 0.5rem;
  margin-right: 0.5rem;
}

/* Details section */
.page-instruction-details > section > article {
  grid-template-rows: unset;
  align-content: start;
}
.page-instruction-details > section > article header {
  padding: 1rem;
  font-size: 120%;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary), transparent 90%);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Samples section */
.page-instruction-samples :has(.samples .visit) .empty-section {
  display: none;
}
.page-instruction-samples .samples {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.page-instruction-samples .visit {
  display: grid;
  background: rgba(0, 0, 128, 0.0392156863);
  border-radius: 0.25rem;
  border: 1px solid #ddd;
}
.page-instruction-samples .visit header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  padding: 0.5rem;
  gap: 0.5rem;
}
.page-instruction-samples .visit header > div {
  display: flex;
  gap: 0.5rem;
}
.page-instruction-samples .sample {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: var(--bg);
}
.page-instruction-samples .sample dynamic-view div label {
  display: none;
}
.page-instruction-samples .sample:first-of-type .actions-button, .page-instruction-samples .sample:first-of-type .sample-title {
  margin-top: 0.5rem;
}
.page-instruction-samples .sample:first-of-type dynamic-view div label {
  display: block;
}
.page-instruction-samples .sample .sample-title {
  width: 3rem;
  margin-top: -0.2rem;
  overflow: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.page-instruction-samples .sample .actions-button {
  background: 0;
  border: 0;
  color: var(--fg);
  margin-top: -0.2rem;
  /*outline: 1px dotted;*/
}
.page-instruction-samples .sample select-list {
  overflow: clip;
  white-space: nowrap;
}

/* Messages section */
.page-instruction-messages > section > article > header {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

/* List section */
.page-instructions-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.page-instructions-list .instruction {
  --border: var(--bs-border-color, var(--primary));
  --highlight: var(--primary);
  --text: var(--bs-body-color);
  --highlighttext: #fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  display: grid;
  grid-template-areas: "code clientreference clientreference" "name name client" "address address types" "postcode postcode types";
  grid-template-rows: 3rem auto auto auto;
  font-size: 80%;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--text);
  text-decoration: none;
}
.page-instructions-list .instruction:hover {
  --border: var(--secondary);
  --highlight: #fff;
  --text: #fff;
  --highlighttext: var(--secondary);
  background-color: var(--secondary);
  color: #fff;
}
.page-instructions-list .instruction header {
  font-size: 120%;
  font-weight: bold;
  grid-area: code;
  position: absolute;
  top: -1rem;
  left: -1rem;
  text-align: center;
  background: var(--highlight);
  color: var(--highlighttext);
  padding: 0.25rem 1rem;
  border-radius: 0 0 1rem 0;
  border-top-left-radius: inherit;
  white-space: nowrap;
  height: 3rem;
  place-items: center;
  display: grid;
  transition: all 0.25s ease;
}
.page-instructions-list .instruction .client {
  grid-area: client;
  text-align: right;
}
.page-instructions-list .instruction .clientreference {
  grid-area: clientreference;
  text-align: center;
  transition: all 0.25s ease;
  padding-right: 2.5rem;
}
.page-instructions-list .instruction .name {
  grid-area: name;
  font-weight: bold;
  transition: all 0.25s ease;
}
.page-instructions-list .instruction .address {
  grid-area: address;
  transition: all 0.25s ease;
}
.page-instructions-list .instruction .postcode {
  grid-area: postcode;
  transition: all 0.25s ease;
}
.page-instructions-list .instruction .status {
  grid-area: unset;
  border: 1px solid darkorange;
  color: darkorange;
  background: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  place-self: start end;
  font-size: 80%;
  text-transform: uppercase;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.page-instructions-list .instruction .types {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  place-items: center;
  background-color: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 0.25rem 0.5rem;
  color: var(--primary);
  border: 1px solid var(--primary);
  place-self: start end;
  display: flex;
  gap: 0.5rem;
  z-index: 1;
}
.page-instructions-list .instruction .types i {
  transition: scale 0.25s ease;
}
.page-instructions-list .instruction .types i:hover {
  color: var(--secondary);
  cursor: help;
  scale: 1.5;
}

/* Files section */
.page-instruction-files > section {
  grid-template-columns: auto 1fr;
}
.page-instruction-files > section > article {
  overflow: hidden;
}
.page-instruction-files > section > article > heading {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}
.page-instruction-files > section > article > section {
  overflow: scroll;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

/* Sections dialog */
.dialog-instruction-sections nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.dialog-instruction-sections nav label {
  display: grid;
  grid-template-columns: auto 1fr 2rem;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  border: 1px solid var(--primary);
  border-radius: 0.25rem;
  padding: 1rem;
  cursor: pointer;
  align-items: center;
  position: relative;
}
.dialog-instruction-sections nav label heading {
  font-weight: bold;
}
.dialog-instruction-sections nav label > sub {
  grid-column: 1/-1;
}
.dialog-instruction-sections nav label > button {
  grid-column: 1/-1;
  justify-content: center;
  pointer-events: none;
}
.dialog-instruction-sections nav label > button.enabled {
  opacity: 0.3;
  color: var(--primary);
  background: var(--primary-contrast);
  border-color: var(--primary-contrast);
}
.dialog-instruction-sections nav label > input[type=checkbox] {
  display: none;
}
.dialog-instruction-sections nav label .enabled {
  display: none;
}
.dialog-instruction-sections nav label .disabled {
  display: flex;
}
.dialog-instruction-sections nav label:has(> input[type=checkbox]:checked) {
  background: var(--secondary);
  color: var(--secondary-contrast);
  border-color: var(--secondary);
}
.dialog-instruction-sections nav label:has(> input[type=checkbox]:checked) .enabled {
  display: flex;
}
.dialog-instruction-sections nav label:has(> input[type=checkbox]:checked) .disabled {
  display: none;
}
.dialog-instruction-sections nav label:has(> input[type=checkbox]:checked) > span {
  background: var(--secondary-contrast);
  color: var(--secondary);
}

.dialog-instruction-sections-footer {
  display: flex;
  justify-content: space-between;
}