@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;
    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: 10px;
    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;
    }
}

@media (min-width: 768px) {

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

.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 {
        width: 100%;
    }
}

@media (min-width: 576px) {

    .btn-outline-primary,
    .btn-outline-floodline {
        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: 0 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: 0 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;
}

/* ========================= 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;
}

/* ========================= 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;
}

/* ========================= Date picker ========================= */
.datepicker td,
.datepicker th {
    width: 35px;
    height: 30px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background-color: var(--scottish-teal);
    background-image: -moz-linear-gradient(to bottom, #016574, #016574);
    background-image: -ms-linear-gradient(to bottom, #016574, #016574);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#016574), to(#016574));
    background-image: -webkit-linear-gradient(to bottom, #016574, #016574);
    background-image: -o-linear-gradient(to bottom, #016574, #016574);
    background-image: linear-gradient(to bottom, #016574, #016574);
    color: #ffffff !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
    background-color: var(--verdant-green);
    background-image: -moz-linear-gradient(to bottom, #40c47b, #40c47b);
    background-image: -ms-linear-gradient(to bottom, #40c47b, #40c47b);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#40c47b), to(#40c47b));
    background-image: -webkit-linear-gradient(to bottom, #40c47b, #40c47b);
    background-image: -o-linear-gradient(to bottom, #40c47b, #40c47b);
    background-image: linear-gradient(to bottom, #40c47b, #40c47b);
    color: #000000 !important;
}

/* ========================= 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;
}

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

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

@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) {
    .topics_az-list {
        padding-left: 50px;
    }

    .card--filters {
        border: none;
    }

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

/* ========================= 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;
}

/* ========================= 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 ========================= */
.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;
}

/* ========================= 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: 20px;
}

.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);
}

/* ========================= 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;
}

/* ========================= 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);
}

.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: calc(var(--space-2) * -2);
}

.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: 1px 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 ========================= */
.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%;
    }
}

/* ========================= 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;
}