:root {
  --colour-home-100: #624ca1;
  --colour-home-200: #5e4c9e;
  --colour-home-300: #4255a5;
  --colour-home-blob1: #4455a5;
  --colour-home-blob2: #775da7;
  --colour-home-blob3: rgba(255, 255, 255, 0.15);
  --colour-white: white;
  --color-border-333: #333;
  --color-grey-light: #f5f5f5;
  --color-grey-mid: #cccccc;
  --colour-primary-020: rgba(62, 71, 151, 0.5);
  --colour-primary-050: rgba(62, 71, 151, 0.5);
  --colour-primary-100: #3e4797;
  --colour-primary-200: #384087;
  --colour-primary-300: #313874;
  --colour-primary2: #607d8b;
  --colour-primary_o9: rgba(143, 62, 151, 0.9);
  --colour-primary_09: rgba(143, 62, 151, 0.9);
  --colour-secondary-005: rgba(143, 62, 151, 0.05);
  --colour-secondary-010: rgba(143, 62, 151, 0.075);
  --colour-secondary-020: rgba(143, 62, 151, 0.15);
  --colour-secondary-100: #8f3e97;
  --colour-secondary-200: #793680;
  --colour-secondary-300: #642d69;
  /*    --colour-primary-020: rgba(0,149,218,0.5);
    --colour-primary-050: rgba(0,149,218,0.5);
    --colour-primary-100: rgba(0,149,218,1);
    --colour-primary-200: rgba(0,121,177,1);
    --colour-primary-300: rgba(0,101,147,1);
    --colour-primary2: rgba(96,125,139,1);
    --colour-primary_o9: rgba(143,62,151,0.9);
    --colour-primary_09: rgba(143,62,151,0.9);
    --colour-secondary-005: rgba(50,191,206,0.05);
    --colour-secondary-010: rgba(50,191,206,0.10);
    --colour-secondary-020: rgba(50,191,206,0.20);
    --colour-secondary-100: rgba(50,191,206,1);
    --colour-secondary-200: rgba(45,172,186,1);
    --colour-secondary-300: rgba(40,162,175,1);*/
  --background: #654a9e;
  --background2: #513c84;
  --background_09: rgba(101, 74, 158, 0.9);
  --background2_09: rgba(81, 60, 132, 0.9);
  --highlight: #468ecc;
  --colour-font-primary: #ffffff;
  --colour-font-primary-highlight: rgba(255, 255, 255, 0.75);
  --colour-font-secondary: #000000;
  --font-default: Quicksand, Arial, sans-serif;
}
.inline-panels .panel {
  margin: 0;
}
.inline-panels .panel-group {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5em;
}
.inline-panels .panel-heading {
  color: var(--colour-font-secondary);
  background-color: var(--color-grey-light);
  border: 1px solid var(--color-grey-mid);
}
.inline-panels .panel-primary {
  border: 1px solid #ddd;
}
.inline-panels .panel-primary .panel-heading {
  color: var(--colour-font-primary);
  background-color: var(--colour-primary-100);
  border: 1px solid var(--colour-primary-100);
}
.inline-panels .panel-primary .panel-heading a {
  font-weight: 600;
}
.table {
  color: black;
}
.table .table-header tr:first-child {
  background-image: linear-gradient(to right, var(--colour-secondary-200), var(--colour-secondary-100));
}
.table .table-header tr:first-child .sort-active {
  color: var(--colour-font-primary);
  background: var(--colour-secondary-100);
  margin-right: 0.25em;
}
.table .table-header tr:first-child .table-column-visible {
  color: var(--color-grey-light);
}
.table tr.warn {
  background: var(--colour-secondary-010);
}
.table tbody > tr:nth-of-type(odd).warn {
  background: var(--colour-secondary-020);
}
ul.pagination li a {
  color: var(--colour-font-secondary);
  background-color: var(--colour-white);
}
ul.pagination li.active a {
  color: var(--colour-font-primary);
  background-color: var(--colour-primary-100);
}
.page-size-list {
  color: var(--colour-font-secondary);
}
.page-size-list-dropdown {
  border-color: var(--colour-font-secondary);
}
.traffic-light::before {
  display: flex;
  align-content: center;
  justify-content: center;
}
.traffic-light {
  height: 1.5em;
  border: 1px solid #555;
  color: black;
  width: 100px;
  border-radius: 5px;
}
.traffic-light.traffic-light-any {
  background-color: transparent;
  color: black;
}
.traffic-light.traffic-light-null {
  background-color: grey;
  color: white;
}
.traffic-light.traffic-light-null::before {
  content: 'Not set';
}
.traffic-light.traffic-light-red {
  background-color: red;
  color: white;
}
.traffic-light.traffic-light-red::before {
  content: 'Red';
}
.traffic-light.traffic-light-amber {
  background-color: orange;
  color: white;
}
.traffic-light.traffic-light-amber::before {
  content: 'Amber';
}
.traffic-light.traffic-light-green {
  background-color: green;
  color: white;
}
.traffic-light.traffic-light-green::before {
  content: 'Green';
}
.traffic-light.traffic-light-black {
  background-color: black;
  color: white;
}
.traffic-light.traffic-light-black::before {
  content: 'Black';
}
.row-modal-icon {
  font-size: 15px;
  margin-left: 5px;
  color: var(--color6);
  vertical-align: middle;
  cursor: pointer;
}