[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-400);
    padding: var(--space-400) 0;
    flex-direction: row;
}
@media (max-width: 576px) {
    .RadioField {
        flex-direction: column;
        padding: var(--space-0);
    }
}

.RadioCard {
    flex: 1;
    aspect-ratio: 1 / 1;
    align-content: center;
    max-width: 50%;
}
@media (max-width: 576px) {
    .RadioCard { flex-direction: column; max-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;
    }
}

/*fix for bug (https://ovotech.atlassian.net/browse/ED-299) raised with core ui team */
[class^='_radioInput_'], [class*='_radioInput_'] {
    position: fixed;
}

@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.35da0d44f291d4fb95d0.css.map*/