Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/app/loans/common-resolvers/external-asset-owner-active-transfer.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class ExternalAssetOwnerActiveTransferResolver implements Resolve<boolean> {
+export class ExternalAssetOwnerActiveTransferResolver {
   /**
    * @param {ExternalAssetOwnerService} externalAssetOwnerService External Asset Owner service.
    */

src/app/loans/common-resolvers/external-asset-owner-journal-entry.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class ExternalAssetOwnerJournalEntryResolver implements Resolve<boolean> {
+export class ExternalAssetOwnerJournalEntryResolver {
   /**
    * @param {ExternalAssetOwnerService} externalAssetOwnerService External Asset Owner service.
    */

src/app/loans/common-resolvers/external-asset-owner.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class ExternalAssetOwnerResolver implements Resolve<boolean> {
+export class ExternalAssetOwnerResolver {
   /**
    * @param {ExternalAssetOwnerService} externalAssetOwnerService External Asset Owner service.
    */

src/app/loans/common-resolvers/glim-loan-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * GLIM Loan template data resolver.
  */
 @Injectable()
-export class GLIMLoanTemplateResolver implements Resolve<Object> {
+export class GLIMLoanTemplateResolver {
   /**
    * @param {ProductsService} loansService Loan service.
    */

src/app/loans/common-resolvers/loan-action-button.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loans notes data resolver.
  */
 @Injectable()
-export class LoanActionButtonResolver implements Resolve<Object> {
+export class LoanActionButtonResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-arrear-delinquency.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { SystemService } from 'app/system/system.service';
 import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
-export class LoanArrearDelinquencyResolver implements Resolve<boolean> {
+export class LoanArrearDelinquencyResolver {
   /**
    * @param {SystemService} systemService System service.
    */

src/app/loans/common-resolvers/loan-collaterals.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { LoansService } from '../loans.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class LoanCollateralsResolver implements Resolve<boolean> {
+export class LoanCollateralsResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-datatable.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loans notes data resolver.
  */
 @Injectable()
-export class LoanDatatableResolver implements Resolve<Object> {
+export class LoanDatatableResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-datatables.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { LoansService } from '../loans.service';
  * loan datatables resolver.
  */
 @Injectable()
-export class LoanDatatablesResolver implements Resolve<Object> {
+export class LoanDatatablesResolver {
   /**
    * @param {loansService} loansService loans service.
    */

src/app/loans/common-resolvers/loan-delinquency-actions.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { LoansService } from '../loans.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class LoanDelinquencyActionsResolver implements Resolve<boolean> {
+export class LoanDelinquencyActionsResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-delinquency-data.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loan Delinquency data resolver.
  */
 @Injectable()
-export class LoanDelinquencyDataResolver implements Resolve<Object> {
+export class LoanDelinquencyDataResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-delinquency-tags.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Clients data resolver.
  */
 @Injectable()
-export class LoanDelinquencyTagsResolver implements Resolve<Object> {
+export class LoanDelinquencyTagsResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-details.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Clients data resolver.
  */
 @Injectable()
-export class LoanDetailsResolver implements Resolve<Object> {
+export class LoanDetailsResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-documents.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loans notes resolver.
  */
 @Injectable()
-export class LoanDocumentsResolver implements Resolve<Object> {
+export class LoanDocumentsResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-notes.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loans notes resolver.
  */
 @Injectable()
-export class LoanNotesResolver implements Resolve<Object> {
+export class LoanNotesResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-reschedules.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
+import { Router, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { LoansService } from '../loans.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class LoanReschedulesResolver implements Resolve<boolean> {
+export class LoanReschedulesResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loan-term-variations.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Clients data resolver.
  */
 @Injectable()
-export class LoanTermVariationsResolver implements Resolve<Object> {
+export class LoanTermVariationsResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loans-account-and-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loan accounts template data resolver.
  */
 @Injectable()
-export class LoansAccountAndTemplateResolver implements Resolve<Object> {
+export class LoansAccountAndTemplateResolver {
   /**
    * @param {ProductsService} productsService Products service.
    */

src/app/loans/common-resolvers/loans-account-charge.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loans Account Charge data resolver.
  */
 @Injectable()
-export class LoansAccountChargeResolver implements Resolve<Object> {
+export class LoansAccountChargeResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loans-account-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loan accounts template data resolver.
  */
 @Injectable()
-export class LoansAccountTemplateResolver implements Resolve<Object> {
+export class LoansAccountTemplateResolver {
   /**
    * @param {ProductsService} productsService Products service.
    */

src/app/loans/common-resolvers/loans-account-transaction-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loans Account Transaction Template data resolver.
  */
 @Injectable()
-export class LoansAccountTransactionTemplateResolver implements Resolve<Object> {
+export class LoansAccountTransactionTemplateResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loans-account-transaction.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * Loans Account Transaction data resolver.
  */
 @Injectable()
-export class LoansAccountTransactionResolver implements Resolve<Object> {
+export class LoansAccountTransactionResolver {
   /**
    * @param {LoansService} LoansService Loans service.
    */

src/app/loans/common-resolvers/loans-transaction-reciept.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { ReportsService } from 'app/reports/reports.service';
  * Loans Transaction Reciept resolver.
  */
 @Injectable()
-export class LoansTransactionRecieptResolver implements Resolve<Object> {
+export class LoansTransactionRecieptResolver {
   /**
    * @param {ReportsService} reportsService Reports service.
    */

src/app/loans/custom-dialog/loan-delinquency-action-dialog/loan-delinquency-action-dialog.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>{{ 'labels.heading.Loan Delinquency Actions' | translate }}</h2>
 
-<div mat-dialog-content [formGroup]="delinquencyActionForm" fxLayout="column">
-  <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
+<div mat-dialog-content [formGroup]="delinquencyActionForm" class="layout-column">
+  <mat-form-field class="flex-48" (click)="validFromDatePicker.open()">
     <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
     <input
       matInput
@@ -19,7 +19,7 @@
     </mat-error>
   </mat-form-field>
 
-  <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
+  <mat-form-field class="flex-48" (click)="validTillDatePicker.open()">
     <mat-label>{{ 'labels.inputs.End Date' | translate }}</mat-label>
     <input
       matInput
@@ -38,7 +38,7 @@
   </mat-form-field>
 </div>
 
-<mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<mat-dialog-actions class="layout-row layout-xs-column layout-align-center gap-2percent">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
   <button
     mat-raised-button

src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html

@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Add Loan Collateral' | translate }}</h1>
 
-<div mat-dialog-content [formGroup]="addCollateralForm" fxLayout="column">
+<div mat-dialog-content [formGroup]="addCollateralForm" class="layout-column">
   <mat-form-field>
     <mat-label>{{ 'labels.inputs.Collateral' | translate }}</mat-label>
     <mat-select formControlName="collateral" required>
@@ -37,7 +37,7 @@
   </mat-form-field>
 </div>
 
-<mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<mat-dialog-actions class="layout-row layout-xs-column layout-align-center gap-2percent">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
   <button
     mat-raised-button

src/app/loans/custom-dialog/loans-account-view-guarantor-details-dialog/loans-account-view-guarantor-details-dialog.component.html

@@ -1,30 +1,30 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Guarantor Detail' | translate }}</h1>
 
-<div mat-dialog-content fxLayout="column">
-  <div fxLayout="row wrap" fxLayout.lt-md="column">
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.First Name' | translate }}:</span>
-      <span fxFlex="50%">{{ data.guarantorData.firstname }}</span>
+<div mat-dialog-content class="layout-column">
+  <div class="layout-row-wrap responsive-column">
+    <div class="flex-fill">
+      <span class="flex-50">{{ 'labels.inputs.First Name' | translate }}:</span>
+      <span class="flex-50">{{ data.guarantorData.firstname }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Last Name' | translate }}:</span>
-      <span fxFlex="50%">{{ data.guarantorData.lastname }}</span>
+    <div class="flex-fill">
+      <span class="flex-50">{{ 'labels.inputs.Last Name' | translate }}:</span>
+      <span class="flex-50">{{ data.guarantorData.lastname }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Relationship' | translate }}:</span>
-      <span fxFlex="50%">{{ data.guarantorData.clientRelationshipType.name }}</span>
+    <div class="flex-fill">
+      <span class="flex-50">{{ 'labels.inputs.Relationship' | translate }}:</span>
+      <span class="flex-50">{{ data.guarantorData.clientRelationshipType.name }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Guarantor Type' | translate }}:</span>
-      <span fxFlex="50%">{{ data.guarantorData.guarantorType.value }}</span>
+    <div class="flex-fill">
+      <span class="flex-50">{{ 'labels.inputs.Guarantor Type' | translate }}:</span>
+      <span class="flex-50">{{ data.guarantorData.guarantorType.value }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Status' | translate }}:</span>
-      <span fxFlex="50%">
+    <div class="flex-fill">
+      <span class="flex-50">{{ 'labels.inputs.Status' | translate }}:</span>
+      <span class="flex-50">
         <span *ngIf="data.guarantorData.status">
           {{ 'labels.inputs.Active' | translate }}
         </span>
@@ -36,6 +36,6 @@
   </div>
 </div>
 
-<mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<mat-dialog-actions class="layout-row layout-xs-column layout-align-center gap-2percent">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
 </mat-dialog-actions>

src/app/loans/glim-account/glim-account-view.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { LoansService } from '../loans.service';
  * GLIM Account data resolver.
  */
 @Injectable()
-export class GLIMViewResolver implements Resolve<Object> {
+export class GLIMViewResolver {
   /**
    * @param {LoansService} loansService Loans service.
    */

src/app/loans/glim-account/glim-account.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
+
 import { ActivatedRoute } from '@angular/router';
 
 /**

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html

@@ -1,5 +1,5 @@
-<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  <mat-form-field fxFlex="48%">
+<div class="layout-row-wrap gap-2px responsive-column">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData" [value]="charge">
@@ -8,7 +8,7 @@
     </mat-select>
   </mat-form-field>
 
-  <div fxFlex="48%" fxFlexAlign="center">
+  <div class="flex-48 align-center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Add' | translate }}
@@ -16,8 +16,7 @@
   </div>
 
   <table
-    fxFlex="98%"
-    class="mat-elevation-z1"
+    class="flex-98 mat-elevation-z1"
     mat-table
     [dataSource]="chargesDataSource"
     [hidden]="chargesDataSource.length === 0"
@@ -104,9 +103,9 @@
     <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
   </table>
 
-  <mat-divider fxFlex="98%"></mat-divider>
+  <mat-divider class="flex-98"></mat-divider>
 
-  <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Overdue Charges' | translate }}</h4>
+  <h4 class="mat-h4 flex-98">{{ 'labels.heading.Overdue Charges' | translate }}</h4>
 
   <table mat-table class="mat-elevation-z1" [dataSource]="overDueChargesDataSource">
     <ng-container matColumnDef="name">
@@ -134,7 +133,7 @@
   </table>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/loans/loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component.html

@@ -1,7 +1,7 @@
 <form [formGroup]="datatableForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
-      <mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
+  <div class="layout-row-wrap gap-2px responsive-column">
+    <div *ngFor="let datatableInput of datatableInputs" class="flex-48">
+      <mat-form-field class="flex-100" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
         <mat-label>{{ getInputName(datatableInput) }}</mat-label>
 
         <mat-select
@@ -55,7 +55,7 @@
     </div>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="loansAccountDetailsForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <mat-form-field fxFlex="72%">
+  <div class="layout-row-wrap gap-2px responsive-column">
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
       <mat-select
         required
@@ -25,13 +25,13 @@
     </mat-form-field>
   </div>
 
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap layout-lt-md-column gap-2percent" *ngIf="loanProductSelected">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
       <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="loanProductSelected">
+    <mat-form-field class="flex-48" *ngIf="loanProductSelected">
       <mat-label>{{ 'labels.inputs.Loan officer' | translate }}</mat-label>
       <mat-select
         formControlName="loanOfficerId"
@@ -43,7 +43,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Loan Purpose' | translate }}</mat-label>
       <mat-select formControlName="loanPurposeId" matTooltip="{{ 'tooltips.Provides an indication' | translate }}">
         <mat-option *ngFor="let loanPurpose of loanPurposeOptions" [value]="loanPurpose.id">
@@ -52,7 +52,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Fund' | translate }}</mat-label>
       <mat-select formControlName="fundId">
         <mat-option *ngFor="let fund of fundOptions" [value]="fund.id">
@@ -61,7 +61,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
+    <mat-form-field class="flex-48" (click)="submitPicker.open()">
       <mat-label>{{ 'labels.inputs.Submitted on' | translate }}</mat-label>
       <input
         matInput
@@ -80,7 +80,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
+    <mat-form-field class="flex-48" (click)="disbursementPicker.open()">
       <mat-label>{{ 'labels.inputs.Disbursement on' | translate }}</mat-label>
       <input
         matInput
@@ -99,11 +99,11 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <mat-divider class="flex-98"></mat-divider>
 
-    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Savings Linkage' | translate }}</h3>
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Savings Linkage' | translate }}</h3>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Link savings' | translate }}</mat-label>
       <mat-select formControlName="linkAccountId">
         <mat-option *ngFor="let savingaccount of accountLinkingOptions" [value]="savingaccount.id">
@@ -112,12 +112,12 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="48%" formControlName="createStandingInstructionAtDisbursement">
+    <mat-checkbox class="flex-48" formControlName="createStandingInstructionAtDisbursement">
       <p>{{ 'labels.inputs.Create standing instructions at disbursement' | translate }}</p>
     </mat-checkbox>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -1,51 +1,55 @@
-<div fxLayout="row wrap" fxLayout.lt-md="column">
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
+<div class="content responsive-column">
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.productId | find: loansAccountTemplate.productOptions : 'id' : 'name' }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Product' | translate }}:</span>
+    <span class="flex-60">{{
+      loansAccount.productId | find: loansAccountTemplate.productOptions : 'id' : 'name'
+    }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.loanOfficerId">
-    <span fxFlex="40%">{{ 'labels.inputs.Loan officer' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill" *ngIf="loansAccount.loanOfficerId">
+    <span class="flex-40">{{ 'labels.inputs.Loan officer' | translate }}:</span>
+    <span class="flex-60">{{
       loansAccount.loanOfficerId | find: loansAccountProductTemplate.loanOfficerOptions : 'id' : 'displayName'
     }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.loanPurposeId">
-    <span fxFlex="40%">{{ 'labels.inputs.Loan purpose' | translate }}:</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill" *ngIf="loansAccount.loanPurposeId">
+    <span class="flex-40">{{ 'labels.inputs.Loan purpose' | translate }}:</span>
+    <span class="flex-60">{{
       loansAccount.loanPurposeId | find: loansAccountProductTemplate.loanPurposeOptions : 'id' : 'name'
     }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.fundId">
-    <span fxFlex="40%">{{ 'labels.inputs.Fund' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.fundId | find: loansAccountProductTemplate.fundOptions : 'id' : 'name' }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.fundId">
+    <span class="flex-40">{{ 'labels.inputs.Fund' | translate }}:</span>
+    <span class="flex-60">{{
+      loansAccount.fundId | find: loansAccountProductTemplate.fundOptions : 'id' : 'name'
+    }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Submitted on' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.submittedOnDate | dateFormat }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Submitted on' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.submittedOnDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Disbursement on' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | dateFormat }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Disbursement on' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.expectedDisbursementDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.externalId">
-    <span fxFlex="40%">{{ 'labels.inputs.External id' | translate }}:</span>
-    <span fxFlex="60%">
+  <div class="flex-fill" *ngIf="loansAccount.externalId">
+    <span class="flex-40">{{ 'labels.inputs.External id' | translate }}:</span>
+    <span class="flex-60">
       <mifosx-external-identifier externalId="{{ loansAccount.externalId }}"></mifosx-external-identifier>
     </span>
   </div>
 
   <ng-container *ngIf="activeClientMembers">
-    <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Client Members' | translate }}</h3>
-    <mat-divider fxFlexFill></mat-divider>
-    <div fxFlex="60%">
+    <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Client Members' | translate }}</h3>
+    <mat-divider class="flex-fill"></mat-divider>
+    <div class="flex-60">
       <table mat-table #membersTable [dataSource]="dataSource">
         <!-- ID Column -->
         <ng-container matColumnDef="id">
@@ -79,13 +83,12 @@
     </div>
   </ng-container>
 
-  <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Terms' | translate }}</h3>
+  <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Principal' | translate }}:</span>
-    <span fxFlex="60%">
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Principal' | translate }}:</span>
+    <span class="flex-60">
       {{
         loansAccount.principalAmount | currency: loansAccountProductTemplate.currency.code : 'symbol-narrow' : '1.2-2'
       }}
@@ -93,9 +96,9 @@
     </span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Loan Term' | translate }}:</span>
-    <span fxFlex="60%"
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Loan Term' | translate }}:</span>
+    <span class="flex-60"
       >{{ loansAccount.loanTermFrequency }}
       {{
         loansAccount.loanTermFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions : 'id' : 'name'
@@ -103,14 +106,14 @@
     >
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Number of repayments' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.numberOfRepayments }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Number of repayments' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.numberOfRepayments }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Repaid every' | translate }}:</span>
-    <span fxFlex="60%"
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Repaid every' | translate }}:</span>
+    <span class="flex-60"
       >{{ loansAccount.repaymentEvery }}
       {{
         loansAccount.repaymentFrequencyType | find: loansAccountProductTemplate.termFrequencyTypeOptions : 'id' : 'name'
@@ -126,133 +129,131 @@
     >
   </div>
 
-  <div fxFlexFill *ngIf="productEnableDownPayment">
-    <span fxFlex="40%">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.enableDownPayment | yesNo }}</span>
+  <div class="flex-fill" *ngIf="productEnableDownPayment">
+    <span class="flex-40">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.enableDownPayment | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
-    <span fxFlex="40%">{{ 'labels.inputs.First repayment on' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.repaymentsStartingFromDate">
+    <span class="flex-40">{{ 'labels.inputs.First repayment on' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.repaymentsStartingFromDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
-    <span fxFlex="40%">{{ 'labels.inputs.Interest charged from' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | dateFormat }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.interestChargedFromDate">
+    <span class="flex-40">{{ 'labels.inputs.Interest charged from' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.interestChargedFromDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
-    <span fxFlex="40%">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
-    <span fxFlex="60%"
+  <div class="flex-fill" *ngIf="loansAccount.interestRatePerPeriod">
+    <span class="flex-40">{{ 'labels.inputs.Nominal interest rate' | translate }}:</span>
+    <span class="flex-60"
       >{{ loansAccount.interestRatePerPeriod }}&nbsp;&nbsp;{{
         loansAccountProductTemplate.interestRateFrequencyType.value
       }}</span
     >
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.interestType">
-    <span fxFlex="40%">{{ 'labels.inputs.Interest method' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccount.interestType }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.interestType">
+    <span class="flex-40">{{ 'labels.inputs.Interest method' | translate }}: </span>
+    <span class="flex-60">{{ loansAccount.interestType }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.isEqualAmortization">
-    <span fxFlex="40%">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.isEqualAmortization }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.isEqualAmortization">
+    <span class="flex-40">{{ 'labels.inputs.Is Equal Amortization' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.isEqualAmortization }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Amortization' | translate }}</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Amortization' | translate }}</span>
+    <span class="flex-60">{{
       loansAccount.amortizationType | find: loansAccountProductTemplate.amortizationTypeOptions : 'id' : 'value'
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Interest calculation period' | translate }}: </span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Interest calculation period' | translate }}: </span>
+    <span class="flex-60">{{
       loansAccount.interestCalculationPeriodType
         | find: loansAccountProductTemplate.interestCalculationPeriodTypeOptions : 'id' : 'value'
     }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.allowPartialPeriodInterestCalculation">
-    <span fxFlex="40%">{{ 'labels.inputs.Calculate interest for exact days in partial period' | translate }}:</span>
-    <span fxFlex="60%">{{ loansAccount.allowPartialPeriodInterestCalculation }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.allowPartialPeriodInterestCalculation">
+    <span class="flex-40">{{ 'labels.inputs.Calculate interest for exact days in partial period' | translate }}:</span>
+    <span class="flex-60">{{ loansAccount.allowPartialPeriodInterestCalculation }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.inArrearsTolerance">
-    <span fxFlex="40%">{{ 'labels.inputs.Arrears tolerance' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccount.inArrearsTolerance }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.inArrearsTolerance">
+    <span class="flex-40">{{ 'labels.inputs.Arrears tolerance' | translate }}: </span>
+    <span class="flex-60">{{ loansAccount.inArrearsTolerance }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.graceOnInterestCharged">
-    <span fxFlex="40%">{{ 'labels.inputs.Interest free period' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccount.graceOnInterestCharged }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.graceOnInterestCharged">
+    <span class="flex-40">{{ 'labels.inputs.Interest free period' | translate }}: </span>
+    <span class="flex-60">{{ loansAccount.graceOnInterestCharged }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Repayment strategy' | translate }}: </span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Repayment strategy' | translate }}: </span>
+    <span class="flex-60">{{
       loansAccount.transactionProcessingStrategyCode
         | find: loansAccountProductTemplate.transactionProcessingStrategyOptions : 'code' : 'name'
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%"> {{ 'labels.inputs.Installment Amount' | translate }} </span>
-    <span fxFlex="60%"> {{ loansAccount.fixedEmiAmount | formatNumber }} </span>
+  <div class="flex-fill">
+    <span class="flex-40"> {{ 'labels.inputs.Installment Amount' | translate }} </span>
+    <span class="flex-60"> {{ loansAccount.fixedEmiAmount | formatNumber }} </span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%"> {{ 'labels.inputs.Balloon Repayment Amount' | translate }} </span>
-    <span fxFlex="60%"> {{ loansAccount.balloonRepaymentAmount | formatNumber }} </span>
+  <div class="flex-fill">
+    <span class="flex-40"> {{ 'labels.inputs.Balloon Repayment Amount' | translate }} </span>
+    <span class="flex-60"> {{ loansAccount.balloonRepaymentAmount | formatNumber }} </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill class="margin-t">{{ 'labels.heading.Moratorium' | translate }}</h3>
+  <h3 class="mat-h3 margin-t flex-fill">{{ 'labels.heading.Moratorium' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill *ngIf="loansAccount.graceOnPrincipalPayment">
-    <span fxFlex="40%">{{ 'labels.inputs.On principal payment' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccount.graceOnPrincipalPayment }}</span>
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill" *ngIf="loansAccount.graceOnPrincipalPayment">
+    <span class="flex-40">{{ 'labels.inputs.On principal payment' | translate }}: </span>
+    <span class="flex-60">{{ loansAccount.graceOnPrincipalPayment }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.graceOnInterestPayment">
-    <span fxFlex="40%">{{ 'labels.inputs.On interest payment' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccount.graceOnInterestPayment }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.graceOnInterestPayment">
+    <span class="flex-40">{{ 'labels.inputs.On interest payment' | translate }}: </span>
+    <span class="flex-60">{{ loansAccount.graceOnInterestPayment }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.graceOnArrearsAgeing">
-    <span fxFlex="40%">{{ 'labels.inputs.On Arrears Aging' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccount.graceOnArrearsAgeing }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.graceOnArrearsAgeing">
+    <span class="flex-40">{{ 'labels.inputs.On Arrears Aging' | translate }}: </span>
+    <span class="flex-60">{{ loansAccount.graceOnArrearsAgeing }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%"> {{ 'labels.inputs.Enable installment level Delinquency' | translate }} </span>
-    <span fxFlex="60%"> {{ loansAccount.enableInstallmentLevelDelinquency | yesNo }} </span>
+  <div class="flex-fill">
+    <span class="flex-40"> {{ 'labels.inputs.Enable installment level Delinquency' | translate }} </span>
+    <span class="flex-60"> {{ loansAccount.enableInstallmentLevelDelinquency | yesNo }} </span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.isTopup">
-    <span fxFlex="40%">{{ 'labels.inputs.Is Topup Loan' | translate }}? </span>
-    <span fxFlex="60%">{{ loansAccount.isTopup }}</span>
+  <div class="flex-fill" *ngIf="loansAccount.isTopup">
+    <span class="flex-40">{{ 'labels.inputs.Is Topup Loan' | translate }}? </span>
+    <span class="flex-60">{{ loansAccount.isTopup }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Recalculate Interest' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled | yesNo }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Recalculate Interest' | translate }}: </span>
+    <span class="flex-60">{{ loansAccountProductTemplate?.isInterestRecalculationEnabled | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccountProductTemplate?.daysInMonthType">
-    <span fxFlex="40%">{{ 'labels.inputs.Days in month' | translate }}: </span>
-    <span fxFlex="60%">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
+  <div class="flex-fill" *ngIf="loansAccountProductTemplate?.daysInMonthType">
+    <span class="flex-40">{{ 'labels.inputs.Days in month' | translate }}: </span>
+    <span class="flex-60">{{ loansAccountProductTemplate?.daysInMonthType.value }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="loansAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column" class="margin-t">
-    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
+  <div *ngIf="loansAccount.charges.length" class="layout-row-wrap responsive-column flex-fill margin-t">
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
 
-    <mat-divider fxFlexFill></mat-divider>
-
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
+    <mat-divider class="flex-fill"></mat-divider>
+    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="loansAccount.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
@@ -313,15 +314,12 @@
   </div>
 
   <div
-    fxFlexFill
     *ngIf="loansAccountProductTemplate.overdueCharges.length"
-    fxLayout="row wrap"
-    fxLayout.lt-md="column"
-    class="margin-t"
+    class="flex-fill layout-row-wrap layout-xs-column margin-t"
   >
-    <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Overdue Charges' | translate }}</h3>
+    <h3 class="mat-h3 flex-98">{{ 'labels.heading.Overdue Charges' | translate }}</h3>
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <mat-divider class="flex-98"></mat-divider>
 
     <table mat-table class="mat-elevation-z1" [dataSource]="loansAccountProductTemplate.overdueCharges">
       <ng-container matColumnDef="name">
@@ -350,7 +348,7 @@
   </div>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/loans/loans-account-stepper/loans-account-schedule-step/loans-account-schedule-step.component.html

@@ -1,17 +1,17 @@
-<div fxLayout="row wrap" fxLayout.lt-md="column">
+<div class="layout-row-wrap responsive-column">
   <button mat-flat-button color="primary" (click)="showRepaymentInfo()">
     <fa-icon icon="calendar" class="m-r-10"></fa-icon>{{ 'labels.inputs.Generate Repayment Schedule' | translate }}
   </button>
 
   <mifosx-repayment-schedule-tab
-    fxFlex="100%"
+    class="flex-100"
     [repaymentScheduleDetails]="repaymentScheduleDetails"
     [currencyCode]="currencyCode"
   >
   </mifosx-repayment-schedule-tab>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html

@@ -1,7 +1,7 @@
 <form [formGroup]="loansAccountTermsForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row-wrap gap-2px responsive-column">
     <mifosx-input-amount
-      fxFlex="48%"
+      class="flex-48"
       *ngIf="currency"
       [currency]="currency"
       [isRequired]="true"
@@ -10,12 +10,12 @@
     >
     </mifosx-input-amount>
 
-    <h4 fxFlex="98%" class="mat-h4">
+    <h4 class="mat-h4 flex-98">
       {{ 'labels.heading.Term Options' | translate }}
       <i class="fas fa-question" matTooltip="{{ 'tooltips.The loan term parameter in loan accounts' | translate }}"></i>
     </h4>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Loan Term' | translate }}</mat-label>
       <input type="number" matInput required disabled formControlName="loanTermFrequency" />
       <mat-error *ngIf="loansAccountTermsForm.controls.loanTermFrequency.hasError('required')">
@@ -24,7 +24,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
       <mat-select required formControlName="loanTermFrequencyType">
         <mat-option *ngFor="let type of termFrequencyTypeData" [value]="type.id">
@@ -37,17 +37,17 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="20%" *ngIf="hasFixedLength()">
+    <mat-form-field class="flex-fill flex-20" *ngIf="hasFixedLength()">
       <mat-label>{{ 'labels.inputs.Fixed Length' | translate }}</mat-label>
       <input type="number" matInput formControlName="fixedLength" />
     </mat-form-field>
-    <span fxFlex="20%" *ngIf="hasFixedLength()" class="label-field">{{
+    <span *ngIf="hasFixedLength()" class="flex-20 label-field">{{
       loansAccountTermsForm.value.loanTermFrequencyType | find: termFrequencyTypeData : 'id' : 'value'
     }}</span>
 
-    <h4 fxFlex="98%" class="mat-h4">Repayments</h4>
+    <h4 class="mat-h4 flex-98">Repayments</h4>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Number of repayments' | translate }}</mat-label>
       <input
         type="number"
@@ -61,7 +61,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="23%" (click)="repaymentsPicker.open()">
+    <mat-form-field class="flex-fill flex-23" (click)="repaymentsPicker.open()">
       <mat-label>{{ 'labels.inputs.First repayment on' | translate }}</mat-label>
       <input
         matInput
@@ -75,7 +75,7 @@
       <mat-datepicker #repaymentsPicker></mat-datepicker>
     </mat-form-field>
 
-    <mat-form-field fxFlex="23%" (click)="interestPicker.open()">
+    <mat-form-field class="flex-fill flex-23" (click)="interestPicker.open()">
       <mat-label>{{ 'labels.inputs.Interest charged from' | translate }}</mat-label>
       <input
         matInput
@@ -89,7 +89,7 @@
       <mat-datepicker #interestPicker></mat-datepicker>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">
+    <h4 class="mat-h4 flex-98">
       {{ 'labels.heading.Repaid Every' | translate }}
       <i
         class="fas fa-question"
@@ -97,7 +97,7 @@
       ></i>
     </h4>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Repaid every' | translate }}</mat-label>
       <input
         type="number"
@@ -112,7 +112,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyType" disabled required>
         <mat-option *ngFor="let repaymentFrequencyType of termFrequencyTypeData" [value]="repaymentFrequencyType.id">
@@ -121,7 +121,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="14%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
+    <mat-form-field class="flex-fill flex-14" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
       <mat-label>{{ 'labels.inputs.Select On' | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyNthDayType">
         <mat-option
@@ -133,7 +133,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="14%" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
+    <mat-form-field class="flex-fill flex-14" *ngIf="loansAccountTermsForm.controls.repaymentFrequencyType.value === 2">
       <mat-label>{{ 'labels.inputs.Select Day' | translate }}</mat-label>
       <mat-select formControlName="repaymentFrequencyDayOfWeekType">
         <mat-option
@@ -146,25 +146,24 @@
     </mat-form-field>
 
     <mat-checkbox
-      fxFlex="73%"
       labelPosition="before"
       formControlName="enableDownPayment"
       matTooltip="{{ 'tooltips.Leave this checkbox checked if the loan has Down Payment' | translate }}"
-      class="margin-b"
+      class="margin-b flex-73"
       *ngIf="productEnableDownPayment"
     >
       {{ 'labels.inputs.Enable Down Payment' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Nominal interest rate' | translate }}</h4>
+    <h4 class="mat-h4 flex-98">{{ 'labels.inputs.Nominal interest rate' | translate }}</h4>
 
     <ng-container *ngIf="!loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
-      <mat-form-field fxFlex="23%">
+      <mat-form-field class="flex-fill flex-23">
         <mat-label>{{ 'labels.inputs.Nominal interest rate' | translate }} %</mat-label>
         <input type="number" matInput formControlName="interestRatePerPeriod" />
       </mat-form-field>
 
-      <mat-form-field fxFlex="23%">
+      <mat-form-field class="flex-fill flex-23">
         <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
         <mat-select formControlName="interestRateFrequencyType">
           <mat-option
@@ -180,7 +179,7 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="23%">
+      <mat-form-field class="flex-fill flex-23">
         <mat-label>{{ 'labels.inputs.Interest method' | translate }}</mat-label>
         <mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate }}">
           <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
@@ -189,7 +188,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="23%">
+      <mat-form-field class="flex-fill flex-23">
         <mat-label>{{ 'labels.inputs.Amortization' | translate }}</mat-label>
         <mat-select
           required
@@ -206,13 +205,13 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="23%" *ngIf="isEqualPrincipalPayments()">
+      <mat-form-field class="flex-fill flex-23" *ngIf="isEqualPrincipalPayments()">
         <mat-label>{{ 'labels.inputs.Principal Percentage Per Installment' | translate }}</mat-label>
         <input type="number" matInput formControlName="fixedPrincipalPercentagePerInstallment" />
       </mat-form-field>
 
       <mat-checkbox
-        fxFlex="23%"
+        class="flex-23"
         formControlName="isEqualAmortization"
         [checked]="loansAccountTermsData?.isEqualAmortization"
       >
@@ -221,8 +220,8 @@
     </ng-container>
 
     <ng-container *ngIf="loansAccountTermsData?.isLoanProductLinkedToFloatingRate">
-      <div fxFlex="48%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-        <mat-form-field fxFlex="48%">
+      <div class="flex-48 layout-row-wrap gap-2percent layout-xs-column">
+        <mat-form-field class="flex-48">
           <mat-label>{{ 'labels.inputs.Interest Method' | translate }}</mat-label>
           <mat-select formControlName="interestType">
             <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
@@ -231,7 +230,7 @@
           </mat-select>
         </mat-form-field>
 
-        <mat-form-field fxFlex="48%">
+        <mat-form-field class="flex-48">
           <mat-label>{{ 'labels.inputs.Amortization' | translate }}</mat-label>
           <mat-select
             required
@@ -248,24 +247,24 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-checkbox fxFlex="48%" formControlName="isFloatingInterestRate">
+        <mat-checkbox class="flex-48" formControlName="isFloatingInterestRate">
           <p>{{ 'labels.inputs.Is Floating Rate' | translate }}?</p>
         </mat-checkbox>
       </div>
     </ng-container>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Loan Schedule' | translate }}</h4>
+    <h4 class="mat-h4 flex-98">{{ 'labels.inputs.Loan Schedule' | translate }}</h4>
 
-    <div fxFlex="48%" *ngIf="loanScheduleType">
-      <span fxFlex="40%"
+    <div class="flex-48" *ngIf="loanScheduleType">
+      <span class="flex-40"
         ><p>{{ 'labels.inputs.Loan Schedule Type' | translate }}</p></span
       >
-      <span fxFlex="60%"
+      <span class="flex-60"
         ><p>{{ loanScheduleType.value | translateKey: 'catalogs' }}</p></span
       >
     </div>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Repayment Strategy' | translate }}</mat-label>
       <mat-select
         formControlName="transactionProcessingStrategyCode"
@@ -285,14 +284,14 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
+    <mat-form-field class="flex-48" *ngIf="loansAccountTermsData?.canDefineInstallmentAmount">
       <mat-label>{{ 'labels.inputs.Installment Amount' | translate }}</mat-label>
       <input type="number" matInput formControlName="fixedEmiAmount" />
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Interest Calculations' | translate }}</h4>
+    <h4 class="mat-h4 flex-98">{{ 'labels.heading.Interest Calculations' | translate }}</h4>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-40">
       <mat-label>{{ 'labels.inputs.Interest calculation period' | translate }}</mat-label>
       <mat-select
         formControlName="interestCalculationPeriodType"
@@ -308,7 +307,7 @@
     </mat-form-field>
 
     <mat-checkbox
-      fxFlex="48%"
+      class="flex-48"
       formControlName="allowPartialPeriodInterestCalculation"
       matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate }}"
     >
@@ -316,12 +315,12 @@
     </mat-checkbox>
 
     <ng-container *ngIf="isProgressive">
-      <mat-checkbox formControlName="interestRecognitionOnDisbursementDate" fxFlex="48%">
+      <mat-checkbox formControlName="interestRecognitionOnDisbursementDate" class="flex-48">
         <p>{{ 'labels.inputs.Is interest recognition on disbursement date?' | translate }}</p>
       </mat-checkbox>
     </ng-container>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Arrears tolerance' | translate }} </mat-label>
       <input
         matInput
@@ -331,7 +330,7 @@
       />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Interest free period' | translate }}</mat-label>
       <input
         matInput
@@ -340,47 +339,47 @@
       />
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">
+    <h4 class="mat-h4 flex-98">
       {{ 'labels.heading.Moratorium' | translate }}
       <i class="fas fa-question" matTooltip="{{ 'tooltips.The moratorium information' | translate }}"></i>
     </h4>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Grace on principal payment' | translate }}</mat-label>
       <input type="number" matInput formControlName="graceOnPrincipalPayment" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="23%">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Grace on interest payment' | translate }}</mat-label>
       <input type="number" matInput formControlName="graceOnInterestPayment" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.On arrears ageing' | translate }}</mat-label>
       <input type="number" matInput formControlName="graceOnArrearsAgeing" />
     </mat-form-field>
 
-    <div fxFlexFill fxFlex="48%" *ngIf="isDelinquencyEnabled()">
+    <div class="flex-48 flex-fill" *ngIf="isDelinquencyEnabled()">
       <p>
-        <span fxFlex="53%"
+        <span class="flex-53"
           ><b>{{ 'labels.inputs.Delinquency Bucket' | translate }}</b></span
         >
-        <span fxFlex="48%">{{ loanProduct?.delinquencyBucket.name }}</span>
+        <span class="flex-48">{{ loanProduct?.delinquencyBucket.name }}</span>
       </p>
     </div>
 
-    <div fxFlex="48%" *ngIf="isDelinquencyEnabled()">
+    <div class="flex-48" *ngIf="isDelinquencyEnabled()">
       <mat-checkbox formControlName="enableInstallmentLevelDelinquency">
         <p>{{ 'labels.inputs.Enable installment level Delinquency' | translate }}</p>
       </mat-checkbox>
     </div>
 
-    <ng-container fxFlex="48%" *ngIf="loansAccountTermsData?.isTopup">
-      <mat-checkbox fxFlex="20%" formControlName="isTopup">
+    <ng-container class="flex-48" *ngIf="loansAccountTermsData?.isTopup">
+      <mat-checkbox class="flex-20" formControlName="isTopup">
         <p>{{ 'labels.inputs.Is Topup Loan' | translate }}?</p>
       </mat-checkbox>
 
-      <mat-form-field fxFlex="24%" *ngIf="loansAccountTermsForm.controls.isTopup.value">
+      <mat-form-field class="flex-fill flex-24" *ngIf="loansAccountTermsForm.controls.isTopup.value">
         <mat-label>{{ 'labels.inputs.Loan closed with Topup' | translate }}</mat-label>
         <mat-select formControlName="loanIdToClose">
           <mat-option *ngFor="let clientActiveLoan of clientActiveLoanData" [value]="clientActiveLoan.id">
@@ -390,44 +389,44 @@
       </mat-form-field>
     </ng-container>
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <mat-divider class="flex-98"></mat-divider>
 
-    <div fxFlexFill>
-      <span fxFlex="40%"
+    <div class="flex-fill">
+      <span class="flex-40"
         ><b>{{ 'labels.inputs.Recalculate Interest' | translate }}</b></span
       >
-      <span fxFlex="60%">{{ loansAccountTermsData?.isInterestRecalculationEnabled | yesNo }}</span>
+      <span class="flex-60">{{ loansAccountTermsData?.isInterestRecalculationEnabled | yesNo }}</span>
     </div>
 
-    <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-      <span fxFlex="40%">{{ 'labels.inputs.Days in year' | translate }}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData.daysInYearType.value | translateKey: 'catalogs' }}</span>
+    <div class="flex-fill" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
+      <span class="flex-40">{{ 'labels.inputs.Days in year' | translate }}</span>
+      <span class="flex-60">{{ loansAccountTermsData.daysInYearType.value | translateKey: 'catalogs' }}</span>
     </div>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-      <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">{{ 'labels.inputs.Advance payments adjustment type' | translate }}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.rescheduleStrategyType.value }}</span>
+      <div class="flex-fill" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
+        <span class="flex-40">{{ 'labels.inputs.Advance payments adjustment type' | translate }}</span>
+        <span class="flex-60">{{ loansAccountTermsData.interestRecalculationData.rescheduleStrategyType.value }}</span>
       </div>
 
-      <div fxFlexFill *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-        <span fxFlex="40%">{{ 'labels.inputs.Days in month' | translate }}</span>
-        <span fxFlex="60%">{{ loansAccountTermsData.daysInMonthType.value | translateKey: 'catalogs' }}</span>
+      <div class="flex-fill" *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
+        <span class="flex-40">{{ 'labels.inputs.Days in month' | translate }}</span>
+        <span class="flex-60">{{ loansAccountTermsData.daysInMonthType.value | translateKey: 'catalogs' }}</span>
       </div>
     </ng-container>
 
     <ng-container *ngIf="loansAccountTermsData?.isInterestRecalculationEnabled">
-      <div fxFlexFill>
-        <span fxFlex="40%">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}</span>
-        <span fxFlex="60%">{{
+      <div class="flex-fill">
+        <span class="flex-40">{{ 'labels.inputs.Interest recalculation compounding on' | translate }}</span>
+        <span class="flex-60">{{
           loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.value
             | translateKey: 'catalogs'
         }}</span>
       </div>
 
-      <div fxFlexFill>
-        <span fxFlex="40%">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</span>
-        <span fxFlex="60%">
+      <div class="flex-fill">
+        <span class="flex-40">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</span>
+        <span class="flex-60">
           <span>{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.value }}</span>
           <span
             *ngIf="
@@ -459,32 +458,34 @@
     </ng-container>
 
     <div
-      fxFlexFill
+      class="flex-fill"
       *ngIf="
         loansAccountTermsData?.isInterestRecalculationEnabled &&
         loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyType.id !== 1
       "
     >
-      <span fxFlex="40%">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</span>
-      <span fxFlex="60%">{{ loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyInterval }}</span>
+      <span class="flex-40">{{ 'labels.inputs.Frequency Interval for recalculation' | translate }}</span>
+      <span class="flex-60">{{
+        loansAccountTermsData.interestRecalculationData.recalculationRestFrequencyInterval
+      }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="40%"
+    <div class="flex-fill">
+      <span class="flex-40"
         ><b>{{ 'labels.inputs.Enable income capitalization' | translate }}</b></span
       >
-      <span fxFlex="60%">{{ enableIncomeCapitalization | yesNo }}</span>
+      <span class="flex-40">{{ enableIncomeCapitalization | yesNo }}</span>
     </div>
 
     <ng-container *ngIf="multiDisburseLoan">
-      <mat-divider fxFlex="98%"></mat-divider>
-      <div fxFlexFill *ngIf="allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Loan Tranche Details' | translate }}</h4>
-        <mat-form-field fxFlex="48%">
+      <mat-divider class="flex-98"></mat-divider>
+      <div class="flex-fill" *ngIf="allowAddDisbursementDetails()">
+        <h4 class="mat-h4 flex-98">{{ 'labels.heading.Loan Tranche Details' | translate }}</h4>
+        <mat-form-field class="flex-48">
           <mat-label>{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}</mat-label>
           <input matInput required formControlName="maxOutstandingLoanBalance" />
         </mat-form-field>
-        <span fxFlex>
+        <span class="flex">
           <button
             type="button"
             mat-icon-button
@@ -497,8 +498,8 @@
           </button>
         </span>
       </div>
-      <div fxFlexFill *ngIf="!allowAddDisbursementDetails()">
-        <h4 fxFlex="98%" class="mat-h4">
+      <div class="flex-fill" *ngIf="!allowAddDisbursementDetails()">
+        <h4 class="mat-h4 flex-98">
           {{ 'labels.heading.Loan Tranche Details are not allowed for this Loan Product' | translate }}
         </h4>
       </div>
@@ -545,9 +546,9 @@
         loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id !== 0
       "
     >
-      <div fxFlexFill>
-        <span fxFlex="40%">{{ 'labels.inputs.Frequency for compounding' | translate }}</span>
-        <span fxFlex="60%"
+      <div class="flex-fill">
+        <span class="flex-40">{{ 'labels.inputs.Frequency for compounding' | translate }}</span>
+        <span class="flex-60"
           >{{ loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.value }}
           <span
             *ngIf="
@@ -580,28 +581,28 @@
     </ng-container>
 
     <div
-      fxFlexFill
+      class="flex-fill"
       *ngIf="
         loansAccountTermsData?.isInterestRecalculationEnabled &&
         loansAccountTermsData.interestRecalculationData.interestRecalculationCompoundingType.id !== 0 &&
         loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyType.id !== 1
       "
     >
-      <span fxFlex="40%">{{ 'labels.inputs.Frequency Interval for compounding' | translate }}</span>
-      <span fxFlex="60%">{{
+      <span class="flex-40">{{ 'labels.inputs.Frequency Interval for compounding' | translate }}</span>
+      <span class="flex-60">{{
         loansAccountTermsData.interestRecalculationData.recalculationCompoundingFrequencyInterval
       }}</span>
     </div>
 
-    <mat-divider fxFlex="98%"></mat-divider>
+    <mat-divider class="flex-98"></mat-divider>
 
-    <div fxFlex="50%">
-      <div fxLayout="column" fxFlex="50%" class="table-name">
-        <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Collaterals Data' | translate }}</h4>
+    <div class="flex-50">
+      <div class="layout-column table-name flex-50">
+        <h4 class="mat-h4 flex-98">{{ 'labels.heading.Collaterals Data' | translate }}</h4>
       </div>
 
-      <div fxLayout="column" fxFlex="50%">
-        <div fxLayout="row" fxLayoutAlign="flex-end">
+      <div class="layout-column flex-50">
+        <div class="layout-row align-flex-end">
           <button mat-raised-button color="primary" (click)="addCollateral()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
           </button>
@@ -643,7 +644,7 @@
     </table>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/loans/loans-account-stepper/loans-active-client-members/loans-active-client-members.component.html

@@ -1,5 +1,5 @@
-<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="activeClientMembers">
-  <table fxFlex="98%" mat-table [dataSource]="dataSource">
+<div *ngIf="activeClientMembers" class="layout-row-wrap gap-2percent layout-xs-column">
+  <table class="flex-98" mat-table [dataSource]="dataSource">
     <!-- Check Column -->
     <ng-container matColumnDef="check">
       <th mat-header-cell *matHeaderCellDef>
@@ -52,7 +52,7 @@
   </table>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/loans/loans-view/account-details/account-details.component.html

@@ -1,15 +1,15 @@
 <div class="container p-b-20">
   <h3>{{ 'labels.heading.Loan Details' | translate }}</h3>
 
-  <div fxLayout="row wrap" fxLayout.lt-md="column">
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Repayment Strategy' | translate }}</span>
-      <span fxFlex="50%">{{ loanDetails.transactionProcessingStrategyName | translateKey: 'catalogs' }}</span>
+  <div class="responsive-column">
+    <div class="flex-fill layout-row">
+      <span class="flex-50">{{ 'labels.inputs.Repayment Strategy' | translate }}</span>
+      <span class="flex-50">{{ loanDetails.transactionProcessingStrategyName | translateKey: 'catalogs' }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Repayments' | translate }}</span>
-      <span fxFlex="50%"
+    <div class="flex-fill layout-row">
+      <span class="flex-50">{{ 'labels.inputs.Repayments' | translate }}</span>
+      <span class="flex-50"
         >{{ loanDetails.numberOfRepayments }} every {{ loanDetails.repaymentEvery }}&nbsp;{{
           loanDetails.repaymentFrequencyType.value | translateKey: 'catalogs'
         }}
@@ -32,31 +32,31 @@
       </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.fixedLength">
-      <span fxFlex="50%"> {{ 'labels.inputs.Fixed Length' | translate }} </span>
-      <span fxFlex="50%">
+    <div class="flex-fill layout-row" *ngIf="loanDetails.fixedLength">
+      <span class="flex-50"> {{ 'labels.inputs.Fixed Length' | translate }} </span>
+      <span class="flex-50">
         {{ loanDetails.fixedLength }} {{ loanDetails.repaymentFrequencyType.value | translateKey: 'catalogs' }}</span
       >
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Amortization' | translate }} </span>
-      <span fxFlex="50%"> {{ loanDetails.amortizationType.value | translateKey: 'catalogs' }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Amortization' | translate }} </span>
+      <span class="flex-50"> {{ loanDetails.amortizationType.value | translateKey: 'catalogs' }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
-      <span fxFlex="50%"> {{ 'labels.inputs.Principal Percentage Per Installment' | translate }} </span>
-      <span fxFlex="50%"> {{ loanDetails.fixedPrincipalPercentagePerInstallment | formatNumber }} %</span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.fixedPrincipalPercentagePerInstallment">
+      <span class="flex-50"> {{ 'labels.inputs.Principal Percentage Per Installment' | translate }} </span>
+      <span class="flex-50"> {{ loanDetails.fixedPrincipalPercentagePerInstallment | formatNumber }} %</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Equal Amortization' | translate }} </span>
-      <span fxFlex="50%"> {{ loanDetails.isEqualAmortization | yesNo }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Equal Amortization' | translate }} </span>
+      <span class="flex-50"> {{ loanDetails.isEqualAmortization | yesNo }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Interest' | translate }} </span>
-      <span fxFlex="50%">
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Interest' | translate }} </span>
+      <span class="flex-50">
         {{ loanDetails.annualInterestRate | formatNumber }} % {{ 'labels.text.per annum' | translate }} ({{
           loanDetails.interestRatePerPeriod
         }}
@@ -64,189 +64,191 @@
       </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Interest Type' | translate }} </span>
-      <span fxFlex="50%"> {{ 'labels.text.' + loanDetails.interestType.value | translate }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Interest Type' | translate }} </span>
+      <span class="flex-50"> {{ 'labels.text.' + loanDetails.interestType.value | translate }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
-      <span fxFlex="50%">{{ loanDetails.enableDownPayment | yesNo }}</span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50">{{ 'labels.inputs.Enable Down Payments' | translate }}:</span>
+      <span class="flex-50">{{ loanDetails.enableDownPayment | yesNo }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}:</span>
-      <span fxFlex="50%">{{ loanDetails.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50">{{ 'labels.inputs.Loan Charge-off behaviour' | translate }}:</span>
+      <span class="flex-50">{{ loanDetails.chargeOffBehaviour.value | translateKey: 'catalogs' }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Enable income capitalization' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.enableIncomeCapitalization | yesNo }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Enable income capitalization' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.enableIncomeCapitalization | yesNo }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.enableIncomeCapitalization">
-      <span fxFlex="50%"> {{ 'labels.inputs.Income capitalization calculation type' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.capitalizedIncomeCalculationType?.value | translateKey: 'catalogs' }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.enableIncomeCapitalization">
+      <span class="flex-50"> {{ 'labels.inputs.Income capitalization calculation type' | translate }}</span>
+      <span class="flex-50">
+        {{ loanDetails.capitalizedIncomeCalculationType?.value | translateKey: 'catalogs' }}
+      </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.enableIncomeCapitalization">
-      <span fxFlex="50%"> {{ 'labels.inputs.Income capitalization strategy' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.capitalizedIncomeStrategy?.value | translateKey: 'catalogs' }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.enableIncomeCapitalization">
+      <span class="flex-50"> {{ 'labels.inputs.Income capitalization strategy' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.capitalizedIncomeStrategy?.value | translateKey: 'catalogs' }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.enableIncomeCapitalization">
-      <span fxFlex="50%"> {{ 'labels.inputs.Income capitalization type' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.capitalizedIncomeType?.value | translateKey: 'catalogs' }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.enableIncomeCapitalization">
+      <span class="flex-50"> {{ 'labels.inputs.Income capitalization type' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.capitalizedIncomeType?.value | translateKey: 'catalogs' }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Grace: On Principal Payment' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.graceOnPrincipalPayment }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Grace: On Principal Payment' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.graceOnPrincipalPayment }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Grace: On Interest Payment' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.graceOnInterestPayment }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Grace: On Interest Payment' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.graceOnInterestPayment }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Grace on Arrears Ageing' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.graceOnArrearsAgeing }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Grace on Arrears Ageing' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.graceOnArrearsAgeing }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Enable installment level Delinquency' | translate }} </span>
-      <span fxFlex="50%"> {{ loanDetails.enableInstallmentLevelDelinquency | yesNo }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Enable installment level Delinquency' | translate }} </span>
+      <span class="flex-50"> {{ loanDetails.enableInstallmentLevelDelinquency | yesNo }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Fund Source' | translate }} </span>
-      <span fxFlex="50%" *ngIf="loanDetails.fundName"> {{ loanDetails.fundName }} </span>
-      <span fxFlex="50%" *ngIf="!loanDetails.fundName"> {{ 'labels.inputs.Unassigned' | translate }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Fund Source' | translate }} </span>
+      <span class="flex-50" *ngIf="loanDetails.fundName"> {{ loanDetails.fundName }} </span>
+      <span class="flex-50" *ngIf="!loanDetails.fundName"> {{ 'labels.inputs.Unassigned' | translate }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Interest Free Period' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.graceOnInterestCharged }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Interest Free Period' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.graceOnInterestCharged }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Interest Calculation Period' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.interestCalculationPeriodType.value | translateKey: 'catalogs' }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Interest Calculation Period' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.interestCalculationPeriodType.value | translateKey: 'catalogs' }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">
+    <div class="flex-fill layout-row">
+      <span class="flex-50">
         {{ 'labels.inputs.Allow Partial Interest Calculation with same as repayment' | translate }}</span
       >
-      <span fxFlex="50%"> {{ loanDetails.allowPartialPeriodInterestCalculation | yesNo }} </span>
+      <span class="flex-50"> {{ loanDetails.allowPartialPeriodInterestCalculation | yesNo }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%">{{ 'labels.inputs.Is interest recognition on disbursement date?' | translate }}:</span>
-      <span fxFlex="50%">{{ loanDetails.interestRecognitionOnDisbursementDate | yesNo }}</span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50">{{ 'labels.inputs.Is interest recognition on disbursement date?' | translate }}:</span>
+      <span class="flex-50">{{ loanDetails.interestRecognitionOnDisbursementDate | yesNo }}</span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Submitted on' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.timeline.submittedOnDate | dateFormat }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Submitted on' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.timeline.submittedOnDate | dateFormat }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Approved on' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.timeline.approvedOnDate | dateFormat }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Approved on' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.timeline.approvedOnDate | dateFormat }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Disbursed on' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.timeline.actualDisbursementDate | dateFormat }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Disbursed on' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.timeline.actualDisbursementDate | dateFormat }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Matures on' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.timeline.expectedMaturityDate | dateFormat }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Matures on' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.timeline.expectedMaturityDate | dateFormat }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.canDefineInstallmentAmount">
-      <span fxFlex="50%"> {{ 'labels.inputs.Fixed EMI amount' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.fixedEmiAmount | formatNumber }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.canDefineInstallmentAmount">
+      <span class="flex-50"> {{ 'labels.inputs.Fixed EMI amount' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.fixedEmiAmount | formatNumber }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isTopup">
-      <span fxFlex="50%"> {{ 'labels.inputs.Is Topup Loan' | translate }}?</span>
-      <span fxFlex="50%"> {{ loanDetails.isTopup | yesNo }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isTopup">
+      <span class="flex-50"> {{ 'labels.inputs.Is Topup Loan' | translate }}?</span>
+      <span class="flex-50"> {{ loanDetails.isTopup | yesNo }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isTopup">
-      <span fxFlex="50%"> {{ 'labels.inputs.Loan closed with Topup' | translate }} </span>
-      <span fxFlex="50%">
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isTopup">
+      <span class="flex-50"> {{ 'labels.inputs.Loan closed with Topup' | translate }} </span>
+      <span class="flex-50">
         <a href="#">{{ loanDetails.closureLoanAccountNo }}</a>
       </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isTopup">
-      <span fxFlex="50%"> {{ 'labels.inputs.Topup closure amount' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.topupAmount | formatNumber }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isTopup">
+      <span class="flex-50"> {{ 'labels.inputs.Topup closure amount' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.topupAmount | formatNumber }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Recalculate Interest based on new terms' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.isInterestRecalculationEnabled | yesNo }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Recalculate Interest based on new terms' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.isInterestRecalculationEnabled | yesNo }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Days in year' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.daysInYearType.value | translateKey: 'catalogs' }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Days in year' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.daysInYearType.value | translateKey: 'catalogs' }} </span>
     </div>
 
-    <div fxFlexFill>
-      <span fxFlex="50%"> {{ 'labels.inputs.Days in month' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.daysInMonthType.value | translateKey: 'catalogs' }} </span>
+    <div class="flex-fill layout-row">
+      <span class="flex-50"> {{ 'labels.inputs.Days in month' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.daysInMonthType.value | translateKey: 'catalogs' }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-      <span fxFlex="50%"> {{ 'labels.inputs.Interest recalculation compounding on' | translate }}</span>
-      <span fxFlex="50%">
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isInterestRecalculationEnabled">
+      <span class="flex-50"> {{ 'labels.inputs.Interest recalculation compounding on' | translate }}</span>
+      <span class="flex-50">
         {{
           loanDetails.interestRecalculationData.interestRecalculationCompoundingType.value | translateKey: 'catalogs'
         }}
       </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-      <span fxFlex="50%"> {{ 'labels.inputs.Advance payments adjustment type' | translate }}</span>
-      <span fxFlex="50%">
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isInterestRecalculationEnabled">
+      <span class="flex-50"> {{ 'labels.inputs.Advance payments adjustment type' | translate }}</span>
+      <span class="flex-50">
         {{ loanDetails.interestRecalculationData.rescheduleStrategyType.value | translateKey: 'catalogs' }}
       </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isInterestRecalculationEnabled">
-      <span fxFlex="50%"> {{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.interestRecalculationData.calendarData.humanReadable }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isInterestRecalculationEnabled">
+      <span class="flex-50"> {{ 'labels.inputs.Frequency for recalculate Outstanding Principal' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.interestRecalculationData.calendarData.humanReadable }} </span>
     </div>
 
     <div
-      fxFlexFill
+      class="flex-fill layout-row"
       *ngIf="
         loanDetails.isInterestRecalculationEnabled &&
         loanDetails.interestRecalculationData.interestRecalculationCompoundingType.id !== 0
       "
     >
-      <span fxFlex="50%"> {{ 'labels.inputs.Frequency for compounding' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.interestRecalculationData.compoundingCalendarData.humanReadable }} </span>
+      <span class="flex-50"> {{ 'labels.inputs.Frequency for compounding' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.interestRecalculationData.compoundingCalendarData.humanReadable }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-      <span fxFlex="50%"> {{ 'labels.inputs.Variable Installments Allowed' | translate }}</span>
-      <span fxFlex="50%"> {{ loanDetails.isVariableInstallmentsAllowed | yesNo }} </span>
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isVariableInstallmentsAllowed">
+      <span class="flex-50"> {{ 'labels.inputs.Variable Installments Allowed' | translate }}</span>
+      <span class="flex-50"> {{ loanDetails.isVariableInstallmentsAllowed | yesNo }} </span>
     </div>
 
-    <div fxFlexFill *ngIf="loanDetails.isVariableInstallmentsAllowed">
-      <span fxFlex="50%"> {{ 'labels.inputs.Gap between Installments' | translate }}</span>
-      <span fxFlex="50%">
+    <div class="flex-fill layout-row" *ngIf="loanDetails.isVariableInstallmentsAllowed">
+      <span class="flex-50"> {{ 'labels.inputs.Gap between Installments' | translate }}</span>
+      <span class="flex-50">
         {{ loanDetails.minimumGap | formatNumber }}&nbsp;{{ 'labels.text.Days' | translate }}&nbsp;, Max:{{
           loanDetails.maximumGap | formatNumber
-        }}&nbsp;{{ 'labels.text.Days' | translate }})
+        }}&nbsp;{{ 'labels.text.Days' | translate }}
       </span>
     </div>
   </div>

src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html

@@ -1,23 +1,23 @@
 <div class="tab-container mat-typography">
-  <div fxFlexFill *ngIf="existActiveTransfer">
+  <div class="flex-fill" *ngIf="existActiveTransfer">
     <h3>{{ 'labels.heading.Active Asset Transfer' | translate }}</h3>
-    <div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
+    <div class="layout-row gap-32px asset-transfer-container">
       <table>
         <tbody>
           <tr>
-            <td fxFlex="25%">
+            <td class="flex-25">
               <b>{{ 'labels.inputs.Status' | translate }} :</b>
             </td>
-            <td fxFlex="25%" class="left">
+            <td class="flex-25 left">
               <div [ngClass]="itemStatus(activeTransferData.status)">
                 <fa-icon icon="stop"></fa-icon>
                 <span class="m-l-10 external-asset-owner-status">{{ activeTransferData.status }}</span>
               </div>
             </td>
-            <td fxFlex="25%">
+            <td class="flex-25">
               <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
             </td>
-            <td fxFlex="25%" class="left">
+            <td class="flex-25 left">
               <mifosx-external-identifier
                 externalId="{{ activeTransferData.owner.externalId }}"
                 completed="true"
@@ -25,71 +25,71 @@
             </td>
           </tr>
           <tr>
-            <td fxFlex="25%">
+            <td class="flex-25">
               <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
             </td>
-            <td fxFlex="25%" class="left">
+            <td class="flex-25 left">
               {{ activeTransferData.settlementDate | dateFormat }}
             </td>
-            <td fxFlex="25%">
+            <td class="flex-25">
               <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
             </td>
-            <td fxFlex="25%" class="left">
+            <td class="flex-25 left">
               {{ activeTransferData.effectiveFrom | dateFormat }}
             </td>
           </tr>
           <tr>
-            <td fxFlex="25%">
+            <td class="flex-25">
               <b>{{ 'labels.inputs.Details' | translate }} :</b>
             </td>
-            <td fxFlex="75%" class="left">
+            <td class="flex-75 left">
               <table>
                 <tbody>
                   <tr>
-                    <td fxFlex="50%">
+                    <td class="flex-50">
                       <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
                     </td>
-                    <td fxFlex="50%" class="r-amount">
+                    <td class="flex-50 r-amount">
                       {{ activeTransferData.details.totalPrincipalOutstanding | formatNumber }}
                     </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%">
+                    <td class="flex-50">
                       <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
                     </td>
-                    <td fxFlex="50%" class="r-amount">
+                    <td class="flex-50 r-amount">
                       {{ activeTransferData.details.totalInterestOutstanding | formatNumber }}
                     </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%">
+                    <td class="flex-50">
                       <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
                     </td>
-                    <td fxFlex="50%" class="r-amount">
+                    <td class="flex-50 r-amount">
                       {{ activeTransferData.details.totalFeeChargesOutstanding | formatNumber }}
                     </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%">
+                    <td class="flex-50">
                       <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
                     </td>
-                    <td fxFlex="50%" class="r-amount">
+                    <td class="flex-50 r-amount">
                       {{ activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber }}
                     </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%">
+                    <td class="flex-50">
                       <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
                     </td>
-                    <td fxFlex="50%" class="r-amount">
+                    <td class="flex-50 r-amount">
                       {{ activeTransferData.details.totalOutstanding | formatNumber }}
                     </td>
                   </tr>
                   <tr>
-                    <td fxFlex="50%">
+                    <td class="flex-50">
                       <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
                     </td>
-                    <td fxFlex="50%" class="r-amount">{{ activeTransferData.details.totalOverpaid | formatNumber }}</td>
+                    <td class="flex-50 r-amount">{{ activeTransferData.details.totalOverpaid | formatNumber }}</td>
                   </tr>
                 </tbody>
               </table>
@@ -100,16 +100,16 @@
     </div>
   </div>
 
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <h3 fxFlex="90%">{{ 'labels.heading.External Asset Owner' | translate }}</h3>
+  <div class="layout-row align-start-center">
+    <h3 class="flex-90">{{ 'labels.heading.External Asset Owner' | translate }}</h3>
 
-    <div fxFlex="10%" *ngIf="canBeSold()">
+    <div class="flex-10" *ngIf="canBeSold()">
       <button mat-raised-button class="f-right" color="primary" (click)="saleLoan()" *mifosxHasPermission="'SALE_LOAN'">
         <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{ 'labels.buttons.Sell Loan' | translate }}
       </button>
     </div>
 
-    <div fxFlex="10%" *ngIf="canBeCancelled()">
+    <div class="flex-10" *ngIf="canBeCancelled()">
       <button
         mat-raised-button
         class="f-right"
@@ -121,7 +121,7 @@
       </button>
     </div>
 
-    <div fxFlex="10%" *ngIf="canBeBuyed()">
+    <div class="flex-10" *ngIf="canBeBuyed()">
       <button
         mat-raised-button
         class="f-right"

src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html

@@ -1,19 +1,19 @@
 <table>
   <tbody>
     <tr>
-      <td fxFlex="25%" class="m-l-5">
+      <td class="m-l-5 flex-25">
         <b>{{ 'labels.inputs.Status' | translate }} :</b>
       </td>
-      <td fxFlex="25%" class="m-l-5 left">
+      <td class="flex-25 m-l-5 left">
         <div [ngClass]="itemStatus(transferData.status)">
           <fa-icon icon="stop"></fa-icon>
           <span class="m-l-5 status">{{ transferData.status }}</span>
         </div>
       </td>
-      <td fxFlex="25%" class="m-l-5">
+      <td class="m-l-5 flex-25">
         <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
       </td>
-      <td fxFlex="25%" class="m-l-5 left">
+      <td class="flex-25 m-l-5 left">
         <mifosx-external-identifier
           externalId="{{ transferData.owner.externalId }}"
           completed="true"
@@ -21,65 +21,65 @@
       </td>
     </tr>
     <tr>
-      <td fxFlex="25%" class="m-l-5">
+      <td class="m-l-5 flex-25">
         <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
       </td>
-      <td fxFlex="25%" class="m-l-5">
+      <td class="m-l-5 flex-25">
         {{ transferData.settlementDate | dateFormat }}
       </td>
-      <td fxFlex="25%" class="m-l-5">
+      <td class="m-l-5 flex-25">
         <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
       </td>
-      <td fxFlex="25%" class="m-l-5">
+      <td class="m-l-5 flex-25">
         {{ transferData.effectiveFrom | dateFormat }}
       </td>
     </tr>
     <tr>
-      <td fxFlex="25%" class="m-l-5">
+      <td class="m-l-5 flex-25">
         <b>{{ 'labels.inputs.Details' | translate }} :</b>
       </td>
-      <td fxFlex="75%" class="left">
+      <td class="flex-75 left">
         <table>
           <tbody>
             <tr>
-              <td fxFlex="50%" class="m-l-5">
+              <td class="flex-50 m-l-5">
                 <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
               </td>
-              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalPrincipalOutstanding | formatNumber }}</td>
+              <td class="flex-50 r-amount">{{ transferData.details.totalPrincipalOutstanding | formatNumber }}</td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5">
+              <td class="flex-50 m-l-5">
                 <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
               </td>
-              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalInterestOutstanding | formatNumber }}</td>
+              <td class="flex-50 r-amount">{{ transferData.details.totalInterestOutstanding | formatNumber }}</td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5">
+              <td class="flex-50 m-l-5">
                 <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
               </td>
-              <td fxFlex="50%" class="r-amount">
+              <td class="flex-50 r-amount">
                 {{ transferData.details.totalFeeChargesOutstanding | formatNumber }}
               </td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5">
+              <td class="flex-50 m-l-5">
                 <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
               </td>
-              <td fxFlex="50%" class="r-amount">
+              <td class="flex-50 r-amount">
                 {{ transferData.details.totalPenaltyChargesOutstanding | formatNumber }}
               </td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5">
+              <td class="flex-50 m-l-5">
                 <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
               </td>
-              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalOutstanding | formatNumber }}</td>
+              <td class="flex-50 r-amount">{{ transferData.details.totalOutstanding | formatNumber }}</td>
             </tr>
             <tr>
-              <td fxFlex="50%" class="m-l-5">
+              <td class="flex-50 m-l-5">
                 <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
               </td>
-              <td fxFlex="50%" class="r-amount">{{ transferData.details.totalOverpaid | formatNumber }}</td>
+              <td class="flex-50 r-amount">{{ transferData.details.totalOverpaid | formatNumber }}</td>
             </tr>
           </tbody>
         </table>

src/app/loans/loans-view/general-tab/general-tab.component.html

@@ -1,20 +1,20 @@
 <div class="tab-container mat-typography">
   <ng-container *ngIf="loanDetails.summary">
     <h3>{{ 'labels.heading.Performance History' | translate }}</h3>
-    <div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
+    <div class="layout-row gap-32px performance-history-container">
       <table>
         <tbody>
           <tr>
-            <td fxFlex="25%">
+            <td class="flex-25">
               <b>{{ 'labels.inputs.Number of Repayments' | translate }} :</b>
             </td>
-            <td fxFlex="25%" class="left">
+            <td class="flex-25 left">
               {{ loanDetails?.numberOfRepayments | formatNumber }}
             </td>
-            <td fxFlex="25%">
+            <td class="flex-25">
               <b>{{ 'labels.inputs.Maturity Date' | translate }} :</b>
             </td>
-            <td fxFlex="25%" class="left">
+            <td class="flex-25 left">
               {{ loanDetails?.timeline.expectedMaturityDate | dateFormat }}
             </td>
           </tr>
@@ -192,46 +192,46 @@
   <div *ngIf="!loanDetails.summary">
     <h3>{{ 'labels.heading.Loan Purpose' | translate }}</h3>
     <div class="container">
-      <div fxLayout="row wrap" fxLayout.lt-md="column">
-        <div fxFlexFill>
-          <span fxFlex="50%">{{ 'labels.inputs.Loan Purpose' | translate }}:</span>
-          <span fxFlex="50%" *ngIf="loanDetails.loanPurposeName">
+      <div class="layout-row-wrap responsive-column">
+        <div class="flex-contents">
+          <span class="flex-50">{{ 'labels.inputs.Loan Purpose' | translate }}:</span>
+          <span class="flex-50" *ngIf="loanDetails.loanPurposeName">
             {{ loanDetails.loanPurposeName }}
           </span>
-          <span fxFlex="50%" *ngIf="!loanDetails.loanPurposeName">
+          <span class="flex-50" *ngIf="!loanDetails.loanPurposeName">
             {{ 'labels.inputs.Not Provided' | translate }}
           </span>
         </div>
 
-        <div fxFlexFill>
-          <span fxFlex="50%">{{ 'labels.inputs.Proposed Amount' | translate }}:</span>
-          <span fxFlex="50%">{{
+        <div class="flex-contents">
+          <span class="flex-50">{{ 'labels.inputs.Proposed Amount' | translate }}:</span>
+          <span class="flex-50">{{
             loanDetails.proposedPrincipal | currency: currencyCode : 'symbol-narrow' : '1.2-2'
           }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="showApprovedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{ 'labels.inputs.Approved Amount' | translate }}:</span>
-          <span fxFlex="50%">{{
+        <div class="flex-contents" *ngIf="showApprovedAmountBasedOnStatus()">
+          <span class="flex-50">{{ 'labels.inputs.Approved Amount' | translate }}:</span>
+          <span class="flex-50">{{
             loanDetails.approvedPrincipal | currency: currencyCode : 'symbol-narrow' : '1.2-2'
           }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="showDisbursedAmountBasedOnStatus()">
-          <span fxFlex="50%">{{ 'labels.inputs.Disburse Amount' | translate }}:</span>
-          <span fxFlex="50%">{{ loanDetails.principal | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</span>
+        <div class="flex-contents" *ngIf="showDisbursedAmountBasedOnStatus()">
+          <span class="flex-50">{{ 'labels.inputs.Disburse Amount' | translate }}:</span>
+          <span class="flex-50">{{ loanDetails.principal | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="loanDetails.balloonRepaymentAmount > 0">
-          <span fxFlex="50%">{{ 'labels.inputs.Balloon Repayment Amount' | translate }}:</span>
-          <span fxFlex="50%">{{
+        <div class="flex-contents" *ngIf="loanDetails.balloonRepaymentAmount > 0">
+          <span class="flex-50">{{ 'labels.inputs.Balloon Repayment Amount' | translate }}:</span>
+          <span class="flex-50">{{
             loanDetails.balloonRepaymentAmount | currency: currencyCode : 'symbol-narrow' : '1.2-2'
           }}</span>
         </div>
 
-        <div fxFlexFill>
-          <span fxFlex="50%">{{ 'labels.inputs.Arrears By' | translate }}:</span>
-          <span fxFlex="50%">{{ 'labels.inputs.Not Provided' | translate }}</span>
+        <div class="flex-contents">
+          <span class="flex-50">{{ 'labels.inputs.Arrears By' | translate }}:</span>
+          <span class="flex-50">{{ 'labels.inputs.Not Provided' | translate }}</span>
         </div>
       </div>
     </div>

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="collateralForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Collateral Type' | translate }}</mat-label>
             <mat-select required formControlName="collateralTypeId">
@@ -31,7 +31,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html

@@ -1,11 +1,11 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <div class="m-b-20" fxLayout="column" *ngIf="maturityDate">
+    <div class="m-b-20 layout-column" *ngIf="maturityDate">
       <span class="m-r-10">{{ 'Maturity Date' | translateKey: 'inputs' }} : {{ maturityDate | dateFormat }}</span>
     </div>
     <form [formGroup]="interestPauseLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Start Date' | translate }}</mat-label>
             <input
@@ -41,7 +41,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
             <mat-select required formControlName="chargeId">
@@ -54,7 +54,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/adjust-loan-charge/adjust-loan-charge.component.html

@@ -2,11 +2,11 @@
   <mat-card>
     <form [formGroup]="adjustLoanChargeForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field appearance="fill">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <span matTextSuffix class="m-l-10">{{ loanDetailsData.currency.code }}</span>
-            <span fxFlex="auto"></span>
+            <span class="flex-auto"></span>
             <input type="number" matInput required class="right-input" formControlName="amount" />
             <mat-error *ngIf="adjustLoanChargeForm.controls.amount.hasError('required')">
               {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
@@ -28,8 +28,8 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlexFill>
-            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+          <div class="flex-fill">
+            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                   <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -71,7 +71,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../..']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="approveLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="approvedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Approved On' | translate }}</mat-label>
             <input
@@ -55,7 +55,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="saleLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="settlementDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Settlement Date' | translate }}</mat-label>
             <input
@@ -45,7 +45,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="assignOfficerForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label> {{ 'labels.inputs.To Loan Officer' | translate }}</mat-label>
             <mat-select required formControlName="toLoanOfficerId">
@@ -35,7 +35,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/charge-off/charge-off.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="chargeoffLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -45,7 +45,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html

@@ -2,13 +2,13 @@
   <mat-card>
     <form [formGroup]="newGuarantorForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-checkbox labelPosition="before" formControlName="existingClient">
             {{ 'labels.inputs.Existing Client' | translate }}
           </mat-checkbox>
 
           <ng-container *ngIf="!showClientDetailsForm">
-            <mat-form-field fxFlex="30%">
+            <mat-form-field class="flex-30">
               <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
               <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete" />
               <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
@@ -121,7 +121,7 @@
           </ng-container>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="disbursementForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="disbursementDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Disbursement On' | translate }}</mat-label>
             <input
@@ -40,7 +40,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="disbursementLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="actualDisbursementDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Disbursed On' | translate }}</mat-label>
             <input
@@ -43,8 +43,8 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlexFill>
-            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+          <div class="flex-fill">
+            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                   <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -86,7 +86,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.html

@@ -1,17 +1,17 @@
 <div class="container mat-elevation-z8">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="column" class="m-b-10">
+      <div class="m-b-10 layout-column">
         <mifosx-repayment-schedule-tab
           *ngIf="repaymentScheduleDetails"
-          fxFlex="100%"
+          class="flex-100"
           [repaymentScheduleDetails]="repaymentScheduleDetails"
           [forEditing]="true"
         >
         </mifosx-repayment-schedule-tab>
       </div>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="foreclosureForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionsDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -52,7 +52,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="creditBalanceLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -40,7 +40,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-reaging/loan-reaging.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="reagingLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Number of Installments' | translate }}</mat-label>
             <input type="number" matInput required formControlName="numberOfInstallments" />
@@ -51,7 +51,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-reamortize/loan-reamortize.component.html

@@ -2,21 +2,21 @@
   <mat-card>
     <form [formGroup]="reamortizeLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Reason' | translate }}</mat-label>
             <input matInput formControlName="note" />
           </mat-form-field>
         </div>
 
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
             <input matInput formControlName="externalId" />
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="rescheduleLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="rescheduleDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Reschedule from Installment On' | translate }}</mat-label>
             <input
@@ -111,7 +111,7 @@
           </ng-container>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html

@@ -3,7 +3,7 @@
     <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
       <mat-card-content>
         <div>
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Loan Screen Reports' | translate }}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
@@ -17,7 +17,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>
@@ -31,8 +31,8 @@
 </div>
 
 <div #output class="container">
-  <mat-card fxLayout="column" fxLayoutGap="3%">
-    <div fxLayoutAlign="end">
+  <mat-card class="layout-column gap-3percent">
+    <div class="layout-align-end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
         {{ 'labels.buttons.Print' | translate }}

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="repaymentLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -21,36 +21,36 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxLayout="row wrap" class="content" *ngIf="showDetails()">
-            <div fxFlex="50%" class="mat-body-strong">
+          <div class="layout-row-wrap" *ngIf="showDetails()">
+            <div class="flex-50 mat-body-strong">
               {{ 'Principal' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.principalPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Interest' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.interestPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Fees' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.feeChargesPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Penalties' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ dataObject.penaltyChargesPortion | formatNumber }}
             </div>
           </div>
@@ -77,8 +77,8 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlexFill>
-            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+          <div class="flex-fill">
+            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                   <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -120,7 +120,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="prepayLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -21,36 +21,36 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxLayout="row wrap" class="content">
-            <div fxFlex="50%" class="mat-body-strong">
+          <div class="layout-row-wrap">
+            <div class="flex-50 mat-body-strong">
               {{ 'Principal' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.principalPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Interest' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.interestPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Fees' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.feeChargesPortion | formatNumber }}
             </div>
 
-            <div fxFlex="50%" class="mat-body-strong">
+            <div class="flex-50 mat-body-strong">
               {{ 'Penalties' | translate }}
             </div>
 
-            <div fxFlex="50%" class="r-amount right-label">
+            <div class="flex-50 r-amount right-label">
               {{ prepayData.penaltyChargesPortion | formatNumber }}
             </div>
           </div>
@@ -77,8 +77,8 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlexFill>
-            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+          <div class="flex-fill">
+            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                   <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -120,7 +120,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="recoveryRepaymentLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
@@ -43,8 +43,8 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlexFill>
-            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+          <div class="flex-fill">
+            <span class="expandcollapsebutton m-l-10 m-t-40 flex-75" (click)="addPaymentDetails()">
               <mat-slide-toggle>
                 <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                   <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -86,7 +86,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="rejectLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="rejectedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Rejected On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html

@@ -1,13 +1,13 @@
 <div class="container mat-elevation-z8">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
+      <div class="layout-column">
+        <mat-form-field class="flex-fill">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput [formControl]="note"></textarea>
         </mat-form-field>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html

@@ -1,14 +1,14 @@
 <div class="container mat-elevation-z8">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="column">
-        <mat-form-field fxFlex>
+      <div class="layout-column">
+        <mat-form-field class="flex-fill">
           <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
           <textarea matInput required [formControl]="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
       </div>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html

@@ -1,7 +1,7 @@
 <div class="container mat-elevation-z8">
   <mat-card>
-    <div class="view-guarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
-      <div fxFlex="49%">
+    <div class="view-guarantors-account-tables layout-row gap-2percent">
+      <div class="flex-49">
         <table>
           <tbody>
             <tr>
@@ -37,7 +37,7 @@
         </table>
       </div>
 
-      <div fxFlex="49%">
+      <div class="flex-49">
         <table>
           <tbody>
             <tr>
@@ -71,16 +71,16 @@
       </div>
     </div>
 
-    <div fxFlexFill *ngIf="guarantorDetails" fxLayout="row wrap" fxLayout.lt-md="column">
+    <div *ngIf="guarantorDetails" class="layout-row-wrap responsive-column flex-fill">
       <!-- guarantors details table -->
       <div class="heading-content">
-        <div fxLayout="column" fxFlex="50%">
+        <div class="layout-column flex-50">
           <div class="heading-name">
             <h3>{{ 'labels.heading.Guarantors Details' | translate }}</h3>
           </div>
         </div>
-        <div fxLayout="column" fxFlex="50%">
-          <div fxLayout="row" fxLayoutAlign="flex-end">
+        <div class="layout-column flex-50">
+          <div class="layout-row align-flex-end">
             <button mat-raised-button class="f-right" color="primary" (click)="toggleGuarantorsDetailsOverview()">
               {{ showDeletedGuarantorsAccounts ? 'Hide Deleted Guarantors' : 'Show Deleted Guarantors' }}
             </button>
@@ -89,7 +89,7 @@
       </div>
 
       <table
-        fxFlexFill
+        class="flex-fill"
         mat-table
         [dataSource]="guarantorDetails | accountsFilter: 'guarantor' : showDeletedGuarantorsAccounts"
       >

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="loanInterestForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="interestDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Interest waived on' | translate }}</mat-label>
             <input
@@ -35,7 +35,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="withdrawnByClientLoanForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="withdrawnOnDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Withdrawn On' | translate }}</mat-label>
             <input
@@ -27,7 +27,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <mat-card-actions class="layout-row align-center gap-5px responsive-column">
           <button type="button" mat-raised-button [routerLink]="['../../../general']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <mat-card-content>
       <form [formGroup]="writeOffForm">
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="writeOffDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Write off on' | translate }}</mat-label>
             <input
@@ -33,7 +33,7 @@
         </div>
       </form>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../general']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html

@@ -1,27 +1,27 @@
 <div class="tab-container mat-typography">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <h3 fxFlex="90%">{{ 'labels.inputs.Loan Collateral Details' | translate }}</h3>
-    <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
+  <div class="layout-row align-start-center">
+    <h3 class="flex-90">{{ 'labels.inputs.Loan Collateral Details' | translate }}</h3>
+    <div class="layout-row gap-20px align-end align-items-center action-buttons">
       <button mat-raised-button color="primary" [routerLink]="['../actions/Add Collateral']">
         {{ 'labels.buttons.Add Collateral' | translate }}
       </button>
     </div>
   </div>
 
-  <div fxLayout="row" fxLayoutGap="32px" *ngIf="loanCollaterals?.length > 0" class="performance-history-container">
+  <div class="layout-row gap-32px performance-history-container" *ngIf="loanCollaterals?.length > 0">
     <table>
       <tbody>
         <tr>
-          <td fxFlex="25%">
+          <td class="flex-25">
             <b>{{ 'labels.inputs.Number of Collaterals' | translate }} :</b>
           </td>
-          <td fxFlex="25%" class="left">
+          <td class="flex-25 left">
             {{ loanCollaterals?.length | formatNumber }}
           </td>
-          <td fxFlex="25%">
+          <td class="flex-25">
             <b>{{ 'labels.inputs.Total Amount' | translate }} :</b>
           </td>
-          <td fxFlex="25%" class="left">
+          <td class="flex-25 left">
             {{ totalAmount | formatNumber }}
           </td>
         </tr>

src/app/loans/loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component.html

@@ -61,7 +61,7 @@
     </table>
   </div>
 
-  <div fxLayout="row" fxLayoutAlign="flex-end" class="m-t-20 m-b-10" *ngIf="allowPause">
+  <div class="layout-row m-t-20 m-b-10 align-end align-items-center" *ngIf="allowPause">
     <button
       mat-raised-button
       color="primary"

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html

@@ -1,12 +1,12 @@
 <div class="container">
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}:</span>
-    <span fxFlex="60%">{{ loanDetails.maxOutstandingLoanBalance | formatNumber }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Maximum allowed outstanding balance' | translate }}:</span>
+    <span class="flex-60">{{ loanDetails.maxOutstandingLoanBalance | formatNumber }}</span>
   </div>
 
   <h3>{{ 'labels.heading.Loan Tranche Details' | translate }}</h3>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="flex-end" fxLayoutGap="2%">
+  <div class="layout-row margin-t layout-xs-column layout-align-end gap-2percent">
     <button mat-raised-button color="primary" *ngIf="showAddTrancheButtons()" (click)="addDisbursementDataEntry()">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
     </button>

src/app/loans/loans-view/loans-view.component.html

@@ -1,5 +1,5 @@
 <mat-card class="account-card">
-  <mat-card-header fxLayout="column" class="header">
+  <mat-card-header class="header layout-column">
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
@@ -16,8 +16,8 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <div fxLayout="row" fxLayout.lt-md="column">
-            <div fxFlex="60%">
+          <div class="layout-row responsive-column">
+            <div class="flex-60">
               <h3>
                 <i
                   class="fa fa-stop"
@@ -72,7 +72,7 @@
               </div>
             </div>
 
-            <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="40%">
+            <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography flex-30">
               <h3>{{ 'labels.heading.Account Overview' | translate }}</h3>
               <table class="account-overview">
                 <tbody>
@@ -107,9 +107,7 @@
               </table>
             </div>
 
-            <span fxFlex="auto"></span>
-
-            <div fxFlex="4%">
+            <div class="flex-5">
               <button
                 mat-icon-button
                 [matMenuTriggerFor]="accountMenu"
@@ -162,7 +160,7 @@
   </mat-card-header>
 
   <mat-card-content>
-    <nav mat-tab-nav-bar class="navigation-tabs">
+    <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
       <a
         mat-tab-link
         [routerLink]="['./general']"
@@ -354,7 +352,8 @@
         </a>
       </ng-container>
     </nav>
-
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </mat-card-content>
 </mat-card>

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div fxLayout="row" class="m-t-20" fxLayoutAlign="end center" *ngIf="!forEditing">
+  <div class="layout-row m-t-20 align-end align-items-center" *ngIf="!forEditing">
     <button mat-raised-button color="primary" (click)="exportToPDF()">
       <fa-icon icon="download" class="m-r-10"></fa-icon>Export to PDF
     </button>
@@ -7,19 +7,19 @@
 
   <table mat-table [dataSource]="repaymentScheduleDetails.periods" *ngIf="!forEditing" id="repaymentSchedule">
     <ng-container matColumnDef="number">
-      <th mat-header-cell class="center" *matHeaderCellDef>#</th>
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>#</th>
       <td mat-cell class="right" *matCellDef="let item">{{ item.period }}</td>
       <td mat-footer-cell *matFooterCellDef>&nbsp;</td>
     </ng-container>
 
     <ng-container matColumnDef="days">
-      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Days' | translate }}</th>
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Days' | translate }}</th>
       <td mat-cell class="center" *matCellDef="let item" [ngClass]="installmentStyle(item)">{{ item.daysInPeriod }}</td>
       <td mat-footer-cell class="center" *matFooterCellDef><b> Total</b></td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
       <td mat-cell class="m-r-5" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.dueDate | dateFormat }}
       </td>
@@ -27,7 +27,9 @@
     </ng-container>
 
     <ng-container matColumnDef="paiddate">
-      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Paid Date' | translate }}</th>
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Paid Date' | translate }}
+      </th>
       <td mat-cell class="center" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.obligationsMetOnDate | dateFormat }}
       </td>
@@ -43,7 +45,9 @@
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance Of Loan' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Balance Of Loan' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.principalLoanBalanceOutstanding | formatNumber }}
       </td>
@@ -51,7 +55,9 @@
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Principal Due' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Principal Due' | translate }}
+      </th>
       <td mat-cell class="check r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.principalDue | formatNumber }}
       </td>
@@ -63,7 +69,9 @@
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Interest' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.interestOriginalDue | formatNumber }}
       </td>
@@ -75,7 +83,7 @@
     </ng-container>
 
     <ng-container matColumnDef="fees">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.feeChargesDue | formatNumber }}
       </td>
@@ -87,7 +95,9 @@
     </ng-container>
 
     <ng-container matColumnDef="penalties">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Penalties' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Penalties' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.penaltyChargesDue | formatNumber }}
       </td>
@@ -99,7 +109,7 @@
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Due' | translate }}</th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.totalDueForPeriod | formatNumber }}
       </td>
@@ -111,7 +121,7 @@
     </ng-container>
 
     <ng-container matColumnDef="paid">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Paid' | translate }}</th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.totalPaidForPeriod | formatNumber }}
       </td>
@@ -121,7 +131,9 @@
     </ng-container>
 
     <ng-container matColumnDef="inadvance">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.In advance' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.In advance' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.totalPaidInAdvanceForPeriod | formatNumber }}
       </td>
@@ -131,7 +143,7 @@
     </ng-container>
 
     <ng-container matColumnDef="late">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Late' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Late' | translate }}</th>
       <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
         {{ item.totalPaidLateForPeriod | formatNumber }}
       </td>
@@ -142,7 +154,9 @@
 
     <ng-container *ngIf="isWaived">
       <ng-container matColumnDef="waived">
-        <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Waived' | translate }}</th>
+        <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+          {{ 'labels.inputs.Waived' | translate }}
+        </th>
         <td mat-cell class="r-amount" *matCellDef="let item" [ngClass]="installmentStyle(item)">
           {{ item.totalWaivedForPeriod | formatNumber }}
         </td>
@@ -161,7 +175,9 @@
     </ng-container>
 
     <ng-container matColumnDef="outstanding">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Outstanding' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Outstanding' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item">{{ item.totalOutstandingForPeriod | formatNumber }}</td>
       <td mat-footer-cell class="r-amount" *matFooterCellDef>
         <b> {{ repaymentScheduleDetails.totalOutstanding | currency: currencyCode : 'symbol-narrow' : '1.2-2' }} </b>
@@ -173,19 +189,19 @@
     </ng-container>
 
     <ng-container matColumnDef="header-amount">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="2">
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef [attr.colspan]="2">
         {{ 'labels.inputs.Loan Amount and Balance' | translate }}
       </th>
     </ng-container>
 
     <ng-container matColumnDef="header-total-cost">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="3">
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef [attr.colspan]="3">
         {{ 'labels.inputs.Total Cost of Loan' | translate }}
       </th>
     </ng-container>
 
     <ng-container matColumnDef="header-installment-totals">
-      <th mat-header-cell class="center" *matHeaderCellDef [attr.colspan]="6">
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef [attr.colspan]="6">
         {{ 'labels.inputs.Installment Totals' | translate }}
       </th>
     </ng-container>
@@ -204,14 +220,15 @@
     mat-table
     [dataSource]="repaymentScheduleDetails.periods"
     *ngIf="forEditing && repaymentScheduleDetails.periods.length > 0"
+    id="repaymentScheduleEdit"
   >
     <ng-container matColumnDef="number">
-      <th mat-header-cell class="center" *matHeaderCellDef>#</th>
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>#</th>
       <td mat-cell *matCellDef="let item">{{ item.period }}</td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
+      <th mat-header-cell class="center mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
       <td mat-cell class="m-r-10" *matCellDef="let item">
         <ng-container>
           {{ item.dueDate | dateFormat }}
@@ -220,14 +237,18 @@
     </ng-container>
 
     <ng-container matColumnDef="balanceOfLoan">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Balance Of Loan' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Balance Of Loan' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item">
         {{ item.principalLoanBalanceOutstanding | formatNumber }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="principalDue">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Principal Due' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Principal Due' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item">
         <ng-container>
           {{ item.principalDue | formatNumber }}
@@ -236,17 +257,21 @@
     </ng-container>
 
     <ng-container matColumnDef="interest">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Interest' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item">{{ item.interestOriginalDue | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="fees">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
       <td mat-cell class="r-amount" *matCellDef="let item">{{ item.feeChargesDue | formatNumber }}</td>
     </ng-container>
 
     <ng-container matColumnDef="due">
-      <th mat-header-cell class="r-amount" *matHeaderCellDef>{{ 'labels.inputs.Installment Amount' | translate }}</th>
+      <th mat-header-cell class="r-amount mat-header-cell" *matHeaderCellDef>
+        {{ 'labels.inputs.Installment Amount' | translate }}
+      </th>
       <td mat-cell class="r-amount" *matCellDef="let item">
         <span *ngIf="!item.changed">
           {{ item.totalDueForPeriod | formatNumber }}

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.scss

@@ -37,3 +37,19 @@ table {
 .overdued {
   color: $status-matured;
 }
+
+#repaymentSchedule,
+#repaymentScheduleEdit {
+  width: 100%;
+}
+
+.mat-header-cell {
+  color: rgba($color: #000, $alpha: 54%);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+div.container {
+  overflow: auto;
+  max-width: 100%;
+}

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
+  <div class="layout-row gap-20px align-end align-items-center action-buttons">
     <button mat-raised-button color="primary" [routerLink]="['../actions/Reschedule']">
       {{ 'labels.buttons.Reschedule' | translate }}
     </button>

src/app/loans/loans-view/transactions-tab/transactions-tab.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="transaction-buttons" *ngIf="checkStatus()">
+  <div class="layout-row transaction-buttons align-end gap-20px" *ngIf="checkStatus()">
     <mat-checkbox [formControl]="hideReversedParam" (click)="hideReversed()" class="accruals">
       {{ 'labels.inputs.Hide Reversed' | translate }}</mat-checkbox
     >

src/app/loans/loans-view/transactions-tab/transactions-tab.component.scss

@@ -3,6 +3,7 @@
 
 .container {
   padding-bottom: 2%;
+  max-width: 100%;
 
   .transaction-buttons {
     padding-bottom: 1rem;

src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts

@@ -127,11 +127,11 @@ export class TransactionsTabComponent implements OnInit {
   }
 
   hideAccruals() {
-    this.filterTransactions(this.hideReversedParam.value, !this.hideAccrualsParam.value);
+    this.filterTransactions(this.hideReversedParam.value, this.hideAccrualsParam.value);
   }
 
   hideReversed() {
-    this.filterTransactions(!this.hideReversedParam.value, this.hideAccrualsParam.value);
+    this.filterTransactions(this.hideReversedParam.value, this.hideAccrualsParam.value);
   }
 
   filterTransactions(hideReversed: boolean, hideAccrual: boolean): void {

src/app/loans/loans-view/transactions/edit-transaction/edit-transaction.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <mat-card>
     <form [formGroup]="editTransactionForm" (ngSubmit)="submit()">
-      <mat-card-content fxLayout="column">
+      <mat-card-content class="layout-column">
         <mat-form-field (click)="dueDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
           <input
@@ -42,8 +42,9 @@
           </mat-select>
         </mat-form-field>
 
-        <div fxFlexFill>
-          <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+        <div class="flex-fill">
+          <span class="expandcollapsebutton m-l-10 m-t-40 flex-75">
+            (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
                 <span class="m-l-10">{{ 'labels.inputs.Show Payment Details' | translate }}</span>
@@ -77,7 +78,7 @@
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
           <button type="button" mat-raised-button [routerLink]="['../']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>

src/app/loans/loans-view/transactions/export-transactions/export-transactions.component.html

@@ -1,6 +1,6 @@
-<form class="m-t-20" fxLayout="column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
-  <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
-    <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
+<form class="layout-column m-t-20" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
+  <div class="layout-row layout-align-center gap-3percent">
+    <mat-form-field class="flex-fill" (click)="fromDatePicker.open()">
       <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
       <input
         matInput
@@ -18,7 +18,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
+    <mat-form-field class="flex-fill flex-30" (click)="toDatePicker.open()">
       <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
       <input
         matInput
@@ -37,7 +37,7 @@
     </mat-form-field>
   </div>
 
-  <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
+  <div class="generate-button layout-row layout-xs-column layout-align-center gap-5percent">
     <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
       <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html

@@ -1,9 +1,4 @@
-<div
-  fxLayoutAlign="end"
-  class="container m-b-20 transaction-buttons"
-  fxLayoutGap="2%"
-  *ngIf="!transactionData.type.contra"
->
+<div class="container m-b-20 transaction-buttons layout-align-end gap-2percent" *ngIf="!transactionData.type.contra">
   <span *mifosxHasPermission="'ADJUST_LOAN'">
     <button mat-raised-button color="primary" [routerLink]="'edit'" [disabled]="!allowEdition">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'Edit' | translate }}
@@ -23,64 +18,64 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="loanTransactionColor()"></div>
+      <div class="layout-row-wrap card-content">
+        <div class="flex-100" [ngClass]="loanTransactionColor()"></div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'Transaction Id' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.id }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.toLoanTransactionRelation">
+        <div class="flex-50 mat-body-strong" *ngIf="transactionData.toLoanTransactionRelation">
           {{ 'Repayment Transaction' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="transactionData.toLoanTransactionRelation">
+        <div class="flex-50" *ngIf="transactionData.toLoanTransactionRelation">
           <a [href]="loanTransactionRelatedLink(transactionData.toLoanTransactionRelation.fromLoanTransaction)">
             {{ transactionData.toLoanTransactionRelation.fromLoanTransaction }}
           </a>
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.type.value }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'Transaction Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.date | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'Currency' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.currency.name }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'Amount' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ transactionData.amount | currency: transactionData.currency.code : 'symbol-narrow' : '1.2-2' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="transactionData.externalId">
+        <div class="flex-50 mat-body-strong" *ngIf="transactionData.externalId">
           {{ 'External Id' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="transactionData.externalId">
+        <div class="flex-50" *ngIf="transactionData.externalId">
           <mifosx-external-identifier
             externalId="{{ transactionData.externalId }}"
             completed="true"
@@ -89,7 +84,7 @@
 
         <mat-divider *ngIf="existTransactionRelations" [inset]="true"></mat-divider>
 
-        <div fxFlex="100%" class="mat-body-strong" *ngIf="existTransactionRelations">
+        <div class="mat-body-strong flex-100" *ngIf="existTransactionRelations">
           {{ 'Linked Transactions' | translate }}
           <br />
 
@@ -128,7 +123,7 @@
         </mifosx-transaction-payment-detail>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
         <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.scss

@@ -4,7 +4,7 @@
 .container {
   max-width: 37rem;
 
-  .content {
+  .card-content {
     div {
       margin: 1rem 0;
       word-wrap: break-word;

src/app/loans/loans-view/view-charge/view-charge.component.html

@@ -1,10 +1,6 @@
 <div
   *ngIf="loansAccountData.status.value === 'Active' && chargeData.amountOutstanding !== 0"
-  fxLayout="row"
-  fxLayoutAlign="end"
-  fxLayoutGap="2%"
-  fxLayout.lt-md="column"
-  class="container m-b-20"
+  class="layout-row align-end gap-2percent layout-xs-column container m-b-20"
 >
   <button mat-raised-button color="primary" *mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
     <fa-icon icon="flag" class="m-r-10"></fa-icon>
@@ -42,11 +38,7 @@
 
 <div
   *ngIf="loansAccountData.status.value === 'Submitted and pending approval'"
-  fxLayout="row"
-  fxLayoutAlign="end"
-  fxLayoutGap="2%"
-  fxLayout.lt-md="column"
-  class="container m-b-20"
+  class="layout-row align-end gap-2percent layout-xs-column container m-b-20"
 >
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="editCharge()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
@@ -61,99 +53,99 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="100%" [ngClass]="loanChargeColor()"></div>
+      <div class="layout-row-wrap">
+        <div class="flex-100" [ngClass]="loanChargeColor()"></div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.name' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.name }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Charge Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.penalty ? 'Penalty' : 'Fees' }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Currency' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.currency.displayLabel }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Payment due at' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.chargeTimeType.value }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Payment due as of' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.dueDate | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Calculation Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.chargeCalculationType.value }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Due' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amount | formatNumber }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Paid' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amountPaid | formatNumber }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Waived' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amountWaived | formatNumber }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Outstanding' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.amountOutstanding | formatNumber }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Submitted On Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ chargeData.submittedOnDate | dateFormat }}
         </div>
       </div>
 
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
         <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>