.form {
    display: flex;
    text-align: left;
    width: 100%;
    max-width: 600px;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 5px;

    &.success {
        background-color: #DAFFDA;
        border-radius: 10px;
    }

    label {
        display: block;
        font-size: .7em;
        opacity: 0.7;
    }

    .grow-1, .grow-2 {
        margin-bottom: 0px;
        flex-basis: 50%;
        padding: 5px;

        &.single-line label {
            display: inline;
            font-size: inherit;
            opacity: inherit;
        }
    }

    .grow-1 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .grow-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    @media screen and (max-width: $breakpoint-xs) {
        .grow-1, .grow-2 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }



    input[type=text], input[type=email], select, textarea {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 10px;
        font-size: 1.4em;
        padding: 10px;
        padding-left: 15px;
        border-left: 5px solid $primary-color;
    }

    input[type=submit], input[type=button] {
        width: 100%;
    }
    
    input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
        border-color: $primary-color;
    }
    
    input[type="checkbox"] {
        display:none;
    }
    
    input[type="checkbox"] + label::before {
        width: 23px;
        height: 23px;
        border-radius: 3px;
        border: 2px solid $primary-color;
        background-color: #fff;
        display: block;
        content: "";
        float: left;
        margin-right: 10px;
    }
    
    input[type="checkbox"]:checked+label::before {
        box-shadow: inset 0px 0px 0px 3px #fff;
        background-color: $primary-color;
    }


}