/* Set-up colour variables */
/* Find change colour names (lightblue, darkblue, etc...) with that actual colour names - needed for adding colours to <a> links with buttons */
:root {
  /* lightblue */
  --color-one: #009dcf;
  --color-one-hover: #0071b3;
  /* darkblue */
  --color-two: #0078b2;
  --color-two-hover: #00498a;
  /* green */
  --color-three: #84ba2f;
  --color-three-hover: #4e9600;
  /* orange */
  --color-four: #f6a42b;
  --color-four-hover: #ea7c00;
  /* pink */
  --color-five: #ef7aa0;
  --color-five-hover: #d74b73;
  /* color6 */
  --color-six: #DDe7f3;
  --color-six-hover: #F1A829;
  /* color7 */
  --color-seven: #7400E1;
  --color-seven-hover: #4600b1;
  /* color8 */
  --color-eight: #9FC03C;
  --color-eight-hover: #719412;
  /* color9 */
  --color-nine: #9FC03C;
  --color-nine-hover: #719412;
  /* color+10 */
  /*--color-ten: #9FC03C;
  --color-ten-hover: #719412;*/
  /* Basic colours */
  --color-red: #e73537;
  --color-red-hover: #c51213;
  --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;
}
/* ==== lightblue ==== */
/* Links on lightblue background */
div.lightblue {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.lightblue, span.lightblue a {
  color: var(--color-one);
}
/* Text - Hover and Focus */
span.lightblue a:hover, span.lightblue a:focus,
a:hover span.lightblue, a:focus span.lightblue {
  color: var(--color-one-hover);
}
/* Ordered and Unordered Lists */
.lightblue ol, .lightblue ul {
  --li-marker-color: var(--color-white);
}
/* Block Backgrounds */
div.lightblue,
button.lightblue,
.button.lightblue,
.link-button.lightblue,
.button span.lightblue,
.ck-content.ck a.button.lightblue,
.ck-content.ck a.link-button.lightblue,
.ck-content.ck a.button span.lightblue,
.tab-button.lightblue {
  --bg-color: var(--color-one) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and Focus */
div.lightblue:hover, div.lightblue:focus,
button.lightblue:hover, button.lightblue:focus,
.button.lightblue:hover, .button.lightblue:focus,
.link-button.lightblue:hover, .link-button.lightblue:focus,
.button:hover span.lightblue, .button:focus span.lightblue,
.ck-content.ck a.button.lightblue:hover, .ck-content.ck a.button.lightblue:focus,
.ck-content.ck a.link-button.lightblue:hover, .ck-content.ck a.link-button.lightblue:focus,
.ck-content.ck a.button span.lightblue:hover, .ck-content.ck a.button span.lightblue:focus,
.tab-button.lightblue:hover, .tab-button.lightblue:focus {
  --bg-color-hover: var(--color-one-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.lightblue,
.button.lightblue,
.link-button.border-lightblue,
.ck-content.ck a.button.lightblue,
.ck-content.ck a.link-button.border-lightblue,
.ck-content.ck a.button span.lightblue,
.tab-button.lightblue, 
div.border-lightblue {
  --bor-color: var(--color-one) !important;
}
/* Column Borders – Hover and Focus */
button.lightblue:hover, button.lightblue:focus,
.button.lightblue:hover, .button.lightblue:focus,
.link-button.border-lightblue:hover, .link-button.border-lightblue:focus,
.ck-content.ck a.button.lightblue:hover, .ck-content.ck a.button.lightblue:focus,
.ck-content.ck a.link-button.lightblue:hover, .ck-content.ck a.link-button.lightblue:focus,
.ck-content.ck a.button span.lightblue:hover, .ck-content.ck a.button span.lightblue:focus,
.tab-button.lightblue:hover, .tab-button.lightblue:focus,
div.border-lightblue:hover, div.border-lightblue:focus {
  --bor-color-hover: var(--color-one-hover) !important;
}
/* ==== darkblue ==== */
/* Links on darkblue background */
div.darkblue {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.darkblue, span.darkblue a {
  color: var(--color-two);
}
/* Text – Hover and Focus */
span.darkblue a:hover, span.darkblue a:focus,
a:hover span.darkblue, a:focus span.darkblue {
  color: var(--color-two-hover);
}
/* Ordered and Unordered Lists */
.darkblue ol, .darkblue ul {
  --li-marker-color: var(--color-six);
}
/* Block Backgrounds */
div.darkblue,
button.darkblue,
.button.darkblue,
.link-button.darkblue,
.button span.darkblue,
.ck-content.ck a.button.darkblue,
.ck-content.ck a.link-button.darkblue,
.ck-content.ck a.button span.darkblue,
.tab-button.darkblue {
  --bg-color: var(--color-two) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and Focus */
div.darkblue:hover, div.darkblue:focus,
button.darkblue:hover, button.darkblue:focus,
.button.darkblue:hover, .button.darkblue:focus,
.link-button.darkblue:hover, .link-button.darkblue:focus,
.button:hover span.darkblue, .button:focus span.darkblue,
.ck-content.ck a.button.darkblue:hover, .ck-content.ck a.button.darkblue:focus,
.ck-content.ck a.link-button.darkblue:hover, .ck-content.ck a.link-button.darkblue:focus,
.ck-content.ck a.button span.darkblue:hover, .ck-content.ck a.button span.darkblue:focus,
.tab-button.darkblue:hover, .tab-button.darkblue:focus {
  --bg-color-hover: var(--color-two-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.darkblue,
.button.darkblue,
.link-button.border-darkblue,
.ck-content.ck a.button.darkblue,
.ck-content.ck a.link-button.border-darkblue,
.ck-content.ck a.button span.darkblue,
.tab-button.darkblue, 
div.border-darkblue {
  --bor-color: var(--color-two) !important;
}
/* Column Borders – Hover and Focus */
button.darkblue:hover, button.darkblue:focus,
.button.darkblue:hover, .button.darkblue:focus,
.link-button.border-darkblue:hover, .link-button.border-darkblue:focus,
.ck-content.ck a.button.darkblue:hover, .ck-content.ck a.button.darkblue:focus,
.ck-content.ck a.link-button.darkblue:hover, .ck-content.ck a.link-button.darkblue:focus,
.ck-content.ck a.button span.darkblue:hover, .ck-content.ck a.button span.darkblue:focus,
.tab-button.darkblue:hover, .tab-button.darkblue:focus,
div.border-darkblue:hover, div.border-darkblue:focus {
  --bor-color-hover: var(--color-two-hover) !important;
}
/* ==== green ==== */
/* Links on green background */
div.green {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.green, span.green a {
  color: var(--color-three);
}
/* Text – Hover and Focus */
span.green a:hover, span.green a:focus,
a:hover span.green, a:focus span.green {
  color: var(--color-three-hover);
}
/* Ordered and Unordered Lists */
.green ol, .green ul {
  --li-marker-color: var(--color-six);
}
/* 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-three) !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-three-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-three) !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-three-hover) !important;
}
/* ==== orange ==== */
/* Links on orange background */
div.orange {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.orange, span.orange a {
  color: var(--color-four);
}
/* Text – Hover and Focus */
span.orange a:hover, span.orange a:focus,
a:hover span.orange, a:focus span.orange {
  color: var(--color-four-hover);
}
/* Ordered and Unordered Lists */
.orange ol, .orange ul {
  --li-marker-color: var(--color-dark-grey);
}
/* 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-four) !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-four-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-four) !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-four-hover) !important;
}
/* ==== pink ==== */
/* Links on pink background */
div.pink {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.pink, span.pink a {
  color: var(--color-five);
}
/* Text – Hover and Focus */
span.pink a:hover, span.pink a:focus,
a:hover span.pink, a:focus span.pink {
  color: var(--color-five-hover);
}
/* Ordered and Unordered Lists */
.pink ol, .pink ul {
  --li-marker-color: var(--color-one);
}
/* Block Backgrounds */
div.pink,
button.pink,
.button.pink,
.link-button.pink,
.button span.pink,
.ck-content.ck a.button.pink,
.ck-content.ck a.link-button.pink,
.ck-content.ck a.button span.pink,
.tab-button.pink {
  --bg-color: var(--color-five) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and Focus */
div.pink:hover, div.pink:focus,
button.pink:hover, button.pink:focus,
.button.pink:hover, .button.pink:focus,
.link-button.pink:hover, .link-button.pink:focus,
.button:hover span.pink, .button:focus span.pink,
.ck-content.ck a.button.pink:hover, .ck-content.ck a.button.pink:focus,
.ck-content.ck a.link-button.pink:hover, .ck-content.ck a.link-button.pink:focus,
.ck-content.ck a.button span.pink:hover, .ck-content.ck a.button span.pink:focus,
.tab-button.pink:hover, .tab-button.pink:focus {
  --bg-color-hover: var(--color-five-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.pink,
.button.pink,
.link-button.border-pink,
.ck-content.ck a.button.pink,
.ck-content.ck a.link-button.border-pink,
.ck-content.ck a.button span.pink,
.tab-button.pink, 
div.border-pink {
  --bor-color: var(--color-five) !important;
}
/* Column Borders – Hover and Focus */
button.pink:hover, button.pink:focus,
.button.pink:hover, .button.pink:focus,
.link-button.border-pink:hover, .link-button.border-pink:focus,
.ck-content.ck a.button.pink:hover, .ck-content.ck a.button.pink:focus,
.ck-content.ck a.link-button.pink:hover, .ck-content.ck a.link-button.pink:focus,
.ck-content.ck a.button span.pink:hover, .ck-content.ck a.button span.pink:focus,
.tab-button.pink:hover, .tab-button.pink:focus,
div.border-pink:hover, div.border-pink:focus {
  --bor-color-hover: var(--color-five-hover) !important;
}
/* ==== color6 ==== */
/* Links on color6 background */
div.color6 {
  --d-color-link: var(--color-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.color6, span.color6 a {
  color: var(--color-six);
}
/* Text – Hover and Focus */
span.color6 a:hover, span.color6 a:focus,
a:hover span.color6, a:focus span.color6 {
  color: var(--color-six-hover);
}
/* Ordered and Unordered Lists */
.color6 ol, .color6 ul {
  --li-marker-color: var(--color-one);
}
/* Block Backgrounds */
div.color6,
button.color6,
.button.color6,
.link-button.color6,
.button span.color6,
.ck-content.ck a.button.color6,
.ck-content.ck a.link-button.color6,
.ck-content.ck a.button span.color6,
.tab-button.color6 {
  --bg-color: var(--color-six) !important;
  --txt-color: var(--color-one) !important;
}
/* Block Backgrounds – Hover and Focus */
div.color6:hover, div.color6:focus,
button.color6:hover, button.color6:focus,
.button.color6:hover, .button.color6:focus,
.link-button.color6:hover, .link-button.color6:focus,
.button:hover span.color6, .button:focus span.color6,
.ck-content.ck a.button.color6:hover, .ck-content.ck a.button.color6:focus,
.ck-content.ck a.link-button.color6:hover, .ck-content.ck a.link-button.color6:focus,
.ck-content.ck a.button span.color6:hover, .ck-content.ck a.button span.color6:focus,
.tab-button.color6:hover, .tab-button.color6:focus {
  --bg-color-hover: var(--color-six-hover) !important;
  --txt-color-hover: var(--color-one-hover) !important;
}
/* Column Borders */
button.color6,
.button.color6,
.link-button.border-color6,
.ck-content.ck a.button.color6,
.ck-content.ck a.link-button.border-color6,
.ck-content.ck a.button span.color6,
.tab-button.color6, 
div.border-color6 {
  --bor-color: var(--color-six) !important;
}
/* Column Borders – Hover and Focus */
button.color6:hover, button.color6:focus,
.button.color6:hover, .button.color6:focus,
.link-button.border-color6:hover, .link-button.border-color6:focus,
.ck-content.ck a.button.color6:hover, .ck-content.ck a.button.color6:focus,
.ck-content.ck a.link-button.color6:hover, .ck-content.ck a.link-button.color6:focus,
.ck-content.ck a.button span.color6:hover, .ck-content.ck a.button span.color6:focus,
.tab-button.color6:hover, .tab-button.color6:focus,
div.border-color6:hover, div.border-color6:focus {
  --bor-color-hover: var(--color-six-hover) !important;
}
/* ==== color7 ==== */
/* Links on color7 background */
div.color7 {
  --d-color-link: var(--color-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.color7, span.color7 a {
  color: var(--color-seven);
}
/* Text – Hover and Focus */
span.color7 a:hover, span.color7 a:focus,
a:hover span.color7, a:focus span.color7 {
  color: var(--color-seven-hover);
}
/* Ordered and Unordered Lists */
.color7 ol, .color7 ul {
  --li-marker-color: var(--color-white);
}
/* Block Backgrounds */
div.color7,
button.color7,
.button.color7,
.link-button.color7,
.button span.color7,
.ck-content.ck a.button.color7,
.ck-content.ck a.link-button.color7,
.ck-content.ck a.button span.color7,
.tab-button.color7 {
  --bg-color: var(--color-seven) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and Focus */
div.color7:hover, div.color7:focus,
button.color7:hover, button.color7:focus,
.button.color7:hover, .button.color7:focus,
.link-button.color7:hover, .link-button.color7:focus,
.button:hover span.color7, .button:focus span.color7,
.ck-content.ck a.button.color7:hover, .ck-content.ck a.button.color7:focus,
.ck-content.ck a.link-button.color7:hover, .ck-content.ck a.link-button.color7:focus,
.ck-content.ck a.button span.color7:hover, .ck-content.ck a.button span.color7:focus,
.tab-button.color7:hover, .tab-button.color7:focus {
  --bg-color-hover: var(--color-seven-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.color7,
.button.color7,
.link-button.border-color7,
.ck-content.ck a.button.color7,
.ck-content.ck a.link-button.border-color7,
.ck-content.ck a.button span.color7,
.tab-button.color7, 
div.border-color7 {
  --bor-color: var(--color-seven) !important;
}
/* Column Borders – Hover and Focus */
button.color7:hover, button.color7:focus,
.button.color7:hover, .button.color7:focus,
.link-button.border-color7:hover, .link-button.border-color7:focus,
.ck-content.ck a.button.color7:hover, .ck-content.ck a.button.color7:focus,
.ck-content.ck a.link-button.color7:hover, .ck-content.ck a.link-button.color7:focus,
.ck-content.ck a.button span.color7:hover, .ck-content.ck a.button span.color7:focus,
.tab-button.color7:hover, .tab-button.color7:focus,
div.border-color7:hover, div.border-color7:focus {
  --bor-color-hover: var(--color-seven-hover) !important;
}
/* ==== color8 ==== */
/* Links on color8 background */
div.color8 {
  --d-color-link: var(--color-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.color8, span.color8 a {
  color: var(--color-eight);
}
/* Text – Hover and Focus */
span.color8 a:hover, span.color8 a:focus,
a:hover span.color8, a:focus span.color8 {
  color: var(--color-eight-hover);
}
/* Ordered and Unordered Lists */
.color8 ol, .color8 ul {
  --li-marker-color: var(--color-one);
}
/* Block Backgrounds */
div.color8,
button.color8,
.button.color8,
.link-button.color8,
.button span.color8,
.ck-content.ck a.button.color8,
.ck-content.ck a.link-button.color8,
.ck-content.ck a.button span.color8,
.tab-button.color8 {
  --bg-color: var(--color-eight) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and Focus */
div.color8:hover, div.color8:focus,
button.color8:hover, button.color8:focus,
.button.color8:hover, .button.color8:focus,
.link-button.color8:hover, .link-button.color8:focus,
.button:hover span.color8, .button:focus span.color8,
.ck-content.ck a.button.color8:hover, .ck-content.ck a.button.color8:focus,
.ck-content.ck a.link-button.color8:hover, .ck-content.ck a.link-button.color8:focus,
.ck-content.ck a.button span.color8:hover, .ck-content.ck a.button span.color8:focus,
.tab-button.color8:hover, .tab-button.color8:focus {
  --bg-color-hover: var(--color-eight-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.color8,
.button.color8,
.link-button.border-color8,
.ck-content.ck a.button.color8,
.ck-content.ck a.link-button.border-color8,
.ck-content.ck a.button span.color8,
.tab-button.color8, 
div.border-color8 {
  --bor-color: var(--color-eight) !important;
}
/* Column Borders – Hover and Focus */
button.color8:hover, button.color8:focus,
.button.color8:hover, .button.color8:focus,
.link-button.border-color8:hover, .link-button.border-color8:focus,
.ck-content.ck a.button.color8:hover, .ck-content.ck a.button.color8:focus,
.ck-content.ck a.link-button.color8:hover, .ck-content.ck a.link-button.color8:focus,
.ck-content.ck a.button span.color8:hover, .ck-content.ck a.button span.color8:focus,
.tab-button.color8:hover, .tab-button.color8:focus,
div.border-color8:hover, div.border-color8:focus {
  --bor-color-hover: var(--color-eight-hover) !important;
}
/* ==== color9 ==== */
/* Links on color9 background */
div.color9 {
  --d-color-link: var(--color-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.color9, span.color9 a {
  color: var(--color-nine);
}
/* Text – Hover and Focus */
span.color9 a:hover, span.color9 a:focus,
a:hover span.color9, a:focus span.color9 {
  color: var(--color-nine-hover);
}
/* Ordered and Unordered Lists */
.color9 ol, .color9 ul {
  --li-marker-color: var(--color-one);
}
/* Block Backgrounds */
div.color9,
button.color9,
.button.color9,
.link-button.color9,
.button span.color9,
.ck-content.ck a.button.color9,
.ck-content.ck a.link-button.color9,
.ck-content.ck a.button span.color9,
.tab-button.color9 {
  --bg-color: var(--color-nine) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and Focus */
div.color9:hover, div.color9:focus,
button.color9:hover, button.color9:focus,
.button.color9:hover, .button.color9:focus,
.link-button.color9:hover, .link-button.color9:focus,
.button:hover span.color9, .button:focus span.color9,
.ck-content.ck a.button.color9:hover, .ck-content.ck a.button.color9:focus,
.ck-content.ck a.link-button.color9:hover, .ck-content.ck a.link-button.color9:focus,
.ck-content.ck a.button span.color9:hover, .ck-content.ck a.button span.color9:focus,
.tab-button.color9:hover, .tab-button.color9:focus {
  --bg-color-hover: var(--color-nine-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.color9,
.button.color9,
.link-button.border-color9,
.ck-content.ck a.button.color9,
.ck-content.ck a.link-button.border-color9,
.ck-content.ck a.button span.color9,
.tab-button.color9, 
div.border-color9 {
  --bor-color: var(--color-nine) !important;
}
/* Column Borders – Hover and Focus */
button.color9:hover, button.color9:focus,
.button.color9:hover, .button.color9:focus,
.link-button.border-color9:hover, .link-button.border-color9:focus,
.ck-content.ck a.button.color9:hover, .ck-content.ck a.button.color9:focus,
.ck-content.ck a.link-button.color9:hover, .ck-content.ck a.link-button.color9:focus,
.ck-content.ck a.button span.color9:hover, .ck-content.ck a.button span.color9:focus,
.tab-button.color9:hover, .tab-button.color9:focus,
div.border-color9:hover, div.border-color9: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-one);
  --d-color-link-hover: var(--color-one-hover);
}*/
/* Text */
/*span.color+10, span.color+10 a {
  color: var(color-ten);
}*/
/* 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);
}*/
/* Ordered and Unordered Lists */
/*.color+10 ol, .color+10 ul {
  --li-marker-color: var(--color-white);
}*/
/* 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);
}
/* Text */
span.red, span.red a {
  color: var(--color-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);
}
/* Ordered and Unordered Lists */
.red ol, .red ul {
  --li-marker-color: var(--color-white);
}
/* 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);
}
/* Text */
span.dark-grey, span.dark-grey a {
  color: var(--color-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);
}
/* Ordered and Unordered Lists */
.dark-grey ol, .dark-grey ul {
  --li-marker-color: var(--color-white);
}
/* 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);
}
/* Text */
span.grey, span.grey a {
  color: var(--color-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);
}
/* Ordered and Unordered Lists */
.grey ol, .grey ul {
  --li-marker-color: var(--color-white);
}
/* 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-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.mid-grey, span.mid-grey a {
  color: var(--color-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);
}
/* Ordered and Unordered Lists */
.mid-grey ol, .mid-grey ul {
  --li-marker-color: var(--color-one);
}
/* 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-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.light-grey, span.light-grey a {
  color: var(--color-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);
}
/* Ordered and Unordered Lists */
.light-grey ol, .light-grey ul {
  --li-marker-color: var(--color-one);
}
/* 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-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.very-light-grey, span.very-light-grey a {
  color: var(--color-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);
}
/* Ordered and Unordered Lists */
.very-light-grey ol, .very-light-grey ul {
  --li-marker-color: var(--color-one);
}
/* 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-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.white, span.white a {
  color: var(--color-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);
}
/* Ordered and Unordered Lists */
.white ol, .white ul {
  --li-marker-color: var(--color-one);
}
/* 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;
}