CSS Class updation

bookie/src/app/customers/customer-detail/customer-detail.component.html

@@ -1,24 +1,24 @@
 <h2>Customer</h2>
 <form [formGroup]="form" class="flex-col">
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Name</mat-label>
       <input matInput #nameElement formControlName="name" />
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Phone</mat-label>
       <input matInput formControlName="phone" />
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Address</mat-label>
       <textarea matInput formControlName="address"> </textarea>
     </mat-form-field>
   </div>
-  <div class="flex-row">
+  <div class="row-container">
     <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
   </div>
   <mat-divider></mat-divider>
@@ -27,7 +27,7 @@
       <mat-form-field [formGroupName]="i">
         <mat-label>Discount on {{ r.name }}</mat-label>
         <input matInput formControlName="discount" />
-        <span matSuffix>%</span>
+        <span matTextSuffix>%</span>
         <mat-hint>Max {{ r.limit | percent: '1.2-2' }}</mat-hint>
       </mat-form-field>
     }