$lightgray: rgba(0, 0, 0, 0.05);
$primaryblue: rgba(2, 117, 216, 1);

#new-subgroup-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    .header {
        margin: 0 auto 0 auto;
        h1 {
            color: $primaryblue;
        }
    }
    // TODO: fix this!
    .field_with_errors {
        @extend .alert;
        padding: inherit;
        margin: 0;
        background-color: red;
        input {
            width: 100%;
        }
    }
    .form-container {
        display: flex;
        flex-direction: column;
        .inputs-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .fields-container {
                /* background-color: $lightgray; */
                padding: 1em;
            }
            // TODO: extract this!
            .field {
                display: flex;
                flex-direction: column;
                margin-top: .75em;
                input, textarea {
                    border: 1px solid $lightgray;
                    border-radius: .25em;
                    padding: .5em;
                }
                textarea {
                    min-height: 13em;
                }
            }
            .group-input-container {
                @extend .fields-container;
                display: flex;
                flex-direction: column;
                min-width: 67%;
                flex-grow: 2;
                padding-right: 1em;
                .group-inputs {
                    display: flex;
                    flex-direction: column;
                }
            }
            .organizer-input-container {
                @extend .fields-container;
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                min-width: 33%;
                .organizer-inputs {
                    display: flex;
                    flex-direction: column;
                }
            }
            .organizer-input-container-hidden {
                width: 0%;
            }
        }
        .create-buttons-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            button {
                width: 33%;
            }
        }

    }
}
