
    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
        <div class="login-gradient-bar">
        </div>
    </div>
    <div class="small-middle-container">
        <div *ngIf="form && customizationSettings">
    
            <mat-card class="mat-elevation-z8 top-margin login-card">
                <H1 *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="login_logo">OMBI</H1>
                <H1 *ngIf="customizationSettings.applicationName && !customizationSettings.logo" [ngClass]="{'bigText': customizationSettings.applicationName.length >= 7 && customizationSettings.applicationName.length < 14, 'hugeText': customizationSettings.applicationName.length >= 14 }" class="login_logo custom">{{customizationSettings.applicationName}}</H1>
                <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
                <mat-card-content id="login-box">
                    <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">

                        <mat-form-field class="dark full-width" appearance="outline">
                            <mat-label>{{'PasswordReset.EmailAddressPlaceholder' | translate}}</mat-label>
                            <input type="email"  id="username-field" matInput formControlName="email" autofocus/>
                            <mat-error id="username-error" *ngIf="form.get('email').hasError('required')">
                                {{'PasswordReset.EmailAddressPlaceholder' | translate}} is <strong>required</strong></mat-error>
                        </mat-form-field>
                        <button id="reset" mat-raised-button color="accent" type="submit">{{'PasswordReset.ResetPasswordButton' | translate}}</button>
            
                    </form>
                </mat-card-content>
    

    
            </mat-card>
    
        </div>
    </div>
