[aria-label="close modal"] {
    display: none;
}
#root {
    background: var(--color-surface-surface,#F9F6F3);
}

.App {
    font-family: Montserrat, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.HeaderContainer {
    height: 10rem;
    max-width: 100%;
    background: #fff;
}

.Header {
    height: 10rem;
    max-width: 6rem;
    margin: 0 auto;
}

.Logo {
    width: 6rem;
    position: absolute;
    z-index: 40;
    margin: 2rem 0 2rem 0;
}
@media (max-width: 746px) {
    .Logo { margin: 2rem 0 2rem 0;
            display: block; }
}

.StepContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
}

.Step {
    height: 0;
    flex: 1 0 0;
    stroke-width: 2px;
    stroke: var(--color-brand-brand, #0A9828);
}

.StepCounter {
    margin-right: auto;
}

.Content {
    max-width: 746px;
    margin: 0 auto;
    padding: var(--space-800) 0 var(--space-800) 0;
}
@media (max-width: 746px) {
    .Content { padding: var(--space-400); }
}

.ContentPaymentPage {
    max-width: 1169px;
    margin: 0 auto;
}
@media (max-width: 1169px) {
    .ContentPaymentPage { padding: var(--space-400); }
}

.SplitHeading {
    margin-bottom: var(--space-0);
}

.SurfaceHeading {
    color: var(--color-surface-on-surface);
}

.SurfaceVariant {
    color: var(--color-surface-on-surface-variant);
}

.FormSubheading {
    color: var(--color-surface-on-surface, #00261C);
    font-size: var(--font-size-xl, 24px);
    font-style: normal;
    font-weight: 450;
    line-height: var(--font-line-height-xl, 32px);
    letter-spacing: var(--font-letter-spacing-xl, -0.5px);
}

.ChargerImg {
    width: var(--space-1800);
}

.RadioField {
    display: flex;
    gap: var(--space-800);
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
}
@media (max-width: 576px) {
    .RadioField {
        padding: var(--space-0);
    }
}

.RadioCard {
    aspect-ratio: 1 / 1;
    align-content: center;
    width: 162px;
}

.ChargerRadioField {
    display: flex;
    gap: var(--space-800);
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
}
@media (max-width: 576px) {
    .ChargerRadioField {
        padding: var(--space-0); flex-direction: column;
    }
}

.ChargerRadioCard {
    aspect-ratio: 1 / 1;
    align-content: center;
    width: 227px;
}
@media (max-width: 576px) {
    .ChargerRadioCard { flex-direction: column; width: 100%; }
}

.FlexContainer {
    display: flex;
    justify-content: space-between;
}

.ContainerCard {
    background: var(--color-surface-bright, #FFF);
    border-radius: var(--border-radius-md, 8px);
    padding: var(--space-800) var(--space-600);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-400);
}

.DetailsCard {
    background: var(--color-surface-bright, #FFF);
    padding: var(--space-400);
}

.PostcodeModal {
    max-width: 550px;
    max-height: 380px;
}
@media (max-width: 576px) {
    .PostcodeModal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        margin: 0;
        border-radius: var(--border-radius-md, 8px) var(--border-radius-md, 8px) 0 0;
        z-index: 1000;
    }
}

.NextStepsContainer {
    display: flex;
    gap: var(--space-400);
    padding: 0 var(--space-800);
    flex-direction: row;
}
@media (max-width: 576px) {
    .NextStepsContainer {
        flex-direction: column;
        padding: var(--space-0);
    }
}

.NextStep {
    flex: 1 0 0;
    text-align: center;
}

.IndicativeQuoteContainer {
    display: flex;
    gap: var(--space-400);
    padding: var(--space-400) 0;
    flex-direction: row;
}
@media (max-width: 576px) {
    .IndicativeQuoteContainer {
        flex-direction: column;
        padding: var(--space-0);
    }
}

.IndicativeQuoteCard {
    background: var(--color-surface-bright, #FFF);
    border-radius: var(--border-radius-md, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--space-400);
    width: 50%;
}
@media (max-width: 576px) {
    .IndicativeQuoteCard {
        width: 100%;
    }
}

.EstimatedCost {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ChargerImageContainer {
    flex: 1 0 0;
    max-width: 50%;
    text-align: center;
}
@media (max-width: 576px) {
    .ChargerImageContainer {
        width: 100%;
        margin: 0 auto;
    }
}

.WhatIsNextSteps_V{
    width: 100%;
    margin: 0 auto;
}

@font-face {
    font-family: 'OVOCircular';
    src:url(9e44fca19114d567eb6b.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OVOCircular';
    src:url(2d1bbcac8678d0706d3e.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OVOCircular';
    src:url(486cdc055de2a92630ed.woff2) format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/*# sourceMappingURL=style.0e93cd5b8fef8421884f.css.map*/