/* DEFAULT LAYOUT */

.form {
    margin-bottom: 10px;
    
    .formSection {
        border-bottom: 1px solid #d1d1d1;
        border-top: 1px solid #d1d1d1;
        margin: 0 0 15px 0;
        padding: 20px 10px;
        
        .formSectionTitle {
            color: #979797;
            font-size: 18px;
            font-style: italic;
            font-weight: 700;
            padding: 0 0 15px 0;
            
            .toggle {
                cursor: pointer;
            }
        }
        
        .formField {
            padding: 10px 0;
            
            .formFieldLabel {
                font-weight: 700;
                margin-bottom: 5px;
            }
            
            &.required .formFieldLabel {
                color: #1c7ec9;
            }
            
            .formFieldInput {
                .options {
                    display: flex;
                    flex-direction: column;
                    row-gap: 8px;
                }
            }
        }
    }
    
    .formSubmit {
        margin: 20px 0;
    }
    
    input[type=email],
    input[type=number],
    input[type=password],
    input[type=text],
    select,
    textarea {
        border: 1px solid #ccc;
        font-family: 'Public Sans';
        font-size: 15px;
        padding: 10px;
        width: 96%;
        
        &.field-error {
            background-color: #f7e1e1;
            border: 1px solid #c00;
        }
    }
    
    input[type=number] {
        font-feature-settings: 'tnum';
        
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }    
    
    textarea {
        height: 150px;
    }
    
    input[type=checkbox] {
        accent-color: #08438f;
        height: 19px;
        margin: 0 8px 0 0;
        vertical-align: -4px;
        width: 19px;
    }
}


/* LAYOUT OVERRIDES */

#formSection1 {
    background: #f7f7f7;
}

#formSection2 {
    background: #fff5eb;
}

#formSection3 {
    background: #eaffff;
}

#formSection4 {
    background: #f1ffef;
}

#formSection5 {
    background: #f8eeff;
}