.form {

    --Form-Accent-Colour: var(--Light-Grey);
    --Form-Main-Colour: var(--Almost-Black);
    --Main-Colour: var(--Form-Main-Colour);

    background-color: var(--Form-Accent-Colour);
    width: 100%;

    .error-msg {
        color: #D30000;
    }

    .alert {
        display: none;
    }

    .question-container {
        padding: var(--Padding-XXXL) 0;
        max-width: 56.6rem;
        margin-left: auto;
        margin-right: auto;

        .question-block {
            padding-top: var(--Padding-XXL);
            padding-bottom: var(--Padding-XXL);

            select.form-control {
                background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
                background-position: right var(--Padding-S) center;
                background-size: 1rem 1rem;
                background-repeat: no-repeat;
                padding: var(--Padding-XS) var(--Padding-S);
                font-size: var(--Paragraph);
                font-variation-settings: 'wght' 400;
                margin-bottom: var(--Padding-S);
                border-color: var(--Form-Main-Colour);
            }
        }

        label, legend {
            font-size: var(--Paragraph-XL);
            font-variation-settings: 'wght' 670;
            margin: 0;
            padding: 0;
            padding-bottom: var(--Padding-S);
        }
        
        fieldset.row {
            margin: 0; /* This is to override the fact that the row is not the child of a container. */
            * {
                padding-left: 0;
                padding-right: 0;
            }
        }

        .form-subhead p {
            font-size: var(--Paragraph-XL);
            position: relative;
            top: -1rem;
            padding-bottom: 0rem;
        }

        .radio-check {
            label {
                font-variation-settings: 'wght' 400;
                width: 100%;
                padding: 1.5rem;
                margin-bottom: 1rem;
                position: relative;
                z-index: 1;
                font-size: 1.2rem;
                @media (min-width: 768px) {
                    font-size: 1.7rem;
                }
                line-height: 100%;
            }

            .form-double-label {
                display: inline-flex;
                flex-direction: column;
                .form-head-label {
                    font-variation-settings: 'wght' 670;
                    font-size: 1.2rem;
                    @media (min-width: 768px) {
                        font-size: 1.7rem;
                    }
                }
        
                .form-sub-label {
                    font-size: var(--Paragraph);
                }
            }

            .col-sm-12 {
                padding: 0;
            }
            input {
                margin-right: 0.5rem;
                margin-top: 0rem;
                z-index: 1;
                width: 1rem;
                height: 1rem;
                @media (min-width: 768px) {
                    width: 1.5rem;
                    height: 1.5rem;
                }
                &:after {
                    z-index: -1;
                    content: "";
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(255,255,255,0.1);
                    border: 1px solid var(--Form-Main-Colour);
                    border-radius: 1.5rem;
                }
            }
            input:checked {
                &:after {
                    background-color: white;
                }
            }
            label:hover {
                input:after {
                    border: 2px solid var(--Form-Main-Colour);
                }
            }
        }

        .form-group {
            label {
                font-size: var(--Heading-XS);
                padding-bottom:0;
                color: var(--Form-Main-Colour);
            }
            input.form-control {
                font-size: var(--Paragraph);
                font-variation-settings: 'wght' 400;
                color: var(--Almost-Black);
                padding: var(--Padding-XS) var(--Padding-S);
                margin-bottom: var(--Padding-S);
                border-color: var(--Form-Main-Colour);
            }
        }

        .progress-list {
            list-style:none;
            padding-left: 0;
            padding-bottom: var(--Padding-XXL);
            display: flex;
            gap: 1rem;
            @media (min-width:768px) {
                gap: 2.5rem;
            }
            
            li {
                font-size: var(--Paragraph);
                font-weight: 400;
                font-variation-settings: 'wght' 580;
                line-height: 1;
                border-radius: 50%;
                width: 2.5rem;
                height: 2.5rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
                border: 4px solid var(--Form-Main-Colour);
                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    left: 100%;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 1rem;
                    height: 0.25rem;
                    margin-left: 0.25rem;
                    background-color: var(--Form-Main-Colour);
                    @media (min-width:768px) {
                        width: 2rem;
                        margin-left: 0.5rem;
                    }
                }
                &.active {
                    color: #ffffff;
                    background-color: var(--Form-Main-Colour);
                }
                &:last-child {
                    &:after {
                        display:none;
                    }
                }
                &.next {
                    background-color: #ffffff;
                }
                
            }
            
        }
    }
}

.form.blue {
    --Form-Accent-Colour: var(--Blue-Tint);
    --Form-Main-Colour: var(--Blue);
    .question-container .question-block select.form-control {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23466EB9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

.form.teal {
    --Form-Accent-Colour: var(--Teal-Tint);
    --Form-Main-Colour: var(--Teal);
    select.form-control {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2309807C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}