@import "/branding.css";

/* Breakpoints used in layouts
    xsmall: 326px;
    small:  576px;
    medium: 768px;
    large:  992px;
    xlarge: 1024px;
*/

:root {
    /* Font sizes based on standard browser font size of 16px. */
    --font-size-largest: 1.25rem;  /* 20px */
    --font-size-larger: 1.125rem;  /* 18px */
    --font-size-normal: 1rem;      /* 16px */
    --font-size-smaller: 0.875rem; /* 14px */
    --font-size-smallest: 0.75rem; /* 12px */
    /* Content margins */
    --content-spacing: 0.5rem;
    /* Grey colours */
    --colour_grey_dark: #404040;
    --colour_grey_medium: #707070;
    --colour_grey_light: #cccccc;
}

/* Reset all elements */
*, *::before, *::after {
    box-sizing: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 100vh;
    font-family: var(--brandGeneralFontFamily);
    font-size: var(--font-size-normal);
    background-color: var(--siteBgColour);
    box-sizing: border-box;
    line-height: 1.5em;
}

ol, ul {
    list-style: none;
}

ul {
    &.bullet-list {
        list-style: disc;
        margin-left: 2rem;
    }
}

a {
    color: var(--linkTextColour);
    font-weight: bold;
}

hr {
    border-width: 1px;
    border-style: inset;
}

summary {
    cursor: pointer;
}

input {
    font-family: inherit;
}

select {
    text-transform: none;
    word-wrap: normal;
    font-weight: bold;
}

thead {
    font-weight: bold;
}

/* Hide the up/down buttons in all date fields */
input[type="date"]::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
}

/* prevent wrapping at whitespace - used in spans for postcodes, telephone numbers etc */
.no-break {
    white-space: nowrap;
}

.disabled {
    pointer-events: none;
    cursor: default;
}

.show {
    display: block;
}

.hide {
    display: none;
}

/* Cookie consent screen overlay */
/* Take up full height & width over top of all other content (z-index = 999) */
#screen-overlay {
    z-index: 999;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: var(--overlayBackgroundColour);
    opacity: var(--overlayOpacity);
}

/* Display over top of overlay (z-index = 1000) */
#cookieConsentContainer {
    background-color: var(--cookieConsentBgColour);
    color: var(--cookieConsentTextColour);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--content-spacing);
    z-index: 1000;
    width: 100%;
    position: fixed;
    padding: 0.6rem;

    #cookieConsentButton {
        max-height: 3rem;
        margin: var(--content-spacing);
    }

    .cookieConsentText {
        margin: var(--content-spacing);
    }

    a {
        color: var(--cookieConsentLinkColour);
        cursor: pointer;
    }

    .btn-secondary {
        color: var(--btnTextColour);
    }
}

@media screen and (min-width: 576px) {
    #cookieConsentContainer {
        flex-direction: row;
    }
}

#bodyContent {
    position: relative;
    width: 100%;
    flex: 1 0 auto;
}

#mainContent {
    margin: 0.3rem;
}

#helpContent {
    margin: 0.3rem;

    details:last-child {
        margin-bottom: 0;
    }
}

#threeDsWindow {
    height: 400px;
    width: 100%;
}

/* breakpoint-medium */
@media only screen and (min-width: 768px) {
    #bodyContent.unauthenticated {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1px 2fr 1fr;

        & > #navContent {
            -ms-grid-column: 1;
            grid-column: 1;
        }

        & > #mainContent {
            -ms-grid-column: 2;
            grid-column: 2;
            margin: 0.6rem 0.3rem;
        }

        & > #helpContent {
            -ms-grid-column: 3;
            grid-column: 3;
            margin: 0.6rem 0.3rem;
        }
    }

    #bodyContent.customer-layout {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1px 2fr 1fr;

        & > #navContent {
            -ms-grid-column: 1;
            grid-column: 1;
        }

        & > #mainContent {
            -ms-grid-column: 2;
            grid-column: 2;
            margin: 0.6rem 0.3rem;
        }

        & > #helpContent {
            -ms-grid-column: 3;
            grid-column: 3;
            margin: 0.6rem 0.3rem;
        }
    }

    #bodyContent.account-layout {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 2fr;

        & > #navContent {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            grid-column: 1;
            grid-row: 1 / span 2;
            margin: 0.6rem 0.3rem;
        }

        & > #mainContent {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            grid-column: 2;
            grid-row: 1;
            margin: 0.6rem 0.3rem;
        }

        & > #helpContent {
            -ms-grid-column: 2;
            -ms-grid-row: 2;
            grid-column: 2;
            grid-row: 2;
            margin: 0.6rem 0.3rem;
        }
    }

    #threeDsWindow {
        height: 400px;
        width: 100%;
    }
}

/* breakpoint-large */
@media only screen and (min-width: 992px) {

    #bodyContent.unauthenticated {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 4fr 2fr 1fr;

        & > #navContent {
            -ms-grid-column: 1;
            grid-column: 1;
        }

        & > #mainContent {
            -ms-grid-column: 2;
            grid-column: 2;
        }

        & > #helpContent {
            -ms-grid-column: 3;
            grid-column: 3;
        }
    }

    #bodyContent.customer-layout {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 4fr 2fr 1fr;

        & > #navContent {
            -ms-grid-column: 1;
            grid-column: 1;
        }

        & > #mainContent {
            -ms-grid-column: 2;
            grid-column: 2;
        }

        & > #helpContent {
            -ms-grid-column: 3;
            grid-column: 3;
        }
    }

    #bodyContent.account-layout {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;

        & > #navContent {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            grid-column: 1;
            grid-row: 1;
        }

        & > #mainContent {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            grid-column: 2;
            grid-row: 1;
        }

        & > #helpContent {
            -ms-grid-column: 3;
            -ms-grid-row: 1;
            grid-column: 3;
            grid-row: 1;
        }
    }

    #threeDsWindow {
        height: 600px;
        width: 500px;
    }
}

/* Header */
#pageHeader {
    width: 100%;
    min-height: 2rem;
    background-color: var(--bannerBgColour);
}

#banner {
    text-align: var(--bannerLogoPosition);

    img {
        margin: var(--content-spacing);
        margin-bottom: 0;
        max-height: var(--bannerLogoMaxHeight);
        max-width: 100%;
    }
}

/* Footer */
#pageFooter {
    flex-shrink: 0;
    text-align: var(--footerAlignment);
    line-height: 1rem;
    padding: var(--content-spacing);
    color: var(--footerTextColour);
    background-color: var(--footerBgColour);
    border-top: var(--footerTopBorder);

    ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.3rem;

        li {
            font-size: var(--font-size-smaller);
            width: auto;
            padding-bottom: 0.6rem;
        }


        a {
            color: var(--footerTextColour);
            text-decoration: none;

        }
    }

    p {
        font-size: var(--font-size-smallest);
        margin-bottom: 0.3rem;
    }
}

/* breakpoint-medium */
@media only screen and (min-width: 768px) {
    #pageFooter {
        ul {
            flex-direction: row;
            margin-bottom: 0.6rem;
            justify-content: var(--footerAlignment);

            li {
                padding-right: var(--content-spacing);
                padding-bottom: 0;

                a {
                    text-decoration: underline;
                }
            }

            li + li {
                padding-left: var(--content-spacing);
                border-left: var(--footerSeparator);
            }
        }
    }
}

/* Site map */
#sitemap {
    padding: var(--content-spacing);

    .sitemap-section {
        font-weight: bold;
        color: var(--brandColourPrimary);
        padding-bottom: 0.8em
    }

    .sitemap-link {
        font-size: 1rem;
        font-weight: normal;
        padding-left: 1rem;
    }
}

/* Navigation */
#siteNav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-around;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background-color: var(--navbarBgColour);
    border-bottom: var(--navbarBottomBorder);

    > li {
        width: 30%;
    }
}

.menu-container {
    display: block;
    text-align: center;

    > a {
        border: none;
        background-color: var(--navbarBgColour);
        color: var(--navbarTextColour);
        font-size: var(--navbarFontSize);
        font-weight: var(--navbarFontWeight);
        line-height: normal;
        text-transform: var(--navbarTextTransform);

        span {
            display: block;
            cursor: pointer;
        }

        svg {
            height: 1.4rem;
            width: 1.4rem;
        }
    }
}

/* Position menus below the menu bar visually hidden */
.nav-menu {
    display: block;
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
    margin-left: 5%;
    left: 0;
    z-index: 2;
    text-align: center;
    background-color: var(--navMenuBgColour);
    border: var(--navMenuBorder);
    border-radius: var(--navMenuBorderRadius);
    box-shadow: var(--navMenuShadow);
    margin-top: 0.8rem;

    a {
        text-decoration: none;
        color: var(--navMenuTextColour);
        font-weight: normal;
        text-transform: var(--navMenuTextTransform);
        display: block;
        width: 100%;
        padding: var(--content-spacing) var(--content-spacing) var(--content-spacing) 0;
    }

    & a:hover {
        background-color: var(--menuItemHoverColour);
    }

    .menu-separator {
        border-top: solid var(--menuDividerWidth) var(--menuDividerColour);
    }

    h4 {
        background-color: var(--menuTitleBgColour);
        color: var(--menuTitleTextColour);
        border-top: solid var(--menuDividerWidth) var(--menuDividerColour);
        font-size: var(--font-size-normal);
        font-weight: bold;
        padding: var(--content-spacing);
        text-transform: var(--menuTitleTextTransform);
    }
}

#accountHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--accountHeaderBgColour);

    & > div {
        color: var(--accountHeaderTextColour);
        padding: var(--content-spacing);

        & > span:first-child {
            font-weight: bold;
        }
    }
}

#accountNav {
    min-width: 6rem;
    margin-right: 0.3rem;

    span {
        color: var(--accountHeaderTextColour);
        font-size: var(--font-size-smallest);
    }
}

#accountNavButton svg {
    height: 2em;
    width: 2em;
    margin: 0.6rem;
    margin-bottom: 0.2rem;

    path {
        fill: var(--accountHeaderTextColour);
    }
}

/* 
Reveal a menu when it's button has focus
Or any of the links within the menu have focus
Or class added by javascript for IE polyfill
*/
#siteNav > li > div > a:focus ~ ul,
#siteNav > li:focus-within > div > ul,
#accountNav > a:focus ~ ul,
#accountNav:focus-within > ul,
.menu-revealed {
    clip: auto;
    clip-path: none;
    height: auto;
    overflow: auto;
    white-space: inherit;
}

/* breakpoint-medium */
@media only screen and (min-width: 768px) {
    /* Menus relative to their position in the menu bar */
    #contactNav, #profileNav, #accountsNav {
        position: relative;
    }
    /* Width relative to parent nav bar item*/
    .nav-menu {
        width: 100%;
        margin-left: 0;
    }

    #accountHeader {
        justify-content: flex-start;
        border: var(--panelBorder);
        border-bottom: none;
        border-radius: var(--panelBorderRadius);
        border-bottom-left-radius: 0px;
        margin: 0.4rem;
        margin-bottom: 0px;
    }

    #accountHeaderAddress {
        display: inline;
    }

    #accountNav {
        min-width: 1px;
    }

    /* Hide the button from the banner */
    #accountNavButton {
        visibility: hidden;
        position: relative;
    }

    /* Make the account menu visible and positioned over the left hand column */
    #accountMenu {
        clip: auto;
        clip-path: none;
        height: auto;
        overflow: auto;
        white-space: inherit;
        border: var(--panelBorder);
        background-color: var(--panelBgColour);
        width: 32%;
        margin: 0;
        z-index: 1;
        left: 0.4rem;
        margin-top: 0;
        text-align: left;
        padding: 0;
        box-shadow: none;
        border-top: none;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

        #accountMenu a {
            padding-left: 1rem;
        }

        #accountMenu h4 {
            border-top: none;
        }
}

/* breakpoint-large */
@media only screen and (min-width: 992px) {

    /* Remove the jump to Contact Details menu item on large view */
    #contactMenu {
        .menu-separator {
            display: none;
        }

        a[href="#contactDetails"] {
            display: none;
        }
    }

    #accountMenu {
        width: 24%;
    }
}

/* Help section */
.help-item {
    border: var(--panelBorder);
    border-radius: var(--panelBorderRadius);
    background-color: var(--helpBgColour);
    overflow: hidden;
    margin-bottom: var(--content-spacing);

    summary {
        background-color: var(--helpHeaderBgColour);
        color: var(--helpHeaderTextColour);
        padding: var(--content-spacing);
    }

    > div {
        padding: var(--content-spacing);
    }
}

/* Contact details panel */
#contactDetails {
    border: var(--panelBorder);
    border-radius: var(--panelBorderRadius);
    background-color: var(--panelBgColour);
    margin-bottom: 0.6rem;
    overflow: hidden; /* prevent background colour from overlapping rounded borders */
    summary {
        background-color: var(--contactHeaderBgColour);
        color: var(--contactHeaderTextColour);
        font-weight: bold;
        font-size: var(--font-size-larger);
        padding: var(--content-spacing);
    }

    > div {
        text-align: center;
        padding: var(--content-spacing);
        border-top: solid 1px black;
    }

    .phone-number-link {
        background-color: var(--contactPhoneNumberLinkBgColour);
        color: var(--contactPhoneNumberLinkColour);
        padding: 6px;
        border-radius: var(--contactPhoneNumberRadius);
        text-decoration: none;
    }

    svg {
        width: 0.8rem;
        height: 0.8rem;
        padding-right: 0.3rem;
    }

    table {
        width: 100%;
        margin-top: var(--content-spacing);

        .opening-day {
            max-width: 35%;
            font-weight: bold;
        }

        .opening-hour-start,
        .opening-hour-end {
            max-width: 31%;
        }

        .opening-hour-separator {
            max-width: 3%;
        }
    }
}

#jumpToMain {
    position: absolute;
    z-index: 1;
    color: var(--brandColourFontNormal);
    background-color: var(--brandColourPanelBg);
    padding: var(--content-spacing);
}

    #jumpToMain:not(:focus) {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
    }

#mainContent {
    hr {
        margin-top: unset;
        margin-bottom: unset;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

#contentHeader {
    h1 {
        color: var(--brandColourPrimary);
        font-weight: bold;
        font-size: var(--font-size-largest);
        margin-bottom: var(--content-spacing);
    }
}

.content-panel {
    border: var(--panelBorder);
    border-radius: var(--panelBorderRadius);
    background-color: var(--panelBgColour);
    padding: var(--content-spacing);
}

.service-announcement {
    border: var(--panelBorder);
    border-radius: var(--panelBorderRadius);
    background-color: var(--panelBgColour);
    margin-bottom: var(--content-spacing);
    overflow: hidden;

    h1 {
        background-color: var(--announcementHeadingBgColour);
        color: var(--announcementHeadingTextColour);
        font-size: var(--font-size-largest);
        padding: var(--content-spacing);
    }

    div {
        padding: var(--content-spacing);
    }
}


.supplementary-text {
    padding: var(--content-spacing);

    > p {
        margin-bottom: 0.6rem;

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

.secondary-text {
    margin: var(--content-spacing);
}

.required-text {
    display: block;
    margin: var(--content-spacing);
    font-weight: 600;
    font-size: var(--font-size-smaller);
    color: grey;

    &::before {
        content: "*";
        color: #ff0000;
        font-weight: 600;
    }
}

.section-title {
    color: var(--brandColourPrimary);
    font-size: var(--font-size-larger);
    font-weight: var(--brandTitleFontWeight);
    margin-top: 0.6rem;
}

.warning-text {
    color: red;
    font-weight: bold;
}

/* User Journey Progress bar */
#progressBar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: var(--content-spacing);

    li {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}

.context-assistance {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.step-indicator {
    text-align: center;
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    margin-left: auto;
    margin-right: auto;
    border: var(--stepIndicatorBorderWidth) var(--stepCurrentBorderColour) solid;
    border-radius: var(--stepIndicatorRadius);
    color: var(--stepDefaultTextColour);
    background-color: var(--stepDefaultBgColour);
    font-size: var(--font-size-larger);
}

.step-label {
    text-align: center;
    font-size: var(--font-size-smallest);
    line-height: 1rem;
    padding: 0.3rem;
}

.current-step {

    .step-indicator {
        background-color: var(--stepCurrentBgColour);
        color: var(--stepCurrentTextColour);
        border-color: var(--stepCurrentBorderColour);
    }

    .step-label {
        font-weight: bold;
    }
}

.completed-step {
    .step-indicator {
        background-color: var(--stepCompleteBgColour);
        color: var(--stepCompleteTextColour);
        border-color: var(--stepCompleteBorderColour);
    }
}

.incomplete-step {
    .step-indicator {
        background-color: var(--stepIncompleteBgColour);
        color: var(--stepIncompleteTextColour);
        border-color: var(--stepIncompleteBorderColour);
    }
}

.disabled-step {
    .step-indicator {
        background-color: var(--stepDisabledBgColour);
        color: var(--stepDisabledTextColour);
        border-color: var(--stepDisabledBorderColour);
    }
}

/* Form inputs */
.field-container {
    margin: var(--content-spacing);

    label, .field-label {
        display: block;
        margin-top: 0.6rem;
        color: var(--inputLabelColour);

        &.required:after {
            content: " *";
            color: var(--brandColourError)
        }
    }

        label.selectableInput {
            margin-top: 0px;
        }

    .field-hint {
        color: var(--inputHintColour);
    }

    .form-input {
        line-height: 1.5rem;
        position: relative;

        input {
            border: var(--inputBorder);
            border-radius: var(--inputBorderRadius);
            min-height: 3rem;
            height: 3rem;
            width: 100%;
            padding-left: var(--content-spacing);
            font-weight: bold;

            &:disabled {
                border-style: dashed;
            }

            &:not([disabled]):focus {
                border-width: 2px;
                border-color: var(--brandColourPrimary);
                outline-color: var(--brandColourPrimary);
            }

            &:not([disabled]):hover {
                border-width: 2px;
            }

            &::placeholder {
                color: var(--inputPlaceholderColour);
            }
        }

        .input-small {
            width: 50%;
        }

        .input-otp {
            width: 7rem;
        }

        .input-prefix {
            position: absolute;
            display: block;
            transform: translate(0.5rem, -50%);
            top: 50%;
            pointer-events: none;
            text-align: center;
            font-weight: bold;
        }

        span.input-prefix ~ input {
            padding-left: 1.3rem;
        }
    }

    .field-validation-valid {
        display: none;
    }

    .field-validation-error {
        line-height: 1.5rem;
        margin-top: 0.3rem;
        padding: 0.6rem;
        border: 1px solid var(--brandColourError);
        border-radius: var(--inputBorderRadius);
        background-color: rgb(255 0 0 / 0.1);
        color: var(--brandColourError);
    }

    .otp-resend {
        display: flex;
        flex-direction: row;
        gap: var(--content-spacing);
    }

    .cc-input-field-icon {
        width: 3.5rem;
        position: absolute;
        transform: translate(-4rem, -50%);
        top: 50%;
    }

    /* Check boxes */
    .checkbox-input {
        border: 1px solid var(--colour_grey_medium);
        border-radius: var(--inputBorderRadius);
        padding: 10px;
        cursor: pointer;
        min-height: 48px;
        vertical-align: middle;
        position: relative;
        z-index: 0;
        /* background div positioned "behind" the checkbox container */
        > .checkbox-background {
            position: absolute;
            z-index: -1;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border-radius: inherit;
        }

        &:hover {
            background-color: var(--brandColourHover);
            border-color: var(--brandColourSecondary);
        }

        input {
            margin-right: var(--content-spacing);

            &:checked {

                ~ .checkbox-background {
                    background-color: var(--brandColourPrimary);
                }

                ~ span {
                    color: var(--brandColourFontInverse);
                    font-weight: var(--btnPrimaryFontWeight);
                }
            }
        }
    }
    /* Radio buttons */
    .radio-group {
        .radio-option {
            border: 1px solid var(--colour_grey_medium);
            border-radius: var(--inputBorderRadius);
            padding: 10px;
            cursor: pointer;
            min-height: 48px;
            vertical-align: middle;
            position: relative;
            z-index: 0;
            /* background div positioned absolutely "behind" the radio option container */
            > .radio-background {
                position: absolute;
                z-index: -1;
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                border-radius: inherit;
            }

            &:hover {
                background-color: var(--brandColourHover);
                border-color: var(--brandColourSecondary);
            }

            input {
                margin-right: var(--content-spacing);
                height: 1.1rem;
                width: 1.1rem;
                vertical-align: text-bottom;

                &:checked {

                    ~ .radio-background {
                        background-color: var(--brandColourPrimary);
                    }

                    ~ span {
                        color: var(--brandColourFontInverse);
                        font-weight: var(--btnPrimaryFontWeight);
                    }
                }
            }
        }
    }
    /* Other selects */
    .selectableInput-container {
        display: flex;
        flex-direction: column;

        .selectableInput {
            border: 1px solid var(--colour_grey_medium);
            border-radius: var(--inputBorderRadius);
            padding: 10px;
            cursor: pointer;
            display: flex;
            position: relative;
            z-index: 0;
            user-select: none;
            min-height: 48px;
            vertical-align: middle;

            &:nth-child(n + 2) {
                margin-top: 10px;
            }

            &:hover {
                background-color: var(--brandColourHover);
                border-color: var(--brandColourSecondary);
            }

            .selectableInputBg {
                background-color: var(--brandColourPrimary);
                position: absolute;
                z-index: -1;
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                border-radius: inherit;
                display: none;
            }

            .selectableInput-input {
                position: relative;
                top: 4px;
                cursor: inherit;
                height: 18px;
                width: 36px;
                margin-right: 6px;

                &:checked {
                    ~ .selectableInputBg {
                        display: block;
                    }

                    ~ span {
                        color: var(--brandColourFontInverse);
                        font-weight: var(--btnPrimaryFontWeight);
                    }
                }
            }

            span {
                color: var(--brandColourFontNormal);
                margin-top: 3px;
            }
        }
    }
}

/* breakpoint-medium */
@media only screen and (min-width: 768px) {
    .field-container {
        .form-input {
            .input-small {
                width: 25%;
            }

            .input-medium {
                width: 50%;
            }
        }
    }
}

/* Support for old-style inputs */
.input-block {
    .input-container {
        background-color: #f0f0f0;
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: center;
        border: var(--inputBorder);
        border-radius: var(--inputBorderRadius);
        min-height: 3rem;
        height: 3rem;

        .input-field {
            font-weight: 600;
        }

        &:focus-within {
            border-width: 2px;
            border-color: var(--brandColourPrimary);
        }

        &.readonly {
            border-width: 1px !important;
            border-style: dashed !important;

            .input-field {
                cursor: default;
                user-select: none;
            }

            [readonly] {
                user-select: none;
            }
        }

        &:hover {
            border-width: 2px;
        }

        &.field-type-base {

            &.field-type-cc {
                width: 230px;
            }

            &.field-type-date {
                width: 80px;
            }

            &.field-type-ccv {
                width: 50px;

                .input-field {
                    text-align: center;
                }
            }

            &.field-type-postcode {
                width: 90px;
            }

            &.field-type-halfSize {
                width: 170px;
            }

            &.field-type-quarterSize {
                width: 85px;
            }

            .input-field {
                width: 100%;
                padding-right: 10px !important;
            }
        }

        &.has-prefix {

            .input-prefix {
                padding-right: 5px;
            }

            .input-field {
                padding-left: 5px;
            }
        }

        &.has-suffix {

            .input-field {
                padding-right: 39px;
            }

            .input-suffix {
                padding-left: 5px;
            }
        }

        .input-prefix,
        .input-field,
        .input-suffix {
            display: inline-block;
            padding: 0 10px;
            margin: 0;
            font-size: inherit;
        }

        .input-prefix {
            flex: none;
        }

        .input-field {
            flex: auto;
            border: none;
            border-radius: 4px;
            width: 100%;
            height: 100%;

            &:focus {
                outline-color: var(--brandColourPrimary);
            }

            &::placeholder {
                color: var(--inputPlaceholderColour);
            }
        }

        .input-suffix {
            flex: none;
        }
    }
}

/* Form level validation summary */
.validation-summary {
    display: flex;
    margin-top: 0.6rem;
    padding: 1rem 0.6rem;
    border: 1px solid var(--brandColourError);
    border-radius: var(--brandBorderRadius);
    line-height: 1.125rem;
    background-color: rgb(255 0 0 / 0.1);
    color: var(--brandColourError);

    .validation-summary-content-container {
        margin-left: 0.6rem;

        p:nth-last-of-type(n+2) {
            /* target all P elements except the last one.*/
            margin-bottom: 0.6rem;
        }
    }

    .validation-summary-errors {
        padding: 0 0.6rem;
    }
}
/* Feedback banners */
.notification-banner {
    padding: 0.6rem;
    line-height: 1.3rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;

    &.success {
        background-color: var(--notificationBgColourSuccess);
        color: var(--notificationColourSuccess);
    }

    &.warn {
        background-color: var(--notificationBgColourWarning);
        color: var(--notificationColourWarning);
    }

    &.failure {
        background-color: var(--notificationBgColourFailure);
        color: var(--notificationColourFailure);
    }

    &.info {
        background-color: var(--notificationBgColourInfo);
        color: var(--notificationColourInfo);
    }

    & > p {
        margin-bottom: 0.6rem;
    }

        & > p:last-of-type {
            margin-bottom: 0;
        }
}
/* Action button containers */
.one-button-cta-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--content-spacing);

    .button + .button {
        margin-top: 0.6rem;
    }
}

.two-button-cta-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--content-spacing);

    .button + .button {
        margin-top: 0.6rem;
    }
}

.multi-button-cta-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--content-spacing);

    .button + .button {
        margin-top: 0.6rem;
    }
}
/* breakpoint-medium */
@media only screen and (min-width: 768px) {
    .one-button-cta-container {
        flex-direction: column;
        align-items: baseline;

        .button + .button {
            margin-top: inherit;
        }
    }

    .two-button-cta-container {
        flex-direction: row-reverse;
        gap: var(--content-spacing);

        .button + .button {
            margin-top: inherit;
        }
    }

    .multi-button-cta-container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        flex-wrap: wrap;

        .button + .button {
            margin-top: inherit;
            margin-right: 2rem;
        }
    }
}
/* Action buttons */
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-normal);
    text-decoration: none;
    height: 3rem;
    line-height: 1.5rem;
    font-weight: var(--btnFontWeight);
    cursor: pointer;
    color: var(--btnTextColour);
    background-color: var(--btnBgColour);
    border: var(--btnBorder);
    border-radius: var(--btnBorderRadius);
    padding: 12px 16px 12px 16px;

    svg {
        height: 1em;
        width: 1em;
        margin-right: 0.5em;

        path {
            fill: var(--btnPrimaryTextColour);
        }
    }

    .right {
        margin-left: 0.5em;
    }

    .left {
        margin-right: 0.5em;
    }

    &:hover {
        background-color: var(--btnHoverColour);
    }
}

.left-icon-margin {
    margin-right: 0.6rem;
}

.right-icon-margin {
    margin-left: 0.6rem;
}

.button-image {
    padding: 0.8rem 0.6rem 0.8rem 1.2rem;
}

.btn-primary {
    color: var(--btnPrimaryTextColour);
    background: var(--btnPrimaryBgColour);

    svg {
        path {
            fill: var(--btnPrimaryTextColour);
        }
    }

    &:hover {
        background-color: var(--btnPrimaryHoverColour);
    }

    &:disabled {
        background-color: var(--colour_grey_light);
        cursor: not-allowed;
    }
}

.smallLinkText {
    font-size: var(--font-size-smallest);
}
/* Mortgage Notifications */
.mortgage-notification {
    padding: var(--content-spacing);
    background-color: var(--notificationBgColourWarning);
    color: var(--notificationColourWarning);
}

.mortgageNotificationTitle {
    font-weight: bold;
}
/* Account List View */
#accountList {
    a {
        text-decoration: none;
    }
}

.account-link-container {
    border: solid 1px var(--brandColourPrimary);
    border-radius: var(--brandBorderRadius);
    background-color: var(--brandColourPanelBg);
    color: var(--brandColourPrimary);
    overflow: hidden;
    margin: 0.6rem;
    padding: 0.4rem;
}

    .account-link-container a {
        color: var(--brandColourFontNormal);
        font-weight: normal;
    }

.account-link-title {
    display: inline-block;
    color: var(--brandColourPrimary);
    font-weight: bold;
}

.account-link {
    display: inline-block;
    color: var(--brandColourFontNormal);
    font-weight: normal;
}

.account-details-section {
    width: 95%;
    display: inline-block;
}

.mortgage-card-container {
    border: solid 1px var(--brandColourPrimary);
    border-radius: var(--brandBorderRadius);
    background-color: var(--brandColourPanelBg);
    overflow: hidden;
    margin: 0.6rem;
    padding: var(--content-spacing);

    .mortgage-card-header {
        color: var(--brandColourPrimary);
        font-weight: bold;
    }

    .mortgage-card-body {
        font-weight: normal;
        color: var(--brandColourFontNormal);
    }

    .account-details-notification {
        width: 5%;
        display: inline-block;
        float: right;
        text-align: right;
    }
}
/* Account Summary View */
#mortgageSummary {
    margin-left: -0.5rem;
    margin-right: -0.5rem;

    hr {
        margin-left: 0;
        margin-right: 0;
    }
}

#dd-details {
    margin-top: 0.8rem;
}

#paymentAction {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: var(--content-spacing);
    /* Ensure space below text when action button wraps below */
    > div {
        margin-bottom: var(--content-spacing);
    }
}

#summaryBalances {
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin: var(--content-spacing);

    > div {
        flex: 1;
    }

    span {
        display: block;
    }

    .amt-due {
        font-size: var(--font-size-larger);
        margin-left: var(--content-spacing);
        font-weight: bold;
    }
}

#lastPayment {
    margin: var(--content-spacing);

    td {
        padding-left: var(--content-spacing);
    }

    .recent-payment-right {
        text-align: right;
    }
}

#mortgageAccounts {
    > h2 {
        background-color: var(--sectionTitleBgColour);
        color: var(--sectionTitleColour);
        font-size: var(--font-size-smaller);
        font-weight: normal;
        padding: 0.4rem 0.5rem;
        margin: 0;
    }

    .mortgage-account {
        border-bottom: var(--panelBorder);
        padding: var(--content-spacing);

        span {
            display: block;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    .account-header {
        width: calc(100% - 20px);
        display: inline-flex;
        justify-content: space-between;
    }

    .account-value-with-annotation {
        width: 100%;
        display: flex;
        justify-content: space-between;
        column-gap: 2rem;
    }

    .account-value-annotation {
        font-size: var(--font-size-smallest);
    }
}

/* these are used in more places than the account summary */
.account-label {
    font-size: var(--font-size-smaller);
    margin-top: var(--content-spacing)
}

.account-value,
.readonly-field.text {
    margin-left: var(--content-spacing);
    white-space: nowrap;
}

.readonly-field.text {
    font-weight: bold;
}

/* Common styles for displaying a label and bold value */
.property-display {
    padding: var(--content-spacing);
    padding-bottom: 0;
}
.property-value {
    margin-left: 1rem;
    font-weight: bold;
    display: flex
}
.card-type-icon {
    width: 2.4rem;
    vertical-align: middle;
}

/* Secure Messaging */
.message-thread {
    border: var(--panelBorder);
    border-radius: var(--panelBorderRadius);
    background-color: var(--panelBgColour);
    overflow: hidden;
    margin-bottom: 0.6rem;
    width: 100%;

    summary {
        background-color: var(--sectionTitleBgColour);
        color: var(--sectionTitleColour);
        padding: var(--content-spacing);
        font-weight: bold;
    }
}

.thread-date {
    float: right;
}

.thread-link {
    text-decoration: none;
    font-weight: normal;
}

.message-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: var(--brandColourPrimary);
}

.message-summary {
    text-decoration: none;
    font-weight: normal;
    padding: var(--content-spacing);
    color: var(--sectionTitleColour);
}

.message-body {
    padding: 0.2rem var(--content-spacing);
    color: var(--brandColourFontNormal);

    &.unread {
        font-weight: bold;
    }
}

.message-summary > a:hover {
    background-color: red;
}

.thread-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
    background-color: var(--sectionTitleBgColour);
    color: var(--sectionTitleColour);
    font-weight: bold;
    padding: var(--content-spacing);
}

.message-content {
    margin: 0.3rem;
    font-family: inherit;
    white-space: pre-wrap;
    color: var(--brandColourFontNormal);
}

.no-reply {
    font-style: italic;
}

.thread-list li {
    padding-top: 0.3rem;

    &:nth-child(even) {
        background: var(--siteBgColour);
        border-top: 1px dashed black;
    }
}

.message-reason {
    font-weight: bold;
}

.message-detail {
    padding: var(--content-spacing);
}

.input-container.triple-height {
    height: 144px;

    textarea {
        font-family: inherit;
        resize: none;
    }
}

.message-review-container {
    border: var(--panelBorder);
    margin: var(--content-spacing);
    border-radius: var(--panelBorderRadius);
}

.thread-content {
    margin: var(--content-spacing) 0;
    border: var(--panelBorder);
    border-radius: var(--panelBorderRadius);
}
/* Registration */
.terms-info {
    display: block;
    margin: var(--content-spacing);
}

.passcode-index {
    padding-right: var(--content-spacing);
    margin-left: 1rem;
}

@media screen and (max-width: 768px) {
    .passcode-index:first-of-type {
        margin-left: 0;
    }
}

#passcodeInput {
    margin-left: -0.6rem;
    margin-right: -0.6rem;
}

.passcode-input {
    border: var(--inputBorder);
    border-radius: var(--inputBorderRadius);
    min-height: 3rem;
    height: 3rem;
    width: 2.8rem;
    padding-left: 0.8rem;

    &:focus-within {
        border-width: 2px;
        border-color: var(--brandColourPrimary);
    }

    &:focus {
        outline-color: transparent;
    }
}

@media screen and (min-width: 326px) {
    #passcodeInput {
        margin-left: 0;
        margin-right: 0;
    }
}

.complexity-rules {
    margin: 1rem;

    svg {
        height: 12px;
        margin-right: 0.8em;
    }

    li {
        font-size: var(--font-size-smaller);
    }

        li.valid {
            color: var(--brandColourSuccess);

            svg {
                path {
                    fill: var(--brandColourSuccess);
                }
            }
        }

        li.invalid {
            color: var(--brandColourError);

            svg {
                path {
                    fill: var(--brandColourError);
                }
            }
        }
}
/* Miscellaneous */
.balance-amt {
    font-weight: bold;
}

.balance-red-est {
    font-size: var(--font-size-largest);
    font-weight: bold;
    margin-left: var(--content-spacing);
}

.rate-change {
    h2 {
        background-color: var(--sectionTitleBgColour);
        color: var(--sectionTitleColour);
        padding: var(--content-spacing);
        margin-left: calc(var(--content-spacing)*-1);
        margin-right: calc(var(--content-spacing)*-1);
        font-weight: normal;
    }

    table {
        width: 100%;

        td{
            text-align:center;
        }
    }
}

.repayment-detail-value {
    margin: 0.3rem;
    font-family: inherit;
    white-space: pre-wrap;
    color: var(--brandColourFontNormal);
    max-height: 0.8rem;
}