@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-solid-900.ttf) format("truetype");
}
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-brands-400.ttf) format("truetype");
}
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-regular-400.ttf) format("truetype");
  unicode-range: "u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc";
}
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
.hidden {
  display: none;
}
body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  min-height: 100vh;
  color: white;
  --col-bg: #1D2E4F;
  --col-bg-alt: #172542;
  --col-accent: #FFAE36;
  --col-accent-alt: #C82632;
  --col-toolbar: #F6F6F6;
  --col-divider: #EEEEEE;
  --col-spinner-bg: #FFFFFF;
  --col-spinner-fg: var(--col-accent-alt);
}
body > header {
  flex: 0 0 auto;
  background: var(--col-bg-alt);
  color: #fff;
  padding: 0;
}
body > header .page-width {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  height: 100px;
  padding: 0 20px;
}
body > header img {
  height: 60px;
  padding-right: 20px;
}
body > header h1 {
  font-weight: bold;
  font-size: 22px;
  flex-grow: 1;
}
body > header nav {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2em;
  justify-content: center;
  padding: 0;
}
body > header nav ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  justify-content: center;
  padding: 0;
  list-style-type: none;
  height: 100%;
  margin: 0;
}
body > header nav ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: 100%;
  justify-content: center;
  margin: 0 0.5em;
}
body > header nav ul li.active {
  color: var(--col-accent);
  border-bottom: 2px solid var(--col-accent);
  padding-top: 2px;
}
body > header nav ul li a {
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  text-transform: uppercase;
}
.page-width {
  max-width: 1920px;
  margin: 0 auto;
}
.banner-message {
  background: purple;
  padding: 1em;
  text-align: center;
}
.banner-message a {
  text-decoration: underline;
  color: white;
  font-weight: bold;
}
h2,
h3 {
  margin-top: 0;
}
.column-widget {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 5em;
  min-height: 2em;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}
.column-widget li {
  color: var(--col-bg);
  background: #e9967a;
  padding: 0.5em 1em;
  border-style: solid;
  border-color: #ff0000;
  border-width: 10px 0 0 0;
  border-radius: 0.5em;
  margin-top: 0;
  margin-bottom: 0.5em;
  transition: all 0.5s;
}
.column-widget li.insert-before {
  position: relative;
  margin-top: 2em;
}
.column-widget li.insert-before::after {
  content: '';
  position: absolute;
  top: -2em;
  height: 2em;
  left: 0;
  width: 100%;
}
.column-widget li[data-type="note"] {
  background: white;
  border-color: #888;
  --content-sub: attr(data-title);
}
.column-widget li[data-type="job"] {
  --content-header-left: attr(data-sku);
  --content-header-right: attr(data-build-date-display);
  --content-main: attr(data-rb-number);
  --content-sub: attr(data-customer-name);
}
.column-widget li[data-type="engineering"] {
  --content-main: attr(data-title);
  --content-sub: attr(data-display-category);
}
.column-widget li header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5em;
  background: none;
  color: inherit;
}
.column-widget li span {
  display: block;
  text-align: center;
}
.column-widget li span[data-field-name="rb-number"] {
  font-weight: bold;
}
.column-widget li span[data-field-name="customer-name"] {
  font-size: smaller;
}
.column-widget li span[data-field-name="build-date"] {
  font-size: smaller;
}
.column-widget li span.content-header-left::before {
  content: var(--content-header-left);
}
.column-widget li span.content-header-right::before {
  content: var(--content-header-right);
}
.column-widget li span.content-main::before {
  content: var(--content-main);
}
.column-widget li span.content-sub::before {
  content: var(--content-sub);
}
.column-widget li .warning {
  color: darkred;
}
.column-widget li .warning::before {
  content: '\f071';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  /* fa-triangle-exclamation */
}
.column-widget li:not(.has-note) .warning {
  display: none;
}
.column-widget li .content-main {
  font-weight: bold;
}
.column-widget li .content-sub {
  font-size: smaller;
}
.column-widget header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  justify-content: space-between;
  font-size: smaller;
}
dialog {
  display: none;
  background: none;
  border: none;
  padding: 0;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s;
}
dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}
dialog .dialog-content {
  background: white;
  border-radius: 0 3px 3px 3px;
  max-height: 100%;
  overflow: auto;
}
dialog .dialog-content .dialog-main {
  position: relative;
  anchor-name: --dialog-main;
  padding: 1em;
}
dialog .dialog-content .toolbar {
  padding: 1em;
  background: var(--col-toolbar);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1em;
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.tcard .header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 2em;
  padding-bottom: 1em;
  justify-content: space-between;
}
.tcard .header .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.tcard .header h2,
.tcard .header h3 {
  margin: 0;
}
.tcard .header .addons {
  width: 100%;
}
.tcard .header .status-table {
  width: 100%;
}
.tcard .header .status-table input,
.tcard .header .status-table select {
  width: 100%;
}
.tcard .header textarea {
  width: 100%;
}
.tcard .notes {
  list-style-type: none;
  padding-left: 0;
}
.tcard .notes li {
  padding: 0.5em 0.5em 0.5em 1.5em;
  position: relative;
}
.tcard .notes li::before {
  position: absolute;
  left: 0.5em;
  content: '-';
}
.tcard .notes li:not(:last-child) {
  border-bottom: 3px solid var(--col-divider);
}
.tcard .notes .note-info {
  font-size: x-small;
  font-weight: bold;
  text-align: right;
}
.tcard .notes div[data-tab="notes"] label {
  display: block;
  margin-top: 1em;
  font-weight: bold;
}
.tcard .notes .note-content {
  min-height: 5em;
}
.tcard .notes .note-fao {
  margin-left: 1em;
  padding: 0.5em;
}
.tcard .notes .note-fao {
  margin-left: 1em;
  padding: 0.5em;
}
.tcard.has-note ul.tab-header li[data-tab="notes"] {
  background: darkred;
  color: white;
}
.tcard.has-note ul.tab-header li[data-tab="notes"].active {
  background: white;
  color: darkred;
}
.tcard.has-note ul.tab-header li[data-tab="notes"] .warning {
  display: initial;
}
.tcard.has-note ul.tab-header li[data-tab="notes"] .warning::before {
  content: '\f071';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  /* fa-triangle-exclamation */
}
.tcard ul.tab-header li[data-tab="notes"] .warning {
  display: none;
  animation: 1s infinite blink step-end;
}
textarea.note-content {
  width: 100%;
  min-height: 5em;
  resize: vertical;
}
.tab-container .tab-header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1em;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.tab-container .tab-header li {
  background: #ccc;
  font-size: 15px;
  font-weight: 00;
  margin: 0;
  padding: 0.5em 1em;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}
.tab-container .tab-header li.active {
  background: white;
}
.tab-container .tab-content:not(.active) {
  display: none;
}
.toolbar button {
  background: var(--col-accent);
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  padding: 1em 2em;
  cursor: pointer;
}
.toolbar button:hover {
  background: color-mix(in srgb, var(--col-accent), black 10%);
}
.toolbar button:has(b) {
  color: color-mix(in srgb, white, transparent 25%);
}
.toolbar button:has(b) b {
  color: white;
}
.toolbar button.danger {
  background: var(--col-accent-alt);
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  padding: 1em 2em;
  cursor: pointer;
}
.toolbar button.danger:hover {
  background: color-mix(in srgb, var(--col-accent-alt), black 10%);
}
.toolbar button.danger:has(b) {
  color: color-mix(in srgb, white, transparent 25%);
}
.toolbar button.danger:has(b) b {
  color: white;
}
.spinner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: 5em;
  height: 5em;
  position: fixed;
  left: 1em;
  bottom: 1em;
  border: 2px solid color-mix(in srgb, var(--col-accent-alt), transparent 50%);
  border-radius: 20px;
  z-index: 999;
  padding-left: 5em;
  overflow: hidden;
  transition: all 0.5s, opacity 0.5s 1s;
  background: color-mix(in srgb, var(--col-bg-alt), transparent 12.5%);
}
.spinner:hover {
  background: color-mix(in srgb, var(--col-bg-alt), transparent 50%);
}
.spinner:not(.active) {
  opacity: 0;
  pointer-events: none;
}
.spinner:hover {
  width: 20em;
}
.spinner::before {
  content: '';
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 35px;
  top: 50%;
  translate: 0 -50%;
  animation: mulShdSpin 1.1s infinite ease;
}
.spinner > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-left: 1em;
  justify-content: center;
  white-space: nowrap;
}
.spinner h6 {
  color: var(--col-bg-alt);
  margin: 0;
}
.spinner span {
  color: var(--col-spinner-fg);
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
.components-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  justify-content: space-between;
}
.components-header > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
}
table.components-list {
  display: grid;
  grid-template-columns: 8em 1fr 8em;
  gap: 1em;
}
table.components-list thead {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
table.components-list thead > tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
table.components-list thead > tr th {
  text-align: left;
}
table.components-list tbody {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
table.components-list tbody.fixed-components {
  background: var(--col-toolbar);
}
table.components-list tbody.fixed-components tr:first-child {
  padding: 0;
}
table.components-list tbody.fixed-components tr:last-child {
  padding-bottom: 0.5em;
}
table.components-list tbody.fixed-components tr:nth-child(2) {
  padding-top: 0.5em;
}
table.components-list tbody:has(:nth-child(2)) > tr.section-header th {
  background: var(--col-bg);
  color: white;
}
table.components-list tbody > tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 0 0.5em;
}
table.components-list tbody > tr.section-header th {
  grid-column: 1 / -1;
  background: var(--col-toolbar);
  color: var(--col-bg);
  padding: 0.5em;
  text-align: left;
}
table.components-list tbody > tr.section-header th::before {
  font-family: 'FontAwesome';
  content: '+';
  margin-right: 0.5em;
}
table.components-list tbody > tr.section-header.expanded th::before {
  content: '\f068';
}
table.components-list tbody > tr.section-header:not(.expanded) ~ tr {
  display: none;
}
table.components-list tbody td:not(:last-child) {
  word-break: break-word;
  text-indent: -1em;
  padding-left: 1em;
}
table.components-list tfoot {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
table.components-list tfoot > tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
table.components-list tfoot > tr > td {
  grid-column: 1 / -1;
}
table.components-list input[type="number"] {
  max-width: 100%;
}
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5em;
}
dl > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-row: span 1;
}
dl dt,
dl dd {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}
dl dt > *,
dl dd > * {
  flex: 1 0 auto;
}
dl dt {
  grid-column: 1;
}
dl dd {
  grid-column: 2;
}
select-component::part(options),
select-main-unit::part(options) {
  gap: 0 0.5em;
}
select-component::part(option),
select-main-unit::part(option) {
  padding: 0.5em;
  cursor: pointer;
}
select-component::part(option-disabled),
select-main-unit::part(option-disabled) {
  padding: 0.5em;
  opacity: 0.8;
  text-decoration: line-through;
  cursor: not-allowed;
}
select-component::part(option):hover,
select-main-unit::part(option):hover {
  background: var(--col-bg);
  color: white;
}
select-component::part(dropdown),
select-main-unit::part(dropdown) {
  padding: 0;
  border: 1px solid black;
}
select-component::part(search),
select-main-unit::part(search) {
  border-bottom: 1px solid black;
  padding: 0.5em;
  background: #eee;
}
select-component::part(search)::before,
select-main-unit::part(search)::before {
  content: '\f002';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  margin-right: 1em;
}
select-component::part(search-input),
select-main-unit::part(search-input) {
  background: none;
}
select-component::part(selected),
select-main-unit::part(selected) {
  padding: 0.5em;
  align-items: center;
  gap: 1em;
}
select-component::part(selected)::after,
select-main-unit::part(selected)::after {
  content: '\f0dd';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  translate: 0 -0.25em;
}
.add-component-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
}
.add-component-container > select-component {
  flex: 1 0 auto;
}
.add-component-container > button {
  background: var(--col-bg);
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  padding: 1em 2em;
  cursor: pointer;
  flex: 0 0 auto;
}
.add-component-container > button:hover {
  background: color-mix(in srgb, var(--col-bg), black 10%);
}
.add-component-container > button:has(b) {
  color: color-mix(in srgb, white, transparent 25%);
}
.add-component-container > button:has(b) b {
  color: white;
}
.add-component-container > button::before {
  content: '\f067';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  margin-right: 0.5em;
}
select-component::part(options) {
  display: grid;
  grid-template-columns: 30% 1fr;
}
select-component::part(option) {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  grid-row: span 1;
}
select-component::part(option-disabled) {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  grid-row: span 1;
}
select-component::part(code) {
  opacity: 50%;
  font-size: 0.8em;
  text-align: right;
  padding-top: 0.2em;
}
select-main-unit::part(option),
select-main-unit::part(selected-option) {
  display: flex;
  flex-direction: column;
}
select-main-unit::part(path) {
  opacity: 0.5;
  font-size: smaller;
}
select-main-unit::part(sku) {
  padding-left: 1em;
}
span[data-formatter="currency3"] {
  display: flex;
  gap: 0.5em;
  flex-direction: row;
  justify-content: space-between;
}
span[data-formatter="currency3"]::before {
  content: '£';
}
.filter {
  font-size: 14px;
  color: var(--col-bg);
}
.columns {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-template-rows: max-content 1fr;
  gap: 1em 0;
  flex: 1 0 auto;
  padding: 100px;
  background: var(--col-bg);
}
.columns > .left-column,
.columns > .main-pane,
.columns > .right-column {
  display: grid;
  grid-row: 1 / span 2;
  grid-template-rows: subgrid;
}
.columns > .left-column > h2,
.columns > .right-column > h2,
.columns > .main-pane > * > h2,
.columns > .left-column h3,
.columns > .right-column h3,
.columns > .main-pane > * h3,
.columns > .left-column h4,
.columns > .right-column h4,
.columns > .main-pane > * h4 {
  margin: 0;
  text-align: center;
}
.columns > .left-column,
.columns > .right-column {
  width: 10em;
  grid-template-columns: 1fr;
  padding: 1em;
}
.columns > .left-column {
  grid-column: 1;
  background: var(--col-accent-alt);
}
.columns > .main-pane {
  display: grid;
  grid-auto-columns: 1fr;
  grid-column: 2;
}
.columns > .main-pane > * {
  display: grid;
  grid-row: 1 / span 2;
  grid-column: span 1;
  grid-template-rows: subgrid;
  padding: 1em;
}
.columns > .main-pane > *:not(:last-child) {
  border-right: 3px solid var(--col-accent);
}
.columns > .main-pane.stock-split {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
}
.columns > .main-pane.stock-split > * {
  border-right: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
}
.columns > .main-pane.stock-split > :not(:last-child) {
  border-bottom: 3px solid var(--col-accent);
}
.columns > .main-pane.operator-split {
  padding: 0 1em;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 1em;
}
.columns > .main-pane.operator-split > * {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
  padding: 1em 0;
  grid-row: auto;
  border-right: none;
  background: var(--col-bg-alt);
}
.columns > .main-pane.operator-split > * .operator-columns {
  display: grid;
  grid-auto-columns: 1fr;
  flex: 1 0 auto;
  font-size: 16px;
  grid-template-rows: max-content 1fr;
  gap: 1em 0;
}
.columns > .main-pane.operator-split > * .operator-columns > * {
  display: grid;
  grid-row: 1 / span 2;
  grid-column: span 1;
  grid-template-rows: subgrid;
  padding: 1em;
}
.columns > .main-pane.operator-split > * .operator-columns > *:not(:last-child) {
  border-right: 3px solid var(--col-accent);
}
.columns > .main-pane.calendar {
  padding: 0 1em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
}
.columns > .main-pane.calendar > * {
  border-right: none;
}
.columns > .main-pane.calendar .overdue {
  background: var(--col-bg-alt);
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.columns > .main-pane.calendar .overdue h3 {
  font-size: 29px;
  font-weight: 600;
}
.columns > .main-pane.calendar .day-view {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1em 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.columns > .main-pane.calendar .day-view > li {
  background: var(--col-bg-alt);
  position: relative;
  padding: 1em 1em 1em;
}
.columns > .main-pane.calendar .day-view > li h4 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 1em 0;
}
.columns > .main-pane.calendar .day-view > li:not(:nth-child(5n))::after {
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 3px solid var(--col-accent);
}
.columns > .main-pane.calendar .column-widget {
  padding-left: 2em;
  counter-reset: count;
}
.columns > .main-pane.calendar .column-widget li.card-item {
  position: relative;
}
.columns > .main-pane.calendar .column-widget li.card-item::before {
  display: block;
  position: absolute;
  counter-increment: count;
  content: counter(count);
  left: -1em;
  top: 0;
  color: white;
  font-weight: bold;
  translate: -100% 0;
}
.columns > .right-column {
  grid-column: 3;
  background: var(--col-accent);
}
.split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1em;
  padding-top: 1em;
}
.status-table td {
  color: var(--col-bg);
  font-weight: 600;
}
.status-table td:first-child {
  padding-right: 0.5em;
}
.addons {
  border-collapse: collapse;
}
.addons th,
.addons td {
  color: var(--col-bg);
}
.addons th:first-child,
.addons td:first-child {
  border-right: 3px solid var(--col-divider);
  padding-right: 0.5em;
}
.addons th:not(:first-child),
.addons td:not(:first-child) {
  width: 10em;
  padding-left: 0.5em;
}
.addons td {
  vertical-align: top;
  padding-top: 0.5em;
}
.addons th {
  text-align: left;
}
.import-info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: none;
  transition: all 1s;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  pointer-events: none;
}
.import-info.active {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  z-index: 20;
}
.import-table {
  color: var(--col-bg);
  border-collapse: collapse;
}
.import-table td {
  padding: 0.25em;
}
.import-table .importable tr:not(:first-child) td:first-child {
  padding-left: 2em;
}
.import-table .unknown {
  background: #fee;
}
.import-table .core-charge {
  background: #eee;
}
.import-table .note {
  background: #eef;
}
.results-message {
  width: fit-content;
  margin: 0 auto;
  padding: 1em;
}
.column-widget {
  position: relative;
  padding-bottom: 2em;
}
.column-widget .add-note {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-weight: bold;
  display: block;
  cursor: pointer;
}
.column-widget li.filtered {
  background: grey !important;
  color: white !important;
  border-color: white !important;
  opacity: 0.5 !important;
  order: 1;
}
.column-widget li.selected {
  box-shadow: 0 0 0 5px red;
}
.history {
  color: var(--col-bg);
  border-collapse: collapse;
}
.history th {
  text-align: left;
}
.history th:not(:last-child),
.history td:not(:last-child) {
  border-right: 3px solid var(--col-divider);
  padding-right: 1em;
}
.history th:not(:first-child),
.history td:not(:first-child) {
  padding-left: 1em;
}
.wrap-container .column-widget {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}
.wrap-container .column-widget li {
  width: 10em;
  margin: 0.5em;
}
.search {
  background: var(--col-bg);
  flex-grow: 1;
}
.search .search-header {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 3em;
}
ul.query {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  list-style-type: none;
  padding: 0;
  margin: 0 0 2em 0;
  gap: 1em;
}
ul.query > li {
  justify-content: flex-start;
  align-items: flex-start;
  display: grid;
  grid-row: span 1;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
ul.query > li > button {
  background: none;
  border: none;
  font-size: 0;
}
ul.query > li > button::before {
  content: '\f00d';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  font-size: 20px;
  color: white;
}
ul.query > li > .query-info {
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  align-items: flex-start;
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}
ul.query > li > .query-info > .query-parameters > dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 0.5em;
}
ul.query > li > .query-info > .query-parameters > dl > dt {
  grid-column: 1;
}
ul.query > li > .query-info > .query-parameters > dl > dd {
  grid-column: 2;
}
ul.query > li:not(:last-child) .query-info {
  padding-bottom: 1em;
  border-bottom: 3px solid var(--col-accent);
}
button[data-action="add-query-term"] {
  background: var(--col-accent);
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  padding: 1em 2em;
  cursor: pointer;
}
button[data-action="add-query-term"]:hover {
  background: color-mix(in srgb, var(--col-accent), black 10%);
}
button[data-action="add-query-term"]:has(b) {
  color: color-mix(in srgb, white, transparent 25%);
}
button[data-action="add-query-term"]:has(b) b {
  color: white;
}
button[data-action="add-query-term"]::before {
  content: '\f067';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  margin-right: 0.5em;
}
button[data-action="run-search"] {
  background: white;
  color: var(--col-bg);
  border: none;
  border-radius: 3px;
  font-size: 13px;
  padding: 1em 2em;
  cursor: pointer;
}
button[data-action="run-search"]:hover {
  background: color-mix(in srgb, white, black 10%);
}
button[data-action="run-search"]:has(b) {
  color: color-mix(in srgb, var(--col-bg), transparent 25%);
}
button[data-action="run-search"]:has(b) b {
  color: var(--col-bg);
}
button[data-action="run-search"]::before {
  content: '\f002';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  margin-right: 0.5em;
}
.search-results {
  padding: 1em;
}
.search-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  margin-top: 2em;
  justify-content: space-between;
  background: var(--col-bg-alt);
  padding: 1em;
}
.note-card input {
  min-width: 25em;
}
table.history tr.undone td {
  color: #ccc;
  text-decoration: line-through;
}
.filter-active header .dropdown i::after {
  position: absolute;
  left: -5px;
  bottom: -5px;
  font-size: 16px;
  content: '\f0b0';
  color: var(--col-accent-alt);
  -webkit-text-stroke: 1px white;
}
body > header .dropdown {
  position: relative;
}
body > header .dropdown i {
  font-size: 30px;
  cursor: pointer;
}
body > header .dropdown i::before {
  content: '\f013';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  display: block;
  transition: rotate 0.3s;
}
body > header .dropdown ul {
  display: none;
  position: absolute;
  padding: 0;
  right: 0;
  top: calc(100% + 1em);
  height: auto;
  background: var(--col-bg-alt);
  border: 1px solid white;
  z-index: 15;
}
body > header .dropdown ul > li {
  padding: 1em;
  margin: 0;
  position: relative;
  display: block;
}
body > header .dropdown ul > li:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: #ffffff40;
}
body > header .dropdown ul > li input {
  margin-top: 1em;
  min-width: 100%;
}
body > header .dropdown ul > li:hover {
  background: #ffffff20;
}
body > header .dropdown ul > li::before {
  display: inline-block;
  width: 2em;
}
body > header .dropdown ul > li[data-action="print-multiple"]::before {
  content: '\f02f';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
}
body > header .dropdown ul > li[data-action="filter"]::before {
  content: '\f0b0';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
}
body > header .dropdown ul > li[data-action="open-job"]::before {
  content: '\f002';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
}
body > header .dropdown ul > li[data-action="undo"]::before {
  content: '\f2ea';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
}
body > header .dropdown ul > li[data-action="reports"]::before {
  content: '\f0ce';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
}
body > header .dropdown ul > li a {
  font-size: inherit;
  text-transform: none;
}
body > header .dropdown.active i::before {
  color: var(--col-accent);
  rotate: 90deg;
}
body > header .dropdown.active ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
body.filter-active > header .dropdown li[data-action="filter"]::before {
  color: var(--col-accent-alt);
}
.undo table {
  color: black;
  border-collapse: collapse;
}
.undo table th {
  text-align: left;
  padding: 0 1em 1em 0.5em;
}
.undo table td {
  padding: 0 1em 0 0.5em;
  vertical-align: top;
}
.undo table td[data-field-name="description"] {
  max-width: 30vh;
  text-indent: -1em;
  padding-left: 2em;
}
.undo table td:not(:last-child) {
  border-right: 3px solid var(--col-divider);
}
.undo-container {
  max-height: 50vh;
  overflow: auto;
}
body.security {
  color: black;
  align-items: center;
}
body.security header {
  width: 100%;
}
body.security article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-grow: 1;
  justify-content: center;
  text-align: center;
  max-width: 25em;
}
body.security .field.text {
  width: 100%;
  text-align: left;
  margin-bottom: 1em;
}
body.security .btn-toolbar {
  margin-top: 2em;
}
body.security input[type="text"],
body.security input[type="password"],
body.security input[type="email"] {
  width: 100%;
}
.reports-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-grow: 1;
  background: var(--col-bg);
  padding-top: 2em;
}
.reports-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reports-container fieldset {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
.reports-container dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1em;
}
.component-cost-banner {
  position: relative;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 0.5em 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  justify-content: space-between;
}
.component-cost-banner > div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1em;
  font-size: smaller;
}
.component-cost-banner > div > span:last-child {
  font-weight: bold;
  font-size: larger;
}
.component-cost-banner::before {
  content: '\f06a';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
  position: absolute;
  left: 0.5em;
  top: 50%;
  translate: 0 -50%;
}
.component-cost-banner.warning {
  background: #fcc;
  color: darkred;
}
.component-cost-banner.warning::before {
  content: '\f071';
  font-style: normal;
  font-weight: 900;
  font-family: "FontAwesome";
}
input[type="text"][data-field-name="title"] {
  width: 100%;
  min-width: 30em;
}
.note-type-select {
  display: flex;
  flex-direction: column;
  position: fixed;
  position-anchor: --dialog-main;
  right: calc(0.5em + anchor(right));
  top: calc(0.5em + anchor(top));
  padding: 0.5em;
  gap: 1em;
  border: 1px solid transparent;
  border-radius: 3px;
}
.note-type-select label {
  display: none;
  order: 1;
  border: 1px solid var(--type-colour);
  padding: 2px;
}
.note-type-select label input[type="radio"] {
  display: none;
}
.note-type-select label span {
  display: block;
  width: 1em;
  height: 1em;
  background: var(--type-colour);
}
.note-type-select label:has(:checked) {
  display: block;
  order: 0;
}
.note-type-select:hover {
  background: #eee;
  border-color: #ccc;
}
.note-type-select:hover label {
  display: block;
}
ul.cost-breakdown-list {
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: 0.5em;
  padding: 0;
}
ul.cost-breakdown-list > li {
  padding-left: 1em;
  padding-right: 1em;
}
ul.cost-breakdown-list > li.total {
  border-top: 1px solid var(--col-bg);
  padding-top: 0.5em;
  font-weight: bold;
}
ul.cost-breakdown-list li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
ul.cost-breakdown-list li div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding-bottom: 0.5em;
}
ul.cost-breakdown-list li ul {
  grid-column: 1 / -1;
  padding-left: 1em;
  display: grid;
  grid-template-columns: subgrid;
}
ul.cost-breakdown-list li.collapsed ul,
ul.cost-breakdown-list li.collapsed div [data-field-name="cost"] {
  display: none;
}
ul.cost-breakdown-list li:not(.has-self-cost) > div [data-field-name="cost"] {
  display: none;
}
ul.cost-breakdown-list li:not(.collapsed) > div [data-field-name="total"] {
  display: none;
}
ul.cost-breakdown-list li:has(.subentries li) > div [data-field-name="description"]::before {
  font-family: 'FontAwesome';
  content: '\f068';
  margin-right: 0.5em;
}
ul.cost-breakdown-list li:has(.subentries li).collapsed > div [data-field-name="description"]::before {
  content: '+';
}