/* Set-up colour variables */
/* Find change colour names (dark-blue, light-blue, etc...) with that actual colour names - needed for adding colours to <a> links with buttons */
:root {
  /* dark-blue */
  --color-one: #001E6C;
  --color-one-hover: #000129;
  /* light-blue */
  --color-two: #00ADE4;
  --color-two-hover: #0074CB;
  /* green */
  --color-three: #B1BF0D;
  --color-three-hover: #798F00;
  /* orange */
  --color-four: #F6A500;
  --color-four-hover: #E26900;
  /* pink */
  --color-five: #C8135F;
  --color-five-hover: #87001D;
  /* purple */
  --color-six: #7C2477;
  --color-six-hover: #310133;
  /* color7 */
  --color-seven: #7400E1;
  --color-seven-hover: #310133;
  /* 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: #cb1719;
  --color-red-hover: #b60c0d;
  --color-grey-900: #0e161c;
  --color-grey-900-hover: #040709;
  --color-dark-grey: #273139;
  --color-dark-grey-hover: #0e1318;
  --color-grey: #4b555d;
  --color-grey-hover: #232a31;
  --color-grey-600: #676f76;
  --color-grey-600-hover: #394047;
  --color-grey-500: #858c91;
  --color-grey-500-hover: #555d62;
  --color-mid-grey: #a5aaae;
  --color-mid-grey-hover: #7a7f85;
  --color-grey-300: #cacccf;
  --color-grey-300-hover: #abadb2;
  --color-light-grey: #e4e6e7;
  --color-light-grey-hover: #d2d5d7;
  --color-very-light-grey: #f4f6f7;
  --color-very-light-grey-hover: #eceff1;
  --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;
}
/* ==== dark-blue ==== */
/* Links on dark-blue background */
div.dark-blue {
  --d-color-link: var(--color-six);
  --d-color-link-hover: var(--color-six-hover);
}
/* Text */
span.dark-blue, span.dark-blue a {
  color: var(--color-one);
}
/* Text - Hover and focus-visible */
span.dark-blue a:hover, span.dark-blue a:focus-visible,
a:hover span.dark-blue, a:focus-visible span.dark-blue {
  color: var(--color-one-hover);
}
/* Ordered and Unordered Lists */
.dark-blue ol, .dark-blue ul {
  --li-marker-color: var(--color-white);
}
/* Block Backgrounds */
div.dark-blue,
button.dark-blue,
.button.dark-blue,
.link-button.dark-blue,
.button span.dark-blue,
.ck-content.ck a.button.dark-blue,
.ck-content.ck a.link-button.dark-blue,
.ck-content.ck a.button span.dark-blue,
.tab-button.dark-blue {
  --bg-color: var(--color-one) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.dark-blue:hover, div.dark-blue:focus-visible,
button.dark-blue:hover, button.dark-blue:focus-visible,
.button.dark-blue:hover, .button.dark-blue:focus-visible,
.link-button.dark-blue:hover, .link-button.dark-blue:focus-visible,
.button:hover span.dark-blue, .button:focus-visible span.dark-blue,
.ck-content.ck a.button.dark-blue:hover, .ck-content.ck a.button.dark-blue:focus-visible,
.ck-content.ck a.link-button.dark-blue:hover, .ck-content.ck a.link-button.dark-blue:focus-visible,
.ck-content.ck a.button span.dark-blue:hover, .ck-content.ck a.button span.dark-blue:focus-visible,
.tab-button.dark-blue:hover, .tab-button.dark-blue:focus-visible {
  --bg-color-hover: var(--color-one-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.dark-blue,
.button.dark-blue,
.link-button.border-dark-blue,
.ck-content.ck a.button.dark-blue,
.ck-content.ck a.link-button.border-dark-blue,
.ck-content.ck a.button span.dark-blue,
.tab-button.dark-blue, 
div.border-dark-blue {
  --bor-color: var(--color-one) !important;
}
/* Column Borders – Hover and focus-visible */
button.dark-blue:hover, button.dark-blue:focus-visible,
.button.dark-blue:hover, .button.dark-blue:focus-visible,
.link-button.border-dark-blue:hover, .link-button.border-dark-blue:focus-visible,
.ck-content.ck a.button.dark-blue:hover, .ck-content.ck a.button.dark-blue:focus-visible,
.ck-content.ck a.link-button.dark-blue:hover, .ck-content.ck a.link-button.dark-blue:focus-visible,
.ck-content.ck a.button span.dark-blue:hover, .ck-content.ck a.button span.dark-blue:focus-visible,
.tab-button.dark-blue:hover, .tab-button.dark-blue:focus-visible,
div.border-dark-blue:hover, div.border-dark-blue:focus-visible {
  --bor-color-hover: var(--color-one-hover) !important;
}
/* ==== light-blue ==== */
/* Links on light-blue background */
div.light-blue {
  --d-color-link: var(--color-one);
  --d-color-link-hover: var(--color-one-hover);
}
/* Text */
span.light-blue, span.light-blue a {
  color: var(--color-two);
}
/* Text – Hover and focus-visible */
span.light-blue a:hover, span.light-blue a:focus-visible,
a:hover span.light-blue, a:focus-visible span.light-blue {
  color: var(--color-two-hover);
}
/* Ordered and Unordered Lists */
.light-blue ol, .light-blue ul {
  --li-marker-color: var(--color-one);
}
/* Block Backgrounds */
div.light-blue,
button.light-blue,
.button.light-blue,
.link-button.light-blue,
.button span.light-blue,
.ck-content.ck a.button.light-blue,
.ck-content.ck a.link-button.light-blue,
.ck-content.ck a.button span.light-blue,
.tab-button.light-blue {
  --bg-color: var(--color-two) !important;
  --txt-color: var(--color-one) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.light-blue:hover, div.light-blue:focus-visible,
button.light-blue:hover, button.light-blue:focus-visible,
.button.light-blue:hover, .button.light-blue:focus-visible,
.link-button.light-blue:hover, .link-button.light-blue:focus-visible,
.button:hover span.light-blue, .button:focus-visible span.light-blue,
.ck-content.ck a.button.light-blue:hover, .ck-content.ck a.button.light-blue:focus-visible,
.ck-content.ck a.link-button.light-blue:hover, .ck-content.ck a.link-button.light-blue:focus-visible,
.ck-content.ck a.button span.light-blue:hover, .ck-content.ck a.button span.light-blue:focus-visible,
.tab-button.light-blue:hover, .tab-button.light-blue:focus-visible {
  --bg-color-hover: var(--color-two-hover) !important;
  --txt-color-hover: var(--color-one-hover) !important;
}
/* Column Borders */
button.light-blue,
.button.light-blue,
.link-button.border-light-blue,
.ck-content.ck a.button.light-blue,
.ck-content.ck a.link-button.border-light-blue,
.ck-content.ck a.button span.light-blue,
.tab-button.light-blue, 
div.border-light-blue {
  --bor-color: var(--color-two) !important;
}
/* Column Borders – Hover and focus-visible */
button.light-blue:hover, button.light-blue:focus-visible,
.button.light-blue:hover, .button.light-blue:focus-visible,
.link-button.border-light-blue:hover, .link-button.border-light-blue:focus-visible,
.ck-content.ck a.button.light-blue:hover, .ck-content.ck a.button.light-blue:focus-visible,
.ck-content.ck a.link-button.light-blue:hover, .ck-content.ck a.link-button.light-blue:focus-visible,
.ck-content.ck a.button span.light-blue:hover, .ck-content.ck a.button span.light-blue:focus-visible,
.tab-button.light-blue:hover, .tab-button.light-blue:focus-visible,
div.border-light-blue:hover, div.border-light-blue:focus-visible {
  --bor-color-hover: var(--color-two-hover) !important;
}
/* ==== green ==== */
/* Links on green background */
div.green {
  --d-color-link: var(--color-dark-grey);
  --d-color-link-hover: var(--color-dark-grey-hover);
}
/* Text */
span.green, span.green a {
  color: var(--color-three);
}
/* Text – Hover and focus-visible */
span.green a:hover, span.green a:focus-visible,
a:hover span.green, a:focus-visible span.green {
  color: var(--color-three-hover);
}
/* Ordered and Unordered Lists */
.green ol, .green ul {
  --li-marker-color: var(--color-dark-grey);
}
/* 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-dark-grey) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.green:hover, div.green:focus-visible,
button.green:hover, button.green:focus-visible,
.button.green:hover, .button.green:focus-visible,
.link-button.green:hover, .link-button.green:focus-visible,
.button:hover span.green, .button:focus-visible span.green,
.ck-content.ck a.button.green:hover, .ck-content.ck a.button.green:focus-visible,
.ck-content.ck a.link-button.green:hover, .ck-content.ck a.link-button.green:focus-visible,
.ck-content.ck a.button span.green:hover, .ck-content.ck a.button span.green:focus-visible,
.tab-button.green:hover, .tab-button.green:focus-visible {
  --bg-color-hover: var(--color-three-hover) !important;
  --txt-color-hover: var(--color-dark-grey-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-visible */
button.green:hover, button.green:focus-visible,
.button.green:hover, .button.green:focus-visible,
.link-button.border-green:hover, .link-button.border-green:focus-visible,
.ck-content.ck a.button.green:hover, .ck-content.ck a.button.green:focus-visible,
.ck-content.ck a.link-button.green:hover, .ck-content.ck a.link-button.green:focus-visible,
.ck-content.ck a.button span.green:hover, .ck-content.ck a.button span.green:focus-visible,
.tab-button.green:hover, .tab-button.green:focus-visible,
div.border-green:hover, div.border-green:focus-visible {
  --bor-color-hover: var(--color-three-hover) !important;
}
/* ==== orange ==== */
/* Links on orange background */
div.orange {
  --d-color-link: var(--color-dark-grey);
  --d-color-link-hover: var(--color-dark-grey-hover);
}
/* Text */
span.orange, span.orange a {
  color: var(--color-four);
}
/* Text – Hover and focus-visible */
span.orange a:hover, span.orange a:focus-visible,
a:hover span.orange, a:focus-visible 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-dark-grey) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.orange:hover, div.orange:focus-visible,
button.orange:hover, button.orange:focus-visible,
.button.orange:hover, .button.orange:focus-visible,
.link-button.orange:hover, .link-button.orange:focus-visible,
.button:hover span.orange, .button:focus-visible span.orange,
.ck-content.ck a.button.orange:hover, .ck-content.ck a.button.orange:focus-visible,
.ck-content.ck a.link-button.orange:hover, .ck-content.ck a.link-button.orange:focus-visible,
.ck-content.ck a.button span.orange:hover, .ck-content.ck a.button span.orange:focus-visible,
.tab-button.orange:hover, .tab-button.orange:focus-visible {
  --bg-color-hover: var(--color-four-hover) !important;
  --txt-color-hover: var(--color-dark-grey-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-visible */
button.orange:hover, button.orange:focus-visible,
.button.orange:hover, .button.orange:focus-visible,
.link-button.border-orange:hover, .link-button.border-orange:focus-visible,
.ck-content.ck a.button.orange:hover, .ck-content.ck a.button.orange:focus-visible,
.ck-content.ck a.link-button.orange:hover, .ck-content.ck a.link-button.orange:focus-visible,
.ck-content.ck a.button span.orange:hover, .ck-content.ck a.button span.orange:focus-visible,
.tab-button.orange:hover, .tab-button.orange:focus-visible,
div.border-orange:hover, div.border-orange:focus-visible {
  --bor-color-hover: var(--color-four-hover) !important;
}
/* ==== pink ==== */
/* Links on pink background */
div.pink {
  --d-color-link: var(--color-dark-grey);
  --d-color-link-hover: var(--color-dark-grey-hover);
}
/* Text */
span.pink, span.pink a {
  color: var(--color-five);
}
/* Text – Hover and focus-visible */
span.pink a:hover, span.pink a:focus-visible,
a:hover span.pink, a:focus-visible span.pink {
  color: var(--color-five-hover);
}
/* Ordered and Unordered Lists */
.pink ol, .pink ul {
  --li-marker-color: var(--color-dark-grey);
}
/* 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-visible */
div.pink:hover, div.pink:focus-visible,
button.pink:hover, button.pink:focus-visible,
.button.pink:hover, .button.pink:focus-visible,
.link-button.pink:hover, .link-button.pink:focus-visible,
.button:hover span.pink, .button:focus-visible span.pink,
.ck-content.ck a.button.pink:hover, .ck-content.ck a.button.pink:focus-visible,
.ck-content.ck a.link-button.pink:hover, .ck-content.ck a.link-button.pink:focus-visible,
.ck-content.ck a.button span.pink:hover, .ck-content.ck a.button span.pink:focus-visible,
.tab-button.pink:hover, .tab-button.pink:focus-visible {
  --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-visible */
button.pink:hover, button.pink:focus-visible,
.button.pink:hover, .button.pink:focus-visible,
.link-button.border-pink:hover, .link-button.border-pink:focus-visible,
.ck-content.ck a.button.pink:hover, .ck-content.ck a.button.pink:focus-visible,
.ck-content.ck a.link-button.pink:hover, .ck-content.ck a.link-button.pink:focus-visible,
.ck-content.ck a.button span.pink:hover, .ck-content.ck a.button span.pink:focus-visible,
.tab-button.pink:hover, .tab-button.pink:focus-visible,
div.border-pink:hover, div.border-pink:focus-visible {
  --bor-color-hover: var(--color-five-hover) !important;
}
/* ==== purple ==== */
/* Links on purple background */
div.purple {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.purple, span.purple a {
  color: var(--color-six);
}
/* Text – Hover and focus-visible */
span.purple a:hover, span.purple a:focus-visible,
a:hover span.purple, a:focus-visible span.purple {
  color: var(--color-six-hover);
}
/* Ordered and Unordered Lists */
.purple ol, .purple ul {
  --li-marker-color: var(--color-white);
}
/* 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-six) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.purple:hover, div.purple:focus-visible,
button.purple:hover, button.purple:focus-visible,
.button.purple:hover, .button.purple:focus-visible,
.link-button.purple:hover, .link-button.purple:focus-visible,
.button:hover span.purple, .button:focus-visible span.purple,
.ck-content.ck a.button.purple:hover, .ck-content.ck a.button.purple:focus-visible,
.ck-content.ck a.link-button.purple:hover, .ck-content.ck a.link-button.purple:focus-visible,
.ck-content.ck a.button span.purple:hover, .ck-content.ck a.button span.purple:focus-visible,
.tab-button.purple:hover, .tab-button.purple:focus-visible {
  --bg-color-hover: var(--color-six-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-six) !important;
}
/* Column Borders – Hover and focus-visible */
button.purple:hover, button.purple:focus-visible,
.button.purple:hover, .button.purple:focus-visible,
.link-button.border-purple:hover, .link-button.border-purple:focus-visible,
.ck-content.ck a.button.purple:hover, .ck-content.ck a.button.purple:focus-visible,
.ck-content.ck a.link-button.purple:hover, .ck-content.ck a.link-button.purple:focus-visible,
.ck-content.ck a.button span.purple:hover, .ck-content.ck a.button span.purple:focus-visible,
.tab-button.purple:hover, .tab-button.purple:focus-visible,
div.border-purple:hover, div.border-purple:focus-visible {
  --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-visible */
span.color7 a:hover, span.color7 a:focus-visible,
a:hover span.color7, a:focus-visible 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-visible */
div.color7:hover, div.color7:focus-visible,
button.color7:hover, button.color7:focus-visible,
.button.color7:hover, .button.color7:focus-visible,
.link-button.color7:hover, .link-button.color7:focus-visible,
.button:hover span.color7, .button:focus-visible span.color7,
.ck-content.ck a.button.color7:hover, .ck-content.ck a.button.color7:focus-visible,
.ck-content.ck a.link-button.color7:hover, .ck-content.ck a.link-button.color7:focus-visible,
.ck-content.ck a.button span.color7:hover, .ck-content.ck a.button span.color7:focus-visible,
.tab-button.color7:hover, .tab-button.color7:focus-visible {
  --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-visible */
button.color7:hover, button.color7:focus-visible,
.button.color7:hover, .button.color7:focus-visible,
.link-button.border-color7:hover, .link-button.border-color7:focus-visible,
.ck-content.ck a.button.color7:hover, .ck-content.ck a.button.color7:focus-visible,
.ck-content.ck a.link-button.color7:hover, .ck-content.ck a.link-button.color7:focus-visible,
.ck-content.ck a.button span.color7:hover, .ck-content.ck a.button span.color7:focus-visible,
.tab-button.color7:hover, .tab-button.color7:focus-visible,
div.border-color7:hover, div.border-color7:focus-visible {
  --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-visible */
span.color8 a:hover, span.color8 a:focus-visible,
a:hover span.color8, a:focus-visible 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-visible */
div.color8:hover, div.color8:focus-visible,
button.color8:hover, button.color8:focus-visible,
.button.color8:hover, .button.color8:focus-visible,
.link-button.color8:hover, .link-button.color8:focus-visible,
.button:hover span.color8, .button:focus-visible span.color8,
.ck-content.ck a.button.color8:hover, .ck-content.ck a.button.color8:focus-visible,
.ck-content.ck a.link-button.color8:hover, .ck-content.ck a.link-button.color8:focus-visible,
.ck-content.ck a.button span.color8:hover, .ck-content.ck a.button span.color8:focus-visible,
.tab-button.color8:hover, .tab-button.color8:focus-visible {
  --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-visible */
button.color8:hover, button.color8:focus-visible,
.button.color8:hover, .button.color8:focus-visible,
.link-button.border-color8:hover, .link-button.border-color8:focus-visible,
.ck-content.ck a.button.color8:hover, .ck-content.ck a.button.color8:focus-visible,
.ck-content.ck a.link-button.color8:hover, .ck-content.ck a.link-button.color8:focus-visible,
.ck-content.ck a.button span.color8:hover, .ck-content.ck a.button span.color8:focus-visible,
.tab-button.color8:hover, .tab-button.color8:focus-visible,
div.border-color8:hover, div.border-color8:focus-visible {
  --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-visible */
span.color9 a:hover, span.color9 a:focus-visible,
a:hover span.color9, a:focus-visible 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-visible */
div.color9:hover, div.color9:focus-visible,
button.color9:hover, button.color9:focus-visible,
.button.color9:hover, .button.color9:focus-visible,
.link-button.color9:hover, .link-button.color9:focus-visible,
.button:hover span.color9, .button:focus-visible span.color9,
.ck-content.ck a.button.color9:hover, .ck-content.ck a.button.color9:focus-visible,
.ck-content.ck a.link-button.color9:hover, .ck-content.ck a.link-button.color9:focus-visible,
.ck-content.ck a.button span.color9:hover, .ck-content.ck a.button span.color9:focus-visible,
.tab-button.color9:hover, .tab-button.color9:focus-visible {
  --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-visible */
button.color9:hover, button.color9:focus-visible,
.button.color9:hover, .button.color9:focus-visible,
.link-button.border-color9:hover, .link-button.border-color9:focus-visible,
.ck-content.ck a.button.color9:hover, .ck-content.ck a.button.color9:focus-visible,
.ck-content.ck a.link-button.color9:hover, .ck-content.ck a.link-button.color9:focus-visible,
.ck-content.ck a.button span.color9:hover, .ck-content.ck a.button span.color9:focus-visible,
.tab-button.color9:hover, .tab-button.color9:focus-visible,
div.border-color9:hover, div.border-color9:focus-visible {
  --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-visible */
/*span.color+10 a:hover, span.color+10 a:focus-visible,
a:hover span.color+10, a:focus-visible 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-visible */
/*div.color+10:hover, div.color+10:focus-visible,
button.color+10:hover, button.color+10:focus-visible,
.button.color+10:hover, .button.color+10:focus-visible,
.link-button.color+10:hover, .link-button.color+10:focus-visible,
.button:hover span.color+10, .button:focus-visible span.color+10,
.ck-content.ck a.button.color+10:hover, .ck-content.ck a.button.color+10:focus-visible,
.ck-content.ck a.link-button.color+10:hover, .ck-content.ck a.link-button.color+10:focus-visible,
.ck-content.ck a.button span.color+10:hover, .ck-content.ck a.button span.color+10:focus-visible,
.tab-button.color+10:hover, .tab-button.color+10:focus-visible {
  --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-visible */
/*button.color+10:hover, button.color+10:focus-visible,
.button.color+10:hover, .button.color+10:focus-visible,
.link-button.border-color+10:hover, .link-button.border-color+10:focus-visible,
.ck-content.ck a.button.color+10:hover, .ck-content.ck a.button.color+10:focus-visible,
.ck-content.ck a.link-button.color+10:hover, .ck-content.ck a.link-button.color+10:focus-visible,
.ck-content.ck a.button span.color+10:hover, .ck-content.ck a.button span.color+10:focus-visible,
.tab-button.color+10:hover, .tab-button.color+10:focus-visible,
div.border-color+10:hover, div.border-color+10:focus-visible {
  --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-visible */
span.red a:hover, span.red a:focus-visible,
a:hover span.red, a:focus-visible 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-visible */
div.red:hover, div.red:focus-visible,
button.red:hover, button.red:focus-visible,
.button.red:hover, .button.red:focus-visible,
.link-button.red:hover, .link-button.red:focus-visible,
.button:hover span.red, .button:focus-visible span.red,
.ck-content.ck a.button.red:hover, .ck-content.ck a.button.red:focus-visible,
.ck-content.ck a.link-button.red:hover, .ck-content.ck a.link-button.red:focus-visible,
.ck-content.ck a.button span.red:hover, .ck-content.ck a.button span.red:focus-visible,
.tab-button.red:hover, .tab-button.red:focus-visible {
  --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-visible */
button.red:hover, button.red:focus-visible,
.button.red:hover, .button.red:focus-visible,
.link-button.border-red:hover, .link-button.border-red:focus-visible,
.ck-content.ck a.button.red:hover, .ck-content.ck a.button.red:focus-visible,
.ck-content.ck a.link-button.red:hover, .ck-content.ck a.link-button.red:focus-visible,
.ck-content.ck a.button span.red:hover, .ck-content.ck a.button span.red:focus-visible,
.tab-button.red:hover, .tab-button.red:focus-visible,
div.border-red:hover, div.border-red:focus-visible {
  --bor-color-hover: var(--color-red-hover) !important;
}
/* ==== grey-900 ==== */
/* Links on grey-900 background */
div.grey-900 {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.grey-900, span.grey-900 a {
  color: var(--color-grey-900);
}
/* Text – Hover and focus-visible */
span.grey-900 a:hover, span.grey-900 a:focus-visible,
a:hover span.grey-900, a:focus-visible span.grey-900 {
  color: var(--color-grey-900-hover);
}
/* Ordered and Unordered Lists */
.grey-900 ol, .grey-900 ul {
  --li-marker-color: var(--color-white);
}
/* Block Backgrounds */
div.grey-900,
button.grey-900,
.button.grey-900,
.link-button.grey-900,
.button span.grey-900,
.ck-content.ck a.button.grey-900,
.ck-content.ck a.link-button.grey-900,
.ck-content.ck a.button span.grey-900,
.tab-button.grey-900 {
  --bg-color: var(--color-grey-900) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.grey-900:hover, div.grey-900:focus-visible,
button.grey-900:hover, button.grey-900:focus-visible,
.button.grey-900:hover, .button.grey-900:focus-visible,
.link-button.grey-900:hover, .link-button.grey-900:focus-visible,
.button:hover span.grey-900, .button:focus-visible span.grey-900,
.ck-content.ck a.button.grey-900:hover, .ck-content.ck a.button.grey-900:focus-visible,
.ck-content.ck a.link-button.grey-900:hover, .ck-content.ck a.link-button.grey-900:focus-visible,
.ck-content.ck a.button span.grey-900:hover, .ck-content.ck a.button span.grey-900:focus-visible,
.tab-button.grey-900:hover, .tab-button.grey-900:focus-visible {
  --bg-color-hover: var(--color-grey-900-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.grey-900,
.button.grey-900,
.link-button.border-grey-900,
.ck-content.ck a.button.grey-900,
.ck-content.ck a.link-button.border-grey-900,
.ck-content.ck a.button span.grey-900,
.tab-button.grey-900, 
div.border-grey-900 {
  --bor-color: var(--color-grey-900) !important;
}
/* Column Borders – Hover and focus-visible */
button.grey-900:hover, button.grey-900:focus-visible,
.button.grey-900:hover, .button.grey-900:focus-visible,
.link-button.border-grey-900:hover, .link-button.border-grey-900:focus-visible,
.ck-content.ck a.button.grey-900:hover, .ck-content.ck a.button.grey-900:focus-visible,
.ck-content.ck a.link-button.grey-900:hover, .ck-content.ck a.link-button.grey-900:focus-visible,
.ck-content.ck a.button span.grey-900:hover, .ck-content.ck a.button span.grey-900:focus-visible,
.tab-button.grey-900:hover, .tab-button.grey-900:focus-visible,
div.border-grey-900:hover, div.border-grey-900:focus-visible {
  --bor-color-hover: var(--color-grey-900-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-visible */
span.dark-grey a:hover, span.dark-grey a:focus-visible,
a:hover span.dark-grey, a:focus-visible 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-visible */
div.dark-grey:hover, div.dark-grey:focus-visible,
button.dark-grey:hover, button.dark-grey:focus-visible,
.button.dark-grey:hover, .button.dark-grey:focus-visible,
.link-button.dark-grey:hover, .link-button.dark-grey:focus-visible,
.button:hover span.dark-grey, .button:focus-visible span.dark-grey,
.ck-content.ck a.button.dark-grey:hover, .ck-content.ck a.button.dark-grey:focus-visible,
.ck-content.ck a.link-button.dark-grey:hover, .ck-content.ck a.link-button.dark-grey:focus-visible,
.ck-content.ck a.button span.dark-grey:hover, .ck-content.ck a.button span.dark-grey:focus-visible,
.tab-button.dark-grey:hover, .tab-button.dark-grey:focus-visible {
  --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-visible */
button.dark-grey:hover, button.dark-grey:focus-visible,
.button.dark-grey:hover, .button.dark-grey:focus-visible,
.link-button.border-dark-grey:hover, .link-button.border-dark-grey:focus-visible,
.ck-content.ck a.button.dark-grey:hover, .ck-content.ck a.button.dark-grey:focus-visible,
.ck-content.ck a.link-button.dark-grey:hover, .ck-content.ck a.link-button.dark-grey:focus-visible,
.ck-content.ck a.button span.dark-grey:hover, .ck-content.ck a.button span.dark-grey:focus-visible,
.tab-button.dark-grey:hover, .tab-button.dark-grey:focus-visible,
div.border-dark-grey:hover, div.border-dark-grey:focus-visible {
  --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-visible */
span.grey a:hover, span.grey a:focus-visible,
a:hover span.grey, a:focus-visible 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-visible */
div.grey:hover, div.grey:focus-visible,
button.grey:hover, button.grey:focus-visible,
.button.grey:hover, .button.grey:focus-visible,
.link-button.grey:hover, .link-button.grey:focus-visible,
.button:hover span.grey, .button:focus-visible span.grey,
.ck-content.ck a.button.grey:hover, .ck-content.ck a.button.grey:focus-visible,
.ck-content.ck a.link-button.grey:hover, .ck-content.ck a.link-button.grey:focus-visible,
.ck-content.ck a.button span.grey:hover, .ck-content.ck a.button span.grey:focus-visible,
.tab-button.grey:hover, .tab-button.grey:focus-visible {
  --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-visible */
button.grey:hover, button.grey:focus-visible,
.button.grey:hover, .button.grey:focus-visible,
.link-button.border-grey:hover, .link-button.border-grey:focus-visible,
.ck-content.ck a.button.grey:hover, .ck-content.ck a.button.grey:focus-visible,
.ck-content.ck a.link-button.grey:hover, .ck-content.ck a.link-button.grey:focus-visible,
.ck-content.ck a.button span.grey:hover, .ck-content.ck a.button span.grey:focus-visible,
.tab-button.grey:hover, .tab-button.grey:focus-visible,
div.border-grey:hover, div.border-grey:focus-visible {
  --bor-color-hover: var(--color-grey-hover) !important;
}
/* ==== grey-600 ==== */
/* Links on grey-600 background */
div.grey-600 {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.grey-600, span.grey-600 a {
  color: var(--color-grey-600);
}
/* Text – Hover and focus-visible */
span.grey-600 a:hover, span.grey-600 a:focus-visible,
a:hover span.grey-600, a:focus-visible span.grey-600 {
  color: var(--color-grey-600-hover);
}
/* Ordered and Unordered Lists */
.grey-600 ol, .grey-600 ul {
  --li-marker-color: var(--color-white);
}
/* Block Backgrounds */
div.grey-600,
button.grey-600,
.button.grey-600,
.link-button.grey-600,
.button span.grey-600,
.ck-content.ck a.button.grey-600,
.ck-content.ck a.link-button.grey-600,
.ck-content.ck a.button span.grey-600,
.tab-button.grey-600 {
  --bg-color: var(--color-grey-600) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.grey-600:hover, div.grey-600:focus-visible,
button.grey-600:hover, button.grey-600:focus-visible,
.button.grey-600:hover, .button.grey-600:focus-visible,
.link-button.grey-600:hover, .link-button.grey-600:focus-visible,
.button:hover span.grey-600, .button:focus-visible span.grey-600,
.ck-content.ck a.button.grey-600:hover, .ck-content.ck a.button.grey-600:focus-visible,
.ck-content.ck a.link-button.grey-600:hover, .ck-content.ck a.link-button.grey-600:focus-visible,
.ck-content.ck a.button span.grey-600:hover, .ck-content.ck a.button span.grey-600:focus-visible,
.tab-button.grey-600:hover, .tab-button.grey-600:focus-visible {
  --bg-color-hover: var(--color-grey-600-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.grey-600,
.button.grey-600,
.link-button.border-grey-600,
.ck-content.ck a.button.grey-600,
.ck-content.ck a.link-button.border-grey-600,
.ck-content.ck a.button span.grey-600,
.tab-button.grey-600, 
div.border-grey-600 {
  --bor-color: var(--color-grey-600) !important;
}
/* Column Borders – Hover and focus-visible */
button.grey-600:hover, button.grey-600:focus-visible,
.button.grey-600:hover, .button.grey-600:focus-visible,
.link-button.border-grey-600:hover, .link-button.border-grey-600:focus-visible,
.ck-content.ck a.button.grey-600:hover, .ck-content.ck a.button.grey-600:focus-visible,
.ck-content.ck a.link-button.grey-600:hover, .ck-content.ck a.link-button.grey-600:focus-visible,
.ck-content.ck a.button span.grey-600:hover, .ck-content.ck a.button span.grey-600:focus-visible,
.tab-button.grey-600:hover, .tab-button.grey-600:focus-visible,
div.border-grey-600:hover, div.border-grey-600:focus-visible {
  --bor-color-hover: var(--color-grey-600-hover) !important;
}
/* ==== grey-500 ==== */
/* Links on grey-500 background */
div.grey-500 {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.grey-500, span.grey-500 a {
  color: var(--color-grey-500);
}
/* Text – Hover and focus-visible */
span.grey-500 a:hover, span.grey-500 a:focus-visible,
a:hover span.grey-500, a:focus-visible span.grey-500 {
  color: var(--color-grey-500-hover);
}
/* Ordered and Unordered Lists */
.grey-500 ol, .grey-500 ul {
  --li-marker-color: var(--color-white);
}
/* Block Backgrounds */
div.grey-500,
button.grey-500,
.button.grey-500,
.link-button.grey-500,
.button span.grey-500,
.ck-content.ck a.button.grey-500,
.ck-content.ck a.link-button.grey-500,
.ck-content.ck a.button span.grey-500,
.tab-button.grey-500 {
  --bg-color: var(--color-grey-500) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.grey-500:hover, div.grey-500:focus-visible,
button.grey-500:hover, button.grey-500:focus-visible,
.button.grey-500:hover, .button.grey-500:focus-visible,
.link-button.grey-500:hover, .link-button.grey-500:focus-visible,
.button:hover span.grey-500, .button:focus-visible span.grey-500,
.ck-content.ck a.button.grey-500:hover, .ck-content.ck a.button.grey-500:focus-visible,
.ck-content.ck a.link-button.grey-500:hover, .ck-content.ck a.link-button.grey-500:focus-visible,
.ck-content.ck a.button span.grey-500:hover, .ck-content.ck a.button span.grey-500:focus-visible,
.tab-button.grey-500:hover, .tab-button.grey-500:focus-visible {
  --bg-color-hover: var(--color-grey-500-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.grey-500,
.button.grey-500,
.link-button.border-grey-500,
.ck-content.ck a.button.grey-500,
.ck-content.ck a.link-button.border-grey-500,
.ck-content.ck a.button span.grey-500,
.tab-button.grey-500, 
div.border-grey-500 {
  --bor-color: var(--color-grey-500) !important;
}
/* Column Borders – Hover and focus-visible */
button.grey-500:hover, button.grey-500:focus-visible,
.button.grey-500:hover, .button.grey-500:focus-visible,
.link-button.border-grey-500:hover, .link-button.border-grey-500:focus-visible,
.ck-content.ck a.button.grey-500:hover, .ck-content.ck a.button.grey-500:focus-visible,
.ck-content.ck a.link-button.grey-500:hover, .ck-content.ck a.link-button.grey-500:focus-visible,
.ck-content.ck a.button span.grey-500:hover, .ck-content.ck a.button span.grey-500:focus-visible,
.tab-button.grey-500:hover, .tab-button.grey-500:focus-visible,
div.border-grey-500:hover, div.border-grey-500:focus-visible {
  --bor-color-hover: var(--color-grey-500-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-visible */
span.mid-grey a:hover, span.mid-grey a:focus-visible,
a:hover span.mid-grey, a:focus-visible 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-visible */
div.mid-grey:hover, div.mid-grey:focus-visible,
button.mid-grey:hover, button.mid-grey:focus-visible,
.button.mid-grey:hover, .button.mid-grey:focus-visible,
.link-button.mid-grey:hover, .link-button.mid-grey:focus-visible,
.button:hover span.mid-grey, .button:focus-visible span.mid-grey,
.ck-content.ck a.button.mid-grey:hover, .ck-content.ck a.button.mid-grey:focus-visible,
.ck-content.ck a.link-button.mid-grey:hover, .ck-content.ck a.link-button.mid-grey:focus-visible,
.ck-content.ck a.button span.mid-grey:hover, .ck-content.ck a.button span.mid-grey:focus-visible,
.tab-button.mid-grey:hover, .tab-button.mid-grey:focus-visible {
  --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-visible */
button.mid-grey:hover, button.mid-grey:focus-visible,
.button.mid-grey:hover, .button.mid-grey:focus-visible,
.link-button.border-mid-grey:hover, .link-button.border-mid-grey:focus-visible,
.ck-content.ck a.button.mid-grey:hover, .ck-content.ck a.button.mid-grey:focus-visible,
.ck-content.ck a.link-button.mid-grey:hover, .ck-content.ck a.link-button.mid-grey:focus-visible,
.ck-content.ck a.button span.mid-grey:hover, .ck-content.ck a.button span.mid-grey:focus-visible,
.tab-button.mid-grey:hover, .tab-button.mid-grey:focus-visible,
div.border-mid-grey:hover, div.border-mid-grey:focus-visible {
  --bor-color-hover: var(--color-mid-grey-hover) !important;
}
/* ==== grey-300 ==== */
/* Links on grey-300 background */
div.grey-300 {
  --d-color-link: var(--color-white);
  --d-color-link-hover: var(--color-white-hover);
}
/* Text */
span.grey-300, span.grey-300 a {
  color: var(--color-grey-300);
}
/* Text – Hover and focus-visible */
span.grey-300 a:hover, span.grey-300 a:focus-visible,
a:hover span.grey-300, a:focus-visible span.grey-300 {
  color: var(--color-grey-300-hover);
}
/* Ordered and Unordered Lists */
.grey-300 ol, .grey-300 ul {
  --li-marker-color: var(--color-white);
}
/* Block Backgrounds */
div.grey-300,
button.grey-300,
.button.grey-300,
.link-button.grey-300,
.button span.grey-300,
.ck-content.ck a.button.grey-300,
.ck-content.ck a.link-button.grey-300,
.ck-content.ck a.button span.grey-300,
.tab-button.grey-300 {
  --bg-color: var(--color-grey-300) !important;
  --txt-color: var(--color-white) !important;
}
/* Block Backgrounds – Hover and focus-visible */
div.grey-300:hover, div.grey-300:focus-visible,
button.grey-300:hover, button.grey-300:focus-visible,
.button.grey-300:hover, .button.grey-300:focus-visible,
.link-button.grey-300:hover, .link-button.grey-300:focus-visible,
.button:hover span.grey-300, .button:focus-visible span.grey-300,
.ck-content.ck a.button.grey-300:hover, .ck-content.ck a.button.grey-300:focus-visible,
.ck-content.ck a.link-button.grey-300:hover, .ck-content.ck a.link-button.grey-300:focus-visible,
.ck-content.ck a.button span.grey-300:hover, .ck-content.ck a.button span.grey-300:focus-visible,
.tab-button.grey-300:hover, .tab-button.grey-300:focus-visible {
  --bg-color-hover: var(--color-grey-300-hover) !important;
  --txt-color-hover: var(--color-white-hover) !important;
}
/* Column Borders */
button.grey-300,
.button.grey-300,
.link-button.border-grey-300,
.ck-content.ck a.button.grey-300,
.ck-content.ck a.link-button.border-grey-300,
.ck-content.ck a.button span.grey-300,
.tab-button.grey-300, 
div.border-grey-300 {
  --bor-color: var(--color-grey-300) !important;
}
/* Column Borders – Hover and focus-visible */
button.grey-300:hover, button.grey-300:focus-visible,
.button.grey-300:hover, .button.grey-300:focus-visible,
.link-button.border-grey-300:hover, .link-button.border-grey-300:focus-visible,
.ck-content.ck a.button.grey-300:hover, .ck-content.ck a.button.grey-300:focus-visible,
.ck-content.ck a.link-button.grey-300:hover, .ck-content.ck a.link-button.grey-300:focus-visible,
.ck-content.ck a.button span.grey-300:hover, .ck-content.ck a.button span.grey-300:focus-visible,
.tab-button.grey-300:hover, .tab-button.grey-300:focus-visible,
div.border-grey-300:hover, div.border-grey-300:focus-visible {
  --bor-color-hover: var(--color-grey-300-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-visible */
span.light-grey a:hover, span.light-grey a:focus-visible,
a:hover span.light-grey, a:focus-visible 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-visible */
div.light-grey:hover, div.light-grey:focus-visible,
button.light-grey:hover, button.light-grey:focus-visible,
.button.light-grey:hover, .button.light-grey:focus-visible,
.link-button.light-grey:hover, .link-button.light-grey:focus-visible,
.button:hover span.light-grey, .button:focus-visible span.light-grey,
.ck-content.ck a.button.light-grey:hover, .ck-content.ck a.button.light-grey:focus-visible,
.ck-content.ck a.link-button.light-grey:hover, .ck-content.ck a.link-button.light-grey:focus-visible,
.ck-content.ck a.button span.light-grey:hover, .ck-content.ck a.button span.light-grey:focus-visible,
.tab-button.light-grey:hover, .tab-button.light-grey:focus-visible {
  --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-visible */
button.light-grey:hover, button.light-grey:focus-visible,
.button.light-grey:hover, .button.light-grey:focus-visible,
.link-button.border-light-grey:hover, .link-button.border-light-grey:focus-visible,
.ck-content.ck a.button.light-grey:hover, .ck-content.ck a.button.light-grey:focus-visible,
.ck-content.ck a.link-button.light-grey:hover, .ck-content.ck a.link-button.light-grey:focus-visible,
.ck-content.ck a.button span.light-grey:hover, .ck-content.ck a.button span.light-grey:focus-visible,
.tab-button.light-grey:hover, .tab-button.light-grey:focus-visible,
div.border-light-grey:hover, div.border-light-grey:focus-visible {
  --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-visible */
span.very-light-grey a:hover, span.very-light-grey a:focus-visible,
a:hover span.very-light-grey, a:focus-visible 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-visible */
div.very-light-grey:hover, div.very-light-grey:focus-visible,
button.very-light-grey:hover, button.very-light-grey:focus-visible,
.button.very-light-grey:hover, .button.very-light-grey:focus-visible,
.link-button.very-light-grey:hover, .link-button.very-light-grey:focus-visible,
.button:hover span.very-light-grey, .button:focus-visible span.very-light-grey,
.ck-content.ck a.button.very-light-grey:hover, .ck-content.ck a.button.very-light-grey:focus-visible,
.ck-content.ck a.link-button.very-light-grey:hover, .ck-content.ck a.link-button.very-light-grey:focus-visible,
.ck-content.ck a.button span.very-light-grey:hover, .ck-content.ck a.button span.very-light-grey:focus-visible,
.tab-button.very-light-grey:hover, .tab-button.very-light-grey:focus-visible {
  --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-visible */
button.very-light-grey:hover, button.very-light-grey:focus-visible,
.button.very-light-grey:hover, .button.very-light-grey:focus-visible,
.link-button.border-very-light-grey:hover, .link-button.border-very-light-grey:focus-visible,
.ck-content.ck a.button.very-light-grey:hover, .ck-content.ck a.button.very-light-grey:focus-visible,
.ck-content.ck a.link-button.very-light-grey:hover, .ck-content.ck a.link-button.very-light-grey:focus-visible,
.ck-content.ck a.button span.very-light-grey:hover, .ck-content.ck a.button span.very-light-grey:focus-visible,
.tab-button.very-light-grey:hover, .tab-button.very-light-grey:focus-visible,
div.border-very-light-grey:hover, div.border-very-light-grey:focus-visible {
  --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-visible */
span.white a:hover, span.white a:focus-visible,
a:hover span.white, a:focus-visible 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-visible */
div.white:hover, div.white:focus-visible,
button.white:hover, button.white:focus-visible,
.button.white:hover, .button.white:focus-visible,
.link-button.white:hover, .link-button.white:focus-visible,
.button:hover span.white, .button:focus-visible span.white,
.ck-content.ck a.button.white:hover, .ck-content.ck a.button.white:focus-visible,
.ck-content.ck a.link-button.white:hover, .ck-content.ck a.link-button.white:focus-visible,
.ck-content.ck a.button span.white:hover, .ck-content.ck a.button span.white:focus-visible,
.tab-button.white:hover, .tab-button.white:focus-visible {
  --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-visible */
button.white:hover, button.white:focus-visible,
.button.white:hover, .button.white:focus-visible,
.link-button.border-white:hover, .link-button.border-white:focus-visible,
.ck-content.ck a.button.white:hover, .ck-content.ck a.button.white:focus-visible,
.ck-content.ck a.link-button.white:hover, .ck-content.ck a.link-button.white:focus-visible,
.ck-content.ck a.button span.white:hover, .ck-content.ck a.button span.white:focus-visible,
.tab-button.white:hover, .tab-button.white:focus-visible,
div.border-white:hover, div.border-white:focus-visible {
  --bor-color-hover: var(--color-white-hover) !important;
}