.user-profile {
    form {
        max-width: 700px;
        width: 100%;
        .container {
            @include table-flex();
        }
        .avatar-container {
            @include table-flex-child(1, 0, 0);
            margin-right: 1rem;
            .image-container {
                position: relative;
            }
            img {
                border: 2px solid $white;
                border-radius: 8%;
                width: 100%;
            }
            .overlay {
                background: rgba($white, .9);
                bottom: 0;
                display: none;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }
            .icon-spinner {
                @extend %xlarge;
                animation: spin infinite .8s linear;
                color: $gray-light;
                left: 40%;
                position: absolute;
                top: 40%;
            }
            p {
                @extend %xsmall;
                line-height: .8rem;
                margin-bottom: .3rem;
                text-align: center;
            }
            span {
                @extend %bold;
            }
            .use-gravatar {
                @extend %small;
                cursor: pointer;
                display: inline-block;
                text-align: center;
                width: 100%;
            }
        }
        .data {
            @include table-flex-child(3, 0, 0);
        }
    }
    fieldset {
        margin-bottom: 1rem;
    }
    .submit {
        margin-top: 2rem;
    }
    label {
        @extend %title;
        display: block;
        margin-bottom: .5rem;
    }
    .button-green {
        color: $white;
        cursor: pointer;
        display: block;
        padding: 12px;
        text-align: center;
    }
    .delete-account {
        @extend %small;
        display: block;
        margin-top: 1rem;
    }
}