/* Set-up colour variables */
/* Find change colour names (red, orange, etc...) with that actual colour names - needed for adding colours to <a> links with buttons */
:root {
  /* red */
  --color-one: #BF0000;
  --color-one-hover: #8F0000;
  /* orange */
  --color-two: #ee7203;
  --color-two-hover: #cb2e00;
  /* yellow */
  --color-three: #ffec00;
  --color-three-hover: #ffbb00;
  /* dark-yellow */
  --color-four: #d09e00;
  --color-four-hover: #ee7203;
  /* green */
  --color-five: #6cae2e;
  --color-five-hover: #047500;
  /* blue */
  --color-six: #29348a;
  --color-six-hover: #010447;
  /* purple */
  --color-seven: #5a358b;
  --color-seven-hover: #170449;
  /* black */
  --color-eight: #101110;
  --color-eight-hover: #070707;
  /* black-fade */
  --color-nine: linear-gradient(90deg, #101110 0%, #212221 100%);
  --color-nine-hover: #719412;
  /* color+10 */
  /*--color-ten: #9FC03C;
  --color-ten-hover: #719412;*/
  /* Basic colours */
  --color-red: #BF0000;
  --color-red-hover: #8F0000;
  --color-dark-grey: #26313A;
  --color-dark-grey-hover: #0D1923;
  --color-grey: #4C555C;
  --color-grey-hover: #333D45;
  --color-mid-grey: #adb1b5;
  --color-mid-grey-hover: #8a9095;
  --color-light-grey: #E5E6E7;
  --color-light-grey-hover: #CCCFD1;
  --color-very-light-grey: #f6f6f7;
  --color-very-light-grey-hover: #e9e9eb;
  --color-white: #fff; 
  --color-white-hover: rgba(255,255,255,0.7); /* Must use RGB here because of hover */
  /* Colours without options below */
  --color-unpublished: #ffecec;
  /* Accesibility outline colour */
  --color-accessibility: #2494db;
}
/* ==== red ==== */
/* Links on red Background */
div.red {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on red Background */
.red ol, .red ul {
  --li-marker-color: var(--color-white);
}
/* red Text */
span.red, span.red a {
  color: var(--color-one);
}
/* red Text - Hover and Focus */
span.red a:hover, span.red a:focus,
a:hover span.red, a:focus span.red {
  color: var(--color-one-hover);
}
/* Block Backgrounds */
div.red,
button.red,
.button.red,
.link-button.red,
.button span.red,
.ck-content.ck a.button.red,
.ck-content.ck a.link-button.red,
.ck-content.ck a.button span.red,
.tab-button.red {
  --bg-color: var(--color-one) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.red:hover, div.red:focus,
button.red:hover, button.red:focus,
.button.red:hover, .button.red:focus,
.link-button.red:hover, .link-button.red:focus,
.button:hover span.red, .button:focus span.red,
.ck-content.ck a.button.red:hover, .ck-content.ck a.button.red:focus,
.ck-content.ck a.link-button.red:hover, .ck-content.ck a.link-button.red:focus,
.ck-content.ck a.button span.red:hover, .ck-content.ck a.button span.red:focus,
.tab-button.red:hover, .tab-button.red:focus {
  --bg-color-hover: var(--color-one-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.red,
.button.red,
.link-button.border-red,
.ck-content.ck a.button.red,
.ck-content.ck a.link-button.border-red,
.ck-content.ck a.button span.red,
.tab-button.red, 
div.border-red {
  --bor-color: var(--color-one) !important;
}
/* Column Borders - Hover and Focus */
button.red:hover, button.red:focus,
.button.red:hover, .button.red:focus,
.link-button.border-red:hover, .link-button.border-red:focus,
.ck-content.ck a.button.red:hover, .ck-content.ck a.button.red:focus,
.ck-content.ck a.link-button.red:hover, .ck-content.ck a.link-button.red:focus,
.ck-content.ck a.button span.red:hover, .ck-content.ck a.button span.red:focus,
.tab-button.red:hover, .tab-button.red:focus,
div.border-red:hover, div.border-red:focus {
  --bor-color-hover: var(--color-one-hover) !important;
}
/* ==== orange ==== */
/* Links on orange Background */
div.orange {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on orange Background */
.orange ol, .orange ul {
  --li-marker-color: var(--color-white);
}
/* orange Text */
span.orange, span.orange a {
  color: var(--color-two);
}
/* orange Text - Hover and Focus */
span.orange a:hover, span.orange a:focus,
a:hover span.orange, a:focus span.orange {
  color: var(--color-two-hover);
}
/* Block Backgrounds */
div.orange,
button.orange,
.button.orange,
.link-button.orange,
.button span.orange,
.ck-content.ck a.button.orange,
.ck-content.ck a.link-button.orange,
.ck-content.ck a.button span.orange,
.tab-button.orange {
  --bg-color: var(--color-two) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.orange:hover, div.orange:focus,
button.orange:hover, button.orange:focus,
.button.orange:hover, .button.orange:focus,
.link-button.orange:hover, .link-button.orange:focus,
.button:hover span.orange, .button:focus span.orange,
.ck-content.ck a.button.orange:hover, .ck-content.ck a.button.orange:focus,
.ck-content.ck a.link-button.orange:hover, .ck-content.ck a.link-button.orange:focus,
.ck-content.ck a.button span.orange:hover, .ck-content.ck a.button span.orange:focus,
.tab-button.orange:hover, .tab-button.orange:focus {
  --bg-color-hover: var(--color-two-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.orange,
.button.orange,
.link-button.border-orange,
.ck-content.ck a.button.orange,
.ck-content.ck a.link-button.border-orange,
.ck-content.ck a.button span.orange,
.tab-button.orange, 
div.border-orange {
  --bor-color: var(--color-two) !important;
}
/* Column Borders - Hover and Focus */
button.orange:hover, button.orange:focus,
.button.orange:hover, .button.orange:focus,
.link-button.border-orange:hover, .link-button.border-orange:focus,
.ck-content.ck a.button.orange:hover, .ck-content.ck a.button.orange:focus,
.ck-content.ck a.link-button.orange:hover, .ck-content.ck a.link-button.orange:focus,
.ck-content.ck a.button span.orange:hover, .ck-content.ck a.button span.orange:focus,
.tab-button.orange:hover, .tab-button.orange:focus,
div.border-orange:hover, div.border-orange:focus {
  --bor-color-hover: var(--color-two-hover) !important;
}
/* ==== yellow ==== */
/* Links on yellow Background */
div.yellow {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on yellow Background */
.yellow ol, .yellow ul {
  --li-marker-color: var(--color-dark-grey);
}
/* yellow Text */
span.yellow, span.yellow a {
  color: var(--color-three);
}
/* yellow Text - Hover and Focus */
span.yellow a:hover, span.yellow a:focus,
a:hover span.yellow, a:focus span.yellow {
  color: var(--color-three-hover);
}
/* Block Backgrounds */
div.yellow,
button.yellow,
.button.yellow,
.link-button.yellow,
.button span.yellow,
.ck-content.ck a.button.yellow,
.ck-content.ck a.link-button.yellow,
.ck-content.ck a.button span.yellow,
.tab-button.yellow {
  --bg-color: var(--color-three) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.yellow:hover, div.yellow:focus,
button.yellow:hover, button.yellow:focus,
.button.yellow:hover, .button.yellow:focus,
.link-button.yellow:hover, .link-button.yellow:focus,
.button:hover span.yellow, .button:focus span.yellow,
.ck-content.ck a.button.yellow:hover, .ck-content.ck a.button.yellow:focus,
.ck-content.ck a.link-button.yellow:hover, .ck-content.ck a.link-button.yellow:focus,
.ck-content.ck a.button span.yellow:hover, .ck-content.ck a.button span.yellow:focus,
.tab-button.yellow:hover, .tab-button.yellow:focus {
  --bg-color-hover: var(--color-three-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.yellow,
.button.yellow,
.link-button.border-yellow,
.ck-content.ck a.button.yellow,
.ck-content.ck a.link-button.border-yellow,
.ck-content.ck a.button span.yellow,
.tab-button.yellow, 
div.border-yellow {
  --bor-color: var(--color-three) !important;
}
/* Column Borders - Hover and Focus */
button.yellow:hover, button.yellow:focus,
.button.yellow:hover, .button.yellow:focus,
.link-button.border-yellow:hover, .link-button.border-yellow:focus,
.ck-content.ck a.button.yellow:hover, .ck-content.ck a.button.yellow:focus,
.ck-content.ck a.link-button.yellow:hover, .ck-content.ck a.link-button.yellow:focus,
.ck-content.ck a.button span.yellow:hover, .ck-content.ck a.button span.yellow:focus,
.tab-button.yellow:hover, .tab-button.yellow:focus,
div.border-yellow:hover, div.border-yellow:focus {
  --bor-color-hover: var(--color-three-hover) !important;
}
/* ==== dark-yellow ==== */
/* Links on dark-yellow Background */
div.dark-yellow {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on dark-yellow Background */
.dark-yellow ol, .dark-yellow ul {
  --li-marker-color: var(--color-eight);
}
/* dark-yellow Text */
span.dark-yellow, span.dark-yellow a {
  color: var(--color-four);
}
/* dark-yellow Text - Hover and Focus */
span.dark-yellow a:hover, span.dark-yellow a:focus,
a:hover span.dark-yellow, a:focus span.dark-yellow {
  color: var(--color-four-hover);
}
/* Block Backgrounds */
div.dark-yellow,
button.dark-yellow,
.button.dark-yellow,
.link-button.dark-yellow,
.button span.dark-yellow,
.ck-content.ck a.button.dark-yellow,
.ck-content.ck a.link-button.dark-yellow,
.ck-content.ck a.button span.dark-yellow,
.tab-button.dark-yellow {
  --bg-color: var(--color-four) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.dark-yellow:hover, div.dark-yellow:focus,
button.dark-yellow:hover, button.dark-yellow:focus,
.button.dark-yellow:hover, .button.dark-yellow:focus,
.link-button.dark-yellow:hover, .link-button.dark-yellow:focus,
.button:hover span.dark-yellow, .button:focus span.dark-yellow,
.ck-content.ck a.button.dark-yellow:hover, .ck-content.ck a.button.dark-yellow:focus,
.ck-content.ck a.link-button.dark-yellow:hover, .ck-content.ck a.link-button.dark-yellow:focus,
.ck-content.ck a.button span.dark-yellow:hover, .ck-content.ck a.button span.dark-yellow:focus,
.tab-button.dark-yellow:hover, .tab-button.dark-yellow:focus {
  --bg-color-hover: var(--color-four-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.dark-yellow,
.button.dark-yellow,
.link-button.border-dark-yellow,
.ck-content.ck a.button.dark-yellow,
.ck-content.ck a.link-button.border-dark-yellow,
.ck-content.ck a.button span.dark-yellow,
.tab-button.dark-yellow, 
div.border-dark-yellow {
  --bor-color: var(--color-four) !important;
}
/* Column Borders - Hover and Focus */
button.dark-yellow:hover, button.dark-yellow:focus,
.button.dark-yellow:hover, .button.dark-yellow:focus,
.link-button.border-dark-yellow:hover, .link-button.border-dark-yellow:focus,
.ck-content.ck a.button.dark-yellow:hover, .ck-content.ck a.button.dark-yellow:focus,
.ck-content.ck a.link-button.dark-yellow:hover, .ck-content.ck a.link-button.dark-yellow:focus,
.ck-content.ck a.button span.dark-yellow:hover, .ck-content.ck a.button span.dark-yellow:focus,
.tab-button.dark-yellow:hover, .tab-button.dark-yellow:focus,
div.border-dark-yellow:hover, div.border-dark-yellow:focus {
  --bor-color-hover: var(--color-four-hover) !important;
}
/* ==== green ==== */
/* Links on green Background */
div.green {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on green Background */
.green ol, .green ul {
  --li-marker-color: var(--color-white);
}
/* green Text */
span.green, span.green a {
  color: var(--color-five);
}
/* green Text - Hover and Focus */
span.green a:hover, span.green a:focus,
a:hover span.green, a:focus span.green {
  color: var(--color-five-hover);
}
/* Block Backgrounds */
div.green,
button.green,
.button.green,
.link-button.green,
.button span.green,
.ck-content.ck a.button.green,
.ck-content.ck a.link-button.green,
.ck-content.ck a.button span.green,
.tab-button.green {
  --bg-color: var(--color-five) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.green:hover, div.green:focus,
button.green:hover, button.green:focus,
.button.green:hover, .button.green:focus,
.link-button.green:hover, .link-button.green:focus,
.button:hover span.green, .button:focus span.green,
.ck-content.ck a.button.green:hover, .ck-content.ck a.button.green:focus,
.ck-content.ck a.link-button.green:hover, .ck-content.ck a.link-button.green:focus,
.ck-content.ck a.button span.green:hover, .ck-content.ck a.button span.green:focus,
.tab-button.green:hover, .tab-button.green:focus {
  --bg-color-hover: var(--color-five-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.green,
.button.green,
.link-button.border-green,
.ck-content.ck a.button.green,
.ck-content.ck a.link-button.border-green,
.ck-content.ck a.button span.green,
.tab-button.green, 
div.border-green {
  --bor-color: var(--color-five) !important;
}
/* Column Borders - Hover and Focus */
button.green:hover, button.green:focus,
.button.green:hover, .button.green:focus,
.link-button.border-green:hover, .link-button.border-green:focus,
.ck-content.ck a.button.green:hover, .ck-content.ck a.button.green:focus,
.ck-content.ck a.link-button.green:hover, .ck-content.ck a.link-button.green:focus,
.ck-content.ck a.button span.green:hover, .ck-content.ck a.button span.green:focus,
.tab-button.green:hover, .tab-button.green:focus,
div.border-green:hover, div.border-green:focus {
  --bor-color-hover: var(--color-five-hover) !important;
}
/* ==== blue ==== */
/* Links on blue Background */
div.blue {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Ordered and Unordered Lists on blue Background */
.blue ol, .blue ul {
  --li-marker-color: var(--color-white);
}
/* blue Text */
span.blue, span.blue a {
  color: var(--color-six);
}
/* blue Text - Hover and Focus */
span.blue a:hover, span.blue a:focus,
a:hover span.blue, a:focus span.blue {
  color: var(--color-six-hover);
}
/* Block Backgrounds */
div.blue,
button.blue,
.button.blue,
.link-button.blue,
.button span.blue,
.ck-content.ck a.button.blue,
.ck-content.ck a.link-button.blue,
.ck-content.ck a.button span.blue,
.tab-button.blue {
  --bg-color: var(--color-six) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.blue:hover, div.blue:focus,
button.blue:hover, button.blue:focus,
.button.blue:hover, .button.blue:focus,
.link-button.blue:hover, .link-button.blue:focus,
.button:hover span.blue, .button:focus span.blue,
.ck-content.ck a.button.blue:hover, .ck-content.ck a.button.blue:focus,
.ck-content.ck a.link-button.blue:hover, .ck-content.ck a.link-button.blue:focus,
.ck-content.ck a.button span.blue:hover, .ck-content.ck a.button span.blue:focus,
.tab-button.blue:hover, .tab-button.blue:focus {
  --bg-color-hover: var(--color-six-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.blue,
.button.blue,
.link-button.border-blue,
.ck-content.ck a.button.blue,
.ck-content.ck a.link-button.border-blue,
.ck-content.ck a.button span.blue,
.tab-button.blue, 
div.border-blue {
  --bor-color: var(--color-six) !important;
}
/* Column Borders - Hover and Focus */
button.blue:hover, button.blue:focus,
.button.blue:hover, .button.blue:focus,
.link-button.border-blue:hover, .link-button.border-blue:focus,
.ck-content.ck a.button.blue:hover, .ck-content.ck a.button.blue:focus,
.ck-content.ck a.link-button.blue:hover, .ck-content.ck a.link-button.blue:focus,
.ck-content.ck a.button span.blue:hover, .ck-content.ck a.button span.blue:focus,
.tab-button.blue:hover, .tab-button.blue:focus,
div.border-blue:hover, div.border-blue:focus {
  --bor-color-hover: var(--color-six-hover) !important;
}
/* ==== purple ==== */
/* Links on purple Background */
div.purple {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on purple Background */
.purple ol, .purple ul {
  --li-marker-color: var(--color-white);
}
/* purple Text */
span.purple, span.purple a {
  color: var(--color-seven);
}
/* purple Text - Hover and Focus */
span.purple a:hover, span.purple a:focus,
a:hover span.purple, a:focus span.purple {
  color: var(--color-seven-hover);
}
/* Block Backgrounds */
div.purple,
button.purple,
.button.purple,
.link-button.purple,
.button span.purple,
.ck-content.ck a.button.purple,
.ck-content.ck a.link-button.purple,
.ck-content.ck a.button span.purple,
.tab-button.purple {
  --bg-color: var(--color-seven) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.purple:hover, div.purple:focus,
button.purple:hover, button.purple:focus,
.button.purple:hover, .button.purple:focus,
.link-button.purple:hover, .link-button.purple:focus,
.button:hover span.purple, .button:focus span.purple,
.ck-content.ck a.button.purple:hover, .ck-content.ck a.button.purple:focus,
.ck-content.ck a.link-button.purple:hover, .ck-content.ck a.link-button.purple:focus,
.ck-content.ck a.button span.purple:hover, .ck-content.ck a.button span.purple:focus,
.tab-button.purple:hover, .tab-button.purple:focus {
  --bg-color-hover: var(--color-seven-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.purple,
.button.purple,
.link-button.border-purple,
.ck-content.ck a.button.purple,
.ck-content.ck a.link-button.border-purple,
.ck-content.ck a.button span.purple,
.tab-button.purple, 
div.border-purple {
  --bor-color: var(--color-seven) !important;
}
/* Column Borders - Hover and Focus */
button.purple:hover, button.purple:focus,
.button.purple:hover, .button.purple:focus,
.link-button.border-purple:hover, .link-button.border-purple:focus,
.ck-content.ck a.button.purple:hover, .ck-content.ck a.button.purple:focus,
.ck-content.ck a.link-button.purple:hover, .ck-content.ck a.link-button.purple:focus,
.ck-content.ck a.button span.purple:hover, .ck-content.ck a.button span.purple:focus,
.tab-button.purple:hover, .tab-button.purple:focus,
div.border-purple:hover, div.border-purple:focus {
  --bor-color-hover: var(--color-seven-hover) !important;
}
/* ==== black ==== */
/* Links on black Background */
div.black {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on black Background */
.black ol, .black ul {
  --li-marker-color: var(--color-three);
}
/* black Text */
span.black, span.black a {
  color: var(--color-eight);
}
/* black Text - Hover and Focus */
span.black a:hover, span.black a:focus,
a:hover span.black, a:focus span.black {
  color: var(--color-eight-hover);
}
/* Block Backgrounds */
div.black,
button.black,
.button.black,
.link-button.black,
.button span.black,
.ck-content.ck a.button.black,
.ck-content.ck a.link-button.black,
.ck-content.ck a.button span.black,
.tab-button.black {
  --bg-color: var(--color-eight) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.black:hover, div.black:focus,
button.black:hover, button.black:focus,
.button.black:hover, .button.black:focus,
.link-button.black:hover, .link-button.black:focus,
.button:hover span.black, .button:focus span.black,
.ck-content.ck a.button.black:hover, .ck-content.ck a.button.black:focus,
.ck-content.ck a.link-button.black:hover, .ck-content.ck a.link-button.black:focus,
.ck-content.ck a.button span.black:hover, .ck-content.ck a.button span.black:focus,
.tab-button.black:hover, .tab-button.black:focus {
  --bg-color-hover: var(--color-eight-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.black,
.button.black,
.link-button.border-black,
.ck-content.ck a.button.black,
.ck-content.ck a.link-button.border-black,
.ck-content.ck a.button span.black,
.tab-button.black, 
div.border-black {
  --bor-color: var(--color-eight) !important;
}
/* Column Borders - Hover and Focus */
button.black:hover, button.black:focus,
.button.black:hover, .button.black:focus,
.link-button.border-black:hover, .link-button.border-black:focus,
.ck-content.ck a.button.black:hover, .ck-content.ck a.button.black:focus,
.ck-content.ck a.link-button.black:hover, .ck-content.ck a.link-button.black:focus,
.ck-content.ck a.button span.black:hover, .ck-content.ck a.button span.black:focus,
.tab-button.black:hover, .tab-button.black:focus,
div.border-black:hover, div.border-black:focus {
  --bor-color-hover: var(--color-eight-hover) !important;
}
/* ==== black-fade ==== */
/* Links on black-fade Background */
div.black-fade {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on black-fade Background */
.black-fade ol, .black-fade ul {
  --li-marker-color: var(--color-six);
}
/* black-fade Text */
span.black-fade, span.black-fade a {
  color: var(--color-nine);
}
/* black-fade Text - Hover and Focus */
span.black-fade a:hover, span.black-fade a:focus,
a:hover span.black-fade, a:focus span.black-fade {
  color: var(--color-nine-hover);
}
/* Block Backgrounds */
div.black-fade,
button.black-fade,
.button.black-fade,
.link-button.black-fade,
.button span.black-fade,
.ck-content.ck a.button.black-fade,
.ck-content.ck a.link-button.black-fade,
.ck-content.ck a.button span.black-fade,
.tab-button.black-fade {
  --bg-color: var(--color-nine) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.black-fade:hover, div.black-fade:focus,
button.black-fade:hover, button.black-fade:focus,
.button.black-fade:hover, .button.black-fade:focus,
.link-button.black-fade:hover, .link-button.black-fade:focus,
.button:hover span.black-fade, .button:focus span.black-fade,
.ck-content.ck a.button.black-fade:hover, .ck-content.ck a.button.black-fade:focus,
.ck-content.ck a.link-button.black-fade:hover, .ck-content.ck a.link-button.black-fade:focus,
.ck-content.ck a.button span.black-fade:hover, .ck-content.ck a.button span.black-fade:focus,
.tab-button.black-fade:hover, .tab-button.black-fade:focus {
  --bg-color-hover: var(--color-nine-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.black-fade,
.button.black-fade,
.link-button.border-black-fade,
.ck-content.ck a.button.black-fade,
.ck-content.ck a.link-button.border-black-fade,
.ck-content.ck a.button span.black-fade,
.tab-button.black-fade, 
div.border-black-fade {
  --bor-color: var(--color-nine) !important;
}
/* Column Borders - Hover and Focus */
button.black-fade:hover, button.black-fade:focus,
.button.black-fade:hover, .button.black-fade:focus,
.link-button.border-black-fade:hover, .link-button.border-black-fade:focus,
.ck-content.ck a.button.black-fade:hover, .ck-content.ck a.button.black-fade:focus,
.ck-content.ck a.link-button.black-fade:hover, .ck-content.ck a.link-button.black-fade:focus,
.ck-content.ck a.button span.black-fade:hover, .ck-content.ck a.button span.black-fade:focus,
.tab-button.black-fade:hover, .tab-button.black-fade:focus,
div.border-black-fade:hover, div.border-black-fade:focus {
  --bor-color-hover: var(--color-nine-hover) !important;
}
/* ========== For each additional colour - duplicate the following ========== */
/* ==== color+10 ==== */
/* Links on color+10 Background */
/*div.color+10 {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}*/
/* Ordered and Unordered Lists on color+10 Background */
/*.color+10 ol, .color+10 ul {
  --li-marker-color: var(--color-six);
}*/
/* color+10 Text */
/*span.color+10, span.color+10 a {
  color: var(--color-ten);
}*/
/* color+10 Text - Hover and Focus */
/*span.color+10 a:hover, span.color+10 a:focus,
a:hover span.color+10, a:focus span.color+10 {
  color: var(--color-ten-hover);
}*/
/* Block Backgrounds */
/*div.color+10,
button.color+10,
.button.color+10,
.link-button.color+10,
.button span.color+10,
.ck-content.ck a.button.color+10,
.ck-content.ck a.link-button.color+10,
.ck-content.ck a.button span.color+10,
.tab-button.color+10 {
  --bg-color: var(color-ten) !important;
  --txt-color: var(--color-white) !important;
}*/
/* Block Backgrounds - Hover and Focus */
/*div.color+10:hover, div.color+10:focus,
button.color+10:hover, button.color+10:focus,
.button.color+10:hover, .button.color+10:focus,
.link-button.color+10:hover, .link-button.color+10:focus,
.button:hover span.color+10, .button:focus span.color+10,
.ck-content.ck a.button.color+10:hover, .ck-content.ck a.button.color+10:focus,
.ck-content.ck a.link-button.color+10:hover, .ck-content.ck a.link-button.color+10:focus,
.ck-content.ck a.button span.color+10:hover, .ck-content.ck a.button span.color+10:focus,
.tab-button.color+10:hover, .tab-button.color+10:focus {
  --bg-color-hover: var(color-ten-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}*/
/* Column Borders */
/*button.color+10,
.button.color+10,
.link-button.border-color+10,
.ck-content.ck a.button.color+10,
.ck-content.ck a.link-button.border-color+10,
.ck-content.ck a.button span.color+10,
.tab-button.color+10, 
div.border-color+10 {
  --bor-color: var(color-ten) !important;
}*/
/* Column Borders - Hover and Focus */
/*button.color+10:hover, button.color+10:focus,
.button.color+10:hover, .button.color+10:focus,
.link-button.border-color+10:hover, .link-button.border-color+10:focus,
.ck-content.ck a.button.color+10:hover, .ck-content.ck a.button.color+10:focus,
.ck-content.ck a.link-button.color+10:hover, .ck-content.ck a.link-button.color+10:focus,
.ck-content.ck a.button span.color+10:hover, .ck-content.ck a.button span.color+10:focus,
.tab-button.color+10:hover, .tab-button.color+10:focus,
div.border-color+10:hover, div.border-color+10:focus {
  --bor-color-hover: var(color-ten-hover) !important;
}*/

/* ========== Basic colours ========== */
/* ==== red ==== */
/* Links on red Background */
div.red {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Ordered and Unordered Lists on red Background */
.red ol, .red ul {
  --li-marker-color: var(--color-white);
}
/* red Text */
span.red, span.red a {
  color: var(--color-red);
}
/* red Text - Hover and Focus */
span.red a:hover, span.red a:focus,
a:hover span.red, a:focus span.red {
  color: var(--color-red-hover);
}
/* Block Backgrounds */
div.red,
button.red,
.button.red,
.link-button.red,
.button span.red,
.ck-content.ck a.button.red,
.ck-content.ck a.link-button.red,
.ck-content.ck a.button span.red,
.tab-button.red {
  --bg-color: var(--color-red) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.red:hover, div.red:focus,
button.red:hover, button.red:focus,
.button.red:hover, .button.red:focus,
.link-button.red:hover, .link-button.red:focus,
.button:hover span.red, .button:focus span.red,
.ck-content.ck a.button.red:hover, .ck-content.ck a.button.red:focus,
.ck-content.ck a.link-button.red:hover, .ck-content.ck a.link-button.red:focus,
.ck-content.ck a.button span.red:hover, .ck-content.ck a.button span.red:focus,
.tab-button.red:hover, .tab-button.red:focus {
  --bg-color-hover: var(--color-red-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.red,
.button.red,
.link-button.border-red,
.ck-content.ck a.button.red,
.ck-content.ck a.link-button.border-red,
.ck-content.ck a.button span.red,
.tab-button.red, 
div.border-red {
  --bor-color: var(--color-red) !important;
}
/* Column Borders - Hover and Focus */
button.red:hover, button.red:focus,
.button.red:hover, .button.red:focus,
.link-button.border-red:hover, .link-button.border-red:focus,
.ck-content.ck a.button.red:hover, .ck-content.ck a.button.red:focus,
.ck-content.ck a.link-button.red:hover, .ck-content.ck a.link-button.red:focus,
.ck-content.ck a.button span.red:hover, .ck-content.ck a.button span.red:focus,
.tab-button.red:hover, .tab-button.red:focus,
div.border-red:hover, div.border-red:focus {
  --bor-color-hover: var(--color-red-hover) !important;
}
/* ==== dark-grey ==== */
/* Links on dark-grey Background */
div.dark-grey {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Ordered and Unordered Lists on dark-grey Background */
.dark-grey ol, .dark-grey ul {
  --li-marker-color: var(--color-white);
}
/* dark-grey Text */
span.dark-grey, span.dark-grey a {
  color: var(--color-dark-grey);
}
/* dark-grey Text - Hover and Focus */
span.dark-grey a:hover, span.dark-grey a:focus,
a:hover span.dark-grey, a:focus span.dark-grey {
  color: var(--color-dark-grey-hover);
}
/* Block Backgrounds */
div.dark-grey,
button.dark-grey,
.button.dark-grey,
.link-button.dark-grey,
.button span.dark-grey,
.ck-content.ck a.button.dark-grey,
.ck-content.ck a.link-button.dark-grey,
.ck-content.ck a.button span.dark-grey,
.tab-button.dark-grey {
  --bg-color: var(--color-dark-grey) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.dark-grey:hover, div.dark-grey:focus,
button.dark-grey:hover, button.dark-grey:focus,
.button.dark-grey:hover, .button.dark-grey:focus,
.link-button.dark-grey:hover, .link-button.dark-grey:focus,
.button:hover span.dark-grey, .button:focus span.dark-grey,
.ck-content.ck a.button.dark-grey:hover, .ck-content.ck a.button.dark-grey:focus,
.ck-content.ck a.link-button.dark-grey:hover, .ck-content.ck a.link-button.dark-grey:focus,
.ck-content.ck a.button span.dark-grey:hover, .ck-content.ck a.button span.dark-grey:focus,
.tab-button.dark-grey:hover, .tab-button.dark-grey:focus {
  --bg-color-hover: var(--color-dark-grey-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.dark-grey,
.button.dark-grey,
.link-button.border-dark-grey,
.ck-content.ck a.button.dark-grey,
.ck-content.ck a.link-button.border-dark-grey,
.ck-content.ck a.button span.dark-grey,
.tab-button.dark-grey, 
div.border-dark-grey {
  --bor-color: var(--color-dark-grey) !important;
}
/* Column Borders - Hover and Focus */
button.dark-grey:hover, button.dark-grey:focus,
.button.dark-grey:hover, .button.dark-grey:focus,
.link-button.border-dark-grey:hover, .link-button.border-dark-grey:focus,
.ck-content.ck a.button.dark-grey:hover, .ck-content.ck a.button.dark-grey:focus,
.ck-content.ck a.link-button.dark-grey:hover, .ck-content.ck a.link-button.dark-grey:focus,
.ck-content.ck a.button span.dark-grey:hover, .ck-content.ck a.button span.dark-grey:focus,
.tab-button.dark-grey:hover, .tab-button.dark-grey:focus,
div.border-dark-grey:hover, div.border-dark-grey:focus {
  --bor-color-hover: var(--color-dark-grey-hover) !important;
}
/* ==== grey ==== */
/* Links on grey Background */
div.grey {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Ordered and Unordered Lists on grey Background */
.grey ol, .grey ul {
  --li-marker-color: var(--color-white);
}
/* grey Text */
span.grey, span.grey a {
  color: var(--color-grey);
}
/* grey Text - Hover and Focus */
span.grey a:hover, span.grey a:focus,
a:hover span.grey, a:focus span.grey {
  color: var(--color-grey-hover);
}
/* Block Backgrounds */
div.grey,
button.grey,
.button.grey,
.link-button.grey,
.button span.grey,
.ck-content.ck a.button.grey,
.ck-content.ck a.link-button.grey,
.ck-content.ck a.button span.grey,
.tab-button.grey {
  --bg-color: var(--color-grey) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.grey:hover, div.grey:focus,
button.grey:hover, button.grey:focus,
.button.grey:hover, .button.grey:focus,
.link-button.grey:hover, .link-button.grey:focus,
.button:hover span.grey, .button:focus span.grey,
.ck-content.ck a.button.grey:hover, .ck-content.ck a.button.grey:focus,
.ck-content.ck a.link-button.grey:hover, .ck-content.ck a.link-button.grey:focus,
.ck-content.ck a.button span.grey:hover, .ck-content.ck a.button span.grey:focus,
.tab-button.grey:hover, .tab-button.grey:focus {
  --bg-color-hover: var(--color-grey-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.grey,
.button.grey,
.link-button.border-grey,
.ck-content.ck a.button.grey,
.ck-content.ck a.link-button.border-grey,
.ck-content.ck a.button span.grey,
.tab-button.grey, 
div.border-grey {
  --bor-color: var(--color-grey) !important;
}
/* Column Borders - Hover and Focus */
button.grey:hover, button.grey:focus,
.button.grey:hover, .button.grey:focus,
.link-button.border-grey:hover, .link-button.border-grey:focus,
.ck-content.ck a.button.grey:hover, .ck-content.ck a.button.grey:focus,
.ck-content.ck a.link-button.grey:hover, .ck-content.ck a.link-button.grey:focus,
.ck-content.ck a.button span.grey:hover, .ck-content.ck a.button span.grey:focus,
.tab-button.grey:hover, .tab-button.grey:focus,
div.border-grey:hover, div.border-grey:focus {
  --bor-color-hover: var(--color-grey-hover) !important;
}
/* ==== mid-grey ==== */
/* Links on mid-grey Background */
div.mid-grey {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on mid-grey Background */
.mid-grey ol, .mid-grey ul {
  --li-marker-color: var(--color-six);
}
/* mid-grey Text */
span.mid-grey, span.mid-grey a {
  color: var(--color-mid-grey);
}
/* mid-grey Text - Hover and Focus */
span.mid-grey a:hover, span.mid-grey a:focus,
a:hover span.mid-grey, a:focus span.mid-grey {
  color: var(--color-mid-grey-hover);
}
/* Block Backgrounds */
div.mid-grey,
button.mid-grey,
.button.mid-grey,
.link-button.mid-grey,
.button span.mid-grey,
.ck-content.ck a.button.mid-grey,
.ck-content.ck a.link-button.mid-grey,
.ck-content.ck a.button span.mid-grey,
.tab-button.mid-grey {
  --bg-color: var(--color-mid-grey) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds - Hover and Focus */
div.mid-grey:hover, div.mid-grey:focus,
button.mid-grey:hover, button.mid-grey:focus,
.button.mid-grey:hover, .button.mid-grey:focus,
.link-button.mid-grey:hover, .link-button.mid-grey:focus,
.button:hover span.mid-grey, .button:focus span.mid-grey,
.ck-content.ck a.button.mid-grey:hover, .ck-content.ck a.button.mid-grey:focus,
.ck-content.ck a.link-button.mid-grey:hover, .ck-content.ck a.link-button.mid-grey:focus,
.ck-content.ck a.button span.mid-grey:hover, .ck-content.ck a.button span.mid-grey:focus,
.tab-button.mid-grey:hover, .tab-button.mid-grey:focus {
  --bg-color-hover: var(--color-mid-grey-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.mid-grey,
.button.mid-grey,
.link-button.border-mid-grey,
.ck-content.ck a.button.mid-grey,
.ck-content.ck a.link-button.border-mid-grey,
.ck-content.ck a.button span.mid-grey,
.tab-button.mid-grey, 
div.border-mid-grey {
  --bor-color: var(--color-mid-grey) !important;
}
/* Column Borders - Hover and Focus */
button.mid-grey:hover, button.mid-grey:focus,
.button.mid-grey:hover, .button.mid-grey:focus,
.link-button.border-mid-grey:hover, .link-button.border-mid-grey:focus,
.ck-content.ck a.button.mid-grey:hover, .ck-content.ck a.button.mid-grey:focus,
.ck-content.ck a.link-button.mid-grey:hover, .ck-content.ck a.link-button.mid-grey:focus,
.ck-content.ck a.button span.mid-grey:hover, .ck-content.ck a.button span.mid-grey:focus,
.tab-button.mid-grey:hover, .tab-button.mid-grey:focus,
div.border-mid-grey:hover, div.border-mid-grey:focus {
  --bor-color-hover: var(--color-mid-grey-hover) !important;
}
/* ==== light-grey ==== */
/* Links on light-grey Background */
div.light-grey {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on light-grey Background */
.light-grey ol, .light-grey ul {
  --li-marker-color: var(--color-six);
}
/* light-grey Text */
span.light-grey, span.light-grey a {
  color: var(--color-light-grey);
}
/* light-grey Text - Hover and Focus */
span.light-grey a:hover, span.light-grey a:focus,
a:hover span.light-grey, a:focus span.light-grey {
  color: var(--color-light-grey-hover);
}
/* Block Backgrounds */
div.light-grey,
button.light-grey,
.button.light-grey,
.link-button.light-grey,
.button span.light-grey,
.ck-content.ck a.button.light-grey,
.ck-content.ck a.link-button.light-grey,
.ck-content.ck a.button span.light-grey,
.tab-button.light-grey {
  --bg-color: var(--color-light-grey) !important;
  --txt-color: var(--color-grey) !important;
}
/* Block Backgrounds - Hover and Focus */
div.light-grey:hover, div.light-grey:focus,
button.light-grey:hover, button.light-grey:focus,
.button.light-grey:hover, .button.light-grey:focus,
.link-button.light-grey:hover, .link-button.light-grey:focus,
.button:hover span.light-grey, .button:focus span.light-grey,
.ck-content.ck a.button.light-grey:hover, .ck-content.ck a.button.light-grey:focus,
.ck-content.ck a.link-button.light-grey:hover, .ck-content.ck a.link-button.light-grey:focus,
.ck-content.ck a.button span.light-grey:hover, .ck-content.ck a.button span.light-grey:focus,
.tab-button.light-grey:hover, .tab-button.light-grey:focus {
  --bg-color-hover: var(--color-light-grey-hover) !important;
  --txt-color-hover: var(--color-grey-hover) !important;
}
/* Column Borders */
button.light-grey,
.button.light-grey,
.link-button.border-light-grey,
.ck-content.ck a.button.light-grey,
.ck-content.ck a.link-button.border-light-grey,
.ck-content.ck a.button span.light-grey,
.tab-button.light-grey, 
div.border-light-grey {
  --bor-color: var(--color-light-grey) !important;
}
/* Column Borders - Hover and Focus */
button.light-grey:hover, button.light-grey:focus,
.button.light-grey:hover, .button.light-grey:focus,
.link-button.border-light-grey:hover, .link-button.border-light-grey:focus,
.ck-content.ck a.button.light-grey:hover, .ck-content.ck a.button.light-grey:focus,
.ck-content.ck a.link-button.light-grey:hover, .ck-content.ck a.link-button.light-grey:focus,
.ck-content.ck a.button span.light-grey:hover, .ck-content.ck a.button span.light-grey:focus,
.tab-button.light-grey:hover, .tab-button.light-grey:focus,
div.border-light-grey:hover, div.border-light-grey:focus {
  --bor-color-hover: var(--color-light-grey-hover) !important;
}
/* ==== very-light-grey ==== */
/* Links on very-light-grey Background */
div.very-light-grey {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on very-light-grey Background */
.very-light-grey ol, .very-light-grey ul {
  --li-marker-color: var(--color-six);
}
/* very-light-grey Text */
span.very-light-grey, span.very-light-grey a {
  color: var(--color-very-light-grey);
}
/* very-light-grey Text - Hover and Focus */
span.very-light-grey a:hover, span.very-light-grey a:focus,
a:hover span.very-light-grey, a:focus span.very-light-grey {
  color: var(--color-very-light-grey-hover);
}
/* Block Backgrounds */
div.very-light-grey,
button.very-light-grey,
.button.very-light-grey,
.link-button.very-light-grey,
.button span.very-light-grey,
.ck-content.ck a.button.very-light-grey,
.ck-content.ck a.link-button.very-light-grey,
.ck-content.ck a.button span.very-light-grey,
.tab-button.very-light-grey {
  --bg-color: var(--color-very-light-grey) !important;
  --txt-color: var(--color-grey) !important;
}
/* Block Backgrounds - Hover and Focus */
div.very-light-grey:hover, div.very-light-grey:focus,
button.very-light-grey:hover, button.very-light-grey:focus,
.button.very-light-grey:hover, .button.very-light-grey:focus,
.link-button.very-light-grey:hover, .link-button.very-light-grey:focus,
.button:hover span.very-light-grey, .button:focus span.very-light-grey,
.ck-content.ck a.button.very-light-grey:hover, .ck-content.ck a.button.very-light-grey:focus,
.ck-content.ck a.link-button.very-light-grey:hover, .ck-content.ck a.link-button.very-light-grey:focus,
.ck-content.ck a.button span.very-light-grey:hover, .ck-content.ck a.button span.very-light-grey:focus,
.tab-button.very-light-grey:hover, .tab-button.very-light-grey:focus {
  --bg-color-hover: var(--color-very-light-grey-hover) !important;
  --txt-color-hover: var(--color-grey-hover) !important;
}
/* Column Borders */
button.very-light-grey,
.button.very-light-grey,
.link-button.border-very-light-grey,
.ck-content.ck a.button.very-light-grey,
.ck-content.ck a.link-button.border-very-light-grey,
.ck-content.ck a.button span.very-light-grey,
.tab-button.very-light-grey, 
div.border-very-light-grey {
  --bor-color: var(--color-very-light-grey) !important;
}
/* Column Borders - Hover and Focus */
button.very-light-grey:hover, button.very-light-grey:focus,
.button.very-light-grey:hover, .button.very-light-grey:focus,
.link-button.border-very-light-grey:hover, .link-button.border-very-light-grey:focus,
.ck-content.ck a.button.very-light-grey:hover, .ck-content.ck a.button.very-light-grey:focus,
.ck-content.ck a.link-button.very-light-grey:hover, .ck-content.ck a.link-button.very-light-grey:focus,
.ck-content.ck a.button span.very-light-grey:hover, .ck-content.ck a.button span.very-light-grey:focus,
.tab-button.very-light-grey:hover, .tab-button.very-light-grey:focus,
div.border-very-light-grey:hover, div.border-very-light-grey:focus {
  --bor-color-hover: var(--color-very-light-grey-hover) !important;
}
/* ==== white ==== */
/* Links on white Background */
div.white {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Ordered and Unordered Lists on white Background */
.white ol, .white ul {
  --li-marker-color: var(--color-six);
}
/* white Text */
span.white, span.white a {
  color: var(--color-white);
}
/* white Text - Hover and Focus */
span.white a:hover, span.white a:focus,
a:hover span.white, a:focus span.white {
  color: var(--color-white-hover);
}
/* Block Backgrounds */
div.white,
button.white,
.button.white,
.link-button.white,
.button span.white,
.ck-content.ck a.button.white,
.ck-content.ck a.link-button.white,
.ck-content.ck a.button span.white,
.tab-button.white {
  --bg-color: var(--color-white) !important;
  --txt-color: var(--color-grey) !important;
}
/* Block Backgrounds - Hover and Focus */
div.white:hover, div.white:focus,
button.white:hover, button.white:focus,
.button.white:hover, .button.white:focus,
.link-button.white:hover, .link-button.white:focus,
.button:hover span.white, .button:focus span.white,
.ck-content.ck a.button.white:hover, .ck-content.ck a.button.white:focus,
.ck-content.ck a.link-button.white:hover, .ck-content.ck a.link-button.white:focus,
.ck-content.ck a.button span.white:hover, .ck-content.ck a.button span.white:focus,
.tab-button.white:hover, .tab-button.white:focus {
  --bg-color-hover: var(--color-white-hover) !important;
  --txt-color-hover: var(--color-grey-hover) !important;
}
/* Column Borders */
button.white,
.button.white,
.link-button.border-white,
.ck-content.ck a.button.white,
.ck-content.ck a.link-button.border-white,
.ck-content.ck a.button span.white,
.tab-button.white, 
div.border-white {
  --bor-color: var(--color-white) !important;
}
/* Column Borders - Hover and Focus */
button.white:hover, button.white:focus,
.button.white:hover, .button.white:focus,
.link-button.border-white:hover, .link-button.border-white:focus,
.ck-content.ck a.button.white:hover, .ck-content.ck a.button.white:focus,
.ck-content.ck a.link-button.white:hover, .ck-content.ck a.link-button.white:focus,
.ck-content.ck a.button span.white:hover, .ck-content.ck a.button span.white:focus,
.tab-button.white:hover, .tab-button.white:focus,
div.border-white:hover, div.border-white:focus {
  --bor-color-hover: var(--color-white-hover) !important;
}