$lightgray: rgba(0, 0, 0, 0.05);

.modal-background {
    background-color: $lightgray;
    padding-left: 4rem;
    padding-right: 4rem;
}

.modal-header {
    @extend .modal-background;
}

.modal-container {
    @extend .modal-background;
    padding-bottom: 4rem;
    .prompt {
        color: grey;
        text-align: center;
        margin: 1rem 0 1.5rem 0;
    }
    h3 {
        text-align: center;
    }
    .card {
        width: 66%!important;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50%;
        .card-block {
            padding: 2rem 25%;
        }
    }
    .multi-value-fields{
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        align-items: center;
        .btn {
            margin-left: .5rem;
        }
        input {
            padding-left: .1rem;
        }
    }
    .form-group {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .field {
        width: 100%;
    }
    input.wide{
        @extend .field;
        padding-left: .1rem;
    }
    input.thin {
        @extend .field;
        @extend .mr-4;
    }
    .field_with_errors {
        @extend .form-group;
        margin-bottom: 0;
        width: 100%;
    }
}

.add-contact-field {
    margin-top: 0;
}

