html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.hide-loading-banner ~ .loading-banner {
    display: none !important;
}

.ted-btn {
    width: fit-content;
}

.ted-alert .mud-alert-icon {
    align-items: center !important;
}

.custom-app-bar {
    background-color: #FFF;
    border-bottom: 1px solid var(--mud-palette-primary);
}

.header-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.logo-wrapper {
    align-items: center;
}

.tenant-logo {
    width: 211px;
    height: auto;
}

@media (max-width: 600px) {
    .tenant-logo {
        width: 170px;
    }
}

h2,
h2.mud-typography-h2 {
    font-size: 32px;
}

@media (max-width: 960px) {
    h2,
    h2.mud-typography-h2 {
        font-size: 28px;
    }
}

@media (max-width: 600px) {
    h2,
    h2.mud-typography-h2 {
        font-size: 24px;
    }
}

.logo {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    background-color: white;
}

.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.download-btn .mud-button-icon-start {
    margin-right: 0;
}

.bg-grey-lighten-4 {
    background-color: #f5f5f5;
}

@media (max-width: 599px) {
    .ted-btn {
        width: 100%;
    }

    .mobile-title {
        font-size: 24px !important;
    }

    .download-btn {
        min-width: 0;
        padding: 4px;
    }
}

@media (min-width: 600px) {
    .mobile-title-icon {
        font-size: 50px;
    }

    .download-btn .mud-button-icon-start {
        margin-right: 8px;
    }
}

.mud-sm-table .mud-table-cell:before {
    font-weight: 700!important;
}

.mud-carousel-item.mud-carousel-item-tertiary {
    color: var(--mud-palette-text-primary);
}

/* "Change Payment Details" dialog. Styled globally (not the component's scoped CSS) because
   DialogService renders the dialog outside the component's scoped-CSS reach — scoped rules on the
   dialog content/chrome silently don't apply. */

.change-payment-method-dialog {
    border-radius: 10px;
    overflow: hidden;
}

.change-payment-method-dialog .mud-dialog-title {
    padding: 0;
}

.change-payment-method-dialog .mud-dialog-content {
    padding: 20px 24px;
}

.change-payment-method-dialog .cpm-policy-summary {
    padding-bottom: 12px;
    border-bottom: 1px solid #ededed;
}

.change-payment-method-dialog .mud-step.active .mud-step-label-content-title {
    font-weight: 700;
}

@media (max-width: 599px) {
    .change-payment-method-dialog .mud-step:not(.active) .mud-step-label-content {
        display: none;
    }

    .change-payment-method-dialog .mud-step-label-content-title {
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* Direct Debit "Update details" step. These classes sit on MudBlazor components (MudPaper,
   MudText, MudButton), which scoped CSS does not tag, so the rules must be global and are keyed
   off the dialog class like the rest of this section. */

/* Current method: label on the left, provider logo + masked details on the far right. */
.change-payment-method-dialog .cpm-current-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    border-radius: 8px;
}

.change-payment-method-dialog .cpm-current-method__label {
    color: #6b6b6b;
}

.change-payment-method-dialog .cpm-current-method__value {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Both halves are short and never wrap on their own, so force them to stack (details underneath
   the label) on small screens instead of sitting cramped side by side. */
@media (max-width: 599px) {
    .change-payment-method-dialog .cpm-current-method {
        flex-direction: column;
        align-items: flex-start;
    }
}

.change-payment-method-dialog .cpm-section-label {
    display: block;
    color: #6b6b6b;
    letter-spacing: 0.08em;
    /* A touch larger than the field labels below it so the section reads as a heading. */
    font-size: 0.9rem;
}

.change-payment-method-dialog .cpm-field {
    display: flex;
    flex-direction: column;
}

.change-payment-method-dialog .cpm-field__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 4px;
}

.change-payment-method-dialog .cpm-authorise {
    align-items: flex-start;
}

.change-payment-method-dialog .cpm-continue-button {
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.04em;
}