:root {
    /* Colours */
    --background-colour: #f9f8f4;
    --primary-accent-colour: #ff0083;
    --secondary-accent-colour: #00e2ff;
    --info-box-colour: #ffabd6;
    --main-grey: #d9d9d9;
    --error-colour: #dc143c;
    --disabled-colour: var(--main-grey);
    --border-colour: var(--main-grey);
    --warning-colour: #f97613;
    --complete-colour: #009900;
    /* Global settings */
    --fixed-header-height: 70px;
    --border-radius: 4px;
    --column-gap: 10px;
    --side-margin: 20px;
    /* Fonts */
    --header-font: 'Merriweather', serif;
    --body-font: 'Merriweather Sans', sans-serif;
    /* Font sizes */
    --font-size-step--3: clamp(0.62rem, calc(0.31rem + 1.58vw), 0.89rem);
    --font-size-step--2: clamp(0.69rem, calc(0.35rem + 1.72vw), 0.99rem);
    --font-size-step--1: clamp(0.78rem, calc(0.39rem + 1.93vw), 1.11rem);
    --font-size-step-0: clamp(0.88rem, calc(0.44rem + 2.17vw), 1.25rem);
    --font-size-step-1: clamp(0.98rem, calc(0.50rem + 2.45vw), 1.41rem);
    --font-size-step-2: clamp(1.11rem, calc(0.56rem + 2.75vw), 1.58rem);
    --font-size-step-3: clamp(1.25rem, calc(0.63rem + 3.10vw), 1.78rem);
}
html {
    height: 100vh;
    height: 100dvh;
}
body {
    display: grid;
    grid-template:
        ". header ."
        ". main .";
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: min-content 1fr;
    height: 100vh;
    height: 100dvh;
    background-color: var(--background-colour);
    font-family: var(--body-font);
    font-weight: 300;
}
/* Colour the whole header row */
body::before {
    content: '';
    background-color: white;
    grid-row: 1;
    grid-column: 1 / span 3;
}
body > header {
    grid-area: header;
}
body > qs-form {
    grid-area: main;
    display: grid;
    grid-template: "section";
    height: 100%;
    overflow: hidden;
}
body.no-anim * {
    animation-duration: 0.01s !important;
}
button, .button {
    appearance: none;
    background-color: var(--primary-accent-colour);
    color: white;
    font-size: var(--font-size-step-1);
    font-weight: 700;
    line-height: 3.33em;
    margin: 0;
    padding: 0 1.75em;
    border: none;
    border-radius: 1.8em;
    cursor: pointer;
    border: 2px solid var(--primary-accent-colour);
    transition: all .2s;
    &.secondary {
        color: var(--primary-accent-colour);
        background-color: white;
    }
    &:not([disabled]):hover {
        box-shadow: 0 0 5px var(--primary-accent-colour);
    }
    &[disabled] {
        color: #777777;
        background-color: var(--disabled-colour);
        border-color: var(--disabled-colour);
        cursor: not-allowed;
    }
}
a {
    color: inherit;
}
.error {
    display: none;
    grid-area: section;
    height: 100%;
    margin: 0 max(calc((100% - 767px)/2), 0px);
    &.notfound {
        display: none;
        grid-area: section;

        grid-template-rows: min-content min-content;
        justify-items: center;
        grid-gap: 1em;

        & h1 {
            font-family: var(--header-font);
            font-size: var(--font-size-step-3);
            font-weight: 400;
            margin: 1em 0;
        }
        & h2 {

            font-size: var(--font-size-step-1);
            font-weight: 400;
        }

        &.active {
            display: grid;
        }
    }
    &.noquote {
        padding-top: 2em;
        grid-template: initial;
        align-content: start;
        grid-gap: 1.5em;
        & h1 {
            grid-area: initial;
            font-family: var(--header-font);
            font-size: var(--font-size-step-3);
            font-weight: normal;
            margin: 0;
            text-align: left;
        }
        & p {
            font-size: var(--font-size-step--1);
        }
        & .button {
            display: inline-block;
            text-decoration: none;
            padding: 0 4em;
            margin-top: 1em;
        }
        & :is(.continue, .disabled-continue) {
            display: none;
        }
    }
    &.show {
        display: grid;
    }
}
/* LastPass plugin breaks the layout in some places */
div[data-lastpass-icon-root] {
  display: none; 
}
div[data-lastpass-infield] { 
  display: none; 
}