@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

:root {
 font-size: 12pt;

 /* ========================= Primary ========================= */
 --scottish-teal: #016574;
 --verdant-green: #40c47b;
 --scottish-dark-teal: #012b31;
 /* ========================= Secondary ========================= */
 --orange: #ff732b;
 --yellow: #fdc443;
 --ash: #2a8451;
 --blue: #037cb0;
 --purple: #c14090;
 /* ========================= Neutral ========================= */
 --grey-one: #585856;
 --grey-two: #40403F;
 --grey-three: #dfdfdf;
 --grey-four: #f5f5f5;
 /* =============================== Messaging =============================== */
 --success-green: #428542;
 --warning-yellow: #fdd522;
 --error-red: #a51803;
 /* ========================= Water scarcity messaging ========================= */
 --ws-normal: #91cbee;
 --ws-early: #95df55;
 --ws-alert: #fdee71;
 --ws-moderate: #ff8a02;
 --ws-significant: #eb1813;
 --color-primary: #016574;
 --color-primary-dark: #012b31;
 --color-accent: #40c47b;
 --color-text-primary: #585856;
 --color-text-secondary: #40403F;
 --color-background-light: #f5f5f5;
 --color-background-muted: #dfdfdf;
 --color-focus: #40c47b;
 --color-error: #a51803;
 /* ========================= SIZING ========================= */
 --size-touch-target: 44px;
 /* ========================= TRANSITIONS ========================= */
 --transition-fast: 0.2s ease;
 --transition-medium: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================================================
   CONTROL SYSTEM (button/input heights)
=================================================== */
.control {
 min-height: var(--size-touch-target);
 padding: 0 var(--space-3);
}

.control-button {
 display: flex;
 align-items: center;
 justify-content: center;
}

/* =================================
   COMPONENT-LEVEL ACCESSIBILITY
================================== */
/* Then ensure every interactive element:
✔ has aria-label
✔ has visible focus
✔ has 44px target
*/
.button-reset {
 background: none;
 border: none;
 cursor: pointer;
}

html,
body {
 height: 100%;
 scroll-behavior: smooth;
}

body {
 font-family: "Poppins", Arial, Helvetica, "sans-serif";
 color: var(--grey-one);
 font-size: 1rem;
 font-weight: 400;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
 display: flex;
 flex-direction: column;
}

.sr-only,
.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}

/* ========================= RTE STYLING ========================= */
ul li p,
ol li p {
 margin-bottom: 5px;
}

th p {
 font-weight: 600;
 margin-bottom: 0;
 padding: 10px;
}

td p {
 font-weight: 400;
 margin-bottom: 0;
 padding: 10px;
}

/* =========================
    Links
========================= */
a {
 color: var(--scottish-dark-teal);
 font-weight: 500;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
 padding: 0 5px;
 -webkit-box-decoration-break: clone;
 -o-box-decoration-break: clone;
 box-decoration-break: clone;
}

a:hover {
 background-color: var(--grey-three);
 color: #000000;
 text-decoration: none;
}

a:focus {
 background-color: var(--verdant-green);
 color: #000;
 text-decoration: none;
 outline: 0px solid var(--scottish-dark-teal);
 outline-offset: 2px;
}

i.fa-solid.fa-arrow-up-right-from-square,
main ul li i.fa-solid.fa-up-right-from-square {
 margin-left: 5px;
}

a:-webkit-any-link {
 cursor: pointer;
}

/* =============================
    STANDARDISE FOCUS SYSTEM
============================= */
:focus-visible {
 outline: 3px solid var(--color-focus);
 outline-offset: 2px;
}

.site--header:focus-visible,
.main--nav:focus-visible {
 outline-color: #fff;
}

/* NAV SPECIFIC */
.navbar-nav .nav-link:focus-visible {
 background: var(--verdant-green);
 color: #000;
}

a.nav-link.nav-right-item-link {
 background: var(--verdant-green);
 color: #000;
}

a.nav-link.nav-right-item-link:hover {
 background: var(--scottish-dark-teal);
 color: #fff;
}

a.nav-link.nav-right-item-link:focus-visible {
 background: var(--verdant-green);
 color: #000;
}

/* DROPDOWN ITEMS */
.dropdown-item:focus-visible {
 background: var(--grey-three);
 color: #000;
}

@media (prefers-reduced-motion: reduce) {
 * {
  transition: none !important;
  animation: none !important;
 }
}

/* =========================
    Typography
========================= */
@media (min-width: 320px) {
 h1 {
  font-size: 2rem;
 }

 h2 {
  font-size: 1.5rem;
  line-height: 2rem;
 }

 h3 {
  font-size: 1.35rem;
 }

 h4 {
  font-size: 1.25rem;
 }

 h5 {
  font-size: 1.15rem;
 }

 h6 {
  font-size: 1rem;
 }
}

@media (min-width: 992px) {
 h1 {
  font-size: 2.5rem;
 }

 h2 {
  font-size: 1.7rem;
 }

 h3 {
  font-size: 1.5rem;
 }

 h4 {
  font-size: 1.25rem;
 }

 h5 {
  font-size: 1.125rem;
 }

 h6 {
  font-size: 1rem;
  font-weight: 500;
 }
}

p,
ul {
 font-size: 1rem;
 line-height: 1.875rem;
 font-weight: 400;
 margin-top: 0;
 margin-bottom: 1.5rem;
 word-spacing: normal;
}

h1 {
 color: var(--scottish-teal);
 margin-bottom: 0;
 line-height: 3.5rem;
 font-weight: 600;
}

h2 {
 color: var(--scottish-teal);
 margin-bottom: 1rem;
 line-height: 1.875rem;
 font-weight: 600;
}

h3,
h4,
h5,
h6 {
 color: var(--scottish-dark-teal);
 margin-bottom: 1rem;
 line-height: 1.875rem;
 font-weight: 600;
}

/* =========================
    Spacers
========================= */
hr {
 color: var(--grey-two);
 margin-bottom: 20px;
}

.border--green {
 border: 4px solid var(--verdant-green);
 margin-bottom: 30px;
}

@media (min-width: 320px) {
 .spacer--large {
  height: 30px;
 }

 .spacer--medium {
  height: 20px;
 }

 .spacer--small {
  height: 10px;
 }
}

@media (min-width: 992px) {
 .spacer--large {
  height: 60px;
 }

 .spacer--medium {
  height: 40px;
 }

 .spacer--small {
  height: 20px;
 }
}

.image-wrapper {
 padding: 0;
 margin: 0px 0px 20px 0px;
}

.image-overlay-wrapper {
 position: relative;
 display: inline-block;
 width: 100%;
}

.image-overlay-wrapper img {
 display: block;
 width: 100%;
 height: auto;
}

.overlay-icon {
 position: absolute;
 bottom: 2%;
 right: 2%;
 width: clamp(40px, 6vw, 72px);
 height: clamp(40px, 6vw, 72px);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: clamp(1rem, 2.5vw, 2rem);
}

.overlay-icon svg {
 max-width: 50px;
}

.overlay-icon svg .logo-icon {
 fill: #fff;
}

.img-wrapper--teal {
 border-bottom: 10px solid var(--scottish-teal);
}

.img-wrapper--orange {
 border-bottom: 10px solid var(--orange);
}

.img-wrapper--yellow {
 border-bottom: 10px solid var(--yellow);
}

.img-wrapper--ash {
 border-bottom: 10px solid var(--ash);
}

.img-wrapper--blue {
 border-bottom: 10px solid var(--blue);
}

.img-wrapper--purple {
 border-bottom: 10px solid var(--purple);
}

@media (min-width: 768px) and (max-width: 991.98px) {
 .container {
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 100%
 }
}

@media (min-width: 576px) and (max-width: 767.98px) {
 .container {
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 100%
 }
}

/* =================================================================================================================
    WEBSITE COMPONENTS
================================================================================================================= */

/* ========================= Accordion ========================= */
.accordion {
 --bs-accordion-color: var(--grey-one);
 --bs-accordion-border-color: #ffffff;
 --bs-accordion-border-width: 0px;
 --bs-accordion-border-radius: 0px;
 --bs-accordion-inner-border-radius: 0px;
 --bs-accordion-btn-color: var(--scottish-dark-teal);
 --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23016574'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 --bs-accordion-btn-icon-width: 1.4rem;
 --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 --bs-accordion-btn-focus-border-color: var(--verdant-green);
 --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--verdant-green);
 --bs-accordion-active-color: #ffffff;
 --bs-accordion-active-bg: var(--scottish-teal);
}

.accordion-body {
 padding: 1rem important;
}

.accordion-button:not(.collapsed) {
 background-color: var(--scottish-teal);
}

h2.accordion-header .accordion-button {
 font-size: 1.25rem;
}

h3.accordion-header .accordion-button {
 font-size: 1.15rem;
}

.accordion-button {
 color: #000000;
 padding: 1rem;
 font-size: 1rem;
 line-height: 1.5rem;
 font-weight: 600;
}

.accordion-button:hover {
 background-color: #ffffff;
 color: var(--scottish-teal);
}

.accordion-button:hover:after {
 background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:hover:not(.collapsed) {
 background-color: var(--scottish-teal);
 color: #ffffff;
}

.accordion-button:hover:not(.collapsed):after {
 background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus {
 background-color: var(--grey-three);
 color: var(--scottish-dark-teal);
 border: none;
 outline: none;
 border-color: #ffffff;
 box-shadow: none;
 transition: background 0.3s ease-in-out;
}

.accordion-button:focus:hover {
 background-color: var(--grey-three);
 color: var(--scottish-dark-teal);
 transition: background 0.3s ease-in-out;
}

.accordion-button:focus:after {
 background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23012b31'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:focus:hover:after {
 background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23012b31'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
 border-bottom: 3px solid var(--grey-three);
}

.accordion-item:hover {
 border-bottom: 3px solid var(--verdant-green);
}

/* ===============================================================
   IAF Standard conditions and Interpretation of terms accordion 
=============================================================== */
div#accordion-standardconditions,
div#accordion-InterpretationOfTerms {
 border: 1px solid var(--grey-three);
 margin-bottom: 25px;
}

.interpretationOfTerms-content {
 border-bottom: 1px solid var(--grey-three);
 margin-bottom: 15px;
}

.interpretationOfTerms--heading {
 font-size: 1.35rem;
 font-weight: 600;
 color: var(--scottish-dark-teal);
 margin-bottom: 10px;
}

/* ========================= Alerts ========================= */
.alert,
.alert p {
 font-size: 1rem;
}

.alert p {
 margin-bottom: 0;
}

.alert-primary {
 --bs-alert-color: #ffffff;
 --bs-alert-bg: var(--scottish-teal);
 --bs-alert-border-color: var(--scottish-dark-teal);
}

.alert-success {
 --bs-alert-color: #000000;
 --bs-alert-bg: var(--verdant-green);
 --bs-alert-border-color: #39b06e;
}

.alert-danger {
 --bs-alert-color: #000000;
 --bs-alert-bg: #f8d7da;
 --bs-alert-border-color: #f5c2c7;
}

.alert-warning {
 --bs-alert-color: #000000;
 --bs-alert-bg: #fff3cd;
 --bs-alert-border-color: #ffecb5;
}

.alert-light {
 --bs-alert-color: #000000;
 --bs-alert-bg: var(--grey-four);
 --bs-alert-border-color: var(--grey-three);
}

.alert-dark {
 --bs-alert-color: #ffffff;
 --bs-alert-bg: var(--grey-one);
 --bs-alert-border-color: var(--grey-two);
}

/* ========================= Back to top ========================= */
#back-to-top--btn {
 position: fixed;
 bottom: 10px;
 right: 20px;
 display: none;
 z-index: 9999;
}

.back-to-top--button {
 color: var(--scottish-teal);
 background: #ffffff;
 border: 1px solid var(--scottish-teal);
 border-radius: 0;
 font-size: 1rem;
 line-height: 1.5;
 padding: 5px;
}

.back-to-top--button:hover {
 background: var(--verdant-green);
 color: #000000;
}

.back-to-top--button:focus {
 background: var(--grey-three);
 color: var(--scottish-teal);
}

/* ========================= Breadcrumb ========================= */
.breadcrumb {
 margin-top: 20px;
 margin-bottom: 10px;
 min-height: 40px;
}

.breadcrumb__list {
 margin: 0;
 padding: 0px 0px 15px 0px;
 list-style-type: none;
 border-bottom: 1px solid var(--grey-four);
}

.breadcrumb__list::after {
 content: "";
 display: block;
 clear: both;
}

.breadcrumb__list-item {
 position: relative;
 margin-bottom: 5px;
 margin-left: .625em;
 padding-left: .9784375em;
 float: left;
}

.breadcrumb__list-item::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: -.206875em;
 width: .4375em;
 height: .4375em;
 margin: auto 0;
 transform: rotate(45deg);
 border: solid;
 border-width: 1px 1px 0 0;
 border-color: #b1b4b6;
}

.breadcrumb__list-item:first-child {
 position: absolute;
 left: -9999px;
}

.breadcrumb__list-item:first-child .breadcrumb__link {
 color: #6f777b;
 text-decoration: none;
}

.breadcrumb__list-item:first-child::before {
 content: none;
 display: none;
}

.breadcrumb__link {
 border-bottom: 1px solid #b1b4b6;
}

a.breadcrumb__link {
 font-weight: 400;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus {
 border-bottom-color: currentColor;
}

.breadcrumb__link:focus {
 outline: 3px solid var(--verdant-green);
 outline-offset: 0;
}

@media(max-width: 768px) {
 .breadcrumb--collapse-on-mobile .breadcrumb__list-item {
  display: none;
 }

 .breadcrumb--collapse-on-mobile .breadcrumb__list-item:first-child,
 .breadcrumb--collapse-on-mobile .breadcrumb__list-item:last-child {
  display: inline-block;
 }

 .breadcrumb--collapse-on-mobile .breadcrumb__list-item::before {
  top: .375em;
  margin: 0;
 }

 .breadcrumb--collapse-on-mobile .breadcrumb__list {
  display: flex;
 }
}

/* ========================= Buttons ========================= */
.btn-primary {
 --bs-btn-color: #000000;
 --bs-btn-bg: var(--verdant-green);
 --bs-btn-border-color: var(--verdant-green);
 --bs-btn-hover-color: #ffffff;
 --bs-btn-hover-bg: var(--scottish-teal);
 --bs-btn-hover-border-color: var(--scottish-dark-teal);
 --bs-btn-focus-shadow-rgb: 113, 112, 110;
 --bs-btn-active-color: #000000;
 --bs-btn-active-bg: var(--verdant-green);
 --bs-btn-active-border-color: var(--scottish-dark-teal);
 --bs-btn-active-shadow: inset 0 3px 5px rgba(223, 223, 223, 0.8);
 --bs-btn-disabled-color: var(--scottish-dark-teal);
 --bs-btn-disabled-bg: var(--grey-three);
 --bs-btn-disabled-border-color: var(--grey-two);
 font-weight: 600;
 border: 2px solid var(--verdant-green);
 border-radius: 20px;
 padding: 5px 30px;
 margin: 0;
}

.btn-primary:active {
 border: 2px solid;
}

.btn-primary:focus {
 color: #000000;
 border: 2px solid var(--scottish-dark-teal);
 background-color: var(--verdant-green);
}

.btn-secondary {
 background-color: var(--grey-one);
 color: #ffffff;
 font-weight: 600;
 border: 2px solid var(--grey-two);
 border-radius: 20px;
 padding: 5px 30px;
 margin: 5px;
}

.btn-secondary:hover {
 background-color: var(--grey-three);
 color: #000000;
}

.btn-secondary:active {
 border: 2px solid var(--grey-two);
 border-color: #000000 !important;
}

.btn-secondary:focus {
 color: #000000;
 border: 2px solid var(--grey-one);
 background-color: var(--grey-three);
 --bs-btn-focus-shadow-rgb: 113, 112, 110;
}

.btn-floodline {
 background-color: var(--yellow);
 color: #000000;
 font-weight: 600;
 border: 2px solid var(--yellow);
 border-radius: 20px;
 padding: 5px 30px;
 margin: 5px;
}

.btn-floodline:hover {
 background-color: var(--scottish-teal);
 color: #ffffff;
}

.btn-floodline:active {
 border: 2px solid var(--scottish-teal);
}

.btn-floodline:focus {
 color: #000000;
 border: 2px solid var(--scottish-dark-teal);
 background-color: var(--yellow);
 --bs-btn-focus-shadow-rgb: 113, 112, 110;
}

@media (min-width: 320px) {

 .btn-primary,
 .btn-secondary,
 .btn-floodline {
  padding: 5px 15px;
  margin-bottom: 10px;
 }
}

@media (min-width: 768px) {

 .btn-primary,
 .btn-secondary,
 .btn-floodline {
  padding: 5px 30px;
  margin-bottom: 10px;
 }
}

.btn-success {
 --bs-btn-color: #ffffff;
 --bs-btn-bg: var(--success-green);
 --bs-btn-border-color: #2e5e2e;
 --bs-btn-hover-color: #ffffff;
 --bs-btn-hover-bg: #2e5e2e;
 --bs-btn-hover-border-color: var(--success-green);
 --bs-btn-focus-shadow-rgb: 60, 153, 110;
 --bs-btn-active-color: #ffffff;
 --bs-btn-active-bg: #146c43;
 --bs-btn-active-border-color: #13653f;
 --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 --bs-btn-disabled-color: #ffffff;
 --bs-btn-disabled-bg: #00976e;
 --bs-btn-disabled-border-color: #00976e;
 font-weight: 600;
 border: 0px;
 border-radius: 20px;
 padding: 5px 30px;
 margin: 5px;
}

.btn-danger {
 background-color: var(--error-red);
 color: #ffffff;
 font-weight: 600;
 border: none;
 border-radius: 20px;
 padding: 5px 30px;
 margin: 5px;
}

.btn-danger:hover {
 background-color: #9a1904;
}

.btn-warning {
 background-color: var(--warning-yellow);
 color: #000000;
 font-weight: 600;
 border: none;
 border-radius: 20px;
 padding: 5px 30px;
 margin: 5px;
}

.btn-warning:hover {
 background-color: #fddf55;
}

i.fa-solid.fa-arrow-right {
 padding-left: 20px;
}

/* =========================
Outlined buttons 
========================= */
.btn-outline-primary {
 --bs-btn-color: var(--scottish-teal);
 --bs-btn-border-color: var(--scottish-teal);
 --bs-btn-hover-color: #ffffff;
 --bs-btn-hover-bg: var(--scottish-teal);
 --bs-btn-hover-border-color: var(--scottish-teal);
 --bs-btn-focus-shadow-rgb: 13, 110, 253;
 --bs-btn-active-color: #ffffff;
 --bs-btn-active-bg: var(--scottish-teal);
 --bs-btn-active-border-color: var(--scottish-teal);
 --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 --bs-btn-disabled-color: var(--scottish-teal);
 --bs-btn-disabled-bg: transparent;
 --bs-btn-disabled-border-color: var(--scottish-teal);
 --bs-gradient: none;
 margin: 0px 2px 10px 2px;
}

@media (min-width: 320px) {

 .btn-outline-primary,
 .btn-outline-secondary,
 .btn-outline-floodline,
 .btn-outline-info {
  width: 100%;
 }
}

@media (min-width: 576px) {

 .btn-outline-primary,
 .btn-outline-secondary,
 .btn-outline-floodline,
 .btn-outline-info {
  width: auto;
  margin-bottom: 10px;
 }
}

.btn-outline-secondary {
 --bs-btn-color: var(--grey-one);
 --bs-btn-border-color: var(--grey-one);
 --bs-btn-hover-color: #ffffff;
 --bs-btn-hover-bg: var(--grey-one);
 --bs-btn-hover-border-color: var(--grey-one);
 --bs-btn-focus-shadow-rgb: 108, 117, 125;
 --bs-btn-active-color: #ffffff;
 --bs-btn-active-bg: var(--grey-one);
 --bs-btn-active-border-color: var(--grey-one);
 --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 --bs-btn-disabled-color: var(--grey-one);
 --bs-btn-disabled-bg: transparent;
 --bs-btn-disabled-border-color: var(--grey-one);
 --bs-gradient: none;
 margin: 0px 2px 10px 2px;
}

.btn-outline-floodline {
 --bs-btn-color: var(--scottish-dark-teal);
 --bs-btn-border-color: var(--yellow);
 --bs-btn-hover-color: #000000;
 --bs-btn-hover-bg: var(--yellow);
 --bs-btn-hover-border-color: var(--yellow);
 --bs-btn-focus-shadow-rgb: 108, 117, 125;
 --bs-btn-active-color: #000000;
 --bs-btn-active-bg: var(--yellow);
 --bs-btn-active-border-color: var(--yellow);
 --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 --bs-btn-disabled-color: var(--yellow);
 --bs-btn-disabled-bg: transparent;
 --bs-btn-disabled-border-color: var(--yellow);
 --bs-gradient: none;
 margin: 0px 2px 10px 2px;
}

.btn-outline-info {
 --bs-btn-color: var(--scottish-teal);
 --bs-btn-border-color: var(--scottish-dark-teal);
 --bs-btn-hover-color: #ffffff;
 --bs-btn-hover-bg: var(--scottish-dark-teal);
 --bs-btn-hover-border-color: var(--scottish-dark-teal);
 --bs-btn-focus-shadow-rgb: 13, 110, 253;
 --bs-btn-active-color: #ffffff;
 --bs-btn-active-bg: var(--scottish-dark-teal);
 --bs-btn-active-border-color: var(--scottish-dark-teal);
 --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 --bs-btn-disabled-color: var(--scottish-dark-teal);
 --bs-btn-disabled-bg: transparent;
 --bs-btn-disabled-border-color: var(--scottish-dark-teal);
 --bs-gradient: none;
 margin: 0px 2px 10px 2px;
}

/* =========================
   Teal background 
========================= */
.btn-primary--tealBg {
 background-color: var(--verdant-green);
 color: #000000;
 font-weight: 600;
 border: none;
 border-radius: 20px;
 padding: 5px 30px;
 margin: 5px;
}

.btn-primary--tealBg:hover {
 background-color: #ffffff;
 color: var(--scottish-teal);
}

.btn-primary--tealBg:focus {
 background-color: var(--verdant-green);
 border: var(--scottish-teal);
 color: #000000;
}

.btn-primary--tealBg:active {
 background-color: var(--verdant-green);
 border: var(--scottish-teal);
 color: #000000;
}

.btn-add {
 background-color: #ffffff;
 border: 1px solid var(--scottish-teal);
 color: var(--scottish-dark-teal);
}

.btn-add:hover {
 background-color: var(--scottish-teal);
 border: 1px solid var(--scottish-teal);
 color: #ffffff;
}

.btn-add:focus {
 background-color: var(--verdant-green);
 border: 1px solid var(--verdant-green);
 color: #000000;
}

/* ========================= Cards ========================= */
.card {
 border: 1px solid var(--grey-three);
 border-radius: 0;
}

.full-width--card {
 margin-bottom: 20px;
}

.card-footer {
 color: inherit;
 background-color: #ffffff;
 border-top: none;
 padding-bottom: 15px;
}

.card-footer-teal {
 background-color: var(--scottish-teal);
}

.card-body {
 padding-bottom: 5px;
}

.card-body-full {
 margin-bottom: 20px;
}

.content--cards .card {
 border: 0;
}

.content--cards .card-body {
 padding: 20px 0 0 0;
}

.content--cards p {
 font-size: 1.1rem;
 font-weight: 500;
}

.card-date {
 margin-bottom: 5px;
}

@media (min-width: 320px) {

 .card-img,
 .card-img-top {
  border-bottom: 1px solid var(--grey-three);
  padding-bottom: 20px;
  margin-bottom: 20px;
 }

 .card-title {
  margin-bottom: 20px;
 }

 .card-subtitle {
  margin-bottom: 0;
 }
}

@media (min-width: 768px) {
 .card-subtitle {
  margin-bottom: 10px;
 }
}

@media (min-width: 992px) {

 .card-img,
 .card-img-top {
  border-bottom: 1px solid var(--grey-three);
  padding-bottom: 0px;
  margin-bottom: 0px;
 }
}

a.card-link,
a.card-link--floodline {
 text-decoration: none;
 font-weight: 500;
 padding: 0;
}

a.card-link--tealBg {
 color: #ffffff;
 border-bottom: 2px solid #ffffff;
 text-decoration: none;
 font-weight: 500;
 line-height: 2rem;
}

a.card-link:hover,
a.card-link--floodline:hover,
a.card-link--tealBg:hover {
 background-color: var(--grey-three);
 color: #000000;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
}

a.card-link:focus,
a.card-link--tealBg:focus {
 background-color: var(--verdant-green);
 color: #000000;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
}

a.card-link--floodline:focus {
 background-color: var(--yellow);
 color: #000000;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
}

i.card-link--icon.fa-solid.fa-circle-arrow-right,
i.card-link-icon.fa-solid.fa-circle-chevron-down {
 margin-left: 5px;
}

i.card-link--icon.fa-solid.fa-circle-arrow-left {
 margin-right: 5px;
}

/* ========================= Cards - Column lists ========================= */
@media (min-width: 320px) {
 .card-columns {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
 }
}

@media (min-width: 576px) {
 .card-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
 }
}

@media (min-width: 768px) {
 .card-columns {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
 }
}

/* ========================= Cards - Teal background ========================= */
.card--teal {
 background: var(--scottish-teal);
 color: #ffffff;
}

.card--teal .card-title,
.card--teal .card-subtitle {
 color: #ffffff;
}

.card--teal a,
.banner--home-tealBg a,
.card--teal a.card-link {
 color: #ffffff;
 font-weight: 500;
 padding: 0 4px;
 border-bottom: 2px solid #ffffff;
 text-decoration: none;
}

.card--teal a:hover,
.banner--home-tealBg a:hover,
.card--teal a.card-link:hover {
 background-color: var(--grey-three);
 color: #000000;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
}

.card--teal a:focus,
.banner--home-tealBg a:focus,
.card--teal a.card-link:focus {
 background-color: var(--verdant-green);
 color: #000000;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
}

/* ========================= Cards - No borders ========================= */
.card--no-border {
 border: none;
}

.card--no-border .card-text ul li {
 list-style: inherit;
}

.card-text p {
 margin: 0px;
 padding-bottom: 5px;
}

/* ========================= Cards - Primary colours ========================= */
.card--scottish-teal {
 border-top: 8px solid var(--scottish-teal);
}

.card--scottish-dark-teal {
 border-top: 8px solid var(--scottish-dark-teal);
}

.card--verdant-green {
 border-top: 8px solid var(--verdant-green);
}

/* ========================= Cards - Secondary colours ========================= */
.card--orange {
 border-top: 8px solid var(--orange);
}

.card--yellow {
 border-top: 8px solid var(--yellow);
}

.card--purple {
 border-top: 8px solid var(--purple);
}

.card--blue {
 border-top: 8px solid var(--blue);
}

.card--ash {
 border-top: 8px solid var(--ash);
}

/* ========================= Cards - Iconography ========================= */
.card--icon--green {
 width: 53%;
 bottom: 0;
 right: 13px;
}

@media (min-width: 768px) {

 .card-icon-text,
 .card-icon-text-full {
  width: 100%;
 }
}

@media (min-width: 992px) {
 .card--icon {
  background-size: 0%;
 }

 .card-icon-text {
  width: 100%;
 }
}

@media (min-width: 1200px) {
 .card--icon {
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 30%;
 }

 .card-icon-text {
  width: 65%;
 }

 .card-icon-text-full {
  width: 80%;
 }
}

/* ========================= CTA Cards ========================= */
.cta--card,
.cta--banner-card {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 min-height: 80px;
 padding: 1.25rem 1.5rem;
 background-color: var(--scottish-teal);
 color: #fff;
 text-decoration: none;
 font-size: 1.3rem;
 font-weight: 700;
 line-height: 1.2;
 transition: background-color 0.2s ease;
 border-bottom: none;
 margin-bottom: 25px;
}

.cta--banner-card-text {
 font-size: 1.3rem;
 font-weight: 600;
 line-height: 1.5;
 padding-left: 30px;
}

.cta--card::before,
.cta--banner-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 10px;
 height: 100%;
 background: var(--verdant-green);
}

.cta--card:hover,
.cta--card:focus {
 background-color: var(--scottish-dark-teal);
 color: #ffffff;
}

.cta--card i {
 font-size: 2.5rem;
 flex-shrink: 0;
 margin-left: 1rem;
}

.cta--card .cta--text {
 max-width: 75%;
}

@media (min-width: 320px) {
 .cta--banner-card-image {
  display: none;
 }
}

@media (min-width: 768px) {
 .cta--card {
  min-height: 120px;
 }
}

@media (min-width: 992px) {
 .cta--card {
  min-height: 95px;
 }

 .cta--banner-card-image {
  display: block;
 }
}

/* ========================= Page Navigation Cards ========================= */
.navigation--card {
 margin-bottom: 15px;
}

.navigation--card .card {
 display: flex;
 flex-direction: column;
}

.navigation--card .card>.row,
.navigation--card .card>.card-body {
 flex: 1 1 auto;
}

.navigation--card .card>.row {
 display: flex;
 flex-direction: column;
}

.navigation--card .card>.row>.card-body {
 flex: 1 1 auto;
}

.cta--img {
 height: auto;
}

.clearfix .card-title,
.card-title {
 color: var(--scottish-teal);
}

@media (min-width: 320px) {
 .nav-card--icon {
  padding-left: 10px;
 }

 .clearfix .card-title {
  margin-bottom: 0;
  padding-bottom: 30px;
  max-width: 70%;
 }

 .card-text--list {
  padding-top: 0px;
 }
}

@media (min-width: 576px) {
 .nav-card--icon {
  padding-left: 10px;
 }

 .clearfix .card-title {
  margin-bottom: 0;
  padding-bottom: 20px;
  max-width: 70%;
 }

 .card-text--list {
  padding-top: 0px;
 }
}

@media (min-width: 768px) {
 .clearfix .card-title {
  margin-bottom: 0;
  padding-bottom: 10px;
  max-width: 70%;
  min-height: 72px;
 }

 .card-text--list {
  padding-top: 25px;
 }
}

@media (min-width: 992px) {
 .clearfix .card-title {
  margin-bottom: 0;
  padding-bottom: 0px;
  max-width: 70%;
  min-height: 40px;
 }

 .nav-card--icon {
  padding-left: 20px;
 }
}

@media (min-width: 1200px) {
 .nav-card--icon {
  padding-left: 30px;
 }
}

.card--borderBottom {
 border-bottom: 1px solid var(--grey-three);
 border-left: none;
 border-right: none;
 border-top: none;
}

/* ========================= Character count ========================= */
.character-count--entered {
 float: right;
 color: var(--scottish-dark-teal);
 margin-right: 10px;
}

.character-count--remaining {
 float: right;
 color: var(--scottish-dark-teal);
}

/* ========================= Checkboxes ========================= */
.form-checkbox--input,
.form-checkbox--input-floodline {
 height: 30px;
 width: 30px;
 position: absolute;
}

.form-checkbox--label {
 display: inline-block;
 padding: 6px 10px 0px 45px;
}

.form-checkbox--input:checked,
.form-checkbox--input-floodline:checked {
 background-color: var(--scottish-dark-teal);
 border-color: var(--grey-one);
}

.form-checkbox--input:focus {
 border-color: #000000;
 outline: 4px solid var(--verdant-green);
 outline-offset: 0;
}

.form-checkbox--input-floodline:focus {
 border-color: #000000;
 outline: 4px solid var(--yellow);
 outline-offset: 0;
}

/* ========================= Collapse ========================= */
.component-collapse-card {
 background: #ffffff;
 border-left: 1px solid var(--grey-three);
 border-right: 1px solid var(--grey-three);
 border-bottom: 1px solid var(--grey-three);
 border-top: 8px solid var(--verdant-green);
 padding: 0px 10px 20px 10px;
 margin-bottom: 30px;
}

/* ========================= Contact details ========================= */
.contact-details--item {
 margin-top: 1rem;
}

.contact-details--item dt {
 font-weight: 600;
}

.contact-details--item dd {
 margin-top: 0;
 margin-left: 0;
 margin-bottom: .5rem;
}

.contact-details--item dt:not(.sr-only)+.contact-details--social-item {
 margin-top: .5rem;
 margin-bottom: .5rem;
}

.contact-details--social-icon {
 color: var(--scottish-teal);
}

.contact-details--social-link {
 margin-left: 1rem;
}

/* ========================= Date picker ========================= */
.form-floating>.bi-calendar-date+.datepicker_input+label {
 padding-left: 3.5rem;
 z-index: 3;
}

/* ========================= Error message ========================= */
.question--error {
 border-left: 4px solid var(--error-red);
 padding-left: 20px;
}

.question--error-message {
 color: var(--error-red);
 font-weight: 700;
 margin-bottom: 1rem;
}

.form-control.form-input--error {
 border-color: var(--error-red);
 border-width: 4px;
 border-radius: 0;
 display: block;
 line-height: 2rem;
 margin-bottom: 24px;
 min-height: 48px;
 padding: 4px;
 width: 100%;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
 border-color: var(--error-red);
 padding-right: calc(1.5em + .75rem);
 background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
 background-repeat: no-repeat;
 background-position: right calc(.375em + .1875rem) center;
 background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

/* ========================= Error summary ========================= */
.error--summary {
 border: 4px solid var(--error-red);
 padding: 20px 28px;
 margin-top: 1.5rem;
 margin-bottom: 1.5rem;
}

.error--summary-title {
 margin-top: 0;
 color: #000000;
}

.error--summary-list {
 color: var(--error-red);
 font-weight: 700;
 list-style-type: none;
 margin-left: 0;
}

.error--summary> :last-child {
 margin-bottom: 0;
}

.error--summary-list li {
 margin-left: 0;
}

.error--summary-list a {
 color: var(--error-red);
}

.error--summary-list a:hover {
 color: #000000;
}

.error--summary-list a:focus {
 color: #000000;
}

/* ========================= Feature header - Banner ========================= */
.banner--bg {
 color: #ffffff;
 background: var(--scottish-teal);
 padding: 24px 0 32px;
}

h1.banner--heading {
 margin-bottom: 16px;
 color: #ffffff;
}

.banner-image-container {
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
}

.banner-image {
 max-width: 280px;
 width: 100%;
 height: auto;
 transform: translateY(10px);
}

@media (max-width: 991.98px) {
 .banner-image-container {
  display: none;
 }
}

@media (min-width: 992px) {
 .banner-image {
  max-width: 150px;
 }
}

@media (min-width: 1200px) {
 .banner-image {
  max-width: 180px;
 }
}

.banner--home-tealBg,
.banner--content-tealBg {
 background: var(--scottish-teal);
 color: #ffffff;
 border-radius: 0;
 margin-bottom: 20px;
 border-radius: 0;
 padding-bottom: 10px;
}

.banner--home-tealBg h2,
.banner--content-tealBg h2 {
 color: #ffffff;
}

.banner--home-tealBg h3,
.banner--content-tealBg h3 {
 color: #ffffff;
 font-size: 1.2rem;
}

/* ========================= File download ========================= */
.file--download {
 margin-bottom: 1.5rem;
 margin-top: 1.5rem;
 padding: 1rem;
 background-color: var(--grey-four);
 display: flex;
}

.file--download-highlighted {
 padding-left: calc(1rem + -4px);
 border-left: 8px solid var(--scottish-teal);
}

.file--download-thumbnail {
 margin-right: 1rem;
}

.file--download-thumbnail-link {
 display: block;
 width: 4rem;
 border: none;
}

.file--download-thumbnail-link:hover {
 background-color: var(--grey-three);
 transition-duration: .2s;
}

.file--download-thumbnail-link:focus {
 outline: 2px solid var(--verdant-green);
 outline-offset: 0;
 background-color: var(--verdant-green);
 box-shadow: -2px 5px #000, 2px 5px #000;
 color: #000;
 text-decoration: none;
 transition-duration: 0s;
}

.file--download-thumbnail-image {
 display: block;
 max-width: 100%;
 outline-offset: -1px;
}

.file--download__content {
 flex-grow: 1;
}

.file--download-title {
 display: inline-block;
 font-weight: 700;
 margin-bottom: .5rem;
}

.file--download .file--download-metadata {
 line-height: 1.5rem;
}

.file--download-metadata-item {
 display: inline;
 position: relative;
}

.file--download-metadata-key {
 clip: rect(1px, 1px, 1px, 1px);
 height: 1px;
 overflow: hidden;
 position: absolute !important;
 width: 1px;
 display: inline;
 font-weight: normal;
}

.file--download-metadata-value {
 display: inline;
 font-weight: 400;
 margin-left: 0;
}

/* ========================= Flood warning widget ========================= */
.flooding-alert-box {
 background: var(--grey-four);
}

.floodWarningsStatus {
 height: 55px;
 clear: both;
 margin-top: 0;
}

.floodWarningsStatusHeading {
 font-size: 1.375rem;
 color: var(--scottish-dark-teal);
 margin: 0 -4px;
 line-height: 53px;
 padding: 0 8px;
 position: relative;
 cursor: default;
 flex-shrink: 0;
 flex-grow: 1;
 flex-basis: 100%;
}

.floodWarningsStatusCell {
 padding: 8px;
 margin-left: 8px;
}

.floodWarningsStatusItem {
 padding: 0;
 background-position: 5px 10px;
 background-size: 40px;
 background-repeat: no-repeat;
 white-space: nowrap;
 margin: 0 4px;
 background-color: #ffffff;
 color: var(--grey-one);
 flex-grow: 1;
 flex-shrink: 0;
 font-size: 0;
 max-width: calc(100% / 3 - 8.5px);
 flex-basis: calc(100% / 3 - 8.5px);
 float: left;
 border-bottom: 2px solid var(--scottish-dark-teal);
}

.floodWarningsStatusItem-severe_flood_warning {
 background-image: url("../images/flood-warnings/flood-warnings-severe.gif");
}

.floodWarningsStatusItem-flood_warning {
 background-image: url("../images/flood-warnings/flood-warnings-warning.gif");
}

.floodWarningsStatusItem-flood_alert {
 background-image: url("../images/flood-warnings/flood-warnings-alert.gif");
}

.floodWarningsStatusItem a:hover {
 background-color: transparent;
}

.floodWarningsStatusItem:has(a:hover) {
 background-color: var(--grey-three);
}

.floodWarningsStatusItem a {
 color: inherit;
}

.floodWarningsStatusCellLink {
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 flex-wrap: nowrap;
 align-items: flex-start;
 width: 100%;
 color: var(--grey-one);
 height: 100%;
 padding: 10px;
}

.floodWarningsStatusCellNumber {
 font-size: 2.5rem;
 padding-left: 40px;
 padding-bottom: 10px;
 line-height: 40px;
 font-weight: bold;
}

.floodWarningsStatusCellText {
 font-size: 1rem;
 white-space: normal;
 flex-shrink: 1;
 display: block;
 width: 100%;
}

.floodWarningsStatusUpdated {
 margin: 0 -4px;
 padding: 20px 8px;
 clear: both;
 flex-shrink: 0;
 flex-grow: 1;
 flex-basis: 100%;
}

.floodWarningsStatusUpdated span.dateTimeLabel {
 font-size: 1rem;
 margin-bottom: 0;
 margin-top: 5px;
}

.floodWarningsStatusUpdated span.dateTimeValue {
 width: 8em;
}

.floodWarningsStatus-collapse-card {
 background: var(--grey-four);
}

.floodWarningsStatus-collapse-card a.collapse-card-link {
 float: right;
 border: none;
}

.floodCollapse {
 margin: 0;
 padding: 0;
}

.collapse {
 transition: height 0.35s ease;
}

.flood-animate {
 opacity: 0;
 transform: translateY(-8px);
 transition: all 0.35s ease;
}

.collapse.show .flood-animate {
 opacity: 1;
 transform: translateY(0);
}

.flood-animate>* {
 opacity: 0;
 transform: translateY(6px);
 transition: all 0.3s ease;
}

.collapse.show .flood-animate>* {
 opacity: 1;
 transform: translateY(0);
}

.collapse.show .flood-animate>*:nth-child(1) {
 transition-delay: 0.05s;
}

.collapse.show .flood-animate>*:nth-child(2) {
 transition-delay: 0.1s;
}

.collapse.show .flood-animate>*:nth-child(3) {
 transition-delay: 0.15s;
}

.collapse.show .flood-animate>*:nth-child(4) {
 transition-delay: 0.2s;
}

.flood-toggle-btn {
 transition: all 0.2s ease;
 margin-top: 10px;
 border: none;
 background: var(--grey-four);
}

.flood-toggle-btn:hover {
 transform: translateY(-1px);
}

.flood-toggle-btn:active {
 transform: scale(0.98);
}

.flood-toggle-btn--text {
 float: left;
 font-size: 1.35rem;
 font-weight: 600;
 padding-left: 0;
 margin-left: 0;
}

.flood-card {
 border-radius: 12px;
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.flood-number {
 display: inline-block;
 transition: transform 0.3s ease, color 0.3s ease;
}

.flood-number.updated {
 transform: scale(1.2);
 color: #dc3545;
}

@media (prefers-reduced-motion: reduce) {

 .collapse,
 .flood-animate {
  transition: none !important;
 }
}

@media (min-width: 320px) {
 .floodWarningsStatus {
  height: 100%;
 }

 .floodWarningsStatus-collapse-card .floodWarningsStatusHeading {
  margin-left: -20px;
 }

 .floodWarningsStatus-collapse-card a.collapse-card-link {
  padding-top: 18px;
  font-size: 1.4rem;
  margin-right: -11px;
 }

 .floodWarningsStatusItem {
  background-size: 45px;
 }

 .floodWarningsStatusCellNumber {
  font-size: 1.875rem;
  padding-left: 40px;
  padding-bottom: 10px;
  line-height: 40px;
  font-weight: bold;
 }
}

@media (min-width: 576px) {
 .floodWarningsStatus {
  height: 100%;
 }

 .floodWarningsStatus-collapse-card .floodWarningsStatusHeading {
  margin-left: -14px;
 }

 .floodWarningsStatus-collapse-card a.collapse-card-link {
  padding-top: 11px;
  font-size: 1.4rem;
  margin-right: 2px;
 }

 .floodWarningsStatusHeading {
  margin: 0 -10px;
  padding: 0 15px;
 }

 .floodWarningsStatusItem {
  background-size: 55px;
 }

 .floodWarningsStatusCellNumber {
  font-size: 2.5rem;
  padding-left: 60px;
  padding-bottom: 15px;
  line-height: 40px;
  font-weight: bold;
 }
}

@media (min-width: 992px) {
 .floodWarningsStatus {
  height: auto;
  background-color: transparent;
  color: var(--grey-one);
 }

 .floodWarningsStatusCell.floodWarningsStatusHeading {
  color: var(--scottish-teal);
 }

 .floodWarningsStatusCell:first-child {
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
 }

 .floodWarningsStatusCell {
  background-color: var(--grey-four);
  color: var(--grey-one);
  margin-left: 2px;
  margin-right: 0;
  padding: 0 20px;
  max-width: none;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  flex-shrink: 1;
 }

 .floodWarningsStatusHeading {
  flex-basis: 0;
  font-size: 1.75rem;
  line-height: 1;
  cursor: default;
 }

 .floodWarningsStatusItem {
  background-size: 55px;
  background-position: 5px center;
  padding: 0;
  float: none;
 }

 .floodWarningsStatusCellLink {
  padding: 6px 0;
  padding-left: 65px;
  padding-right: 6px;
  align-items: center;
  flex-direction: row;
 }

 .floodWarningsStatusCellNumber {
  flex-basis: auto;
  padding: 0;
  flex-shrink: 0;
  flex-grow: 0;
 }

 .floodWarningsStatusCellText {
  align-self: center;
  flex-basis: auto;
  flex-shrink: 1;
  padding-left: 10px;
 }

 .floodWarningsStatusUpdated {
  flex-shrink: 20;
  flex-grow: 0;
  flex-basis: 150px;
  word-break: normal;
 }
}

@media (min-width: 1200px) {
 .floodWarningsStatusUpdated {
  flex-basis: 205px;
 }
}

/* ========================= Footer ========================= */
#content {
 flex: 1 0 auto;
}

.footer {
 flex-shrink: 0;
}

.footer--bg {
 color: #ffffff;
 background: var(--scottish-teal);
 border-top: 4px solid var(--verdant-green);
 height: auto;
}

.social--links {
 padding: 25px 0 0 0;
}

.social--links li {
 list-style: none;
}

ul.footer--links-list {
 margin: 0;
 padding: 0;
}

.footer--links li {
 list-style: none;
 display: inline-block;
 padding: 0 15px 0 0;
}

.footer--links-list li a {
 color: #ffffff;
 border-bottom: 2px solid #ffffff;
}

.footer--links-list li a:hover {
 color: #000000;
}

.footer--links-list li a:focus {
 background-color: var(--verdant-green);
 color: #000000;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
}

.footer--bottom {
 margin: 20px 0 20px 0;
 border-top: 1px solid var(--grey-four);
}

.footer--copyright {
 padding-top: 20px;
}

.footer--logo {
 padding-top: 20px;
}

.footer--logo a:hover,
.footer--logo a:focus {
 background: none;
}

.social--icons {
 color: #ffffff;
 font-size: 1.5rem;
}

a.social--icons {
 border: none;
}

.social--icons:hover {
 color: var(--grey-three);
 background: transparent;
}

.social--icons:focus {
 background: transparent;
 outline: 3px solid #ffffff;
 color: #ffffff;
}

.footer--logo a {
 border: none;
}

/* ========================= Forms ========================= */
form {
 margin-bottom: 20px;
}

fieldset {
 border: 0;
}

legend {
 font-size: 1.1875rem;
 line-height: 1.2631578947;
 font-weight: 700;
 margin-bottom: 20px;
}

@media (min-width: 768px) {
 legend {
  font-size: 1.375rem;
  line-height: 1.4545454545;
 }
}

.form--caption-heading {
 font-size: 1.25rem;
 font-weight: 600;
 margin-bottom: 10px;
}

.form-label {
 color: var(--grey-one);
 display: inline-block;
 font-weight: 700;
 margin-bottom: 8px;
}

.form-hint--text {
 color: var(--grey-one);
 margin-bottom: 16px;
}

.form-field--group {
 margin-top: 16px;
 margin-bottom: 30px;
}

.form-field,
.form-check {
 margin-bottom: 30px;
}

.form-required {
 color: var(--error-red);
}

.form-control {
 display: block;
 width: 100%;
 padding: .375rem .75rem;
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.5;
 color: var(--grey-one);
 background-color: #ffffff;
 background-clip: padding-box;
 border: 1px solid var(--scottish-dark-teal);
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border-radius: .375rem;
 transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
 color: var(--grey-one);
 background-color: #f1f1f1;
 border-color: #000000;
 outline: 4px solid var(--verdant-green);
 outline-offset: 0;
}

.form--container-info {
 border: 1px solid var(--grey-three);
 padding: 20px 20px 0 20px;
 margin-bottom: 30px;
}

/* ========================= Header and utility menu ========================= */
.site--header {
 background: var(--scottish-teal);
 border-top: 8px solid var(--verdant-green);
 color: #ffffff;
 padding: 10px 0px 0px 0px;
}

.site--header-logo {
 width: 230px;
 height: auto;
 margin: 10px 0px;
}

.site--partner-logo {
 width: 330px;
 height: auto;
}

@media (min-width: 320px) {
 .site--partner-logo {
  margin: 0px 0px 0px 0px;
  width: 290px;
 }

 .nav-item.site--header-return-link {
  margin-top: 10px;
  margin-bottom: 10px;
  float: left !important;
 }
}

@media (min-width: 576px) {
 .site--partner-logo {
  margin: 4px 0px 0px -30px;
  width: 290px;
 }

 .nav-item.site--header-return-link {
  margin-top: 0px;
  margin-bottom: 10px;
 }
}

@media (min-width: 768px) {
 .site--header .row {
  flex-wrap: nowrap;
 }

 .site--header-logo {
  max-width: 180px;
 }

 .site--partner-logo {
  margin: 5px 0px 0px 5px;
  width: 280px;
 }

 .nav-item.site--header-return-link {
  margin-top: 0px;
  margin-bottom: 0px;
  float: right !important;
 }
}

@media (min-width: 992px) {
 .site--partner-logo {
  margin: 0px 0px 0px 15px;
  width: 330px;
 }
}

@media (min-width: 1200px) {
 .site--partner-logo {
  margin: 0px 0px 0px -30px;
 }
}

@media (min-width: 1400px) {
 .site--partner-logo {
  margin: 0px 0px 0px 35px;
 }
}

a.site--header-logo-link,
a.site--partner-logo-link {
 color: #ffffff;
 text-decoration: none;
 border: none;
}

a.site--header-logo-link:hover,
a.site--partner-logo-link:hover,
a.site--header-logo-link:focus,
a.site--partner-logo-link:focus,
.footer--logo a:hover {
 background-color: transparent;
}

.site--header-return-link a.nav-link {
 color: #ffffff;
 padding: 5px;
 font-weight: 600;
}

.site--header-return-link a.nav-link:hover {
 background-color: var(--verdant-green);
 color: #000000;
 outline: none;
}

.site--header-return-link a.nav-link:focus {
 color: #000000;
 background: var(--verdant-green);
 border-bottom: 2px solid var(--scottish-dark-teal);
 outline: none;
}

/* Utility menu */
.site--header-utility ul li {
 list-style: none;
}

.site--header-utility ul li a {
 color: #ffffff;
 border: none;
}

.site--header-utility ul li a:hover {
 background-color: var(--verdant-green);
 color: #000000;
}

.site--header-utility ul li a:focus {
 background-color: var(--grey-three);
 color: #000000;
}

.site--header-utility ul li a:focus-visible {
 background: rgba(255, 255, 255, 0.15);
 color: #ffffff;
 outline: 3px solid var(--color-focus);
 outline-offset: 2px;
}

/* ========================= Inset text ========================= */
.inset--text {
 border-left: 10px solid var(--scottish-teal);
 color: var(--grey-one);
 font-weight: 400;
 padding-left: 25px;
 padding-right: 16px;
 position: relative;
 margin-top: 1.5rem;
 margin-bottom: 1.5rem;
 padding-top: calc(1.5rem + -1px);
 padding-bottom: calc(1.5rem + -1px);
}

.inset--text:first-child {
 margin-top: 0;
}

.inset--text> :last-child {
 margin-bottom: 0;
}

@media (min-width: 768px) {
 .inset--text {
  padding-right: 72px;
  padding-top: calc(2rem + -1px);
  padding-bottom: calc(2rem + -1px);
  margin-bottom: 2rem;
 }
}

/* ========================= List group ========================= */
main ol,
main ul {
 margin-bottom: 1.5rem;
}

main ol li,
main ul li {
 list-style: inherit;
 line-height: 1.875rem;
 margin-bottom: 5px;
}

.numbered-list {
 margin: 20px;
 padding: 0;
}

.numbered-list li p {
 margin-bottom: 0.75rem;
}

.numbered-list li ol,
.numbered-list li ul {
 margin-top: -0.5rem;
 margin-bottom: 0.75rem;
 padding-left: 2rem;
}

.numbered-list li ul li ul li,
.numbered-list li ol li ol li {
 margin-top: -0.5rem;
 margin-bottom: 0.75rem;
 padding-left: 2rem;
}

/* =========================
   IAF GBR list styling 
========================= */
.gbrOrderedList {
 list-style: lower-alpha;
}

.gbrOrderedList li p {
 margin-bottom: 5px;
 padding-left: 50px;
}

.gbrOrderedList ol li {
 margin-bottom: 5px;
 margin-left: 20px;
 padding-left: 50px;
}

.gbrOrderedList li ol,
.gbrOrderedList li ul {
 margin-left: 20px;
 margin-top: 5px;
 margin-bottom: 5px;
 padding-left: 50px;
}

.gbrOrderedList li ul li ul li,
.gbrOrderedList li ol li ol li {
 margin-left: 0;
 margin-top: 5px;
 margin-bottom: 5px;
 padding-left: 50px;
}

/* =========================
   IAF alternative list styling 
========================= */

.gbrRuleList-alternative ol {
 list-style: none;
 margin: 0;
 padding-left: 0rem;
}

.gbrRuleList-alternative li {
 position: relative;
 margin-bottom: 15px;
 padding-left: 0.5rem;
}

.gbrRuleList-alternative li>p {
 display: inline-block;
 margin: 0;
}

.gbrRuleList-alternative li>p+p {
 display: block;
 margin-top: 0.25rem;
}

.gbrRuleList-alternative li::before {
 position: absolute;
 left: 0;
 width: 1.75rem;
 text-align: right;
 white-space: nowrap;
}

/* ==================================
   LEVEL 1: lower‑alpha (a, b, c) 
================================== */
.gbrRuleList-alternative>ol.gbrOrderedList {
 counter-reset: level1;
}

.gbrRuleList-alternative>ol.gbrOrderedList>li {
 counter-increment: level1;
}

.gbrRuleList-alternative>ol.gbrOrderedList>li::before {
 content: counter(level1, lower-alpha) ". ";
}

/* ====================================
   LEVEL 2: lower‑roman (i, ii, iii) 
===================================== */
.gbrRuleList-alternative ol ol {
 counter-reset: level2;
}

.gbrRuleList-alternative ol ol>li {
 counter-increment: level2;
}

.gbrRuleList-alternative ol ol>li::before {
 content: counter(level2, lower-roman) ". ";
}

/* =============================================================
   LEVEL 3: double lower‑alpha (aa, bb, cc…)
   NOTE: repeats the same letter twice; wraps after 26 items 
============================================================== */
.gbrRuleList-alternative ol ol ol {
 counter-reset: level3;
}

.gbrRuleList-alternative ol ol ol>li {
 counter-increment: level3;
}

.gbrRuleList-alternative ol ol ol>li::before {
 content: counter(level3, lower-alpha) counter(level3, lower-alpha) ". ";
}

.gbrRuleList-alternative ol ol,
.gbrRuleList-alternative ol ol ol {
 padding-left: 0rem;
}

/* ========================= Resource list group ========================= */
a.resource-link {
 display: flex;
 align-items: center;
 gap: 20px;
 margin-bottom: 20px;
 color: var(--grey-one);
 text-decoration: none;
 font-size: 1.2rem;
 font-weight: 500;
 border-bottom: none;
}

.resource-link i {
 color: var(--scottish-teal);
 font-size: 1.5rem;
 flex-shrink: 0;
}

a.resource-link:hover,
a.resource-link:focus {
 text-decoration: none;
}

a.resource-link span {
 text-decoration: none;
 border-bottom: 2px solid var(--scottish-teal);
}

/* ========================= A-Z navigation - Letters ========================= */
h2.h6 {
 padding-bottom: 10px;
}

.az-nav {
 display: flex;
 overflow-x: auto;
 flex-wrap: nowrap;
 gap: 12px;
 list-style: none;
 padding: 0;
}

.az-nav a {
 display: inline-block;
 padding: 6px 10px;
 text-decoration: none;
 color: var(--scottish-dark-teal);
 background-color: var(--grey-four);
}

.az-nav a:hover,
.az-nav a:focus {
 background: var(--scottish-teal);
 color: white;
}

.az-nav a.active {
 background: var(--verdant-green);
 color: #000000;
}

/* ========================= A-Z list - Topics ========================= */
.topics_az-list {
 list-style-type: none;
 margin: 0;
}

li.topics_az-list__list__item {
 list-style: none;
 margin-bottom: 15px;
}

.topics_az-list__item {
 display: grid;
 grid-gap: 0 16px;
 margin-right: 0;
 overflow: visible;
}

.topics_az-list__list {
 float: left;
 list-style-type: none;
 margin-bottom: 2.5rem;
 padding: 0;
}

.topics_az-list__letter {
 font-size: 1.875rem;
 line-height: 1.3333333333;
 float: left;
 white-space: nowrap;
}

.topics_az-list__link {
 margin-right: .5rem;
}

.reset--btn {
 margin: 0;
}

.topic-grid {
 display: grid;
 gap: 0.5rem;
}

@media (min-width: 320px) {
 .card--filters {
  margin-bottom: 25px;
 }

 .topic-grid {
  grid-template-columns: repeat(1, 1fr);
 }
}

@media (min-width: 576px) {
 .topic-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}

@media (min-width: 768px) {
 .topics_az-list {
  padding-left: 0px;
 }

 .card--filters {
  border: 1px solid var(--grey-three);
  margin-bottom: 40px;
 }
}

@media (min-width: 992px) {
 .topic-grid {
  grid-template-columns: repeat(1, 1fr);
 }

 .topics_az-list {
  padding-left: 50px;
 }

 .card--filters {
  border: none;
 }

 .card--filters form {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--grey-three);
 }
}

@media (min-width: 1200px) {
 .topic-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}

/* ========================= A-Z list - IAF ========================= */
.services_az-list {
 list-style-type: none;
 margin: 0;
}

li.services_az-list__list__item {
 list-style: none;
}

.services_az-list__item {
 display: grid;
 grid-gap: 0 16px;
 margin-right: 0;
 overflow: visible;
}

.services_az-list__list {
 float: left;
 list-style-type: none;
 margin-bottom: 2.5rem;
}

.services_az-list__letter {
 font-size: 1.875rem;
 line-height: 1.3333333333;
 float: left;
 white-space: nowrap;
}

.services_az-list__link {
 margin-right: .5rem;
}

/* ========================= Navigation (Main) ========================= */
.navbar {
 padding: 0;
 background: var(--scottish-teal);
 border-bottom: 1px solid #01515d;
}

.navbar-nav .nav-link {
 color: #ffffff;
 font-weight: 500;
 min-height: 44px;
 border-radius: 2px;
 padding: 0px 15px;
}

.navbar-nav .nav-link.active,
.nav-item.dropdown .nav-link.active {
 background: var(--scottish-dark-teal);
 color: #ffffff;
 font-weight: 600;
 padding: 12px 18px;
 box-shadow: inset 4px 0 0 #000000;
}

.navbar-nav .nav-link.active:focus,
.navbar-nav .nav-link.active:hover,
.nav-item.dropdown .nav-link.active:focus,
.nav-item.dropdown .nav-link.active:hover {
 background-color: var(--scottish-dark-teal);
 color: #ffffff !important;
}

/* HOVER + FOCUS = same system */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
 background: rgba(255, 255, 255, 0.15);
 color: #ffffff;
}

.navbar-nav .nav-link:focus-visible {
 outline: 3px solid var(--color-focus);
 outline-offset: 2px;
}

.nav-item.dropdown .nav-link.show {
 background: var(--verdant-green);
 color: #000000;
}

/* TOGGLE */
.navbar-toggler {
 border: none;
 background: #01515d;
 border-radius: 6px;
 padding: 15px;
 position: relative;
}

/* HAMBURGER ICON */
.navbar-toggler-icon {
 background: none;
 position: relative;
 width: 24px;
 height: 2px;
 display: block;
 background-color: #fff;
 transition: all 0.3s ease-in-out;
}

/* TOP + BOTTOM LINES */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
 content: "";
 position: absolute;
 left: 0;
 width: 24px;
 height: 2px;
 background-color: #fff;
 transition: all 0.3s ease-in-out;
}

.navbar-toggler-icon::before {
 transform: translateY(-7px);
}

.navbar-toggler-icon::after {
 transform: translateY(7px);
}

/* OPEN STATE */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
 background-color: transparent;
}

/* Rotate into X */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
 transform: translateY(0) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
 transform: translateY(0) rotate(-45deg);
}

.navbar-toggler:hover {
 background: #013d46;
}

.navbar-toggler:focus-visible {
 box-shadow: 0 0 0 3px var(--verdant-green);
}

.navbar .dropdown-menu {
 border: 1px solid var(--grey-three);
 background: #ffffff;
 margin: 0;
 padding: 0;
}

.navbar .dropdown-menu li {
 border-bottom: 1px solid var(--grey-four);
}

.navbar .dropdown-item {
 color: var(--grey-one);
 padding: 5px 20px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar .dropdown-item-all {
 color: var(--scottish-dark-teal);
 background: var(--grey-four);
 border-top: 1px solid var(--verdant-green);
}

.navbar .dropdown-item:hover {
 background: var(--grey-four);
 color: var(--grey-one);
 border-bottom: 1px solid var(--scottish-teal);
}

@media (max-width: 991.98px) {
 .navbar-collapse {
  background: var(--scottish-teal);
  padding: 16px;
  border-top: 1px solid #01515d;
 }

 /* STACKED MENU */
 .navbar-nav .nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2px 0;
 }

 .main-nav--item {
  padding-right: 0;
 }

 .navbar-nav .nav-item:last-child {
  border-bottom: none;
 }

 .navbar-nav .nav-link {
  padding: 14px 12px;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 /* DROPDOWN = ACCORDION STYLE */
 .navbar .dropdown-menu {
  position: static !important;
  border: none;
  box-shadow: none;
  background: #01515d;
  margin: 0;
  padding: 0;
 }

 .navbar .dropdown-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }

 .navbar .dropdown-item {
  color: #fff;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .navbar .dropdown-item-all {
  color: #fff;
  background: #013d46;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .navbar .dropdown-item:hover {
  background: #013d46;
 }

 /* RESET default caret */
 .navbar .dropdown-toggle::after {
  border: none;
  content: "";
 }

 .navbar .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 12px;
 }

 /* CHEVRON */
 .navbar .dropdown-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-left: auto;
 }

 /* OPEN STATE (rotates ↓) */
 .dropdown-toggle.show::after {
  transform: translateY(-50%) rotate(225deg);
 }

 .navbar .dropdown-toggle {
  display: flex;
  align-items: center;
 }

 .navbar .dropdown-toggle::after {
  right: 0;
  margin-left: auto;
 }

 .dropdown-toggle.show::after {
  transform: translateY(-50%) rotate(225deg) scale(1.1);
 }

 /* UTILITY SECTION */
 .mobile-utility {
  margin-top: 30px;
  border-top: 0px solid rgba(255, 255, 255, 0.3);
  padding-top: 10px;
 }

 .mobile-utility .nav-item {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }

 .mobile-utility .nav-link {
  opacity: 0.9;
 }

 /* ANIMATION */
 .navbar-collapse.show {
  animation: slideDown .25s ease;
 }

 @keyframes slideDown {
  from {
   opacity: 0;
   transform: translateY(-8px);
  }

  to {
   opacity: 1;
   transform: translateY(0);
  }
 }
}

@media (min-width: 992px) {
 .navbar {
  --bs-navbar-nav-link-padding-x: 0.8rem;
 }

 .navbar-nav .nav-link {
  gap: 10px;
  /* adds space between items */
  position: relative;
 }

 .navbar-nav .nav-link {
  padding: 12px 0px;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
 }

 .navbar-nav .nav-link:hover {
  background: var(--verdant-green);
  color: #000000;
 }
}

@media (prefers-reduced-motion: reduce) {
 .dropdown-toggle::after {
  transition: none;
 }
}

/* ========================= Navigation (Secondary) ========================= */
.dropdown-toggle {
 outline: 0;
}

.btn-toggle {
 padding: .25rem .5rem;
 font-weight: 600;
 color: #000000;
 background-color: transparent;
}

.btn-toggle:hover,
.btn-toggle:focus {
 color: #000000;
}

.btn-toggle::before {
 width: 1.25em;
 line-height: 0;
 content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
 transition: transform .35s ease;
 transform-origin: .5em 50%;
 padding-right: 10px;
 padding-top: 4px;
}

.btn-toggle[aria-expanded="true"] {
 color: var(--scottish-teal);
 background-color: var(--grey-three);
 border-left: 4px solid var(--verdant-green);
 border-radius: 0;
 padding: 10px 15px;
}

.btn-toggle[aria-expanded="true"]::before {
 transform: rotate(90deg);
}

ul.side--navigation {
 padding: 0;
 list-style: none;
}

.side--navigation-items {
 margin-bottom: 15px;
 list-style: none;
}

li.side--navigation-items ul {
 margin: 0;
 padding: 0;
}

.side--navigation-item-parent {
 padding: 10px 15px;
 background-color: var(--grey-four);
 border-top: 2px solid var(--grey-one);
}

.side--navigation-item-parent a {
 color: #000000;
 font-weight: 600;
 text-decoration: none;
 border: none;
}

.side--navigation-item-parent.active {
 background-color: var(--grey-four);
 border-top: 2px solid var(--verdant-green);
 padding: 10px 15px;
 font-weight: 600;
}

li.side--navigation-item-child.active {
 background-color: var(--grey-four);
 border-top: 2px solid var(--verdant-green);
 padding: 10px 15px 10px 30px;
 font-weight: 600;
}

li.side--navigation-item-child {
 list-style: none;
 padding: 5px 10px 5px 30px;
 margin: 0;
 border-top: 2px solid #ffffff;
}

li.side--navigation-item-child a.side--navigation-item-link {
 color: var(--grey-one);
 text-decoration: none;
 word-wrap: break-word;
 border: none;
}

.side--navigation-item-parent:hover,
li.side--navigation-item-child:hover {
 color: #000000;
 background-color: var(--grey-four);
 text-decoration: none;
}

.side--navigation-item-parent a.side--navigation-item-link:hover,
li.side--navigation-item-child a.side--navigation-item-link:hover {
 color: #000000;
 background-color: var(--grey-four);
 text-decoration: none;
}

.side--navigation-item-parent a.side--navigation-item-link:focus,
li.side--navigation-item-child a.side--navigation-item-link:focus {
 background-color: var(--verdant-green);
 color: #000000;
 border-bottom: 2px solid var(--grey-one);
 text-decoration: none;
}

.side--navigation-collapse-card {
 margin-bottom: 10px;
 background: var(--grey-four);
 padding: 15px;
}

.side--navigation-collapse-card a.card-link:hover {
 margin-bottom: 10px;
}

.side--navigation-collapse-card-open {
 padding-top: 30px;
}

/* ========================= Notification banner ========================= */
.notification-banner {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-weight: 400;
 font-size: 1.1875rem;
 line-height: 1.3157894737;
 margin-bottom: 30px;
 border: 5px solid var(--scottish-teal);
 background-color: var(--scottish-teal);
}

.notification-banner:focus {
 outline: 3px solid;
 outline-color: var(--grey-three);
}

.notification-banner__header {
 font-size: 1.3125rem;
 margin: 0 0 15px;
 padding: 10px 10px 0px 10px;
}

.notification-banner__title {
 font-size: 1.1875rem;
 line-height: 1.3157894737;
 margin: 0;
 padding: 0;
 color: #ffffff;
}

.notification-banner__content {
 padding: 15px;
 color: var(--grey-one);
 background-color: #ffffff;
}

.notification-banner__content>* {
 box-sizing: border-box;
 max-width: 605px;
 margin-top: 10px;
}

.-notification-banner__content> :last-child {
 margin-bottom: 0;
}

/* ========================= Notification panel ========================= */
.notification--panel {
 margin-bottom: 1.5rem;
 padding: 2.5rem 1.5rem;
 background: var(--grey-three);
 text-align: center;
}

.notification--panel-success {
 background: var(--success-green);
 color: #ffffff;
}

h2.notification--panel-title {
 margin-bottom: 1rem;
 font-weight: 700;
 font-size: 2.75rem;
 color: #ffffff;
}

.notification--panel-content> :last-child {
 margin-bottom: 0;
}

/* ========================= Pagination ========================= */
/* wrap onto multiple lines instead of overflowing when there are many pages */
.pagination {
 flex-wrap: wrap;
 row-gap: 0.5rem;
}

.page-link {
 color: #000000;
 text-decoration: none;
 background-color: #ffffff;
 border: 0px solid #ffffff;
}

.page-link:hover {
 z-index: 2;
 color: #ffffff;
 background-color: var(--scottish-teal);
 border-color: 0px solid #ffffff;
}

.page-link.active,
.active>.page-link {
 z-index: 3;
 color: #000000;
 background-color: var(--grey-three);
 border-color: 0px solid #ffffff;
}

.page-link:focus {
 z-index: 3;
 color: #000000;
 background-color: var(--verdant-green);
 outline: 0;
 box-shadow: none;
}

/* Previous/Next only */
.page-link--nav {
 color: var(--scottish-dark-teal);
 font-weight: 600;
}

.page-link--nav:hover {
 background-color: var(--verdant-green);
 border-color: var(--verdant-green);
 color: #000000;
}

.page-item.disabled .page-link--nav {
 background-color: #ffffff;
 border-color: #dee2e6;
 color: #6c757d;
}

/* ========================= Phase banner (Alpha/Beta badge) ========================= */
.phase--banner {
 background-color: var(--grey-three);
 padding: 25px 0px;
 color: #000000;
}

.badge--alpha {
 background-color: var(--scottish-teal);
 color: #ffffff;
 display: inline-block;
 padding: 5px 10px;
 font-size: 1.2rem;
 font-weight: 500;
 line-height: 1rem;
 text-align: center;
 white-space: nowrap;
 vertical-align: baseline;
 margin-right: 15px;
 border-radius: 0;
}

.badge--beta {
 background-color: var(--orange);
 color: #000000;
 display: inline-block;
 padding: 5px 10px;
 font-size: 1.2rem;
 font-weight: 500;
 line-height: 1rem;
 text-align: center;
 white-space: nowrap;
 vertical-align: baseline;
 margin-right: 15px;
 border-radius: 0;
}

.phase--banner a {
 color: var(--scottish-dark-teal);
 font-weight: 500;
}

.phase--banner a:hover {
 background-color: var(--grey-one);
 color: #ffffff;
}

.phase--banner a:focus {
 outline-offset: 0;
 background-color: var(--scottish-dark-teal);
 color: #ffffff;
}

/* ========================= Progress bar ========================= */
.progress {
 --bs-progress-height: 1.5rem;
 --bs-progress-font-size: 1rem;
 --bs-progress-bg: var(--grey-four);
 --bs-progress-border-radius: 0.375rem;
 --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
 --bs-progress-bar-color: #ffffff;
 --bs-progress-bar-bg: var(--scottish-teal);
 --bs-progress-bar-transition: width 0.6s ease;
 display: flex;
 height: var(--bs-progress-height);
 overflow: hidden;
 font-size: var(--bs-progress-font-size);
 background-color: var(--bs-progress-bg);
 border-radius: var(--bs-progress-border-radius);
 margin-bottom: 15px;
}

.progress-bar {
 display: flex;
 flex-direction: column;
 justify-content: center;
 overflow: hidden;
 color: var(--bs-progress-bar-color);
 text-align: center;
 white-space: nowrap;
 background-color: var(--bs-progress-bar-bg);
 transition: var(--bs-progress-bar-transition);
}

.progress-bar--info {
 color: #ffffff !important;
 background-color: var(--scottish-teal) !important;
}

.progress-bar--success {
 color: #000000 !important;
 background-color: var(--success-green) !important;
}

.progress-bar--warning {
 color: #000000 !important;
 background-color: var(--warning-yellow) !important;
}

.progress-bar--danger {
 color: #ffffff !important;
 background-color: var(--error-red) !important;
}

/* ========================= Question ========================= */
.question {
 margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
 .question {
  margin-bottom: 2rem;
 }
}

.question>fieldset> :last-child {
 margin-bottom: 0;
}

.question--hint-text {
 color: var(--grey-two);
 margin-bottom: 1rem;
 margin-top: 10px;
}

.question--hint-text>* {
 margin-bottom: .5rem;
}

.label {
 font-size: 1.25rem;
 line-height: 1.5;
 color: #000000;
 display: inline-block;
 font-weight: 700;
 margin-bottom: .5rem;
}

.question--error {
 border-left: 8px solid var(--error-red);
 padding-left: 1.25rem;
}

.question__message,
.question__error-message {
 margin-bottom: 1rem;
}

@media (min-width: 768px) {

 .question__message,
 .question__error-message {
  margin-bottom: 1rem;
 }
}

.question__error-message {
 color: var(--error-red);
 font-weight: 700
}

/* ========================= Radio buttons ========================= */
.form-radio {
 margin-bottom: 24px;
 position: relative;
}

.form-radio--input,
.form-radio--input-floodline {
 height: 30px;
 width: 30px;
 position: absolute;
}

.form-radio--input:checked,
.form-radio--input-floodline:checked {
 background-color: var(--scottish-dark-teal);
 border-color: var(--grey-one);
}

.form-radio--input:focus {
 border-color: #000000;
 outline: 4px solid var(--verdant-green);
 outline-offset: 0;
}

.form-radio--input-floodline:focus {
 border-color: #000000;
 outline: 4px solid var(--yellow);
 outline-offset: 0;
}

.form-radio--label {
 display: inline-block;
 padding: 6px 10px 0px 45px;
}

.topic-grid .form-check {
 width: 100%;
}

legend.h6 {
 padding-bottom: 0;
}

.form-check {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.form-check-input {
 margin-top: 0;
}

.form-check-label {
 padding-left: 25px;
 margin-bottom: 0;
 line-height: 1.2;
}

/* ========================= Select ========================= */
.form-control,
.form-select,
.form-control--floodline {
 border: 2px solid var(--grey-one);
}

.form-select {
 display: block;
 width: 100%;
 padding: .375rem 2.25rem .375rem .75rem;
 -moz-padding-start: calc(0.75rem - 3px);
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.5;
 color: var(--grey-one);
 background-color: rgb(255, 255, 255);
 background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E);
 background-repeat: no-repeat;
 background-position: right .75rem center;
 background-size: 20px 25px;
 border: 2px solid var(--grey-two);
 border-radius: .375rem;
 transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

.form-control:focus,
.form-select:focus {
 border-color: #000000;
 outline: 2px solid var(--verdant-green);
 outline-offset: 0;
 box-shadow: 0 0 0 0.25rem rgba(64, 196, 123, .25);
}

.form-control--floodline:focus,
.form-select--floodline:focus {
 border-color: #000000;
 outline: 2px solid var(--yellow);
 outline-offset: 0;
 box-shadow: 0 0 0 0.25rem rgba(253, 196, 67, .25);
}

label {
 color: var(--grey-one);
}

/* ========================= Sequential navigation ========================= */
.sequential--nav-button {
 text-decoration: none;
 border: none;
}

.sequential--nav-button-left,
.sequential--nav-button-right {
 font-size: 1.65rem;
 margin-bottom: 0;
}

/* ========================= Site search - Header ========================= */
.header-search-toggle {
 position: relative;
 width: 44px;
 height: 44px;
 background: none;
 border: none;
 color: #fff;
}

.header-search-toggle:hover {
 color: var(--verdant-green);
}

.header-search-toggle i {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) scale(1);
 transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-search-toggle i:hover {
 color: var(--verdant-green)
}

.search-icon {
 opacity: 1;
}

.close-icon {
 opacity: 0;
 transform: translate(-50%, -50%) scale(0.8);
}

.header-search-toggle.active .search-icon {
 opacity: 0;
 transform: translate(-50%, -50%) scale(0.8);
}

.header-search-toggle.active .close-icon {
 opacity: 1;
 transform: translate(-50%, -50%) scale(1) rotate(90deg);
}

/* ========================= Site search - Dropdown ========================= */
.search-panel {
 display: none;
 opacity: 0;
 transition: opacity 0.2s ease;
}

.search-panel.is-open {
 display: block;
 opacity: 1;
}

.search-panel[aria-hidden="true"] {
 display: none;
}

.search-box-container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 16px 0;
}

.dropdown-search-form {
 flex: 1;
 margin-bottom: 16px;
}

.dropdown-search-control {
 display: flex;
 height: 48px;
 margin-right: 44px;
}

.dropdown-search-input {
 flex: 1;
 border: 2px solid var(--color-primary-dark);
 padding-left: 15px;
}

.dropdown-search-button {
 width: var(--size-touch-target);
 background: var(--color-primary-dark);
 border: 2px solid var(--color-primary-dark);
}

.dropdown-search-input {
 @extend .control;
}

.dropdown-search-button {
 @extend .control-button;
}

.dropdown-search-button i {
 color: #ffffff;
}

.dropdown-search-button:hover {
 background: var(--verdant-green);
}

.dropdown-search-button i:hover {
 color: #000000;
}

.dropdown-search-close {
 height: 48px;
 display: flex;
 align-items: center;
 padding: 0 24px;
 color: var(--grey-one);
 border: 2px solid var(--grey-one);
 background: white;
 margin-top: -14px;
}

.dropdown-search-close:hover {
 background: var(--verdant-green);
 color: #000;
}

body.search-open {
 position: fixed;
 width: 100%;
}

@media (prefers-reduced-motion: reduce) {

 .dropdown-search-panel,
 .header-search-toggle i {
  transition: none;
 }
}

.search-auto-list {
 z-index: 9999;
}

.list-group-item {
 margin-bottom: 0px;
 border: none;
}

/* ========================= IAF search ========================= */
.search--results-list {
 padding: 0;
 margin: 0;
 margin-bottom: 1.5rem;
}

.search--results {
 list-style: none;
 margin: 0;
 padding: 0;
 padding-top: 1rem;
 padding-bottom: calc(1.5rem + -1px);
 border-bottom: 0px solid var(--grey-three);
}

h2.search--results-title {
 font-size: 1.1875rem;
 line-height: 1.2631578947;
 margin: 0 !important;
 margin-bottom: 1.5rem !important;
}

.search--results-summary {
 font-size: 1rem;
 line-height: 1.5;
 margin-bottom: 1.5rem;
}

.search--results-metadata {
 margin-top: .5rem;
 font-size: 1rem;
 line-height: 1.3333333333;
 margin-bottom: 0;
}

.search--results-metadata-item {
 display: block;
}

.search--results-metadata-key,
.search--results-metadata-value {
 display: inline-block;
}

.search--results-metadata-key {
 min-width: 150px;
}

.cat-True {
 font-weight: bold !important;
}

.cat-False {
 color: #767676 !important;
}

@media (max-width: 991px) {
 .SearchComp .component-collapse-card-dual {
  background: #ffffff;
  border-left: 1px solid var(--grey-three);
  border-right: 1px solid var(--grey-three);
  border-bottom: 1px solid var(--grey-three);
  border-top: 8px solid var(--verdant-green);
  padding: 0px 10px 20px 10px;
  margin-bottom: 30px;
 }
}

/* ========================= Search filters - Topics ========================= */
.btn-search {
 margin-bottom: 0;
}

.filters--form {
 display: block !important;
 margin: 0;
 max-height: none !important;
 list-style-type: none;
}

@media (max-width: 768px) {
 .filters--form {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
 }
}

.search-filters {
 margin-bottom: .5rem;
}

.filters--tab-title .filters--title {
 display: block;
}

.filters--scrollable {
 margin-left: -8px;
 max-height: 35vh;
 overflow-y: auto;
 padding-left: 10px;
}

/* ========================= Search filters ========================= */
.filter-scroll {
 max-height: 260px;
 overflow-y: auto;
}

.active-filters {
 background-color: #f8f9fa;
 padding: 16px;
}

.filter-box {
 display: inline-flex;
 align-items: center;
 margin-left: 10px;
 padding: 6px 10px;
 border: 1px solid var(--scottish-dark-teal);
 background-color: #ffffff;
 margin-bottom: 5px;
}

/* Remove button */
.filter-remove {
 margin-left: 10px;
 text-decoration: none;
 color: var (--scottish-teal);
}

a.filter-remove {
 border-bottom: none;
}

.filter-remove:hover {
 text-decoration: none;
 background-color: #ffffff;
 color: var(--scottish-teal);
}

/* ========================= Search results ========================= */
.search--results__title {
 font-weight: 400;
 margin-top: 20px !important;
 font-size: 1.1875rem;
 color: var(--grey-one);
}

.search--results__title-query {
 font-weight: 700;
}

.search--results__divider {
 margin-top: -0.0625rem;
 margin-bottom: 1.5rem;
}

.search--sort-options {
 font-size: 1rem;
 line-height: 1.5;
 margin-bottom: 2rem;
 align-items: center;
 display: flex;
 flex-wrap: wrap;
 gap: .5rem 1.5rem;
}

.search--sort-options .form-label {
 font-weight: 400;
 margin-right: -1rem;
}

.search--sort-options .search--select-wrapper {
 display: inline-grid;
}

.search--sort-options .search--select {
 min-height: 2.5rem;
 padding-top: .25rem;
 padding-bottom: .25rem;
}

.search--results__list {
 list-style-type: none;
 margin-bottom: 1.5rem;
 padding: 0;
}

.search--result {
 margin: 0;
 padding: 0;
 padding-top: 1rem;
 border-bottom: .0625rem var(--grey-three) solid;
}

.search--result:first-child {
 padding-top: 0;
}

.search--result__title {
 margin-bottom: 20px;
 font-size: 1.1875rem;
 line-height: 1.4545454545;
}

.search--result__summary {
 margin-bottom: 20px;
}

mark {
 background-color: inherit;
 color: inherit;
 font-weight: 700;
}

.search--result__metadata {
 margin-bottom: 0;
 margin-top: .5rem;
}

.search--metadata {
 margin: 0;
 overflow: hidden;
 font-size: .875rem;
 line-height: 1.7142857143;
}

.search--metadata--inline {
 color: #5e5e5e;
 margin-bottom: .5rem;
}

.search--metadata--inline .search--metadata__item {
 display: inline;
 position: relative;
}

.search--metadata__key {
 display: inline;
 font-weight: normal;
}

.search--metadata--inline .search--metadata__key {
 clip: rect(1px, 1px, 1px, 1px);
 height: 1px;
 overflow: hidden;
 position: absolute !important;
 width: 1px;
}

.search--metadata__key::after {
 content: ":";
}

.search--metadata__value {
 display: inline;
 font-weight: 400;
 margin-left: 0;
}

/* ========================= News search ========================= */
.search--form-keywords,
.search--form-category,
.search--form-year {
 margin-bottom: 15px;
}

.search--form-keywords label.form-label,
.search--form-category label.form-label,
.search--form-year label.form-label,
.search--form-listing label.form-label {
 color: #ffffff;
}

.card-button {
 margin-bottom: 20px;
}

#SearchCategory {
 background: #ffffff;
}

@media (min-width: 320px) {
 .search--form-button {
  margin-bottom: 8px;
  margin-left: -5px;
  margin-top: 60px;
 }
}

@media (min-width: 576px) {
 .search--form-button {
  margin-bottom: 8px;
  margin-left: -5px;
  margin-top: 60px;
 }
}

@media (min-width: 768px) {
 .search--form-button {
  margin-bottom: 8px;
  margin-left: -5px;
  margin-top: 73px;
 }
}

@media (min-width: 992px) {
 .search--form-button {
  margin-bottom: 10px;
  margin-left: 0;
  margin-top: 0;
 }
}

/* ========================= Skip links ========================= */
.skip-to-content-container {
 background-color: var(--verdant-green);
}

a.offscreen.skip-to-content {
 color: #000000 !important;
 text-decoration: none;
 background-color: var(--verdant-green);
}

.offscreen {
 position: absolute;
 height: 1px;
 width: 1px;
 overflow: hidden;
 clip-path: inset(1px 1px 1px 1px);
}

.skip-to-content.offscreen:focus {
 position: relative;
 display: inline-block;
 height: auto;
 width: auto;
 min-height: 44px;
 min-width: 44px;
 line-height: 44px;
 padding: 0px 10px;
 color: #000000;
 background-color: #ffffff;
 overflow: visible;
 clip-path: none;
 text-decoration: none;
 outline: 1px solid var(--scottish-dark-teal);
 outline-offset: 2px;
 font-weight: 500;
}

/* ========================= Summary list ========================= */

/* ========================= Tables ========================= */
.table-responsive {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 margin-bottom: 2.5rem;
}

.table> :not(caption)>*>* {
 padding: 1rem;
}

table {
 border: 1px solid var(--grey-three);
 font-size: 1rem;
 line-height: 1.5rem;
 width: 100% !important;
}

.table>thead,
.table>tbody,
.table>tfoot {
 vertical-align: top;
}

th,
table thead tr td {
 color: #000000 !important;
 border: 1px solid var(--grey-two) !important;
 background-color: var(--grey-three) !important;
 padding: 10px;
}

td,
table tbody tr td {
 color: var(--grey-one) !important;
 border: 1px solid var(--grey-two) !important;
 padding: 10px;
}

/* ========================= Table of contents ========================= */
.contents--table,
.contents--table-list {
 background: #ffffff;
 border-top: 8px solid var(--verdant-green);
}

@media (min-width: 320px) {

 .contents--table,
 .contents--table-list {
  padding: 10px;
 }
}

@media (min-width: 992px) {

 .contents--table,
 .contents--table-list {
  padding: 30px 30px 10px;
 }
}

.contents--table-list-heading {
 font-size: 1.5rem;
 font-weight: 500;
}

.contents--table-list-subheading {
 margin-bottom: 0.5rem;
 padding-bottom: 5px;
 border-bottom: 1px solid var(--grey-three);
}

.contents--table ul,
.contents--table-list ul {
 margin: 20px 30px 0px 30px;
 padding: 0 0 10px 0;
}

.contents--table ul li {
 display: inline;
 list-style: none;
}

@media (min-width: 992px) {
 .contents--table ul li a.badge.text-bg-primary {
  margin: 0px 10px 10px 10px;
  float: left;
 }
}

/* ========================= Table of contents - A to Z List ========================= */
.services--table-list-heading {
 font-size: 1.5rem;
 font-weight: 500;
}

.services--table-list-subheading {
 margin-bottom: 0.5rem;
 padding-bottom: 5px;
}

.services--table-list ul,
.services--table-list-mobile ul {
 padding: 0 0 10px 0;
}

.services--table-list ul li,
.services--table-list-mobile ul li {
 display: inline;
 list-style: none;
}

.services--table-list ul li a {
 margin: 0px 5px 0px 0px;
 padding: 10px 15px;
 background: var(--grey-four);
}

.services--table-list ul li a.active {
 background: var(--scottish-teal);
 color: #ffffff;
}

.services--table-list ul li a:hover {
 margin: 0px 5px 0px 0px;
 padding: 10px 15px;
 background: var(--verdant-green);
 color: #000000;
}

.services--table-list-mobile ul li a.active {
 background: var(--scottish-teal);
 color: #ffffff;
}

.services--table-list-mobile ul li a:hover {
 background: var(--verdant-green);
 color: #000000;
}

/* ========================= Tabs ========================= */
.nav {
 --bs-nav-link-color: var(--scottish-teal);
}

.nav-tabs {
 --bs-nav-tabs-border-width: 0;
}

.nav-tabs li.nav-item {
 list-style: none;
 line-height: 1.5rem;
 font-weight: 600;
}

.nav-tabs .nav-link {
 background: 0 0;
 border: var(--bs-nav-tabs-border-width) solid transparent;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
 margin: 0;
 border: 0;
 background: var(--scottish-teal);
 color: #ffffff;
 text-decoration: none;
}

.nav-link.active:focus,
.nav-link.active:hover {
 background-color: var(--scottish-teal);
 color: #ffffff !important;
}

.nav-link:focus,
.nav-link:hover {
 background-color: var(--verdant-green);
 color: #000000;
}

.tab--content-bordered {
 border: 2px solid var(--grey-three);
 padding: calc(1.5rem + -2px);
}

#nav-tabContent {
 margin-top: 15px;
}

#nav-tabContent .tab-pane li {
 list-style: none;
}

/* ========================= Tag/Label  ========================= */
.badge {
 display: inline-block;
 padding: 5px 10px;
 font-size: 1rem;
 font-weight: 400;
 line-height: 1rem;
 color: var(--scottish-teal) !important;
 text-align: center;
 white-space: nowrap;
 vertical-align: baseline;
}

a.badge.text-bg-primary,
.badge.text-bg-primary {
 text-decoration: none;
 background-color: var(--grey-four) !important;
 border: 1px solid var(--scottish-teal);
}

a.badge.text-bg-primary:hover {
 background-color: var(--scottish-dark-teal) !important;
 color: #ffffff !important;
 text-decoration: none;
}

@media (min-width: 320px) {

 a.badge.text-bg-primary,
 .badge.text-bg-primary {
  margin: 10px 5px 0px 0px;
  float: left;
 }
}

@media (min-width: 768px) {

 a.badge.text-bg-primary,
 .badge.text-bg-primary {
  margin: 0px 5px;
  float: right;
 }
}

/* ========================= Text input ========================= */
.form-control--fixed-100 {
 max-width: calc(16px + 100em);
}

.form-control--fixed-50 {
 max-width: calc(16px + 50em);
}

.form-control--fixed-20 {
 max-width: calc(16px + 20em);
}

.form-control--fluid-full {
 max-width: 100%;
}

@media (min-width: 320px) {

 .form-control--fluid-three-quarters,
 .form-control--fluid-two-thirds,
 .form-control--fluid-half {
  max-width: 100%;
 }
}

@media (min-width: 1200px) {
 .form-control--fluid-three-quarters {
  max-width: 75%;
 }

 .form-control--fluid-two-thirds {
  max-width: 67.666667%;
 }

 .form-control--fluid-half {
  max-width: 50%;
 }
}

/* ========================= Tooltip ========================= */
.tooltip-trigger {
 background: none;
 border: 0;
 padding: 0.25rem;
 margin-left: 0.25rem;
 color: var(--scottish-teal);
 cursor: pointer;
}

.tooltip-trigger:hover,
.tooltip-trigger:focus-visible {
 color: var(--scottish-dark-teal);
}

.tooltip-trigger:focus-visible {
 outline: 2px solid var(--scottish-dark-teal);
 outline-offset: 2px;
}

.tooltip-wrapper {
 position: relative;
 display: inline-block;
}

.tooltip-content {
 position: absolute;
 z-index: 1000;
 top: 100%;
 left: 0;
 max-width: 20rem;
 padding: 0.5rem 0.75rem;
 margin-top: 0.25rem;
 background: #0b0c0c;
 color: #fff;
 font-size: 0.875rem;
 border-radius: 0.25rem;
 font-weight: 400;
 visibility: hidden;
 opacity: 0;
}

.tooltip-wrapper:hover .tooltip-content,
.tooltip-wrapper:focus-within .tooltip-content {
 visibility: visible;
 opacity: 1;
}

/* ========================= Warning text ========================= */
.warning-text {
 border: 1px solid var(--grey-two);
 border-width: 1px 0;
 font-weight: 700;
 padding-left: 72px;
 padding-right: 16px;
 position: relative;
 margin-top: 1.5rem;
 margin-bottom: 1.5rem;
 padding-top: calc(1.5rem + -1px);
 padding-bottom: calc(1.5rem + -1px);
}

.warning-text:first-child {
 margin-top: 0;
}

.warning-text--icon {
 font-size: 40px;
 left: 20px;
 position: absolute;
}

.warning-text> :last-child {
 margin-bottom: 0;
}

.warning-text--heading {
 font-size: 1.32rem;
 color: var(--scottish-dark-teal);
}

.warning-text--info {
 color: var(--grey-two);
}

@media (min-width: 576px) {
 .warning-text--icon {
  top: 20px;
 }
}

@media (min-width: 768px) {
 .warning-text {
  padding-right: 72px;
  padding-top: calc(2rem + -1px);
  padding-bottom: calc(2rem + -1px);
  margin-bottom: 2rem;
 }

 .warning-text--icon {
  top: 28px;
 }
}

@media (min-width: 1200px) {
 .warning-text--icon {
  top: 31px;
 }
}

/* ========================= News styling ========================= */
.media--main-story {
 border-top: 8px solid var(--scottish-dark-teal);
 border-radius: 0;
 padding-bottom: 20px;
 margin-bottom: 0;
}

.media--card-lists {
 margin-bottom: 20px;
}

.media--news-list .list-group {
 --bs-list-group-color: var(--grey-one);
 --bs-list-group-border-width: 1px;
 --bs-list-group-item-padding-x: 1.2rem;
 --bs-list-group-item-padding-y: 1.2rem;
 margin-top: 15px;
}

.media--news-list .list-group .list-group-item {
 padding: 15px 0px;
 border: 0;
}

.media--news-list-date {
 color: var(--grey-two);
 padding: 10px 0px;
}

.text-highlight p {
 color: var(--scottish-dark-teal);
 font-weight: 600;
 font-size: 1.5rem;
 line-height: 1.875rem;
}

.media--asset-library {
 border-top: 8px solid var(--scottish-dark-teal);
 border-radius: 0;
 margin-bottom: 0;
 border-radius: 0;
 padding-bottom: 0;
}

.media--asset-library .row {
 border: 1px solid var(--grey-three);
}

.media--asset-library .card-body {
 padding: 15px 10px 30px 15px;
}

.media--asset-library h2.card-title {
 margin-bottom: 5px;
}

/* ========================= Main content styling ========================= */
.content--area {
 margin-top: 25px;
}

.grey--bg {
 background-color: var(--grey-four);
 padding: 25px 0px;
 margin-bottom: 20px;
}

.container-negative-bottom-margin {
 margin-bottom: -25px !important;
}

.content--quote {
 padding: 0 25px;
}

.blockquote {
 margin-bottom: 1rem;
 font-size: 1.3rem;
}

.blockquote-footer {
 margin-top: 1rem;
 margin-bottom: 1rem;
 font-size: 1rem;
 color: var(--scottish-teal);
 font-weight: 600;
}

.welcome--content {
 margin-bottom: 10px;
}

.welcome--content h1 {
 padding-bottom: 15px;
}

/* ========================= Water scarcity widget ========================= */
.scarcity-card-col {
 flex: 0 0 auto;
 width: 20%;
}

.scarcity--card-normal {
 padding: 0;
 border-left: 8px solid var(--ws-normal);
}

.scarcity--card-early {
 padding: 0;
 border-left: 8px solid var(--ws-early);
}

.scarcity--card-alert {
 padding: 0;
 border-left: 8px solid var(--ws-alert);
}

.scarcity--card-moderate {
 padding: 0;
 border-left: 8px solid var(--ws-moderate);
}

.scarcity--card-significant {
 padding: 0;
 border-left: 8px solid var(--ws-significant);
}

.scarcity-collapse-card {
 background: #ffffff;
 padding: 10px 20px;
}

.scarcity-collapse-card h2 {
 margin-bottom: 0;
}

.scarcity-collapse-card a {
 margin-top: 10px;
}

.scarcity--card-content {
 margin: auto;
}

.scarcity--card-title a {
 text-decoration: none;
 border: none;
}

.ws--img-card {
 border: 1px solid var(--scottish-teal);
}

.ws--img-card .card-header {
 background: var(--scottish-teal);
 color: #ffffff;
 border-radius: 0;
 font-weight: 600;
 font-size: 1.2rem;
}

.ws--img-card .card-subheader {
 background: var(--grey-four);
 color: var(--grey-one);
 border-radius: 0;
 padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
}

.card-image {
 text-align: center;
}

.ws-weekly-image {
 max-height: 700px;
 padding-top: 10px;
 background-color: #cbdaed;
}

@media (min-width: 992px) {
 .ws-weekly-image {
  max-height: 550px;
 }
}

.ws-image {
 max-height: 500px;
 background-color: #cbdaed;
}

.ws--content-card {
 border: none;
}

.ws--significant-area img.card-img-top {
 max-height: 245px;
}

@media (min-width: 320px) {
 #collapse-scarcitylevels {
  margin-top: 15px;
 }

 .scarcity--card-normal,
 .scarcity--card-early,
 .scarcity--card-alert,
 .scarcity--card-moderate,
 .scarcity--card-significant {
  margin-bottom: 10px;
 }

 .scarcity--card-content {
  padding: 0 15px;
 }

 .scarcity--card-number {
  font-size: 2.5rem;
  text-align: center;
 }

 .scarcity--card-title {
  padding: 0px 2px 5px 2px;
  text-align: center;
  font-size: 1.2rem;
 }
}

@media (min-width: 992px) {
 .scarcity--card-content {
  padding: 0 15px;
 }

 .scarcity--card-number {
  font-size: 2.8rem;
  text-align: center;
 }

 .scarcity--card-title {
  padding: 5px 2px 10px 2px;
  text-align: center;
  font-size: 1.1rem;
 }
}

@media (min-width: 1200px) {
 .scarcity--card-title {
  padding: 5px 5px 10px 15px;
  text-align: center;
  font-size: 1.2rem;
 }
}

/* ========================= Water scarcity legend dots ========================= */
.ws-map--key {
 vertical-align: middle;
 text-align: center;
}

.ws-dot {
 height: 25px;
 width: 25px;
 border-radius: 50%;
 display: inline-block;
 line-height: 0.5rem;
}

.ws-dot--blue {
 background-color: var(--ws-normal);
}

.ws-dot--green {
 background-color: var(--ws-early);
}

.ws-dot--yellow {
 background-color: var(--ws-alert);
}

.ws-dot--orange {
 background-color: var(--ws-moderate);
}

.ws-dot--red {
 background-color: var(--ws-significant);
}

/* ========================= Water scarcity legend tables ========================= */
.ws-rectangle--blue {
 height: 50px;
 width: 100px;
 background-color: var(--ws-normal);
 margin-bottom: 5px;
}

.ws-rectangle--green {
 height: 50px;
 width: 100px;
 background-color: var(--ws-early);
 margin-bottom: 5px;
}

.ws-rectangle--yellow {
 height: 50px;
 width: 100px;
 background-color: var(--ws-alert);
 margin-bottom: 5px;
}

.ws-rectangle--orange {
 height: 50px;
 width: 100px;
 background-color: var(--ws-moderate);
 margin-bottom: 5px;
}

.ws-rectangle--red {
 height: 50px;
 width: 100px;
 background-color: var(--ws-significant);
 margin-bottom: 5px;
}

.ws-circle--very-high {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #335698;
 border: 1px solid #335698;
 margin-bottom: 5px;
}

.ws-circle--high {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #8ba4da;
 border: 1px solid #335698;
 margin-bottom: 5px;
}

.ws-circle--normal {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #e1efd8;
 border: 1px solid #b5c1ad;
 margin-bottom: 5px;
}

.ws-circle--low {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #f2b286;
 border: 1px solid #df6510;
 margin-bottom: 5px;
}

.ws-circle--very-low {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #df6510;
 border: 1px solid #df6510;
 margin-bottom: 5px;
}

.ws-flows--extremely {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #9e0203;
 border: 1px solid #9e0203;
 margin-bottom: 5px;
}

.ws-flows--very-low {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #e8650a;
 border: 1px solid #e8650a;
 margin-bottom: 5px;
}

.ws-flows--low {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #f5b383;
 border: 1px solid #f6ac76;
 margin-bottom: 5px;
}

.ws-flows--quite-low {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #fee497;
 border: 1px solid #fcdf88;
 margin-bottom: 5px;
}

.ws-flows--normal {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #aad190;
 border: 1px solid #9fd27c;
 margin-bottom: 5px;
}

.ws-flows--high {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #8fa8de;
 border: 1px solid #85a1df;
 margin-bottom: 5px;
}

.ws-flows--very-high {
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: #31519a;
 border: 1px solid #31519a;
 margin-bottom: 5px;
}